/* ==========================================================================
   Base：开场动画 / 背景层 / 光标 / 品牌 / 导航 / 按钮 / 入场动效 / 页脚
   ========================================================================== */

body.is-loading,
body.menu-open{ overflow:hidden; }

/* ==========================================================================
   开场动画 · 流星凝成七星
   0.00–0.60s  星野浮现、字标逐字入场、读条推满
   0.60–2.10s  流星沿五角星轨迹掠过（每折加速），字标与读条散去
   2.10–2.90s  撞击：光爆 + 放射星芒 + 冲击环 + 火星，Logo 就地凝成
   2.90–3.30s  Logo 过曝闪耀 → 铺满全屏的白场
   3.30–3.88s  白场溶解，首屏从白里浮出（这一段在 js/intro.js 里接）
   构图锁 16:9：--sw / --sh 由视口推导，所有尺寸都从 --sh 派生，
   于是任何视口下比例都不变，也不需要 JS 参与排版。
   ========================================================================== */
.intro{
  position:fixed; inset:0; z-index:var(--z-intro);
  overflow:hidden; contain:strict;
  /* 底色必须写在这一层：舞台是 opacity 0→1 淡入的，头 0.5s 半透明，
     没有这层不透明底，首页内容就从底下透出来了（第一帧尤其明显）。 */
  background:#02060d;
  --sw: min(100vw, 177.78vh);
  --sh: min(56.25vw, 100vh);
  transition:opacity .58s cubic-bezier(.19,.82,.35,1);
}
/* 白场铺满后：整层溶解，底下的首屏正好浮出来 */
.intro.is-out{ opacity:0; pointer-events:none; }
.intro.is-skip{ transition-duration:.3s; }
.intro.is-done{ display:none; }

/* 竖屏手机：16:9 内框按 100vw 算会缩成窄窄一条，这里抬一档，
   代价只是右侧 HUD 环出血到屏幕外，流星轨迹整条仍在画面内 */
@media (max-width:767px) and (orientation:portrait){
  .intro{ --sh: max(56.25vw, 33vh); --sw: calc(var(--sh) * 16 / 9); }
}

/* ---------- 舞台：深邃星空 ---------- */
.intro__stage{
  position:absolute; inset:0; z-index:1;
  isolation:isolate;                    /* screen 混合只在开场层内生效，不吃到页面 */
  overflow:hidden;
  background:
    radial-gradient(85% 70% at 50% 50%, #081a32 0%, #030d1b 45%, #01050a 80%, #000 100%),
    #000;
  opacity:0;
  animation:ivFade .5s ease-out both;
}

/* 星野光尘：两层不同疏密、反向漂移 */
.intro__stars,
.intro__stars::after{
  position:absolute; inset:-20%;
  background-image:
    radial-gradient(1.5px 1.5px at 15% 25%, rgba(255,255,255,.65) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 72% 18%, rgba(190,230,255,.6) 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 48% 75%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 82% 68%, rgba(160,220,255,.55) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 22% 82%, rgba(255,255,255,.45) 50%, transparent 51%);
  background-size:320px 280px, 450px 400px, 250px 360px, 500px 320px, 380px 440px;
  content:'';
  opacity:0;
  animation:ivStars 1s ease-out .1s both, ivDrift 100s linear infinite;
}
.intro__stars::after{
  inset:0;
  background-size:200px 180px, 280px 250px, 160px 220px, 320px 200px, 240px 280px;
  opacity:.4;
  animation:ivDrift 150s linear infinite reverse;
}

/* ---------- 16:9 构图内框 ----------
   用负 margin 居中，不用 grid 也不用 transform：
   grid 的 center 在内框比视口宽时会退回左对齐（Logo 就偏出屏幕中心了），
   transform 则会新开一个层叠上下文，里面几层 screen 混合就吃不到星野当背景。 */
.intro__frame{
  position:absolute; left:50%; top:50%;
  width:var(--sw); height:var(--sh);
  margin-left:calc(var(--sw) / -2);
  margin-top:calc(var(--sh) / -2);
  overflow:hidden;
}
.intro__layer{ position:absolute; inset:0; pointer-events:none; }

/* ---------- 1. 右侧 HUD 科技环 ---------- */
.intro__hud{
  position:absolute; right:3%; top:50%;
  width:calc(var(--sh) * .72); height:calc(var(--sh) * .72);
  transform:translateY(-50%);
  opacity:0;
  animation:ivHudIn .8s cubic-bezier(.2,.8,.3,1) .1s both,
            ivHudFlash .45s ease-out 2.1s both;
}
.intro__hud svg{ width:100%; height:100%; overflow:visible; }
.intro__hudwrap{ animation:ivHudOut .6s cubic-bezier(.2,.85,.3,1) 2.1s both; }
.intro__ringA{ animation:ivSpin 24s linear infinite; }
.intro__ringB{ animation:ivSpin 32s linear infinite reverse; }
.intro__ringC{ animation:ivSpin 50s linear infinite; }
.intro__ringT{ animation:ivSpin 40s linear infinite reverse; }
/* 环都以 viewBox 中心 (200,200) 为轴，跟 circle 的圆心重合 */
.intro__hud circle,
.intro__hud path{ transform-box:view-box; transform-origin:200px 200px; }

/* ---------- 2. SEVEN STAR 字标 ---------- */
.intro__word{
  position:absolute; left:48%; top:38%;
  transform:translate(-50%,-50%);
  display:flex;
  font-family:var(--f-en);
  font-size:calc(var(--sh) * .085);
  font-weight:400; letter-spacing:.65em;
  color:#e3f1fc; white-space:pre;
  text-shadow:0 0 calc(var(--sh)*.035) rgba(110,195,255,.6),
              0 0 calc(var(--sh)*.08)  rgba(40,140,255,.3);
  animation:ivWordOut .4s cubic-bezier(.4,0,.85,.3) .6s both;
}
.intro__word span{
  display:inline-block; opacity:0;
  animation:ivLetterIn .4s cubic-bezier(.2,.8,.3,1) both;
  animation-delay:calc(.1s + var(--i) * .022s);
}
.intro__word span:last-child{ letter-spacing:0; }

/* ---------- 3. 进度读条（能量引信） ---------- */
.intro__bar{
  position:absolute; left:25%; top:49%;
  width:48%; height:calc(var(--sh)*.006);
  transform:translateY(-50%);
  animation:ivBarOut .35s ease-in .6s both;
}
.intro__barTrack{
  position:absolute; inset:0;
  background:rgba(120,175,225,.18); border-radius:2px;
}
.intro__barFill{
  position:absolute; inset:0; transform-origin:0 50%;
  background:linear-gradient(90deg,#1b7fd6,#5ad0ff);
  box-shadow:0 0 calc(var(--sh)*.025) rgba(70,185,255,.8);
  animation:ivBarFill .45s cubic-bezier(.3,.8,.25,1) .1s both;
}
.intro__barKnob{
  position:absolute; top:50%; left:0;
  width:calc(var(--sh)*.028); aspect-ratio:1;
  margin:calc(var(--sh)*-.014) 0 0 calc(var(--sh)*-.014);
  border-radius:50%;
  background:radial-gradient(circle,#fff 0%,#d6f3ff 30%,#3eb8ff 65%,rgba(13,111,208,.35) 85%,transparent 100%);
  filter:drop-shadow(0 0 calc(var(--sh)*.035) rgba(90,200,255,1));
  animation:ivKnobRide .45s cubic-bezier(.3,.8,.25,1) .1s both;
}
.intro__pct{
  position:absolute; left:103%; top:50%;
  transform:translateY(-50%);
  font-family:var(--f-en);
  font-size:calc(var(--sh)*.038); font-weight:400;
  letter-spacing:.06em; color:#cfe4f8; white-space:nowrap;
  opacity:0;
  animation:ivFade .35s ease-out .15s both;
}

/* ---------- 4. 流星轨迹：四层描边叠出光晕 + 头部星芒 ---------- */
.intro__trail{
  position:absolute; inset:0;
  mix-blend-mode:screen;
  animation:ivCometFade .1s ease-in 2.1s forwards;
}
.intro__trail svg{ width:100%; height:100%; display:block; overflow:visible; }
.intro__trail use{
  fill:none;
  animation-duration:1.5s;
  animation-timing-function:linear;
  animation-delay:.6s;
  animation-fill-mode:both;
}
.intro__t1{ stroke:#2280d0; stroke-width:18; opacity:.22; stroke-dasharray:280 1000; stroke-linecap:round;
            filter:blur(4px); animation-name:ivRun1; }
.intro__t2{ stroke:#56c2ff; stroke-width:9;  opacity:.5;  stroke-dasharray:180 1000; stroke-linecap:round;
            filter:blur(1.6px); animation-name:ivRun2; }
.intro__t3{ stroke:#ddf6ff; stroke-width:4;  opacity:.95; stroke-dasharray:90 1000;  stroke-linecap:round;
            animation-name:ivRun3; }
.intro__t4{ stroke:#ffffff; stroke-width:12; opacity:1;   stroke-dasharray:6 1000;   stroke-linecap:round;
            filter:drop-shadow(0 0 6px rgba(226,247,255,1))
                   drop-shadow(0 0 16px rgba(120,215,255,.95))
                   drop-shadow(0 0 32px rgba(30,140,230,.85));
            animation-name:ivRun4; }
.intro__tf{ stroke:#e6f8ff; stroke-width:24; opacity:.85; stroke-dasharray:2 1000;   stroke-linecap:round;
            filter:drop-shadow(0 0 10px rgba(160,230,255,1))
                   drop-shadow(0 0 26px rgba(62,184,255,.9));
            animation-name:ivRun5; }

/* 头部高亮星芒：offset-path 与轨迹同一条曲线、同一套节奏 */
.intro__flare{
  transform-box:fill-box; transform-origin:center center;
  offset-path:path("M 1168,441 C 1280,441 1340,260 1180,170 C 1050,100 900,120 800,150 C 720,175 890,520 1010,730 C 1060,800 860,640 690,490 C 580,390 490,310 476,340 C 450,380 480,580 590,730 C 660,810 890,560 1124,340");
  offset-rotate:auto;
  animation:ivFlareMove 1.5s linear .6s both,
            ivFlareIn   .1s ease-out .6s both,
            ivFlareFade .1s ease-in 2.1s forwards;
}
/* 老浏览器不支持 offset-path：星芒会赖在原点不动，索性藏掉，轨迹本身照跑 */
.intro.no-offset .intro__flare{ display:none; }

/* ---------- 5. 中心撞击 ---------- */
.intro__impact{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:calc(var(--sh)*.95); aspect-ratio:1;
  mix-blend-mode:screen;
}
.intro__flash{
  position:absolute; inset:0;
  background:radial-gradient(circle,
    #fff 0%, #fff 5%, #e6f7ff 12%, rgba(150,220,255,.8) 22%,
    rgba(45,150,235,.35) 40%, transparent 62%);
  opacity:0;
  animation:ivFlashPop .55s cubic-bezier(.12,.9,.3,1) 2.1s both;
}
.intro__spikes{
  position:absolute; inset:-15%;
  background:repeating-conic-gradient(from 0deg,
    rgba(230,248,255,.95) 0deg .35deg, transparent .35deg 7.5deg);
  -webkit-mask:radial-gradient(circle,
    transparent 2%, rgba(0,0,0,.95) 9%, rgba(0,0,0,.55) 28%, transparent 52%);
  mask:radial-gradient(circle,
    transparent 2%, rgba(0,0,0,.95) 9%, rgba(0,0,0,.55) 28%, transparent 52%);
  opacity:0;
  animation:ivSpikePop .6s cubic-bezier(.1,.85,.3,1) 2.1s both;
}
.intro__spikes--long{
  background:repeating-conic-gradient(from 3deg,
    #ffffff 0deg .25deg, transparent .25deg 24deg);
  -webkit-mask:radial-gradient(circle,
    transparent 2%, rgba(0,0,0,1) 8%, rgba(0,0,0,.5) 45%, transparent 74%);
  mask:radial-gradient(circle,
    transparent 2%, rgba(0,0,0,1) 8%, rgba(0,0,0,.5) 45%, transparent 74%);
  animation-duration:.65s;
}
.intro__spikes--warm{
  inset:-6% -30% -6% 2%;
  background:repeating-conic-gradient(from 2deg,
    #ffaa4d 0deg .45deg, transparent .45deg 13deg);
  -webkit-mask:radial-gradient(circle at 50% 50%,
    transparent 3%, rgba(0,0,0,.85) 14%, rgba(0,0,0,.45) 34%, transparent 58%);
  mask:radial-gradient(circle at 50% 50%,
    transparent 3%, rgba(0,0,0,.85) 14%, rgba(0,0,0,.45) 34%, transparent 58%);
  animation-delay:2.12s; animation-duration:.65s;
}
.intro__shock{
  position:absolute; inset:30%;
  border-radius:50%;
  border:calc(var(--sh)*.0045) solid rgba(175,230,255,.75);
  filter:blur(calc(var(--sh)*.004));
  opacity:0;
  animation:ivShockOut .75s cubic-bezier(.15,.7,.25,1) 2.11s both;
}
.intro__embers span{
  position:absolute; left:50%; top:50%;
  width:calc(var(--sh) * var(--s)); aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle,#fff5e0 0%,#ffaa4d 42%,#ff5a00 100%);
  box-shadow:0 0 calc(var(--sh)*.02) rgba(255,160,50,.95);
  opacity:0;
  animation:ivEmber 1.1s cubic-bezier(.08,.62,.3,1) both;
  animation-delay:calc(2.1s + var(--d) * 1s);
}
.intro__smoke span{
  position:absolute;
  left:calc(50% + var(--x) * 1%);
  top:calc(50% + var(--y) * 1%);
  width:calc(var(--sh) * var(--s)); aspect-ratio:1;
  margin-left:calc(var(--sh) * var(--s) / -2);
  margin-top:calc(var(--sh) * var(--s) / -2);
  border-radius:50%;
  background:radial-gradient(circle, rgba(196,220,245,.35) 0%, rgba(120,160,205,.18) 45%, transparent 75%);
  filter:blur(calc(var(--sh)*.04));
  opacity:0;
  animation:ivSmoke 1.3s ease-out both;
  animation-delay:calc(2.12s + var(--d) * 1s);
}

/* ---------- 6. 汇聚脉冲光束 ---------- */
.intro__beam{
  position:absolute; left:0; top:50%;
  width:100%; height:calc(var(--sh)*.018);
  transform:translateY(-50%);
  background:radial-gradient(ellipse at center,
    rgba(255,255,255,1) 0%, rgba(140,225,255,.8) 25%,
    rgba(60,170,255,.2) 60%, transparent 100%);
  filter:blur(calc(var(--sh)*.003)) drop-shadow(0 0 calc(var(--sh)*.04) rgba(70,180,255,.85));
  mix-blend-mode:screen;
  opacity:0;
  animation:ivBeam .65s cubic-bezier(.15,.85,.3,1) 2.1s both;
}

/* ---------- 7. LOGO 凝聚 → 定格 0.8s → 过曝 ---------- */
.intro__logo{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:calc(var(--sh) * .72); aspect-ratio:1;
  opacity:0;
  /* ivGlint 必须是 forwards：写 both 的话它的 0% 帧会从 0s 就压住 ivSettle，
     Logo 会少掉撞击瞬间那一下回弹。0% 帧与 ivSettle 的 100% 帧完全相同，接得上。 */
  animation:ivLogoIn .01s linear 2.1s both,
            ivSettle .25s cubic-bezier(.16,1,.3,1) 2.1s both,
            ivGlint  .35s ease-out 2.9s forwards;
}
.intro__logo svg{ width:100%; height:100%; overflow:visible; }
.intro__logoGlow{ opacity:.65; }

.intro__gMain{ animation:ivWipeMain .35s cubic-bezier(.16,.9,.25,1) 2.1s both; }
.intro__gTri{
  transform-box:fill-box; transform-origin:50% 120%;
  animation:ivTriIn .35s cubic-bezier(.2,1.25,.35,1) 2.15s both;
}
.intro__gWing{
  transform-box:fill-box; transform-origin:15% 15%;
  animation:ivWingIn .35s cubic-bezier(.2,1.2,.35,1) 2.2s both;
}

.intro__brandname{
  position:absolute;
  left:50%;
  top:84%;
  transform:translate(-50%,18px);
  width:90%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:calc(var(--sh)*.008);
  text-align:center;
  white-space:nowrap;
  opacity:0;
  color:#f4f9ff;
  text-shadow:0 0 calc(var(--sh)*.025) rgba(86,181,255,.72),
              0 3px calc(var(--sh)*.018) rgba(0,0,0,.82);
  animation:ivBrandIn .42s cubic-bezier(.16,1,.3,1) 2.28s both,
            ivBrandOut .28s ease-in 2.92s forwards;
}
.intro__brandname b{
  font-size:calc(var(--sh)*.038);
  font-weight:900;
  letter-spacing:.16em;
}
.intro__brandname span{
  font-family:var(--f-en);
  font-size:calc(var(--sh)*.014);
  font-weight:600;
  letter-spacing:.19em;
  color:#a9d4ff;
}

.intro__sparks span{
  position:absolute;
  left:calc(var(--x) * 1%); top:calc(var(--y) * 1%);
  width:calc(var(--sh) * var(--s)); aspect-ratio:1;
  border-radius:50%; background:#e2f5ff;
  box-shadow:0 0 calc(var(--sh)*.03) rgba(120,210,255,1);
  opacity:0;
  animation:ivSparkFly 1.2s cubic-bezier(.2,.7,.3,1) both;
  animation-delay:calc(2.18s + var(--d) * 1s);
}

/* ---------- 8. 全屏白场：动画的落点 ---------- */
.intro__white{
  position:absolute; inset:0; z-index:2;
  background:#fff; opacity:0; pointer-events:none;
  animation:ivWhiteout .35s cubic-bezier(.1,.9,.2,1) 2.95s forwards;
}

/* ---------- SKIP ----------
   白场一铺开就先退场，免得在纯白上留一枚灰圈 */
.intro__skip{
  position:absolute; left:24px; bottom:22px; z-index:5;
  font-family:var(--f-en); font-size:11px; letter-spacing:.2em; color:var(--muted);
  padding:8px 14px; border:1px solid var(--line); border-radius:999px;
  background:rgba(4,10,22,.35); backdrop-filter:blur(6px);
  transition:color .3s, border-color .3s;
  animation:ivSkipOut .3s ease-in 2.95s forwards;
}
.intro__skip:hover{ color:var(--text); border-color:var(--line-2); }

/* ---------- 关键帧 ---------- */
@keyframes ivFade{ to{ opacity:1; } }
@keyframes ivStars{ to{ opacity:1; } }
@keyframes ivDrift{ to{ transform:translate3d(-60px,-40px,0); } }
@keyframes ivSpin{ to{ transform:rotate(360deg); } }

@keyframes ivHudIn{
  0%  { opacity:0;   transform:translateY(-50%) scale(.72) rotate(-14deg); }
  60% { opacity:.6; }
  100%{ opacity:.55; transform:translateY(-50%) scale(1) rotate(0); }
}
@keyframes ivHudFlash{
  0%  { filter:none; }
  25% { filter:brightness(2.2) drop-shadow(0 0 14px rgba(120,205,255,.8)); }
  100%{ filter:none; }
}
@keyframes ivHudOut{
  0%  { opacity:1; transform:scale(1); }
  100%{ opacity:0; transform:scale(1.28); }
}

@keyframes ivLetterIn{
  0%  { opacity:0;   transform:translateY(.32em) scale(.9); filter:blur(6px); }
  100%{ opacity:.92; transform:none; filter:blur(0); }
}
@keyframes ivWordOut{
  0%  { opacity:1; filter:blur(0);    letter-spacing:.65em; }
  100%{ opacity:0; filter:blur(14px); letter-spacing:.95em; }
}
@keyframes ivBrandIn{
  0%{ opacity:0; transform:translate(-50%,18px); filter:blur(8px); }
  100%{ opacity:1; transform:translate(-50%,0); filter:blur(0); }
}
@keyframes ivBrandOut{
  to{ opacity:0; transform:translate(-50%,-6px); filter:blur(5px); }
}

@keyframes ivBarFill{ 0%{ transform:scaleX(0); } 100%{ transform:scaleX(1); } }
@keyframes ivKnobRide{ 0%{ left:0; } 100%{ left:100%; } }
@keyframes ivBarOut{
  0%  { opacity:1; }
  100%{ opacity:0; transform:translateY(-50%) scaleX(.96); }
}

/* 五角星轨迹：0–32% 慢 → 32–54% 较快 → 54–72% 更快 → 72–87% 疾速 → 87–100% 猛刺 */
@keyframes ivRun1{
  0%  { stroke-dashoffset:280;  animation-timing-function:cubic-bezier(.4,0,.6,1); }
  32% { stroke-dashoffset:80;   animation-timing-function:cubic-bezier(.4,0,.5,1); }
  54% { stroke-dashoffset:-120; animation-timing-function:cubic-bezier(.35,0,.4,1); }
  72% { stroke-dashoffset:-320; animation-timing-function:cubic-bezier(.3,0,.3,1); }
  87% { stroke-dashoffset:-520; animation-timing-function:cubic-bezier(.2,0,.1,1); }
  100%{ stroke-dashoffset:-720; }
}
@keyframes ivRun2{
  0%  { stroke-dashoffset:180;  animation-timing-function:cubic-bezier(.4,0,.6,1); }
  32% { stroke-dashoffset:-20;  animation-timing-function:cubic-bezier(.4,0,.5,1); }
  54% { stroke-dashoffset:-220; animation-timing-function:cubic-bezier(.35,0,.4,1); }
  72% { stroke-dashoffset:-420; animation-timing-function:cubic-bezier(.3,0,.3,1); }
  87% { stroke-dashoffset:-620; animation-timing-function:cubic-bezier(.2,0,.1,1); }
  100%{ stroke-dashoffset:-820; }
}
@keyframes ivRun3{
  0%  { stroke-dashoffset:90;   animation-timing-function:cubic-bezier(.4,0,.6,1); }
  32% { stroke-dashoffset:-110; animation-timing-function:cubic-bezier(.4,0,.5,1); }
  54% { stroke-dashoffset:-310; animation-timing-function:cubic-bezier(.35,0,.4,1); }
  72% { stroke-dashoffset:-510; animation-timing-function:cubic-bezier(.3,0,.3,1); }
  87% { stroke-dashoffset:-710; animation-timing-function:cubic-bezier(.2,0,.1,1); }
  100%{ stroke-dashoffset:-910; }
}
@keyframes ivRun4{
  0%  { stroke-dashoffset:6;    animation-timing-function:cubic-bezier(.4,0,.6,1); }
  32% { stroke-dashoffset:-194; animation-timing-function:cubic-bezier(.4,0,.5,1); }
  54% { stroke-dashoffset:-394; animation-timing-function:cubic-bezier(.35,0,.4,1); }
  72% { stroke-dashoffset:-594; animation-timing-function:cubic-bezier(.3,0,.3,1); }
  87% { stroke-dashoffset:-794; animation-timing-function:cubic-bezier(.2,0,.1,1); }
  100%{ stroke-dashoffset:-994; }
}
@keyframes ivRun5{
  0%  { stroke-dashoffset:2;    animation-timing-function:cubic-bezier(.4,0,.6,1); }
  32% { stroke-dashoffset:-198; animation-timing-function:cubic-bezier(.4,0,.5,1); }
  54% { stroke-dashoffset:-398; animation-timing-function:cubic-bezier(.35,0,.4,1); }
  72% { stroke-dashoffset:-598; animation-timing-function:cubic-bezier(.3,0,.3,1); }
  87% { stroke-dashoffset:-798; animation-timing-function:cubic-bezier(.2,0,.1,1); }
  100%{ stroke-dashoffset:-998; }
}
@keyframes ivFlareMove{
  0%  { offset-distance:0%;   animation-timing-function:cubic-bezier(.4,0,.6,1); }
  32% { offset-distance:20%;  animation-timing-function:cubic-bezier(.4,0,.5,1); }
  54% { offset-distance:40%;  animation-timing-function:cubic-bezier(.35,0,.4,1); }
  72% { offset-distance:60%;  animation-timing-function:cubic-bezier(.3,0,.3,1); }
  87% { offset-distance:80%;  animation-timing-function:cubic-bezier(.2,0,.1,1); }
  100%{ offset-distance:100%; }
}
@keyframes ivFlareIn{
  0%  { opacity:0; transform:scale(.2); }
  100%{ opacity:1; transform:scale(1); }
}
@keyframes ivFlareFade{
  0%  { opacity:1; transform:scale(1); }
  100%{ opacity:0; transform:scale(1.4); }
}
@keyframes ivCometFade{ 0%{ opacity:1; } 100%{ opacity:0; } }

@keyframes ivFlashPop{
  0%  { opacity:0;  transform:scale(.05); }
  18% { opacity:1;  transform:scale(.7); }
  45% { opacity:.9; transform:scale(1); }
  100%{ opacity:0;  transform:scale(1.4); }
}
@keyframes ivSpikePop{
  0%  { opacity:0; transform:scale(.06) rotate(0deg); }
  18% { opacity:1; transform:scale(.6)  rotate(6deg); }
  100%{ opacity:0; transform:scale(1.5) rotate(16deg); }
}
@keyframes ivShockOut{
  0%  { opacity:0;  transform:scale(.1); border-width:calc(var(--sh)*.01); }
  15% { opacity:.6; }
  100%{ opacity:0;  transform:scale(2);  border-width:1px; }
}
@keyframes ivEmber{
  0%  { opacity:0; transform:rotate(var(--a)) translateX(0) scale(.4); }
  8%  { opacity:1; transform:rotate(var(--a)) translateX(calc(var(--sh)*.06)) scale(1.1); }
  40% { opacity:1; transform:rotate(var(--a)) translateX(calc(var(--sh) * var(--r) * .72)) translateY(calc(var(--sh)*.01)) scale(.8); }
  100%{ opacity:0; transform:rotate(var(--a)) translateX(calc(var(--sh) * var(--r))) translateY(calc(var(--sh)*.08)) scale(.2); }
}
@keyframes ivSmoke{
  0%  { opacity:0;   transform:scale(.25); }
  20% { opacity:.85; }
  100%{ opacity:0;   transform:scale(1.8) translate(calc(var(--sh)*.04), calc(var(--sh)*-.04)); }
}
@keyframes ivBeam{
  0%  { opacity:0; transform:translateY(-50%) scaleX(.05); }
  25% { opacity:1; transform:translateY(-50%) scaleX(1); }
  100%{ opacity:0; transform:translateY(-50%) scaleX(1.35); }
}

@keyframes ivLogoIn{ to{ opacity:1; } }
@keyframes ivSettle{
  0%  { transform:translate(-50%,-50%) scale(1.16); filter:brightness(2.2) drop-shadow(0 0 50px rgba(90,200,255,1)); }
  100%{ transform:translate(-50%,-50%) scale(1);    filter:brightness(1)   drop-shadow(0 0 28px rgba(50,160,255,.65)); }
}
@keyframes ivGlint{
  0%  { transform:translate(-50%,-50%) scale(1);    filter:brightness(1) drop-shadow(0 0 28px rgba(50,160,255,.65)); }
  40% { transform:translate(-50%,-50%) scale(1.05); filter:brightness(3.5) drop-shadow(0 0 90px rgba(255,255,255,1)) drop-shadow(0 0 140px rgba(120,220,255,1)); }
  100%{ transform:translate(-50%,-50%) scale(1.1);  filter:brightness(6) drop-shadow(0 0 120px #fff); }
}
@keyframes ivWipeMain{
  0%  { clip-path:polygon(100% 33%, 100% 33%, 100% 33%, 100% 33%); transform:translate(35px,-15px) scale(.92); opacity:0; }
  30% { opacity:1; }
  100%{ clip-path:polygon(-20% -20%, 120% -20%, 120% 120%, -20% 120%); transform:translate(0,0) scale(1); opacity:1; }
}
@keyframes ivTriIn{
  0%  { opacity:0; transform:translateY(-40%) scale(.6); }
  100%{ opacity:1; transform:none; }
}
@keyframes ivWingIn{
  0%  { opacity:0; transform:scale(.4) rotate(-12deg); }
  100%{ opacity:1; transform:none; }
}
@keyframes ivSparkFly{
  0%  { opacity:0; transform:scale(.2); }
  15% { opacity:1; transform:scale(1.2); }
  100%{ opacity:0; transform:translate(calc(var(--sh) * var(--dx)), calc(var(--sh) * var(--dy))) scale(.2); }
}

@keyframes ivWhiteout{
  0%  { opacity:0; }
  25% { opacity:.85; filter:brightness(1.5); }
  100%{ opacity:1;  filter:none; }
}
@keyframes ivSkipOut{ to{ opacity:0; } }

/* ==========================================================================
   背景层
   ========================================================================== */
.bg-universe{
  position:fixed; inset:0; z-index:var(--z-bg);
  width:100%; height:100%; pointer-events:none;
  opacity:0; transition:opacity 1s linear;
}
.bg-universe.is-ready{ opacity:1; }
.bg-fallback{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(120% 90% at 18% 8%,  rgba(23,16,45,.85) 0%, transparent 55%),
    radial-gradient(90% 70% at 82% 30%,  rgba(23,16,45,.65) 0%, transparent 60%),
    radial-gradient(70% 60% at 50% 100%, rgba(22,119,255,.10) 0%, transparent 62%),
    var(--bg);
}
main{ position:relative; z-index:var(--z-content); }

/* ==========================================================================
   光标
   ========================================================================== */
.cursor,.cursor-ring{ display:none; }
body.has-cursor .cursor,
body.has-cursor .cursor-ring{ display:block; position:fixed; top:0; left:0; pointer-events:none; z-index:var(--z-cursor); }
.cursor{ width:4px; height:4px; margin:-2px 0 0 -2px; border-radius:50%; background:var(--blue); }
.cursor-ring{
  width:28px; height:28px; margin:-14px 0 0 -14px;
  border:1px solid rgba(61,156,255,.5); border-radius:50%;
  display:grid; place-items:center;
  transition:width .3s var(--e-out), height .3s var(--e-out), margin .3s var(--e-out), border-color .3s, background-color .3s;
}
.cursor-ring span{
  font-family:var(--f-en); font-size:12px; color:var(--hi);
  opacity:0; transform:translateX(-4px); transition:opacity .25s, transform .25s;
}
body.cursor-hover .cursor-ring{ width:44px; height:44px; margin:-22px 0 0 -22px; border-color:var(--hi); background:rgba(61,156,255,.06); }
body.cursor-contact .cursor-ring span{ opacity:1; transform:none; }

/* ==========================================================================
   顶部跑马灯：中空描边字，横向无缝循环
   固定在最顶端，下面的 Logo / CTA / 进度条统一让出 --mq-h
   ========================================================================== */
.marquee{
  position:fixed; top:0; left:0; right:0; height:var(--mq-h);
  z-index:var(--z-marquee);
  overflow:hidden;
  display:flex; align-items:center;
  background:rgba(5,7,13,.55);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(61,156,255,.14);
  pointer-events:none;
  contain:paint;
}
.marquee__track{
  display:flex; flex:none;
  /* 时长由 marquee.js 按「半条轨道宽 ÷ 固定线速度」写入，复制份数不影响观感速度 */
  animation:marqueeRun var(--mq-dur,60s) linear infinite;
  will-change:transform;
}
.marquee__set{ display:flex; align-items:center; flex:none; }
.marquee__set span{
  font-family:var(--f-en);
  /* 跟左上角「七星集团」同号（16px），不喧宾夺主 */
  font-size:clamp(13px,1.25vw,16px);
  font-weight:700; letter-spacing:.09em; line-height:1;
  white-space:nowrap;
  /* 中空字：描边留住、字身掏空 */
  color:transparent;
  -webkit-text-stroke:.9px rgba(226,240,255,.7);
  text-stroke:.9px rgba(226,240,255,.7);
  padding:0 .5em;
}
/* 词与词之间的四角星分隔符 */
.marquee__set i{
  flex:none; width:7px; height:7px; margin:0 clamp(16px,2.2vw,34px);
  background:var(--hi); opacity:.65;
  clip-path:polygon(50% 0%, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0% 50%, 42% 42%);
}
@keyframes marqueeRun{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }

/* ==========================================================================
   顶部进度条 / 固定 Logo / BGM
   ========================================================================== */
.scroll-progress{
  position:fixed; top:var(--mq-h); left:0; height:2px; width:0;
  background:var(--grad); z-index:var(--z-brand);
  box-shadow:0 0 10px rgba(61,156,255,.6);
}

.brand{
  position:fixed; top:calc(var(--mq-h) + 18px); left:28px; z-index:var(--z-brand);
  display:flex; flex-direction:column; gap:12px; align-items:flex-start;
}
.brand__logo{
  display:flex; align-items:center; gap:12px;
  padding:7px 16px 7px 8px;
  border-radius:999px;
  background:rgba(5,7,13,.62);
  border:1px solid rgba(61,156,255,.14);
  backdrop-filter:blur(12px);
}
.brand__mark{
  width:40px; height:40px; flex:none; object-fit:contain;
  filter:drop-shadow(0 0 10px rgba(22,119,255,.55));
  transition:transform .7s var(--e-out), filter .4s;
}
.brand__logo:hover .brand__mark{ transform:rotate(360deg) scale(1.06); filter:drop-shadow(0 0 16px rgba(61,156,255,.95)); }
.brand__text{ display:flex; flex-direction:column; line-height:1.15; }
.brand__text b{ font-size:16px; font-weight:900; letter-spacing:.02em; }
.brand__text i{ font-family:var(--f-en); font-style:normal; font-size:9px; letter-spacing:.2em; color:var(--muted); }

/* BGM：均衡器竖条按钮 */
.bgm{
  width:34px; height:34px; margin-left:2px;
  border:1px solid var(--line); border-radius:50%;
  display:grid; place-items:center;
  background:rgba(5,7,13,.55); backdrop-filter:blur(8px);
  transition:border-color .3s, background-color .3s, transform .3s var(--e-out);
  position:relative;
}
.bgm:hover{ border-color:var(--hi); transform:scale(1.06); }
.bgm.is-on{ border-color:var(--line-2); }
.bgm__bars{ display:flex; align-items:center; gap:2px; height:13px; }
.bgm__bars i{ width:2px; height:3px; background:var(--muted); border-radius:1px; transition:background-color .3s, height .3s; }
.bgm.is-on .bgm__bars i{ background:var(--blue); animation:eq .8s ease-in-out infinite alternate; }
.bgm.is-on .bgm__bars i:nth-child(1){ animation-duration:.62s; }
.bgm.is-on .bgm__bars i:nth-child(2){ animation-duration:.86s; }
.bgm.is-on .bgm__bars i:nth-child(3){ animation-duration:.71s; }
.bgm.is-on .bgm__bars i:nth-child(4){ animation-duration:.93s; }
@keyframes eq{ from{ height:3px; } to{ height:13px; } }
.bgm::after{
  content:'声音';
  position:absolute; left:calc(100% + 10px); top:50%; translate:0 -50%;
  font-family:var(--f-en); font-size:9px; letter-spacing:.18em; color:var(--muted);
  opacity:0; transition:opacity .3s; white-space:nowrap; pointer-events:none;
}
.bgm:hover::after{ opacity:1; }
.bgm.is-on::after{ content:'声音 已开'; color:var(--hi); }

.top-cta{
  position:fixed; top:calc(var(--mq-h) + 20px); right:var(--pad); z-index:var(--z-brand);
  display:flex; gap:10px; align-items:center;
  padding:6px;
  border-radius:999px;
  background:rgba(5,7,13,.62);
  border:1px solid rgba(61,156,255,.14);
  backdrop-filter:blur(12px);
}

/* ==========================================================================
   左侧竖向悬浮章节导航
   ========================================================================== */
.rail{ position:fixed; left:28px; top:50%; transform:translateY(-50%); z-index:var(--z-rail); }
.rail__list{ display:flex; flex-direction:column; gap:6px; }
.rail__item a{
  position:relative; display:flex; align-items:center; gap:12px;
  min-height:44px; padding:4px 8px; border-radius:10px;
  border:1px solid transparent;
  transition:background-color .35s var(--e-out), border-color .35s;
}
.rail:hover .rail__item a{
  background:rgba(5,7,13,.72); border-color:var(--line); backdrop-filter:blur(10px);
}
.rail__num{ font-family:var(--f-en); font-size:12px; letter-spacing:.1em; color:var(--muted); transition:color .3s; width:22px; flex:none; }
.rail__item.is-active .rail__num{ color:var(--blue); }
.rail__item:hover .rail__num{ color:var(--text); }
.rail__thumb{
  width:0; height:88px; border-radius:6px; border:1px solid var(--line);
  opacity:0; overflow:hidden; flex:none;
  transition:width .35s var(--e-out), opacity .3s var(--e-out);
  background-color:#0A0E1A;
  /* canvas 内部按 280×176 绘制，这里压到 140×88 显示 → 等于 2x 图，边缘不糊。
     放大过一次：88×56 时结构和文字细节根本看不清 */
  display:block; object-fit:cover;
}
.rail__label{
  font-size:13px; color:var(--muted); white-space:nowrap;
  opacity:0; transform:translateX(-8px); max-width:0;
  transition:opacity .3s var(--e-out), transform .35s var(--e-out), color .3s;
}
.rail:hover .rail__thumb{ width:140px; opacity:1; }
.rail:hover .rail__label{ opacity:1; transform:none; max-width:110px; }
.rail__item.is-active .rail__label{ color:var(--text); }
.rail__item.is-active .rail__thumb{ border-color:var(--hi); animation:thumbBreath 2.6s ease-in-out infinite; }
@keyframes thumbBreath{
  0%,100%{ box-shadow:0 0 0 0 rgba(61,156,255,0); }
  50%    { box-shadow:0 0 14px 0 rgba(61,156,255,.35); }
}
.rail__item:nth-child(1) .rail__thumb,.rail__item:nth-child(1) .rail__label{ transition-delay:0ms; }
.rail__item:nth-child(2) .rail__thumb,.rail__item:nth-child(2) .rail__label{ transition-delay:40ms; }
.rail__item:nth-child(3) .rail__thumb,.rail__item:nth-child(3) .rail__label{ transition-delay:80ms; }
.rail__item:nth-child(4) .rail__thumb,.rail__item:nth-child(4) .rail__label{ transition-delay:120ms; }

.dots{ display:none; position:fixed; right:10px; top:50%; transform:translateY(-50%); z-index:var(--z-rail); flex-direction:column; gap:8px; }
.dots i{ width:4px; height:4px; border-radius:99px; background:rgba(140,155,191,.45); transition:height .35s var(--e-out), background-color .3s; }
.dots i.is-active{ height:16px; background:var(--blue); }

/* 移动端菜单 */
.menu-toggle{
  display:none; position:fixed; top:calc(var(--mq-h) + 14px); right:16px; z-index:var(--z-menu);
  width:44px; height:44px; border:1px solid var(--line); border-radius:10px;
  background:rgba(5,7,13,.6); backdrop-filter:blur(10px); padding:13px 11px;
}
.menu-toggle i{ display:block; height:1.5px; background:var(--text); border-radius:2px; transition:transform .3s var(--e-out), opacity .3s; }
.menu-toggle i:first-child{ margin-bottom:5px; }
body.menu-open .menu-toggle i:first-child{ transform:translateY(3.5px) rotate(45deg); }
body.menu-open .menu-toggle i:last-child{ transform:translateY(-3px) rotate(-45deg); }

.menu{
  position:fixed; inset:0; z-index:calc(var(--z-menu) - 1);
  background:rgba(5,7,13,.94); backdrop-filter:blur(18px);
  display:flex; align-items:center;
  opacity:0; visibility:hidden;
  transition:opacity .4s var(--e-out), visibility .4s;
}
body.menu-open .menu{ opacity:1; visibility:visible; }
.menu__inner{ width:100%; padding:0 24px; display:flex; flex-direction:column; gap:6px; }
.menu__item{
  display:flex; align-items:baseline; gap:14px;
  font-size:26px; font-weight:700; letter-spacing:-.01em;
  padding:12px 0; border-bottom:1px solid var(--line);
  opacity:0; transform:translateY(18px);
  transition:opacity .4s var(--e-out), transform .5s var(--e-out);
}
.menu__item em{ font-family:var(--f-en); font-style:normal; font-size:12px; color:var(--blue); letter-spacing:.12em; }
body.menu-open .menu__item{ opacity:1; transform:none; }
body.menu-open .menu__item:nth-child(1){ transition-delay:.08s; }
body.menu-open .menu__item:nth-child(2){ transition-delay:.14s; }
body.menu-open .menu__item:nth-child(3){ transition-delay:.20s; }
body.menu-open .menu__item:nth-child(4){ transition-delay:.26s; }
body.menu-open .menu__item:nth-child(5){ transition-delay:.32s; }
.menu .btn--block{ margin-top:22px; }

/* ==========================================================================
   按钮
   ========================================================================== */
.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:0 26px; border-radius:999px;
  font-size:15px; font-weight:700; letter-spacing:.01em;
  overflow:hidden; isolation:isolate;
  transition:color .3s, border-color .3s, box-shadow .4s, transform .3s var(--e-out);
  will-change:transform;
}
.btn svg{ width:16px; height:16px; fill:currentColor; }
.btn--sm{ min-height:40px; padding:0 18px; font-size:13px; }
.btn--block{ display:flex; width:100%; }

.btn--solid{ background:var(--blue); color:#fff; box-shadow:0 6px 26px -10px rgba(22,119,255,.9); }
.btn--solid::before{
  content:''; position:absolute; z-index:-1;
  left:var(--x,50%); top:var(--y,50%); width:240%; aspect-ratio:1;
  translate:-50% -50%; border-radius:50%;
  background:var(--hi); transform:scale(0);
  transition:transform .4s var(--e-out);
}
.btn--solid:hover::before{ transform:scale(1); }
.btn--solid:hover{ box-shadow:0 10px 34px -10px rgba(61,156,255,1); }

.btn--ghost{ border:1px solid var(--line-2); color:var(--text); }
.btn--ghost::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:rgba(61,156,255,.1); transform:scaleY(0); transform-origin:bottom;
  transition:transform .4s var(--e-out);
}
.btn--ghost:hover{ border-color:var(--hi); }
.btn--ghost:hover::before{ transform:scaleY(1); }
.btn:active{ transform:scale(.97); }

/* ==========================================================================
   入场动效
   ========================================================================== */
[data-reveal]{
  opacity:0; transform:translateY(40px);
  transition:opacity .8s var(--e-out), transform .8s var(--e-out);
  transition-delay:var(--d,0ms);
}
[data-reveal].is-in{ opacity:1; transform:none; }

[data-split] .line{ display:block; overflow:hidden; }
[data-split] .line > span{
  display:block; transform:translateY(105%);
  transition:transform .9s var(--e-out); transition-delay:var(--d,0ms);
}
[data-split].is-in .line > span{ transform:none; }

/* ---- 主标题：zentry perspectiveTransition（透视推入 + 逐词浮现） ---- */
[data-ptitle]{ perspective:1000px; display:block; }
.ptitle__content{
  display:block;
  transform-origin:50% 50%;
  transform:translate3d(0,54px,-150px) rotateX(-26deg);
  opacity:0;
  transition:transform 1.05s var(--e-soft), opacity .55s linear;
}
[data-ptitle].is-in .ptitle__content{ transform:none; opacity:1; }
[data-ptitle] .line{ display:block; }
[data-ptitle] .word{
  display:inline-block;
  opacity:0; transform:translateY(.16em);
  transition:opacity .6s var(--e-out), transform .6s var(--e-out);
  transition-delay:var(--d,0ms);
}
[data-ptitle].is-in .word{ opacity:1; transform:none; }

/* 0.2s 快进版（首屏标题不等） */
[data-ptitle].is-fast .ptitle__content{ transition-duration:.22s, .18s; }
[data-ptitle].is-fast .word{ transition-duration:.2s; transition-delay:0ms !important; }

/* ---- zentry 式模块翻起入场（bento / 官方矩阵共用） ---- */
.zflip{
  transform:perspective(1000px) translateY(100px) rotateX(-40deg);
  transform-origin:center top;
  opacity:0;
  transition:transform .95s var(--e-out), opacity .7s linear;
  transition-delay:var(--d,0ms);
}
.zflip.is-in{ transform:perspective(1000px); opacity:1; }

.bigword{
  font-family:var(--f-en); font-size:var(--bigw); font-weight:700;
  letter-spacing:.02em; line-height:1; text-transform:uppercase; color:var(--text);
  margin-bottom:clamp(28px,4vw,64px); opacity:.92;
}
.bigword .w{ display:inline-block; overflow:hidden; vertical-align:bottom; padding:0 .06em 0 0; }
.bigword .w > i{
  display:inline-block; font-style:normal;
  transform:translateY(110%); opacity:0;
  transition:transform .7s var(--e-out), opacity .7s var(--e-out);
  transition-delay:var(--d,0ms);
}
.bigword.is-in .w > i{ transform:none; opacity:1; }
.bigword em{ font-style:normal; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ==========================================================================
   悬浮客服 / 移动端粘性条
   ========================================================================== */
.fabwrap{
  position:fixed; right:26px; bottom:26px; z-index:var(--z-fab);
  display:flex; align-items:center; gap:10px;
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .4s var(--e-out), transform .4s var(--e-out), visibility .4s;
}
.fabwrap.is-on{ opacity:1; visibility:visible; transform:none; }
.fabwrap__tip{
  position:relative;
  display:inline-flex; align-items:center;
  padding:9px 26px 9px 14px;
  border-radius:8px; background:#fff; color:#0B1120;
  font-size:12.5px; font-weight:600; white-space:nowrap;
  box-shadow:0 8px 24px -12px rgba(0,0,0,.8);
}
.fabwrap__tip::after{
  content:''; position:absolute; right:-5px; top:50%; translate:0 -50%;
  width:10px; height:10px; background:#fff; rotate:45deg;
}
.fabwrap__x{
  position:absolute; right:6px; top:2px;
  font-size:14px; line-height:1; color:#8A94A6; padding:4px;
}
.fabwrap.tip-off .fabwrap__tip{ display:none; }
.fab{
  width:56px; height:56px; border-radius:50%;
  background:var(--blue);
  display:grid; place-items:center; flex:none;
  box-shadow:0 10px 30px -10px rgba(22,119,255,1);
  animation:fabBreath 3s ease-in-out infinite;
  will-change:transform;
}
.fab img{ width:30px; height:30px; object-fit:contain; }
@keyframes fabBreath{
  0%,100%{ box-shadow:0 10px 30px -12px rgba(22,119,255,.9), 0 0 0 0 rgba(61,156,255,.35); }
  50%    { box-shadow:0 10px 30px -12px rgba(22,119,255,.9), 0 0 0 12px rgba(61,156,255,0); }
}

.sticky-bar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:var(--z-fab);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(5,7,13,.92); backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  align-items:center; justify-content:space-between; gap:12px;
  transform:translateY(110%); transition:transform .4s var(--e-out);
}
.sticky-bar.is-on{ transform:none; }
.sticky-bar__txt{ display:flex; flex-direction:column; line-height:1.3; }
.sticky-bar__txt b{ font-size:14px; }
.sticky-bar__txt span{ font-size:11px; color:var(--muted); }
.sticky-bar .btn{ min-height:44px; padding:0 20px; flex:none; }

/* ==========================================================================
   Footer
   ========================================================================== */
/* 接住 P4 收尾的 #0D244C，白蓝渐层一路走到整站最后一行 */
.foot{
  position:relative; z-index:var(--z-content); margin-top:0;
  background:linear-gradient(180deg, #0D244C 0%, #0C2046 38%, #0A1C3B 72%, #091732 100%);
}

/* 免责声明条 */
.foot__notice{
  display:block;
  padding:16px clamp(20px,5vw,64px);
  background:var(--blue); color:#04101F;
}
.foot__warn{
  display:inline;
  margin-right:8px;
  font-size:15px;
  line-height:inherit;
}
.foot__notice p{
  margin:0;
  font-size:12.5px;
  line-height:1.75;
  overflow-wrap:normal;
  word-break:normal;
  text-wrap:pretty;
}

/* 主体 */
.foot__main{
  display:flex; align-items:flex-start; justify-content:space-between; gap:32px;
  padding:clamp(28px,4vw,44px) clamp(20px,5vw,64px);
  background:transparent;
  border-bottom:1px solid rgba(160,200,255,.12);
}
.foot__logo{ display:inline-flex; align-items:center; gap:10px; margin-bottom:22px; }
.foot__logo img{ width:34px; height:34px; object-fit:contain; }
.foot__logo span{ display:flex; flex-direction:column; line-height:1.2; }
.foot__logo b{ font-size:14px; font-weight:800; }
.foot__logo i{ font-family:var(--f-en); font-style:normal; font-size:8.5px; letter-spacing:.18em; color:var(--muted); }

.foot__side{ display:flex; flex-direction:column; align-items:flex-end; gap:14px; }
.foot__social{ display:flex; gap:14px; }
.foot__social a{
  width:34px; height:34px; display:grid; place-items:center; border-radius:8px;
  transition:background-color .25s, transform .25s var(--e-out);
}
.foot__social svg{ width:19px; height:19px; fill:#E6EDF9; }
.foot__social a:hover{ background:rgba(61,156,255,.14); transform:translateY(-2px); }
.foot__copy{ font-size:13px; font-weight:700; color:#E6EDF9; }

/* 底部链接行 */
.foot__links{
  display:flex; flex-wrap:wrap; gap:8px clamp(18px,3vw,44px);
  padding:20px clamp(20px,5vw,64px) calc(24px + env(safe-area-inset-bottom));
  background:transparent;
}
.foot__links a{
  font-size:13px; color:var(--blue);
  min-height:32px; display:inline-flex; align-items:center;
  transition:color .25s;
}
.foot__links a:hover{ color:var(--hi); text-decoration:underline; }