/* ============================================================
   Luna — 官网
   主题：月夜。深靛底 + 月华金，一套只属于 Luna 的配色
   布局骨架沿用作者惯用的结构，配色 / 背景 / 字体各自独立
   ============================================================ */

:root{
  /* 夜 */
  --ink:#05060c;
  --bg:#0a0d17;
  --bg-2:rgba(14,18,32,.72);
  --panel:#141928;
  --panel-2:#1b2133;

  --line:rgba(233,238,255,.09);
  --line-strong:rgba(233,238,255,.2);

  /* 月光 */
  --t1:#f2f1ee;
  --t2:#a3a9bd;
  --t3:#737a91;
  --t4:#4a5166;

  /* 主题色：月华金 */
  --accent:#f0c477;
  --accent-deep:#dfae57;
  --accent-wash:rgba(240,196,119,.12);

  --r-xs:5px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;
  --shadow-lift:0 28px 70px rgba(0,0,0,.55);
  --shadow-pop:0 12px 34px rgba(0,0,0,.4);

  --sans:"Sora",-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue",sans-serif;
  --mono:"JetBrains Mono","SF Mono",Menlo,Consolas,monospace;

  --shell:1700px; --pad:56px; --nav-h:74px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; background:var(--bg)}
body{
  margin:0; background:var(--bg); color:var(--t1);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
h1,h2,h3{margin:0; font-weight:600}
p{margin:0}
ul{margin:0; padding:0; list-style:none}

body > header,
body > main,
body > footer{position:relative; z-index:1}

.shell{width:100%; max-width:var(--shell); margin:0 auto; padding:0 var(--pad)}
section{padding:118px 0; position:relative}

.skip{
  position:absolute; left:-9999px; top:8px; z-index:200;
  background:var(--accent); color:var(--ink); padding:10px 16px; border-radius:var(--r-sm);
}
.skip:focus{left:16px}

/* ───────────────────────── 夜空背景 ─────────────────────────
   固定在视口后面：一轮冷月晕 + 一片随机星点（不是网格）      */

.sky{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.sky-halo{
  position:absolute; inset:-20% -10% auto -10%; height:150%;
  background:
    radial-gradient(46% 42% at 78% 6%, rgba(150,168,255,.20), transparent 62%),
    radial-gradient(30% 26% at 82% 2%, rgba(240,196,119,.14), transparent 60%),
    radial-gradient(70% 55% at 12% 88%, rgba(88,74,160,.16), transparent 66%);
}
.sky-drift{position:absolute; inset:0; will-change:transform}
.sky-stars{
  position:absolute; inset:-15% 0 0; height:130%;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22260%22%20height%3D%22260%22%3E%3Ccircle%20cx%3D%2284.2%22%20cy%3D%2239.2%22%20r%3D%221.4%22%20fill%3D%22%23fff%22%20opacity%3D%220.21%22%2F%3E%3Ccircle%20cx%3D%22213.5%22%20cy%3D%2224.5%22%20r%3D%221.1%22%20fill%3D%22%23fff%22%20opacity%3D%220.21%22%2F%3E%3Ccircle%20cx%3D%22131.9%22%20cy%3D%229.7%22%20r%3D%220.9%22%20fill%3D%22%23fff%22%20opacity%3D%220.41%22%2F%3E%3Ccircle%20cx%3D%2262.6%22%20cy%3D%22143.3%22%20r%3D%220.6%22%20fill%3D%22%23fff%22%20opacity%3D%220.63%22%2F%3E%3Ccircle%20cx%3D%2232.2%22%20cy%3D%2258.0%22%20r%3D%221.4%22%20fill%3D%22%23fff%22%20opacity%3D%220.49%22%2F%3E%3Ccircle%20cx%3D%2216.1%22%20cy%3D%22152.2%22%20r%3D%220.6%22%20fill%3D%22%23fff%22%20opacity%3D%220.71%22%2F%3E%3Ccircle%20cx%3D%2212.1%22%20cy%3D%22223.2%22%20r%3D%220.8%22%20fill%3D%22%23fff%22%20opacity%3D%220.41%22%2F%3E%3Ccircle%20cx%3D%22140.6%22%20cy%3D%22148.4%22%20r%3D%221.1%22%20fill%3D%22%23fff%22%20opacity%3D%220.62%22%2F%3E%3Ccircle%20cx%3D%2247.0%22%20cy%3D%22151.2%22%20r%3D%221.4%22%20fill%3D%22%23fff%22%20opacity%3D%220.28%22%2F%3E%3Ccircle%20cx%3D%2225.3%22%20cy%3D%22185.1%22%20r%3D%221.1%22%20fill%3D%22%23fff%22%20opacity%3D%220.21%22%2F%3E%3Ccircle%20cx%3D%2253.5%22%20cy%3D%22176.9%22%20r%3D%220.9%22%20fill%3D%22%23fff%22%20opacity%3D%220.6%22%2F%3E%3Ccircle%20cx%3D%22121.1%22%20cy%3D%22240.1%22%20r%3D%220.8%22%20fill%3D%22%23fff%22%20opacity%3D%220.34%22%2F%3E%3Ccircle%20cx%3D%22206.5%22%20cy%3D%22181.7%22%20r%3D%220.7%22%20fill%3D%22%23fff%22%20opacity%3D%220.22%22%2F%3E%3Ccircle%20cx%3D%2278.1%22%20cy%3D%22128.7%22%20r%3D%220.8%22%20fill%3D%22%23fff%22%20opacity%3D%220.57%22%2F%3E%3Ccircle%20cx%3D%2274.9%22%20cy%3D%22254.8%22%20r%3D%220.6%22%20fill%3D%22%23fff%22%20opacity%3D%220.46%22%2F%3E%3Ccircle%20cx%3D%2242.9%22%20cy%3D%2288.9%22%20r%3D%220.9%22%20fill%3D%22%23fff%22%20opacity%3D%220.41%22%2F%3E%3Ccircle%20cx%3D%22250.1%22%20cy%3D%2220.2%22%20r%3D%221.1%22%20fill%3D%22%23fff%22%20opacity%3D%220.49%22%2F%3E%3Ccircle%20cx%3D%22227.6%22%20cy%3D%2281.6%22%20r%3D%221.4%22%20fill%3D%22%23fff%22%20opacity%3D%220.37%22%2F%3E%3Ccircle%20cx%3D%22129.1%22%20cy%3D%22207.2%22%20r%3D%220.6%22%20fill%3D%22%23fff%22%20opacity%3D%220.63%22%2F%3E%3Ccircle%20cx%3D%22245.6%22%20cy%3D%22123.3%22%20r%3D%221.4%22%20fill%3D%22%23fff%22%20opacity%3D%220.22%22%2F%3E%3Ccircle%20cx%3D%22190.1%22%20cy%3D%2280.5%22%20r%3D%221.1%22%20fill%3D%22%23fff%22%20opacity%3D%220.72%22%2F%3E%3Ccircle%20cx%3D%22213.7%22%20cy%3D%2274.0%22%20r%3D%220.9%22%20fill%3D%22%23fff%22%20opacity%3D%220.66%22%2F%3E%3Ccircle%20cx%3D%2290.2%22%20cy%3D%22244.6%22%20r%3D%220.8%22%20fill%3D%22%23fff%22%20opacity%3D%220.27%22%2F%3E%3Ccircle%20cx%3D%2230.4%22%20cy%3D%2215.3%22%20r%3D%220.8%22%20fill%3D%22%23fff%22%20opacity%3D%220.25%22%2F%3E%3Ccircle%20cx%3D%2264.4%22%20cy%3D%22101.6%22%20r%3D%220.9%22%20fill%3D%22%23fff%22%20opacity%3D%220.22%22%2F%3E%3Ccircle%20cx%3D%22116.8%22%20cy%3D%22142.9%22%20r%3D%220.7%22%20fill%3D%22%23fff%22%20opacity%3D%220.62%22%2F%3E%3Ccircle%20cx%3D%22224.6%22%20cy%3D%2272.4%22%20r%3D%220.9%22%20fill%3D%22%23fff%22%20opacity%3D%220.71%22%2F%3E%3Ccircle%20cx%3D%22177.5%22%20cy%3D%2298.9%22%20r%3D%220.7%22%20fill%3D%22%23fff%22%20opacity%3D%220.26%22%2F%3E%3Ccircle%20cx%3D%2245.8%22%20cy%3D%2260.3%22%20r%3D%220.7%22%20fill%3D%22%23fff%22%20opacity%3D%220.19%22%2F%3E%3Ccircle%20cx%3D%22216.1%22%20cy%3D%2247.4%22%20r%3D%220.8%22%20fill%3D%22%23fff%22%20opacity%3D%220.18%22%2F%3E%3Ccircle%20cx%3D%22108.9%22%20cy%3D%2296.0%22%20r%3D%221.1%22%20fill%3D%22%23fff%22%20opacity%3D%220.35%22%2F%3E%3Ccircle%20cx%3D%2232.6%22%20cy%3D%22223.4%22%20r%3D%221.1%22%20fill%3D%22%23fff%22%20opacity%3D%220.53%22%2F%3E%3Ccircle%20cx%3D%22192.3%22%20cy%3D%22118.7%22%20r%3D%221.4%22%20fill%3D%22%23fff%22%20opacity%3D%220.61%22%2F%3E%3Ccircle%20cx%3D%22102.0%22%20cy%3D%22103.7%22%20r%3D%220.6%22%20fill%3D%22%23fff%22%20opacity%3D%220.44%22%2F%3E%3C%2Fsvg%3E");
  background-repeat:repeat;
}

/* 会闪的那批星：每颗自带随机周期和负延迟，所以彼此永不同步。
   实心点太小看不出明暗，改成中心实、边缘散的小光斑，
   亮起来时连 scale 一起胀，闪烁才有存在感。
   opacity + transform 全走合成器，主线程一帧都不参与。 */
.sky-twinkle{position:absolute; inset:-15% 0 0; height:130%}
.sky-twinkle i{
  position:absolute; border-radius:50%;
  background:radial-gradient(circle,
    #fff 0%, rgba(255,255,255,.9) 20%, rgba(255,255,255,.3) 44%, transparent 72%);
  opacity:var(--o);
  animation:twinkle var(--dur) ease-in-out infinite;
}
.sky-twinkle i.warm{
  background:radial-gradient(circle,
    #fff6e2 0%, rgba(240,196,119,.92) 22%, rgba(240,196,119,.32) 48%, transparent 74%);
}
.sky-twinkle i.cool{
  background:radial-gradient(circle,
    #f0f4ff 0%, rgba(150,168,255,.9) 22%, rgba(150,168,255,.3) 48%, transparent 74%);
}
@keyframes twinkle{
  0%,100%{opacity:calc(var(--o) * .05); transform:scale(.35)}
  42%    {opacity:var(--o);              transform:scale(1.18)}
  58%    {opacity:calc(var(--o) * .62);  transform:scale(.9)}
  72%    {opacity:calc(var(--o) * .88);  transform:scale(1.05)}
}

/* 流星：头亮尾散的一道细条，沿自身角度掠过后归位重排 */
.sky-meteors{position:absolute; inset:0}
.meteor{position:absolute; width:0; height:0}
.meteor i{
  display:block; position:absolute; top:0; left:0;
  height:1.7px; border-radius:2px; opacity:0;
  background:linear-gradient(to right,
    transparent 0%, rgba(255,255,255,.18) 35%, rgba(255,255,255,.75) 82%, #fff 100%);
}
.meteor i::after{
  content:""; position:absolute; right:-2px; top:50%;
  width:5px; height:5px; margin-top:-2.5px; border-radius:50%;
  background:radial-gradient(circle, #fff 0%, rgba(255,255,255,.5) 40%, transparent 72%);
}

.sky-fade{
  position:absolute; inset:0;
  background:linear-gradient(to bottom, transparent 0%, transparent 42%, var(--bg) 96%);
}

/* 深色下噪点用 soft-light，压住大面积渐变的色带 */
.grain{
  position:fixed; inset:0; z-index:120; pointer-events:none;
  mix-blend-mode:soft-light; opacity:.5;
  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='.4'/%3E%3C/svg%3E");
}

/* ───────────────────────── 通用排版件 ───────────────────────── */

.eyebrow{
  font-family:var(--mono); font-size:11px; font-weight:400;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
  display:flex; align-items:center; gap:14px;
}
.eyebrow::before{
  content:""; width:26px; height:1px;
  background:linear-gradient(to right, transparent, var(--accent));
}

.section-head{max-width:820px}
.section-title{
  margin-top:22px; font-size:clamp(33px,3vw,50px); line-height:1.14;
  letter-spacing:-.028em; font-weight:600;
}
.section-sub{margin-top:20px; color:var(--t2); font-size:17px; line-height:1.72; max-width:660px}

.btn{
  display:inline-flex; align-items:center; gap:8px;
  height:42px; padding:0 18px; border-radius:var(--r-pill);
  font-size:14px; font-weight:500; letter-spacing:-.005em;
  border:1px solid transparent; cursor:pointer;
  transition:background .22s ease, color .22s ease, border-color .22s ease,
             box-shadow .28s ease, transform .22s cubic-bezier(.2,.8,.2,1);
}
.btn-lg{height:50px; padding:0 26px; font-size:15px}
.btn-primary{background:var(--accent); color:var(--ink)}
.btn-primary:hover{
  background:#f7d391; transform:translateY(-1px);
  box-shadow:0 10px 30px rgba(240,196,119,.22);
}
.btn-ghost{border-color:var(--line-strong); color:var(--t1)}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent); transform:translateY(-1px)}

/* 主转化按钮：dmg 直下。比次按钮高一头、带图标和副标，视觉重量拉开 */
.btn-dl{
  display:inline-flex; align-items:center; gap:14px;
  height:auto; padding:13px 26px 14px 22px; border-radius:var(--r-pill);
  background:var(--accent); color:var(--ink);
  box-shadow:0 10px 34px rgba(240,196,119,.2);
  transition:background .22s ease, box-shadow .28s ease, transform .22s cubic-bezier(.2,.8,.2,1);
}
.btn-dl:hover{
  background:#f9d79a; transform:translateY(-2px);
  box-shadow:0 16px 44px rgba(240,196,119,.34);
}
.btn-dl:active{transform:translateY(0)}
.dl-ico{display:grid; place-items:center; opacity:.85}
.dl-text{display:flex; flex-direction:column; gap:2px; text-align:left}
.dl-text b{font-size:16px; font-weight:600; letter-spacing:-.01em; line-height:1.2}
.dl-text em{
  font-family:var(--mono); font-style:normal; font-size:11px;
  letter-spacing:.03em; opacity:.66; line-height:1.2;
}

/* ───────────────────────── 顶栏 ───────────────────────── */

.nav{
  position:fixed; top:0; left:0; right:0; z-index:100; height:var(--nav-h);
  border-bottom:1px solid transparent;
  transition:background .3s ease, border-color .3s ease;
}
.nav.scrolled{
  background:rgba(10,13,23,.74);
  backdrop-filter:saturate(1.4) blur(18px);
  -webkit-backdrop-filter:saturate(1.4) blur(18px);
  border-bottom-color:var(--line);
}
.nav-inner{height:var(--nav-h); display:flex; align-items:center; gap:26px}
.brand{display:flex; align-items:center; gap:13px}
.brand img{width:42px; height:42px; border-radius:10px}
.brand-name{font-size:23px; font-weight:600; letter-spacing:-.02em}
.brand-tag{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--t3); padding-top:3px;
}
.nav-links{display:flex; gap:28px; margin-left:auto}
.nav-links a{
  font-size:14px; color:var(--t2); position:relative; padding:4px 0;
  transition:color .2s ease;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--accent); transition:right .3s cubic-bezier(.2,.8,.2,1);
}
.nav-links a:hover{color:var(--t1)}
.nav-links a:hover::after{right:0}

.lang{
  display:flex; gap:2px; padding:3px;
  border:1px solid var(--line); border-radius:var(--r-pill); background:rgba(255,255,255,.03);
}
.lang button{
  font:inherit; font-size:12px; line-height:1; cursor:pointer;
  padding:7px 12px; border:0; border-radius:var(--r-pill);
  background:none; color:var(--t3);
  transition:background .25s ease, color .25s ease;
}
.lang button:hover{color:var(--t1)}
.lang button.on{background:var(--accent-wash); color:var(--accent)}
.lang button:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

.nav-cta{height:38px; font-size:13.5px}

/* ───────────────────────── 第一屏 ───────────────────────── */

/* 撑满一屏，向下提示才落在视口底部而不是半空中 */
/* 内容垂直居中：大屏上多出来的高度平摊到上下，不再全堆在底部 */
.hero{
  min-height:100vh; display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--nav-h) + 48px) 0 148px; overflow:hidden;
}
.hero-inner{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,44%); gap:56px;
  align-items:center; position:relative;
}
/* 截图整张显示，只有底部一道垂直渐变化进星空 */
.hero-art{position:relative; justify-self:end; width:min(100%, 520px)}
.hero-art::before{
  content:""; position:absolute; inset:4% 8% 22%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(120,150,255,.18), transparent 70%);
  filter:blur(46px); z-index:-1;
}
.hero-art img{
  display:block; width:100%; height:auto; border-radius:16px;
  -webkit-mask-image:linear-gradient(to bottom, #000 52%, rgba(0,0,0,.45) 80%, transparent 100%);
  mask-image:linear-gradient(to bottom, #000 52%, rgba(0,0,0,.45) 80%, transparent 100%);
}
/* 首屏标题专用：得意黑（OFL，可商用），只子集了标题这几十个字，12 KB */
@font-face{
  font-family:"Smiley Sans";
  src:url("fonts/SmileySans-title.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
  /* 得意黑的拉丁字面自带倾斜，「Luna」会歪；只让方块字走这个字体，
     ASCII 交回 --sans 保持直立 */
  unicode-range:U+0100-10FFFF;
}
.hero-title{
  /* 右侧留给截图后，字号按左列宽收一档，标题仍是两行 */
  margin-top:30px; font-size:clamp(40px,4.3vw,72px); line-height:1.08;
  letter-spacing:-.04em; font-weight:600;
}
/* 中文标题才换字体：得意黑的拉丁字面偏宽，英文标题用会多撑出两行 */
html:not([lang="en"]) .hero-title{
  font-family:"Smiley Sans",var(--sans);
  /* 得意黑只有一个字重，写 600 会让浏览器合成假粗，字形糊 */
  font-weight:400;
  font-size:clamp(42px,4.6vw,78px); line-height:1.14;
  /* -.04em 是给拉丁字母调的，方块字收这么多会挤成一坨 */
  letter-spacing:-.005em;
  /* palt：把「，」这类中文标点自带的半格空压掉 */
  font-feature-settings:"palt" 1;
}
.hero-title .gold{font-weight:inherit; color:var(--accent)}
.hero-title .word{display:inline-block; overflow:hidden; vertical-align:top}
.hero-title .word > span{display:inline-block; will-change:transform}
.hero-lead{
  /* 宽到能让首句一行放下（约 700px），窄屏自然回落折行 */
  margin-top:34px; max-width:740px; font-size:18px; line-height:1.75; color:var(--t2);
}
.hero-cta{display:inline-flex; flex-direction:column; gap:19px; margin-top:44px; align-items:flex-start}
.text-link{font-size:12.5px; text-decoration:none; color:var(--t3); align-self:center}
.text-link:hover{color:var(--accent)}

/* 第一屏底部的向下提示：一道流光顺着竖线落下，箭头轻轻点头 */
.scroll-cue{
  position:absolute; left:50%; bottom:46px; margin-left:-14px;
  width:28px; display:flex; flex-direction:column; align-items:center; gap:9px;
  color:var(--t3); transition:color .25s ease;
}
.scroll-cue:hover{color:var(--accent)}
.scroll-cue:focus-visible{outline:2px solid var(--accent); outline-offset:6px; border-radius:var(--r-sm)}
.cue-line{
  position:relative; width:1px; height:56px; border-radius:1px;
  background:linear-gradient(to bottom, transparent, var(--line-strong) 30%, var(--line-strong) 70%, transparent);
  overflow:hidden;
}
.cue-line i{
  position:absolute; left:-.5px; top:0; width:2px; height:24px; border-radius:2px;
  background:linear-gradient(to bottom, transparent, var(--accent), transparent);
  animation:cue-flow 2.3s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes cue-flow{
  0%  {transform:translateY(-26px); opacity:0}
  22% {opacity:1}
  78% {opacity:1}
  100%{transform:translateY(56px);  opacity:0}
}
.scroll-cue svg{animation:cue-bob 2.3s ease-in-out infinite}
@keyframes cue-bob{
  0%,100%{transform:translateY(0);   opacity:.45}
  55%    {transform:translateY(4px); opacity:1}
}

/* ───────────────────────── 特色功能屏 ───────────────────────── */

.feature.alt{background:var(--bg-2)}

.feat-split{
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  grid-template-rows:auto 1fr;
  /* 条目数不同（5/3/5），居中对齐让短列表也不留半屏空白 */
  gap:0 84px; align-items:center;
}
/* 标题跟着左列走，右侧图示跨两行，两边上下沿对齐 */
.feat-split > .section-head{grid-column:1; grid-row:1; max-width:none; margin-bottom:56px}
.feat-split > .section-head .section-sub{max-width:none}
.feat-split > .feat-list{grid-column:1; grid-row:2}
.feat-split > .feat-stage-wrap{grid-column:2; grid-row:1 / span 2}

/* 条目 —— 一行标题，选中后展开标签 */
.feat-item{position:relative; border-top:1px solid var(--line)}
.feat-item:first-child{border-top:none}
.feat-item::after{
  content:""; position:absolute; left:0; top:-1px; width:0; height:1px;
  background:var(--accent);
  transition:width .55s cubic-bezier(.2,.8,.2,1);
}
.feat-item.active::after{width:54px}
.feat-item:first-child::after{display:none} /* 首条没有上边框，悬空一道短线会很怪 */

.feat-item > button{
  display:flex; align-items:baseline; gap:18px; width:100%;
  padding:22px 0; background:none; border:0; cursor:pointer;
  font:inherit; text-align:left; color:inherit;
  transition:padding-left .4s cubic-bezier(.2,.8,.2,1);
}
.feat-item.active > button{padding-left:16px}
.feat-item > button:focus-visible{outline:2px solid var(--accent); outline-offset:4px; border-radius:var(--r-xs)}

.feat-num{
  flex:none; font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  color:var(--t4); transition:color .35s ease;
}
.feat-item.active .feat-num{color:var(--accent)}
.feat-title{
  font-size:21px; font-weight:500; line-height:1.4; letter-spacing:-.015em;
  color:var(--t3); transition:color .35s ease;
}
.feat-item:hover .feat-title{color:var(--t2)}
.feat-item.active .feat-title{color:var(--t1)}

/* 标签抽屉 —— 0fr/1fr 只改这一个盒子的高度，不牵动别的布局 */
.feat-acc{
  display:grid; grid-template-rows:0fr; overflow:hidden;
  transition:grid-template-rows .5s cubic-bezier(.2,.8,.2,1);
}
.feat-item.active .feat-acc{grid-template-rows:1fr}
.feat-acc > .feat-tags{min-height:0}

.feat-tags{
  display:flex; flex-wrap:wrap; gap:8px;
  padding:0 0 24px 34px;
  opacity:0; transition:opacity .4s ease .06s;
}
.feat-item.active .feat-tags{opacity:1}
.feat-tags li{
  font-family:var(--mono); font-size:11px; letter-spacing:.03em; color:var(--t2);
  padding:5px 11px; border:1px solid var(--line); border-radius:var(--r-pill);
  background:rgba(255,255,255,.035);
}

/* 图示台 */
.feat-stage-wrap{position:relative}
.feat-stage{position:sticky; top:calc(var(--nav-h) + 40px)}
.stage-frame{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lift); overflow:hidden;
}
.stage-shots{position:relative; aspect-ratio:16/10; background:var(--ink); overflow:hidden}
.shot{
  position:absolute; inset:0; margin:0; opacity:0; visibility:hidden;
  display:flex; align-items:center; justify-content:center;
}
.shot.on{opacity:1; visibility:visible}
.shot img{width:100%; height:100%; object-fit:contain}
/* 重点框：截图已按 16:10 出图，百分比坐标直接落在画面上；外圈大投影把其余部分压暗 */
.shot .hl{
  position:absolute; left:var(--hx); top:var(--hy); width:var(--hw); height:var(--hh);
  border:2px solid var(--accent); border-radius:8px; pointer-events:none;
  box-shadow:0 0 0 9999px rgba(5,6,12,.4), 0 0 26px rgba(240,196,119,.3);
}
/* 坐标由 i18n.js 写成 inline style；没跑 JS 就不显示，免得留个空框 */
.shot .hl{display:none}
.shot[style] .hl{display:block}
/* 引线标注：viewBox 和成品图同为 1600×1000，坐标一一对应 */
.shot .pins{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
.shot .pins path{fill:none; stroke:var(--accent); stroke-width:2}
.shot .pins circle{fill:var(--accent)}
.shot .pins text{
  fill:var(--accent); font-size:27px; font-weight:600;
  paint-order:stroke; stroke:rgba(5,6,12,.72); stroke-width:6; stroke-linejoin:round;
}
html[lang="en"] .only-zh,
html:not([lang="en"]) .only-en{display:none}

.stage-dots{display:flex; gap:7px; justify-content:center; margin-top:22px}
.stage-dots b{
  width:22px; height:3px; border-radius:2px; background:rgba(255,255,255,.14);
  transition:background .35s ease, width .35s cubic-bezier(.2,.8,.2,1);
}
.stage-dots b.on{background:var(--accent); width:34px}

/* ───────────────────────── 结尾 ───────────────────────── */

.outro{border-top:1px solid var(--line)}
.outro-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:100px; margin-top:70px}
.col-label{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--t3); padding-bottom:18px; border-bottom:1px solid var(--line);
}
.contact-item,.work{
  display:flex; gap:16px; align-items:flex-start;
  padding:24px 0; border-bottom:1px solid var(--line);
  transition:padding-left .35s cubic-bezier(.2,.8,.2,1);
}
.contact-item:hover{padding-left:14px}
.work:not(.work-off):hover{padding-left:14px}
.work-off{color:var(--t3); cursor:default}
.work-off:hover{padding-left:4px}
.contact-ico,.work-ico{
  flex:none; width:34px; height:34px; border-radius:var(--r-sm);
  display:grid; place-items:center; color:var(--t3);
  border:1px solid var(--line); background:rgba(255,255,255,.035);
  transition:color .28s ease, border-color .28s ease, background .28s ease;
}
.contact-item:hover .contact-ico,
.work:not(.work-off):hover .work-ico{color:var(--accent); border-color:var(--accent); background:var(--accent-wash)}
.contact-item b,.work b{font-size:16.5px; font-weight:600; letter-spacing:-.01em}
.contact-item p,.work p{margin-top:5px; font-size:14px; line-height:1.65; color:var(--t2)}
.work-off p{color:var(--t4)}

/* ───────────────────────── 页脚 ───────────────────────── */

.foot{border-top:1px solid var(--line); padding:34px 0}
.foot-inner{
  display:flex; justify-content:space-between; align-items:center; gap:24px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; color:var(--t3);
}
.foot-mid{text-transform:uppercase}
.foot-links{display:flex; gap:22px}
.foot-links a:hover{color:var(--accent)}

/* ───────────────────────── 进场初态 ───────────────────────── */
/* .js-anim 由 <head> 内联脚本加上：无 JS / reduced-motion 时这段整段不生效 */
.js-anim .hero-left > *,
.js-anim .scroll-cue,
.js-anim .section-head > *,
.js-anim .feat-item,
.js-anim .feat-stage-wrap,
.js-anim .col-label,
.js-anim .contact-item,
.js-anim .work{opacity:0}

/* ───────────────────────── 窄屏 ───────────────────────── */

@media (max-width:1180px){
  :root{--pad:32px}
  .hero-inner{grid-template-columns:1fr; gap:40px; align-items:start}
  .hero-art{justify-self:center; width:min(100%, 460px)}
  .feat-split{grid-template-columns:1fr; grid-template-rows:none; gap:40px}
  /* 单列时回到自动排布，靠 order 决定顺序：标题、图示台、列表 */
  .feat-split > .section-head,
  .feat-split > .feat-list,
  .feat-split > .feat-stage-wrap{grid-column:auto; grid-row:auto}
  .feat-split > .section-head{order:-2; margin-bottom:0}
  /* 单列时图示台贴在顶栏下方，列表在它下面滚过去 */
  .feat-stage{position:static}
  .feat-stage-wrap{
    order:-1; position:sticky; top:var(--nav-h); z-index:3;
    background:var(--bg); padding:18px 0 20px;
  }
  .feature.alt .feat-stage-wrap{background:#0e1220}
  /* 收窄，给下面的文字留出至少一屏三分之一 */
  .stage-frame{max-width:600px; margin:0 auto; box-shadow:var(--shadow-pop)}
  .stage-dots{margin-top:14px}
  .feat-list{max-width:760px; margin:0 auto; width:100%}
  .outro-grid{grid-template-columns:1fr; gap:56px}
  .nav-links{display:none}
  section{padding:92px 0}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  /* 星星停下来要停在「亮着」的那一帧，不然整片天会黑掉 */
  .sky-twinkle i{animation:none !important; opacity:var(--o); transform:none}
  .sky-meteors{display:none}
  .cue-line i{animation:none !important; opacity:.7; transform:translateY(16px)}
  .scroll-cue svg{animation:none !important; opacity:.8}
}
@media (prefers-reduced-transparency:reduce){
  .nav.scrolled{background:var(--bg); backdrop-filter:none; -webkit-backdrop-filter:none}
  .feature.alt{background:#0e1220}
}
@media (prefers-contrast:more){
  :root{--line:rgba(233,238,255,.2); --line-strong:rgba(233,238,255,.38); --t2:#c6cbdb; --t3:#9aa1b6}
}