/* ==========================================================================
   三奇实验室 SANQI LAB — 官网主样式
   设计母题：暗房。近黑底 + 安全灯色偏 + 胶片颗粒 + 齿孔 + Zone System 灰阶
   交互参考：awwwards / wantedfornothing.com
             （大排版、悬停模糊浮现、三态光标、左下角「主题色」→ 这里换成选胶卷）
   零外部依赖：不引用任何 CDN / 网络字体
   ========================================================================== */

/* ---------- 1. 设计令牌 ---------- */
:root{
  --bg:       #08080a;
  --bg-soft:  #0d0d10;
  --bg-card:  #111114;
  --fg:       #f4f3ef;
  --fg-dim:   rgba(244,243,239,.54);
  --fg-dim2:  rgba(244,243,239,.32);
  --line:     rgba(244,243,239,.12);
  --line-2:   rgba(244,243,239,.06);

  /* 胶卷色：由左下角「胶卷」切换，默认 CineStill 800T 的钨丝红晕 */
  --accent:   #ff3b2f;
  --accent-d: color-mix(in srgb, var(--accent) 13%, transparent);
  --accent-g: color-mix(in srgb, var(--accent) 40%, transparent);

  --pad:      clamp(22px, 5vw, 92px);
  --maxw:     1500px;

  --ease:     cubic-bezier(.22,.61,.24,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --ff-disp: "Archivo Black","Helvetica Neue",Helvetica,"Arial Black",
             "PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --ff-body: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
             "PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --ff-mono: ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,
             "Liberation Mono",monospace;
}

/* ---------- 2. 重置 ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:96px;
}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--ff-body);
  font-size:16px;line-height:1.65;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol,dl,dd{margin:0;padding:0;list-style:none}
h1,h2,h3,p{margin:0}
::selection{background:var(--accent);color:#0a0a0c}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#0b0b0e}
::-webkit-scrollbar-thumb{background:#26262e;border-radius:8px;border:2px solid #0b0b0e}
::-webkit-scrollbar-thumb:hover{background:var(--accent)}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

.skip{
  position:fixed;top:-100px;left:16px;z-index:999;
  background:var(--accent);color:#0a0a0c;padding:10px 16px;border-radius:6px;
  font-weight:700;transition:top .2s var(--ease)
}
.skip:focus{top:16px}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}

/* ---------- 3. 胶片颗粒 ---------- */
/* 性能：这里原来用 inset:-150%（元素面积 = 视口 ×16）再叠无限位移动画，
   而 mix-blend-mode:overlay 会让整块区域每一帧都重新混合 —— 首屏掉帧的主因。
   现在只覆盖视口本身、且完全静止；动起来的颗粒交给 hero 的 canvas。*/
.grain{
  position:fixed;inset:0;z-index:900;pointer-events:none;
  opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px
}

/* ---------- 4. 安全灯色偏（跟着胶卷走） ---------- */
/* 性能：去掉了 mix-blend-mode:screen —— 底色本身接近纯黑，
   screen 与普通 alpha 叠黑几乎等价，但少一层全屏混合就少一次整屏复合。*/
.grade{
  position:fixed;inset:0;z-index:3;pointer-events:none;
  opacity:.5;
  background:
    radial-gradient(85% 55% at 84% 4%, color-mix(in srgb,var(--accent) 30%,transparent), transparent 64%),
    radial-gradient(120% 90% at 50% 118%, color-mix(in srgb,var(--accent) 14%,transparent), transparent 62%);
  transition:background .9s var(--ease)
}

/* ---------- 5. 齿孔（整站两侧的胶片边） ---------- */
.perf{
  position:fixed;top:0;bottom:0;width:28px;z-index:600;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='24'%3E%3Crect x='6' y='5' width='16' height='14' rx='3.5' fill='%23f4f3ef' fill-opacity='.12'/%3E%3C/svg%3E");
  background-size:28px 24px;background-repeat:repeat-y;
  border-inline:1px solid var(--line-2);opacity:.75
}
.perf--l{left:0}
.perf--r{right:0}
@media (max-width:1100px){.perf{display:none}}

/* ---------- 6. 自定义光标（三态） ---------- */
.cur,.cur-dot{
  position:fixed;top:0;left:0;z-index:950;pointer-events:none;border-radius:50%;opacity:0;
  transition:opacity .3s var(--ease),width .32s var(--ease),height .32s var(--ease),
             background .3s var(--ease),border-color .3s var(--ease);
  will-change:transform
}
.cur{
  width:34px;height:34px;margin:-17px 0 0 -17px;
  border:1px solid rgba(244,243,239,.55);display:grid;place-items:center
}
.cur-dot{
  width:5px;height:5px;margin:-2.5px 0 0 -2.5px;background:var(--accent);
  transition:opacity .3s var(--ease),transform .12s linear,background .3s var(--ease)
}
body.has-cur .cur,body.has-cur .cur-dot{opacity:1}
body.has-cur,body.has-cur a,body.has-cur button,body.has-cur input,
body.has-cur textarea,body.has-cur .row{cursor:none}
body.cur-hover .cur{
  width:78px;height:78px;margin:-39px 0 0 -39px;
  background:var(--accent);border-color:var(--accent)
}
body.cur-hover .cur-dot{opacity:0}
body.cur-hover .cur__txt{color:#0a0a0c}
/* 用独立的 scale 属性，而不是 transform:scale —— 因为 transform 每帧被 JS 写成
   translate3d(...) 会把它整个覆盖掉（原来的按下缩放其实一直没生效）。 */
.cur{scale:1;transition:scale .16s var(--ease)}
body.cur-down .cur{scale:.7}
.cur__txt{
  font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;color:transparent;
  transition:color .25s var(--ease);white-space:nowrap
}

/* ---------- 7. 进场（相纸在显影盘里浮出来） ---------- */
.intro{display:none;position:fixed;inset:0;z-index:990;background:#000;grid-template-rows:1fr auto}
html.js .intro{display:grid}
html.js.intro-done .intro{display:none}
.intro__grid{
  position:absolute;inset:0;opacity:.55;
  background-image:linear-gradient(var(--line-2) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse at 50% 45%,#000 18%,transparent 76%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 45%,#000 18%,transparent 76%)
}
.intro__mid{position:relative;align-self:center;justify-self:center;
  display:flex;flex-direction:column;align-items:center;gap:26px;
  animation:develop 1.5s var(--ease-out) both}
@keyframes develop{
  from{opacity:0;filter:brightness(.35) contrast(1.6)}
  to{opacity:1;filter:none}
}
.intro__logo{display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--accent)}
.intro__logo svg{fill:currentColor}
.intro__zh{font-size:19px;font-weight:700;letter-spacing:.42em;color:var(--fg);text-indent:.42em}
.intro__en{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.34em;color:var(--fg-dim2)}
.intro__meta{display:flex;align-items:baseline;gap:18px}
.intro__tag{font-family:var(--ff-mono);font-size:11px;letter-spacing:.16em;color:var(--fg-dim2)}
.intro__num{font-family:var(--ff-mono);font-size:13px;color:var(--fg-dim);font-variant-numeric:tabular-nums}
.intro__num b{color:var(--accent);font-weight:700}
.intro__num i{font-style:normal;font-size:9px;margin-left:1px}
.intro__bars{display:flex;height:5px}
.intro__bars i{flex:1;transform-origin:left;transform:scaleX(0);
  animation:barFill .6s var(--ease-out) forwards}
.intro__bars i:nth-child(1){animation-delay:.05s;background:#141416}
.intro__bars i:nth-child(2){animation-delay:.15s;background:#242427}
.intro__bars i:nth-child(3){animation-delay:.25s;background:color-mix(in srgb,var(--accent) 45%,#000)}
.intro__bars i:nth-child(4){animation-delay:.35s;background:color-mix(in srgb,var(--accent) 78%,#000)}
.intro__bars i:nth-child(5){animation-delay:.45s;background:var(--accent)}
@keyframes barFill{to{transform:scaleX(1)}}
html.intro-out .intro{transform:translateY(-100%);transition:transform .95s var(--ease-out)}

/* ---------- 8. 顶栏 ---------- */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:800;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:18px var(--pad);
  transition:transform .5s var(--ease),background .4s var(--ease),
             backdrop-filter .4s var(--ease),padding .4s var(--ease)
}
.hdr.is-stuck{
  padding-block:12px;background:rgba(8,8,10,.74);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  border-bottom:1px solid var(--line-2)
}
.hdr.is-hidden{transform:translateY(-102%)}

.brand{display:flex;align-items:center;gap:11px}
.brand__mark{color:var(--accent);display:grid;place-items:center;transition:transform .6s var(--ease)}
.brand__mark svg{fill:currentColor}
.brand:hover .brand__mark{transform:rotate(-90deg)}
.brand__txt{display:flex;flex-direction:column;line-height:1.1}
.brand__txt b{font-size:14px;font-weight:700;letter-spacing:.06em}
.brand__txt i{font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.2em;
  color:var(--fg-dim2);font-style:normal}

.nav{display:flex;gap:30px}
.nav a{font-size:13.5px;color:var(--fg-dim);position:relative;padding:4px 0;
  transition:color .3s var(--ease)}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:right;transition:transform .42s var(--ease-out)
}
.nav a:hover{color:var(--fg)}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}

.hdr__right{display:flex;align-items:center;gap:14px}
.lang{
  display:flex;align-items:center;gap:7px;font-family:var(--ff-mono);
  font-size:12px;letter-spacing:.08em;border:1px solid var(--line);
  border-radius:100px;padding:6px 13px;transition:border-color .3s var(--ease)
}
.lang:hover{border-color:rgba(244,243,239,.3)}
.lang span{color:var(--fg-dim2)}
.lang button{color:var(--fg-dim2);transition:color .25s var(--ease);font-weight:600}
.lang button[aria-pressed="true"]{color:var(--accent)}
.lang button:hover{color:var(--fg)}

.burger{display:none;width:34px;height:34px;position:relative}
.burger i{position:absolute;left:6px;right:6px;height:1.5px;background:var(--fg);
  border-radius:2px;transition:transform .4s var(--ease),opacity .3s var(--ease)}
.burger i:first-child{top:13px}
.burger i:last-child{bottom:13px}
.burger[aria-expanded="true"] i:first-child{transform:translateY(5.5px) rotate(45deg)}
.burger[aria-expanded="true"] i:last-child{transform:translateY(-5.5px) rotate(-45deg)}

.drawer{
  position:fixed;inset:0;z-index:790;background:rgba(8,8,10,.97);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  padding:110px var(--pad) 40px;animation:drawerIn .45s var(--ease-out)
}
.drawer[hidden]{display:none}
@keyframes drawerIn{from{opacity:0}to{opacity:1}}
.drawer nav{display:flex;flex-direction:column}
.drawer a{
  font-family:var(--ff-disp);font-size:clamp(27px,7.6vw,42px);line-height:1.35;
  border-bottom:1px solid var(--line-2);padding:14px 0;
  animation:drawerLi .55s var(--ease-out) backwards
}
.drawer a:nth-child(1){animation-delay:.06s}
.drawer a:nth-child(2){animation-delay:.12s}
.drawer a:nth-child(3){animation-delay:.18s}
.drawer a:nth-child(4){animation-delay:.24s}
.drawer a:nth-child(5){animation-delay:.3s}
@keyframes drawerLi{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* ---------- 9. 首屏 ---------- */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:flex-end;
  padding:150px var(--pad) 96px;overflow:hidden;isolation:isolate
}
.hero__canvas{
  position:absolute;inset:0;width:100%;height:100%;z-index:-2;
  opacity:0;transition:opacity 1.8s var(--ease)
}
html.hero-on .hero__canvas{opacity:1}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,8,10,.88) 0%,rgba(8,8,10,.36) 32%,
             rgba(8,8,10,.5) 64%,var(--bg) 100%)
}
/* 性能：这里原来也挂了 mix-blend-mode:overlay，而它正压在每帧重绘的 canvas 上，
   等于每帧多一次整块混合。改成纯低透明度条纹，观感几乎一样。*/
.hero__scan{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px)
}
.hero__frame{
  position:absolute;inset:96px var(--pad) 40px;z-index:1;pointer-events:none;
  border:1px solid var(--line-2);border-radius:2px
}
.hero__cross{position:absolute;width:11px;height:11px}
.hero__cross::before,.hero__cross::after{content:"";position:absolute;background:var(--fg-dim2)}
.hero__cross::before{left:50%;top:0;width:1px;height:100%;transform:translateX(-50%)}
.hero__cross::after{top:50%;left:0;height:1px;width:100%;transform:translateY(-50%)}
.hero__cross--tl{top:-6px;left:-6px}
.hero__cross--tr{top:-6px;right:-6px}
.hero__cross--bl{bottom:-6px;left:-6px}
.hero__cross--br{bottom:-6px;right:-6px}
.hero__frame-no{
  position:absolute;right:14px;bottom:-8px;background:var(--bg);padding:0 9px;
  font-family:var(--ff-mono);font-size:10px;letter-spacing:.22em;color:var(--fg-dim2)
}

/* 首屏上半部的「标本读数」：占住原本空着的主视觉位。
   切胶卷时 STOCK 会实时跟着变，所以色也要跟着走。 */
.hero__specimen{
  position:absolute;right:var(--pad);top:134px;z-index:2;
  padding-left:15px;border-left:1px solid var(--accent);
  font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.16em;
  transition:border-color .9s var(--ease)
}
.hero__specimen-hd{
  display:block;color:var(--accent);margin-bottom:13px;
  transition:color .9s var(--ease)
}
.hero__specimen-hd b{color:var(--fg-dim2);font-weight:400}
.hero__specimen dl{display:grid;grid-template-columns:auto auto;gap:6px 20px}
/* display:contents 让 dt/dd 直接成为网格项 —— 否则包住它们的 div 会各占一格，
   变成「STOCK | FORMAT」同一行、「值 | 值」下一行。 */
.hero__specimen dl>div{display:contents}
.hero__specimen dt{color:var(--fg-dim2)}
.hero__specimen dd{color:var(--fg);text-align:right}

.hero__inner{position:relative;z-index:2;max-width:1080px}
.hero__kicker{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--ff-mono);
  font-size:11.5px;letter-spacing:.18em;color:var(--fg-dim);text-transform:uppercase;
  border:1px solid var(--line);border-radius:100px;padding:7px 16px;margin-bottom:30px;
  /* 性能：backdrop-filter 会让浏览器每帧回读它背后的像素做模糊，
     而它正悬在逐帧重绘的 canvas 上 —— 去掉，改用略深一点的纯色底。 */
  background:rgba(10,10,13,.72)
}
.dot{width:6px;height:6px;border-radius:50%;background:var(--accent);
  animation:pulse 2.6s infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)}
  70%{box-shadow:0 0 0 9px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}

.hero__title{
  font-family:var(--ff-disp);font-weight:900;
  font-size:clamp(48px,11.2vw,176px);line-height:.9;letter-spacing:-.035em;margin-bottom:26px
}
.ln{display:block;overflow:hidden;padding-bottom:.06em}
.ln__in{
  display:block;transform:translateY(105%);
  animation:lnUp 1.2s var(--ease-out) forwards;
  animation-delay:calc(var(--i) * .1s + .2s)
}
html:not(.intro-out) .ln__in{animation-play-state:paused}
@keyframes lnUp{to{transform:none}}
.ln--out .ln__in{font-size:.29em;letter-spacing:.18em;color:var(--fg-dim);font-weight:700}
html[data-lang="en"] .hero__title .ln:first-child .ln__in{font-size:.66em;letter-spacing:-.02em}
html[data-lang="en"] .ln--out .ln__in{letter-spacing:.3em;font-weight:600}

.hero__lead{max-width:540px;font-size:clamp(14.5px,1.35vw,17.5px);
  color:var(--fg-dim);line-height:1.78;margin-bottom:38px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px}

.hero__side{position:absolute;right:var(--pad);bottom:112px;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:14px}
.hero__side-txt{writing-mode:vertical-rl;font-family:var(--ff-mono);
  font-size:10.5px;letter-spacing:.26em;color:var(--fg-dim2)}
.hero__side-line{width:1px;height:64px;background:linear-gradient(var(--line),transparent)}

.hero__scroll{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:2;
  display:flex;align-items:center;gap:9px;font-family:var(--ff-mono);
  font-size:10px;letter-spacing:.2em;color:var(--fg-dim2);transition:color .3s var(--ease)
}
.hero__scroll:hover{color:var(--accent)}
.hero__scroll-ring{width:14px;height:22px;border:1px solid currentColor;
  border-radius:8px;position:relative}
.hero__scroll-ring::after{
  content:"";position:absolute;left:50%;top:4px;width:2px;height:4px;border-radius:2px;
  background:currentColor;transform:translateX(-50%);animation:wheel 1.8s var(--ease) infinite
}
@keyframes wheel{
  0%{opacity:0;transform:translate(-50%,0)}
  40%{opacity:1}
  100%{opacity:0;transform:translate(-50%,9px)}
}

/* ---------- 10. 按钮 ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 30px;border-radius:100px;border:1px solid var(--line);
  font-size:14px;font-weight:600;letter-spacing:.02em;overflow:hidden;isolation:isolate;
  transition:color .4s var(--ease),border-color .4s var(--ease);will-change:transform
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--accent);
  transform:translateY(101%);border-radius:inherit;transition:transform .5s var(--ease-out)
}
.btn:hover{color:#0a0a0c;border-color:var(--accent)}
.btn:hover::before{transform:translateY(0)}
.btn--fill{background:var(--accent);color:#0a0a0c;border-color:var(--accent)}
.btn--fill::before{background:var(--fg)}
.btn--fill:hover{border-color:var(--fg)}
.btn--wide{width:100%;margin-top:6px}

/* ---------- 11. 走马灯 ---------- */
.marquee{
  display:flex;overflow:hidden;border-block:1px solid var(--line-2);
  padding:20px 0;background:var(--bg-soft);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)
}
.marquee__track{
  display:flex;align-items:center;gap:26px;flex:none;padding-right:26px;
  animation:slide 42s linear infinite;
  font-family:var(--ff-disp);font-size:clamp(17px,2.6vw,34px);
  letter-spacing:-.01em;white-space:nowrap;color:var(--fg-dim2)
}
.marquee__track em{color:var(--accent);font-style:normal}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-100%)}}

/* ---------- 12. Zone System 灰阶条 ---------- */
.zone{
  display:flex;align-items:center;gap:18px;padding:16px var(--pad);
  border-bottom:1px solid var(--line-2);background:var(--bg)
}
.zone__lbl{font-family:var(--ff-mono);font-size:10px;letter-spacing:.24em;color:var(--fg-dim2)}
.zone__bar{
  flex:1;height:12px;border:1px solid var(--line-2);
  background:linear-gradient(90deg,
    #08080a 0 9.09%, #1b1b1c 9.09% 18.18%, #2c2c2e 18.18% 27.27%,
    #3f3f41 27.27% 36.36%, #545456 36.36% 45.45%, #6c6c6e 45.45% 54.54%,
    #868688 54.54% 63.63%, #a1a1a3 63.63% 72.72%, #b9b9bb 72.72% 81.81%,
    #d3d3d4 81.81% 90.9%,  #f4f3ef 90.9% 100%)
}
.zone__scale{
  display:flex;justify-content:space-between;flex:1;max-width:340px;
  font-family:var(--ff-mono);font-size:9px;color:var(--fg-dim2)
}
@media (max-width:720px){.zone__scale{display:none}}

/* ---------- 13. 通用区块 ---------- */
.sec{position:relative;padding:clamp(84px,11vw,168px) 0}
.sec__hd{margin-bottom:clamp(44px,6vw,84px);max-width:900px}
.sec__num{display:inline-block;font-family:var(--ff-mono);font-size:11.5px;
  letter-spacing:.2em;color:var(--accent);margin-bottom:18px}
.sec__num::before{content:"(";color:var(--fg-dim2)}
.sec__num::after{content:")";color:var(--fg-dim2)}
.sec__ttl{font-family:var(--ff-disp);font-weight:900;font-size:clamp(34px,6.6vw,86px);
  line-height:1;letter-spacing:-.03em;margin-bottom:16px}
.sec__sub{color:var(--fg-dim);font-size:clamp(14px,1.3vw,17px);max-width:560px}

[data-reveal]{
  opacity:0;transform:translateY(30px);
  transition:opacity .95s var(--ease-out) var(--d,0s),transform .95s var(--ease-out) var(--d,0s)
}
[data-reveal].in{opacity:1;transform:none}

/* ---------- 14. 能力行（悬停浮现视觉） ---------- */
.rows{border-top:1px solid var(--line)}
.row{
  position:relative;display:grid;
  grid-template-columns:64px minmax(0,1.05fr) minmax(0,1.5fr) 40px;
  align-items:center;gap:clamp(14px,3vw,44px);
  padding:clamp(24px,3.3vw,42px) 0;border-bottom:1px solid var(--line);
  transition:padding-left .55s var(--ease-out),border-color .4s var(--ease)
}
.row::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,var(--accent-d),transparent 62%);
  opacity:0;transition:opacity .5s var(--ease)
}
.row:hover{padding-left:clamp(10px,2vw,30px);border-color:transparent}
.row:hover::before{opacity:1}
.row__idx{font-family:var(--ff-mono);font-size:11.5px;letter-spacing:.14em;
  color:var(--fg-dim2);transition:color .4s var(--ease)}
.row:hover .row__idx{color:var(--accent)}
.row__ttl{font-family:var(--ff-disp);font-weight:900;font-size:clamp(24px,3.7vw,52px);
  line-height:1.05;letter-spacing:-.025em;transition:transform .55s var(--ease-out)}
.row:hover .row__ttl{transform:translateX(4px)}
.row__txt{color:var(--fg-dim);font-size:clamp(13.5px,1.15vw,15.5px);max-width:54ch}
.row__arrow{font-size:20px;color:var(--fg-dim2);justify-self:end;
  transition:transform .5s var(--ease-out),color .4s var(--ease)}
.row:hover .row__arrow{transform:translate(5px,-5px);color:var(--accent)}
.rows__more{margin-top:30px;color:var(--fg-dim2);font-size:14px;max-width:62ch}

.peek{
  position:fixed;top:0;left:0;z-index:700;width:330px;height:236px;
  pointer-events:none;border-radius:3px;overflow:hidden;
  opacity:0;filter:blur(22px) saturate(.6);transform:translate(-50%,-50%) scale(.86);
  transition:opacity .55s var(--ease),filter .6s var(--ease),transform .65s var(--ease-out);
  border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.66)
}
.peek.on{opacity:1;filter:blur(0) saturate(1);transform:translate(-50%,-50%) scale(1)}
.peek canvas{width:100%;height:100%}
.peek__label{
  position:absolute;left:11px;bottom:9px;font-family:var(--ff-mono);font-size:9.5px;
  letter-spacing:.18em;color:rgba(255,255,255,.86);text-transform:uppercase;
  text-shadow:0 1px 6px rgba(0,0,0,.95)
}

/* ---------- 15. 关于 ---------- */
.sec--about{background:var(--bg-soft);border-block:1px solid var(--line-2)}
.about__grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:clamp(36px,6vw,100px);align-items:start}
.about__big{font-size:clamp(21px,2.6vw,36px);line-height:1.34;font-weight:600;
  letter-spacing:-.015em;margin-bottom:28px}
.about__big::first-letter{color:var(--accent)}
.about__body p+p{margin-top:18px}
.about__body p:not(.about__big){color:var(--fg-dim);max-width:66ch}

.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line)}
.stats__i{background:var(--bg-soft);padding:26px 22px;transition:background .4s var(--ease)}
.stats__i:hover{background:var(--bg-card)}
.stats dt{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.16em;
  color:var(--fg-dim2);text-transform:uppercase;margin-bottom:12px}
.stats dd{font-family:var(--ff-disp);font-weight:900;font-size:clamp(32px,4.2vw,52px);
  line-height:1;letter-spacing:-.03em}
.stats dd b{font-weight:900}
.cnt{font-variant-numeric:tabular-nums}

/* ---------- 16. 产品卡 ---------- */
/* 340px 下限是为了在 1440 宽下稳定排成 3 列（6 张卡 = 3+3）；
   用 285px 会排成 4 列，第二行只剩 2 张，右边空一大块。 */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  gap:clamp(14px,1.4vw,20px)}
.card{
  position:relative;overflow:hidden;isolation:isolate;background:var(--bg-card);
  border:1px solid var(--line);border-radius:3px;padding:clamp(24px,2.4vw,36px);
  display:flex;flex-direction:column;min-height:340px;
  transition:transform .6s var(--ease-out),border-color .45s var(--ease)
}
.card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  transform:scaleX(0);transition:transform .75s var(--ease-out)
}
.card::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:radial-gradient(420px 260px at var(--mx,50%) var(--my,0%),var(--accent-d),transparent 70%);
  transition:opacity .5s var(--ease)
}
.card:hover{transform:translateY(-7px);border-color:rgba(244,243,239,.24)}
.card:hover::before{transform:scaleX(1)}
.card:hover::after{opacity:1}
.card__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:auto}
.card__no{font-family:var(--ff-mono);font-size:11px;letter-spacing:.16em;color:var(--fg-dim2)}
.card__dot{width:7px;height:7px;border-radius:50%;background:var(--fg-dim2);
  transition:background .4s var(--ease),box-shadow .4s var(--ease)}
.card:hover .card__dot{background:var(--accent);box-shadow:0 0 12px var(--accent)}
.card h3{font-family:var(--ff-disp);font-weight:900;font-size:clamp(20px,2vw,27px);
  line-height:1.18;letter-spacing:-.02em;margin:34px 0 12px}
.card p{color:var(--fg-dim);font-size:14.5px;margin-bottom:22px}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto}
.tags li{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.06em;
  color:var(--fg-dim);border:1px solid var(--line);border-radius:100px;padding:5px 11px;
  transition:border-color .35s var(--ease),color .35s var(--ease)}
.card:hover .tags li{border-color:rgba(244,243,239,.24);color:var(--fg)}
.card--more{border-style:dashed;background:transparent}
.card--more h3{color:var(--fg-dim)}

/* ---------- 17. 下载 ---------- */
.wxhint{
  display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline;
  border:1px solid var(--accent-g);background:var(--accent-d);border-radius:3px;
  padding:14px 18px;margin-bottom:24px;font-size:14px
}
.wxhint b{color:var(--accent)}
.wxhint span{color:var(--fg-dim)}
.dls{border-top:1px solid var(--line)}
.dl{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:clamp(14px,2.4vw,28px);padding:22px 0;
  border-bottom:1px solid var(--line);transition:padding-left .5s var(--ease-out)}
.dl:hover{padding-left:14px}
.dl__ico{
  font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.1em;font-weight:700;
  border:1px solid var(--line);border-radius:4px;padding:7px 9px;color:var(--fg-dim2);
  min-width:48px;text-align:center;transition:border-color .4s var(--ease),color .4s var(--ease)
}
.dl:hover .dl__ico{border-color:var(--accent);color:var(--accent)}
.dl__meta{display:flex;flex-direction:column;gap:3px}
.dl__meta b{font-size:16px;font-weight:600}
.dl__meta i{font-style:normal;font-size:13px;color:var(--fg-dim2)}
.dl__soon{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.1em;
  color:var(--fg-dim2);border:1px dashed var(--line);border-radius:100px;
  padding:6px 13px;white-space:nowrap}

/* ---------- 18. 联系 ---------- */
.sec--contact{background:var(--bg-soft);border-top:1px solid var(--line-2)}
.ct{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  gap:clamp(36px,5vw,80px);align-items:start}
.ct__info{display:flex;flex-direction:column}
.ct__i{display:flex;flex-direction:column;gap:4px;padding:16px 0;
  border-bottom:1px solid var(--line-2)}
.ct__i span{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.16em;
  color:var(--fg-dim2);text-transform:uppercase}
.ct__i b{font-size:16px;font-weight:600}
.ct__qr{display:flex;gap:16px;align-items:center;margin-top:26px}
.ct__qrbox{
  width:104px;height:104px;flex:none;border:1px dashed var(--line);border-radius:5px;
  display:grid;place-items:center;text-align:center;font-family:var(--ff-mono);
  font-size:9.5px;letter-spacing:.1em;color:var(--fg-dim2);padding:8px;line-height:1.5
}
.ct__qr p{font-size:13px;color:var(--fg-dim2);max-width:22ch}

.ct__form{display:flex;flex-direction:column;gap:16px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.chip{font-size:12.5px;color:var(--fg-dim);border:1px solid var(--line);
  border-radius:100px;padding:7px 15px;transition:all .35s var(--ease)}
.chip:hover,.chip.on{border-color:var(--accent);color:var(--accent);background:var(--accent-d)}
.fld{display:flex;flex-direction:column;gap:7px}
.fld span{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.16em;
  color:var(--fg-dim2);text-transform:uppercase}
.fld input,.fld textarea{
  background:var(--bg);border:1px solid var(--line);border-radius:3px;
  padding:13px 15px;font-size:14.5px;resize:vertical;
  transition:border-color .3s var(--ease),background .3s var(--ease)
}
.fld input:hover,.fld textarea:hover{border-color:rgba(244,243,239,.24)}
.fld input:focus,.fld textarea:focus{outline:none;border-color:var(--accent);background:var(--bg-card)}
.fld input::placeholder,.fld textarea::placeholder{color:var(--fg-dim2)}
.ct__note{font-size:13px;color:var(--accent);min-height:1.2em}
.ct__note.bad{color:#ff6b6b}

/* ---------- 19. 胶卷切换 ---------- */
.stocks{
  position:fixed;left:calc(var(--pad) * .5);bottom:22px;z-index:820;
  display:flex;align-items:center;gap:9px;padding:8px 15px 8px 13px;
  border-radius:100px;background:rgba(13,13,16,.94);border:1px solid var(--line);
  opacity:.5;transition:opacity .4s var(--ease)
}
.stocks:hover,.stocks:focus-within{opacity:1}
.stocks__lbl{font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.2em;
  color:var(--fg-dim2);margin-right:2px}
.stocks button{width:19px;height:19px;border-radius:50%;display:grid;place-items:center}
.stocks button i{display:block;width:13px;height:13px;border-radius:50%;
  background:var(--c);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.stocks button:hover i{transform:scale(1.3)}
.stocks button[aria-pressed="true"] i{
  transform:scale(1.3);box-shadow:0 0 0 2px rgba(8,8,10,.92),0 0 0 3.5px var(--c)
}

/* ---------- 20. 页脚 ---------- */
.ftr{border-top:1px solid var(--line-2);padding:44px 0 34px;background:var(--bg)}
.ftr__in{display:flex;flex-wrap:wrap;gap:14px 30px;align-items:center;justify-content:space-between}
.ftr__brand{display:flex;align-items:center;gap:9px;color:var(--accent)}
.ftr__mark svg{fill:currentColor}
.ftr__brand b{font-size:14px;font-weight:700;letter-spacing:.06em;color:var(--fg)}
.ftr__brand i{font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.2em;
  color:var(--fg-dim2);font-style:normal}
.ftr__copy,.ftr__icp{font-size:12.5px;color:var(--fg-dim2)}
.ftr__icp{display:flex;gap:18px;align-items:center}
.ftr__ica{color:inherit;text-decoration:none;transition:color .3s var(--ease)}
.ftr__ica:hover,.ftr__ica:focus-visible{color:var(--accent)}
.ftr__top{color:var(--fg-dim);transition:color .3s var(--ease)}
.ftr__top:hover{color:var(--accent)}

/* ---------- 21. Toast ---------- */
.toast{
  position:fixed;left:50%;bottom:34px;z-index:960;
  transform:translate(-50%,140%);opacity:0;
  background:var(--fg);color:#0a0a0c;font-size:13.5px;font-weight:600;
  padding:12px 22px;border-radius:100px;white-space:nowrap;max-width:90vw;
  text-overflow:ellipsis;overflow:hidden;
  transition:transform .55s var(--ease-out),opacity .45s var(--ease);
  box-shadow:0 18px 50px rgba(0,0,0,.55)
}
.toast.on{transform:translate(-50%,0);opacity:1}

/* ---------- 22. 断点 ---------- */
@media (max-width:1080px){
  .nav{display:none}
  .burger{display:block}
  .about__grid,.ct{grid-template-columns:1fr}
  .hero__side{display:none}
  .hero__specimen{display:none}
  .row{grid-template-columns:44px minmax(0,1fr) 30px;row-gap:10px}
  .row__txt{grid-column:2 / -1;max-width:none}
}
@media (max-width:720px){
  .hero{padding-top:126px;padding-bottom:82px;min-height:92svh}
  .hero__frame{inset:82px 14px 26px}
  .hero__frame-no{display:none}
  .hero__scroll{display:none}
  .stats{grid-template-columns:1fr}
  .peek{display:none}
  .stocks{left:50%;transform:translateX(-50%);bottom:14px}
  .marquee{padding:14px 0}
  .zone{padding-inline:16px}
  .ftr__in{flex-direction:column;align-items:flex-start;gap:12px}
}
@media (max-width:420px){
  .brand__txt{display:none}
  .lang{padding:5px 11px}
  .stocks__lbl{display:none}
}

/* ---------- 23. 无障碍 / 降级 ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important
  }
  [data-reveal]{opacity:1;transform:none}
  .ln__in{transform:none}
  .grain{animation:none}
  .peek{display:none}
  .cur,.cur-dot{display:none}
  body.has-cur,body.has-cur a,body.has-cur button{cursor:auto}
}
@media (hover:none){
  .cur,.cur-dot{display:none}
  body.has-cur,body.has-cur a,body.has-cur button{cursor:auto}
  .peek{display:none}
}
@media print{
  .hdr,.stocks,.grain,.grade,.perf,.cur,.cur-dot,.intro,.peek,.marquee{display:none}
  body{background:#fff;color:#000}
}