/* ==========================================================================
   Apple 式克制版首页（2026-10-28）
   规则：黑底、大字、大量留白、细线分隔、单一强调色、动效只做淡入。
   不使用：粒子、光斑、线框球、跑马灯、光标特效。
   ========================================================================== */

:root {
  --a-bg: #000;
  --a-surface: #0b0b0d;
  --a-ink: #f5f5f7;
  --a-mute: #86868b;
  --a-line: rgba(255, 255, 255, .12);
  --a-blue: #2997ff;
  --a-blue-deep: #0071e3;
}

body.page-home main { background: var(--a-bg); color: var(--a-ink); }
body.page-home main ::selection { background: rgba(41, 151, 255, .35); }

.a-wrap { width: min(1020px, calc(100% - 48px)); margin: 0 auto; }
.a-wrap.wide { width: min(1180px, calc(100% - 48px)); }

/* 导航：细、矮、克制 */
.a-nav { position: sticky; top: 0; z-index: 40; height: 52px; display: flex; align-items: center;
  background: rgba(0, 0, 0, .72); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, .08); }
.a-nav .a-wrap { display: flex; align-items: center; gap: 30px; height: 52px; }
.a-logo { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; letter-spacing: .01em; color: var(--a-ink); }
.a-logo .m { display: grid; grid-template-columns: repeat(3, 5px); gap: 2px; }
.a-logo .m i { width: 5px; height: 5px; border-radius: 1.2px; background: rgba(245, 245, 247, .32); }
.a-logo .m i.on { background: var(--a-blue); }
.a-nav nav { display: flex; gap: 26px; }
.a-nav nav a { font-size: 13px; color: rgba(245, 245, 247, .72); letter-spacing: .01em; transition: color .2s; }
.a-nav nav a:hover { color: #fff; }
.a-nav .sp { flex: 1; }
.a-pill { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 16px; border-radius: 980px;
  font-size: 12.5px; font-weight: 500; letter-spacing: .01em; background: var(--a-blue); color: #fff; border: 0;
  transition: background .2s; }
.a-pill:hover { background: #47a9ff; }
.a-pill.line { background: transparent; color: var(--a-ink); border: 1px solid rgba(245, 245, 247, .3); }
.a-pill.line:hover { border-color: rgba(245, 245, 247, .6); }

/* 首屏 */
.a-hero { position: relative; padding: clamp(96px, 16vh, 190px) 0 clamp(80px, 12vh, 150px); text-align: center; overflow: hidden; }
.a-hero::before { content: ""; position: absolute; left: 50%; top: -12%; width: 1100px; height: 700px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(41, 151, 255, .16), rgba(41, 151, 255, 0) 70%); pointer-events: none; }
.a-hero > * { position: relative; }
.a-eyebrow { font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--a-mute); }
.a-h1 { margin: 22px auto 0; max-width: 15em; font-size: clamp(48px, 7vw, 96px); line-height: 1.06; letter-spacing: -.035em; font-weight: 700; }
.a-h1 small { display: block; font-size: .46em; line-height: 1.3; letter-spacing: -.01em; font-weight: 500; color: var(--a-mute); margin-top: 18px; }
.a-lead { margin: 30px auto 0; max-width: 660px; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.66; color: var(--a-mute); font-weight: 400; }
.a-actions { margin-top: 40px; display: flex; gap: 22px; justify-content: center; align-items: center; flex-wrap: wrap; }
.a-link { font-size: 17px; color: var(--a-blue); display: inline-flex; align-items: center; gap: 4px; }
.a-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.a-scroll { margin-top: 84px; font-size: 11px; letter-spacing: .3em; color: #4a4a4e; }

/* 分区标题 */
.a-sec { padding: clamp(110px, 15vh, 180px) 0; }
.a-sec + .a-sec { border-top: 1px solid var(--a-line); }
.a-sec-head { max-width: 820px; }
.a-kicker { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--a-mute); }
.a-h2 { margin: 18px 0 0; font-size: clamp(32px, 4.2vw, 56px); line-height: 1.12; letter-spacing: -.03em; font-weight: 700; }
.a-sub { margin: 20px 0 0; font-size: 18px; line-height: 1.66; color: var(--a-mute); max-width: 720px; }

/* 六件事：列表式，细线分隔 */
.a-list { margin-top: 64px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 72px; }
.a-item { padding: 30px 0; border-top: 1px solid var(--a-line); }
.a-item h3 { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -.01em; }
.a-item p { margin: 10px 0 0; font-size: 15px; line-height: 1.7; color: var(--a-mute); }

/* 三段：大号图文交替，不用卡片 */
.a-seg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center;
  padding: 74px 0; border-top: 1px solid var(--a-line); }
.a-seg:first-of-type { border-top: 0; padding-top: 0; }
.a-seg .txt { max-width: 440px; }
.a-seg .k { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--a-mute); }
.a-seg h3 { margin: 14px 0 0; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.22; letter-spacing: -.025em; font-weight: 700; }
.a-seg p { margin: 16px 0 0; font-size: 16px; line-height: 1.72; color: var(--a-mute); }
.a-seg ul { margin: 22px 0 0; padding: 0; list-style: none; }
.a-seg li { padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 15px; color: #d2d2d7; }
.a-seg .art { justify-self: end; width: 100%; }

/* 抽象图形：柔光球体（静态，不做花活） */
.a-orb { aspect-ratio: 1 / 1; border-radius: 50%; max-width: 340px; margin: 0 auto;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .95), rgba(255, 255, 255, .12) 18%, rgba(255, 255, 255, 0) 34%),
    radial-gradient(circle at 68% 78%, rgba(41, 151, 255, .55), rgba(41, 151, 255, 0) 52%),
    radial-gradient(circle at 50% 50%, #1b1b21, #050506 74%);
  box-shadow: inset 0 0 80px rgba(41, 151, 255, .18), 0 60px 120px -40px rgba(41, 151, 255, .28); }
.a-orb.small { max-width: 240px; }

/* 数字 */
.a-nums { margin-top: 70px; display: grid; grid-template-columns: repeat(4, 1fr); }
.a-num { padding: 0 30px; border-left: 1px solid var(--a-line); }
.a-num:first-child { border-left: 0; padding-left: 0; }
.a-num b { display: block; font-size: clamp(40px, 5vw, 64px); font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.a-num span { display: block; margin-top: 14px; font-size: 13.5px; line-height: 1.6; color: var(--a-mute); }

/* 案例 */
.a-cases { margin-top: 64px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px; }
.a-case { border-top: 1px solid var(--a-line); padding-top: 24px; }
.a-case .t { font-size: 12px; color: var(--a-mute); letter-spacing: .04em; }
.a-case h4 { margin: 12px 0 10px; font-size: 19px; font-weight: 600; line-height: 1.4; letter-spacing: -.01em; }
.a-case p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--a-mute); }

/* CTA */
.a-cta { padding: clamp(120px, 16vh, 200px) 0; text-align: center; border-top: 1px solid var(--a-line); }
.a-cta h2 { margin: 0 auto; max-width: 15em; font-size: clamp(34px, 5vw, 68px); line-height: 1.1; letter-spacing: -.035em; font-weight: 700; }
.a-cta p { margin: 24px auto 0; font-size: 18px; color: var(--a-mute); max-width: 620px; line-height: 1.66; }

/* 页脚 */
.a-foot { background: #000; border-top: 1px solid rgba(255, 255, 255, .1); padding: 56px 0 34px; font-size: 12.5px; color: var(--a-mute); }
.a-foot .cols { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 36px; }
.a-foot h5 { margin: 0 0 12px; font-size: 12px; color: #d2d2d7; font-weight: 600; }
.a-foot a { display: block; padding: 5px 0; color: var(--a-mute); }
.a-foot a:hover { color: #fff; }
.a-foot .bottom { margin-top: 44px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex; gap: 18px; justify-content: space-between; flex-wrap: wrap; color: #6e6e73; }

/* 动效：只做淡入上浮 */
.a-reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s cubic-bezier(.2, .6, .2, 1), transform .7s cubic-bezier(.2, .6, .2, 1); }
.a-reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .a-reveal { opacity: 1; transform: none; transition: none; } }

@media (max-width: 900px) {
  .a-nav nav { display: none; }
  .a-list, .a-seg, .a-cases { grid-template-columns: 1fr; column-gap: 0; row-gap: 0; }
  .a-seg { gap: 32px; }
  .a-seg .art { justify-self: center; }
  .a-nums { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .a-num { border-left: 0; padding: 0; }
  .a-foot .cols { grid-template-columns: 1fr 1fr; }
}

/* 首页专属：把全站头尾压成 Apple 式，黑底 */
body.page-home { background: #000; }
body.page-home::before, body.page-home::after { display: none; }
body.page-home .site-header { height: 52px; background: rgba(0,0,0,.72) !important; backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(255,255,255,.08) !important; }
body.page-home .site-header .wrap { height: 52px; }
body.page-home .site-header .nav-link { font-size: 13px; color: rgba(245,245,247,.72); }
body.page-home .site-header .btn { height: 32px; padding: 0 16px; border-radius: 980px; font-size: 12.5px; }
body.page-home .site-footer { background: #000 !important; border-top: 1px solid rgba(255,255,255,.1); }

/* 无 JS 时内容必须可见 */
.a-reveal { opacity: 1; transform: none; }
.js .a-reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1); }
.js .a-reveal.in { opacity: 1; transform: none; }

/* ==========================================================================
   形态叙事：点阵随滚动变形（闸门 → 工作台 → 落地）
   ========================================================================== */
.m-sec { position: relative; height: 320vh; background: #000; }
.m-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
#m-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.m-copy { position: relative; z-index: 2; width: min(1020px, calc(100% - 48px)); margin: 0 auto;
  height: 100%; display: flex; flex-direction: column; justify-content: center; pointer-events: none; }
.m-kicker { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: #86868b; }
.m-panels { position: relative; min-height: 300px; margin-top: 26px; }
.m-panel { position: absolute; inset: 0; opacity: 0; transform: translateY(16px); transition: opacity .6s, transform .6s; }
.m-panel.on { opacity: 1; transform: none; }
.m-panel h3 { margin: 0; font-size: clamp(44px, 6vw, 84px); line-height: 1.02; letter-spacing: -.04em; font-weight: 700; color: #f5f5f7; }
.m-panel p { margin: 18px 0 0; font-size: 18px; line-height: 1.6; color: #86868b; max-width: 460px; }
.m-panel ul { margin: 22px 0 0; padding: 0; list-style: none; max-width: 460px; }
.m-panel li { padding: 10px 0; border-top: 1px solid rgba(255,255,255,.1); font-size: 14px; color: #d2d2d7; }
.m-rail { position: absolute; left: 50%; bottom: 46px; transform: translateX(-50%); display: flex; gap: 10px; z-index: 2; }
.m-rail i { width: 44px; height: 2px; background: rgba(255,255,255,.16); display: block; overflow: hidden; }
.m-rail i.on::after { content: ""; display: block; height: 100%; background: #2997ff; }
@media (max-width: 900px) { .m-sec { height: 240vh; } .m-panel h3 { font-size: 44px; } }

.m-noanim .m-panel { transition: none; }

/* 首屏九点入场（40px 格 / 12px 间距，严格按标志比例 10:3:2.5 缩放） */
.a-mark { position: relative; width: calc(40px * 3 + 12px * 2); height: calc(40px * 3 + 12px * 2);
  margin: 0 auto 46px; }
.a-mark i { position: absolute; width: 40px; height: 40px; border-radius: 10px; background: #f5f5f7;
  will-change: transform, opacity; }
.a-mark i:nth-child(1) { left: 0; top: 0; }
.a-mark i:nth-child(2) { left: 52px; top: 0; }
.a-mark i:nth-child(3) { left: 104px; top: 0; }
.a-mark i:nth-child(4) { left: 0; top: 52px; }
.a-mark i:nth-child(5) { left: 52px; top: 52px; }
.a-mark i:nth-child(6) { left: 104px; top: 52px; }
.a-mark i:nth-child(7) { left: 0; top: 104px; }
.a-mark i:nth-child(8) { left: 52px; top: 104px; }
.a-mark i:nth-child(9) { left: 104px; top: 104px; }
@media (max-width: 640px) { .a-mark { transform: scale(.8); margin-bottom: 34px; } }