/* @font-face 直接内联，不再用 @import 'assets/fonts/fonts.css'：
   @import 必须先把 style.css 下载完、解析到这一行，才会去请求那份 0.4KB 的
   小文件，再等它解析出字体地址——首屏文字平白多一个来回。
   内联之后字体地址在第一次解析 style.css 时就拿到了。 */
@font-face{font-family:'Noto Sans SC';src:url('assets/fonts/noto-sans-sc.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}

/* 中文正文断行优化：pretty 只在末尾避免「孤字行」，不改变段落填充宽度；不支持的浏览器直接忽略，属渐进增强。*/
p,li,figcaption,dd,td,th{text-wrap:pretty}

:root{color-scheme:dark;--bg:#07090c;--text:#eef1f7;--muted:#b0bdcf;--blue:#a6caff;--line:#adcaeb33;--line-strong:#a6caff59;--page-width:1248px;--gutter:clamp(24px,6vw,96px);--track:max(var(--gutter),calc((100vw - var(--page-width)) / 2));--bleed:max(var(--gutter),calc((100vw - 100%) / 2));--rule:linear-gradient(90deg,transparent,var(--line) 16%,var(--line) 84%,transparent);--rule-v:linear-gradient(180deg,transparent,var(--line) 16%,var(--line) 84%,transparent)}

/* --track = 内容区边缘到视口边缘的距离，也就是「页边距」的实际宽度。
   页头一直用 max(--gutter, (100% - --page-width)/2) 这个式子来贴边，
   这里只是给它一个名字，好让各处光晕能锚在同一条线上。

   为什么光晕峰值要落在 --track 的【一半】处（而不是内容区边缘）：
   峰值若压在内容区边缘上，半个峰会探进正文列。往外再让出半个 --track，
   峰值就落在页边距的中部，正文列只吃衰减、吃不到峰——
   而且这个关系与视口宽度无关（见 DESIGN.md 的实测表）。

   为什么用 100vw 而不是 100%：100% 在这里随元素盒子变，--track 会出现
   两套值。100vw 在任何元素里都一致，代价是多算一个滚动条宽（约 15px），
   分摊到左右各 7.5px，落在视口外，无害。 */

/* --bleed = 从「盒子边缘」到「视口边缘」的距离，也就是伪元素要往外扩多少才能铺满。
   这里的 100% 反而【必须】用百分比：它要跟随使用它的那个盒子变。
   四个板块（.business/.about/.contact/.approach）都是
   width:min(100% - 2×--gutter, 1248px) + margin-inline:auto 的居中窄盒，
   盒子一窄，外扩量就得跟着变大——只有百分比能自动跟上。
   （.business::before 的氛围图把这个式子写在了行内，没改成 --bleed，避免动已验证的代码。）

   与 --track 的关系：盒宽顶到 1248px 时两者相等；盒子更窄时 --bleed 比 --track 大半个滚动条宽。
   所以 100vw 与 100% 的差被吸收在这个「自适应」里，光晕始终刚好铺到视口边。 */

*{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:40px;scrollbar-color:#40516a var(--bg)}

body{position:relative;margin:0;background:var(--bg);color:var(--text);font-family:'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;font-size:1rem;line-height:1.8;-webkit-font-smoothing:antialiased}

a{color:inherit;text-decoration:none;text-underline-offset:.4em}

::selection{background:#315684;color:#fff}

:focus-visible{outline:2px solid var(--blue);outline-offset:6px}

[tabindex="-1"].no-ring:focus-visible{outline:none}

/* 跳过链接：键盘用户按下的第一个 Tab 落点，让他们能越过导航直达内容。
   默认用 transform 移出视口上沿——比 left:-9999px 干净，不参与布局，也不会撑出横向可滚动区域。
   造型沿用站内 .entry 的胶囊语言（100px 圆角、同一描边色、底部径向光晕），尺寸收小以免喧宾夺主。
   底色必须不透明：聚焦时它会盖在页头与导航之上，半透明会让身后的文字透出来，糊成一团。*/
.skip-link{position:fixed;top:14px;left:14px;z-index:60;display:inline-flex;align-items:center;min-height:44px;padding:9px 22px;border:1px solid #9ab4d68c;border-radius:100px;font-size:12.5px;letter-spacing:.1em;text-indent:.1em;color:var(--text);background-color:#0b1119;background-image:radial-gradient(70% 130% at 50% 130%,#a6caff1f,transparent 72%);box-shadow:0 18px 44px -26px #a6caff8c,0 2px 18px #04070bb3;transform:translateY(calc(-100% - 20px));transition:transform .22s ease}
.skip-link:focus{transform:translateY(0);border-color:#d3e3f8}

/* <main> 是整页容器，给它描边会横跨全宽、糊成一个大矩形；落点本身已经给出位置反馈，这里不描边。*/
main:focus-visible{outline:none}

h1,h2,h3,p{overflow-wrap:break-word}

/* Shared navigation and content boundaries. */
header{position:absolute;z-index:3;inset:0 0 auto;width:min(100%,calc(var(--page-width) + 2 * var(--gutter)));margin:auto;padding:28px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:24px}

.brand{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap;font-size:28px;font-weight:600;letter-spacing:.07em}

.brand span{font-size:12px;font-weight:400;margin-left:18px;letter-spacing:.16em;color:#96abc7}

header nav{display:flex;align-items:center;gap:clamp(22px,3vw,42px);font-size:14px;color:#d6e3f5}

header nav a{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap;transition:color .2s}

header nav a:hover{color:#fff}

/* 导航「当前栏目」的视觉标识。
   详情页（geo / development）导航里的「业务介绍」是语义上的当前项（HTML 里已有 aria-current="true"），
   但此前视觉上毫无标识，用户在页头看不出自己站在哪一栏。这里补的只是视觉，语义不动。

   为什么是下划线，而不是圆点或仅提亮文字：
   站内本来就是细线语汇（各处分隔线都是 1px 淡蓝），而且 service-visuals.css 里
   `.product-switch button[aria-pressed="true"]` 已经用 border-bottom-color:#a6caff
   定义了「这一项是当前项」。沿用同一套语言，厚度也取 2px 与之对齐——
   1px 会淹没在站内大量 1px 分隔线里，读者要重新学一种记法。

   为什么是伪元素，而不是直接给链接挂 border-bottom：
   链接是 inline-flex + min-height:44px，且全站 box-sizing:border-box——
   挂 2px 边框会吃掉内容区、把文字顶高 1px，线本身还会落在 44px 盒底、离字 12px 远。
   绝对定位的 ::after 不参与布局，才能既把线贴到字下，又让导航的盒子一个像素都不动。
   （这也是选择器只写在 [aria-current] 上的原因：不需要为「留出边框位」去改其余链接。）

   落点 calc(50% + .88em)：50% 是链接盒的竖向中线，也就是文字的中线；.88em 随字号缩放。
   实测墨迹下缘距盒顶——14px→29.4px、13px→28.3px、11px→27.1px，三档字号下
   「字到线」的间距都落在 4.6~5.1px；离 44px 盒底尚有 15px 余量，不会贴边。
   用固定的 px 值则会在 11px 那档松到约 7px，看着像一条漂浮的线。
   文字颜色保持不动：悬停仍然对四个链接一视同仁地提亮，标识与交互反馈各司其职。 */
header nav a[aria-current],footer nav a[aria-current]{position:relative}

header nav a[aria-current]::after,footer nav a[aria-current]::after{content:'';position:absolute;left:0;right:0;top:calc(50% + .88em);height:2px;background:var(--blue)}

/* 首页：页头吸顶 + 滚动联动（逻辑在 nav-spy.js）。
   上面那条下划线只解决「标什么」，这里解决「看不看得见」。

   详情页的页头在文档流顶部，导航项是静态的「你在哪一栏」，首屏就能看到标识。
   首页不行——首屏是 100svh 的 hero，页头滚过就整块消失，
   静态标识等于没有；而且首页要标的是「滚到第几栏了」，只能由滚动位置推出来。
   所以首页页头改为 fixed，并在离开 hero 后浮现一层底衬，让导航压在内容之上仍然可读。

   为什么 fixed 不会挤动布局：页头本来就是 absolute，同样脱离文档流，
   改成 fixed 只是把参照系从文档换成视口——盒子位置、文档流、首屏构图全都不动。

   页头为什么要铺满视口宽度：底衬要精确等于页头高度，就必须做成页头自身盒子的子层
   （见下条）。而原规则 width:min(100%,页面宽+2×gutter) + margin:auto 的盒子是居中的、
   窄于视口的，底衬跟着它就会在左右各留一道缝。
   内边距改用 max(gutter,(100% - 页面宽)/2) 后与原写法在两种区间下都等价：
   视口够宽时内容左右边距都是 (视口-页面宽)/2，不够宽时都是 gutter。
   内容位置因此一个像素都不动——用包住「曦钧」与导航的盒子实测证明。

   底衬为什么是实色、不是毛玻璃：试过 backdrop-filter:blur() 的半透明方案，两档都取了极值——
   alpha .72 时，被页头压住的正文标题会以模糊灰雾的形式透在导航文字下面，
   导航自己虽然清晰，层次却被那团雾搅乱了；alpha 提到 .85 以上可读性才回来，
   可那时它与实色的差别已经看不出来，等于白做。
   深色站点上「透明」本来收益就小，这里没有可用的中间地带。
   所以「正文在页头之下要么被完全遮住、要么完全清晰」这个性质必须保住。

   层次改由「表面微抬高」表达：底衬用 #0b1119，比页面底色 #07090c 亮一档。
   这个色站内已有（跳过链接的底色），不是新引入的——它本来就是这一级的「抬起表面」。
   深色界面里表达层叠靠的是表面差、不是投影（背景已接近纯黑，黑色阴影根本看不见），
   亮一档既让页头明确浮在内容之上，又不像玻璃那样把字糊出来。
   边界仍交给底部那条 1px 细线，它直接复用站内的 --rule——
   两端渐隐的形态与各处分隔线同源，所以这条边界不会显得比别处更重。

   底衬的显隐由滚动位移连续驱动（--veil 由 nav-spy.js 写入），不是「越过就亮」的开关：
   二元的开关会让页头在临界点上凭空闪出一条横带，连续渐显则把过渡放回用户的滚动动作里。
   160px 的过渡区间约等于 1/5 屏——足够长到看得见渐变，又不至于拖过半屏才铺满；
   而这 160px 里页头下方是 hero 的尾部与 business 的开场留白，本来就没有正文，
   中途那点半透明也就不会透出任何字。
   也正因位移本身已经连续，这里不再需要 transition：再加一层缓动只会让底衬跟不上手指。

   底衬用 inset:0 而不是给个固定高度：这样它永远等于页头高度。
   页头将来在任何断点改了内边距或字号，细线都仍压在页头下沿，不会悄悄错位。

   z-index:-1 让底衬落在页头自己的层叠上下文内、导航文字之下、页面内容之上
   （页头 position+z-index 自成一个层叠上下文，所以 -1 不会跑到内容背后去）；
   pointer-events:none 是必须的——它横跨整个视口宽度，否则会吃掉下方内容的点击。

   锚点跳转要避开吸顶的页头：默认 scroll-padding-top 只有 40px，跳过去标题会被压在页头下面。
   132px = 页头 106.4px + 约 26px 呼吸位；700px 以内页头高 90px，留 42px，同样合适。 */
html.home-page{scroll-padding-top:132px}

html.home-page header{position:fixed;width:100%;padding-inline:max(var(--gutter),calc((100% - var(--page-width)) / 2))}

html.home-page header::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:var(--veil,0);background-color:#0b1119;background-image:var(--rule);background-repeat:no-repeat;background-position:left bottom;background-size:100% 1px}

/* Galaxy and central star remain the defining visual. */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;isolation:isolate;overflow:hidden}

.space{position:absolute;inset:0;z-index:-2;background:url('assets/galaxy.webp') center 43%/cover no-repeat;opacity:.94}

/* A light cone descends from the central star onto the headline; the frame edges fall into shadow. */
.hero::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(46% 40% at 50% var(--star-y,41%),#cfe6ff2b,transparent 64%),radial-gradient(124% 92% at 50% 118%,#0b1220d9,transparent 72%),linear-gradient(180deg,#0000002e,transparent 30%)}

.hero::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,transparent 52%,#04070bcc 84%,var(--bg))}

.hero-copy{position:relative;text-align:center;padding:210px 24px 110px}

.hero-kicker{margin:0 0 61px;font-size:.75rem;font-weight:400;letter-spacing:.44em;text-indent:.44em;color:#96abc7}



h1{display:block;font-size:clamp(2.75rem,min(7.6vw,11.6vh),6rem);font-weight:500;letter-spacing:.075em;line-height:1.14;margin:0 0 34px}

h1 span{display:block}

h1 span+span,.thin{font-weight:300;color:#d6e3f5}

.nb{white-space:nowrap}

.hero-description{margin:0 0 46px;font-size:1.0625rem;line-height:1.9;color:#d6e3f5;letter-spacing:.09em;text-wrap:balance}

.entry{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:12px 38px;border:1px solid #9ab4d68c;border-radius:100px;font-size:1rem;letter-spacing:.1em;text-indent:.1em;background-image:radial-gradient(70% 130% at 50% 130%,#a6caff1f,transparent 72%);box-shadow:0 18px 44px -26px #a6caff8c;transition:background-color .3s,border-color .3s,box-shadow .3s,transform .3s}

.entry:hover{background-color:#accbfa14;border-color:#d3e3f8;box-shadow:0 22px 52px -24px #a6caffb3;transform:translateY(-2px)}

.business,.about,.contact{width:min(calc(100% - 2 * var(--gutter)),var(--page-width));margin-inline:auto}

/* 裁切挂在【视口级】的 main 上，不挂在板块上。两个理由都是实测出来的：
   1) overflow:clip 两轴同裁。挂在板块上，伪元素"往上出血"的负 top 会被一起剪掉。
   2) overflow-clip-margin 只认纯 length：写 %、calc()、max(...) 一律整条丢弃。
   为什么不是 html——html{overflow-x:clip} 会让根元素被判「不可滚」，滚动职责移交
   body，裁切随之失效（页面仍能横向滚 8px）。main 是普通块级盒，行为确定。
   （scripts/check-glow.js 的 clip 断言盯着这一条。） */
main{position:relative;overflow-x:clip}

/* ── 光的架构（v59 重构）────────────────────────────────────────────
   旧做法：四个板块各挂一个伪元素，每段 3 个 radial-gradient（左右外档 + 中档），
   锚点 calc(var(--track)/2)，强度 0.12 / 0.06 / 0.12。三个结构性缺陷：
   1) 外档强度是中间档的两倍，峰值又落在距视口边 48px 处 → 横向剖面成 U 形，
      两侧比中间亮 1.3–1.7 倍（实测）。眼睛读作「屏幕两边各糊了一块亮斑」= 刺眼。
   2) 图层高只有 320–560px，占屏高 28%–72% → 亮一下就走，其余全暗（上亮下死）。
   3) 十几个手调渐变各自带锚点%/mask%/alpha，改一处坏一处——横向断层 → 纵向硬边
      → 两侧刺眼，连续三轮都在补这个洞。那不是"参数没调好"，是结构不对。

   新做法两层，职责分开：

   L1 底光轴（body::before）—— 负责「连续」。
      全宽、极弱（alpha ≤ 0.055）、沿整页纵向起伏，从首屏之下一直到底。
      它保证页面【任何一处都不会掉回纯底色】，所以板块之间不再有明暗台阶。
      强度极低且没有横向边界，本身不可能刺眼。

   L2 每屏焦点（各板块伪元素用同一条配方）—— 负责「有可看的景」。
      板块只提供 --lt-* 参数，不再各自画三瓣：
        radial-gradient(椭圆 at <横向锚> <纵向锚>) → 横向锚【远离视口边】，结构上杜绝靠边峰值
        （收窄 + 提亮 = 真正的「焦点」；铺太开就成了「洗」，反而更平）
        纵向锚落在屏内容重心，纵向覆盖过半屏 → 杜绝「上亮下死」
        height 用 calc(100% + 2×bleed) → 随屏高自适应，移动端不用另写断点
      纵向 mask 的 P% 与峰锚点同值对齐（沿用打磨轮九的结论）。

   为什么 L2 敢把上下压到 0、却不会再出现板块间的暗缝：L1 在下面兜着。
   L2 归零处恰好落进 L1 的平层，合成后仍然连续。
   ──────────────────────────────────────────────────────────────── */
/* L1 挂在 body 上、不挂 main——main 在页脚之前就结束了，光被切断就是一个硬边
   （实测不收敛时 y=3959 处 Δ=-4.86，正是 scan-edges.py 抓到的那一处）。
   挂 body 则一路覆盖到页脚，页面内部不再有任何「被切断的边界」。

   上端：首屏末尾 .hero::after 是「渐隐到不透明底色」，所以 100svh 处是纯底色；
         L1 从 0 起步、用 3%（约 95px）爬升，就不在首屏分界上留台阶（实测 Δ=-0.11）。
   下端：body 的底就是页面的底，光保持很低的强度收尾即可，不需要人为归零。 */
body::before{content:'';position:absolute;left:0;right:0;top:100svh;bottom:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,#a6caff00,#a6caff08 3%,#a6caff0c 14%,#a6caff09 32%,#a6caff0d 55%,#a6caff0a 72%,#a6caff0f 88%,#a6caff0a);
  mask-image:linear-gradient(90deg,#000000bf,#000 22%,#000 78%,#000000bf)}

/* A · 全站稀疏星野 + B · 细颗粒噪点（body::after，与 L1 同层堆叠 z-index:-1）。
   为什么：首屏有星野颗粒感，下方各屏是平滑纯底色——hero→内文存在一个
   「有星空 → 无星空」的质感断层，滚过首屏像从宇宙走回了塑料板。
   星野：四层平铺 radial-gradient，tile 尺寸互质（620/480/760/360）肉眼读不出重复；
   合成密度约 1 颗 / 6 万 px²（1440×900 视口约 20 颗，≈首屏的零头），alpha ≤ 0.44（v73 用户反馈星点太淡，整体调亮约 1.5×），
   静态无动画——不进 reduced-motion 门控、不占动画预算。
   噪点：feTurbulence 胶片颗粒 180px 平铺，rect opacity 0.05（灰度化后极淡），
   消除大面积纯色的「塑料感」。两件事共用一个伪元素，只多一层平铺背景。
   挂 body 不挂 main 的理由同 L1（页脚之内不能有被切断的边界）。
   hero 有 isolation:isolate + .space(z-index:-2)，自家星系图盖住本层，互不打架。 */
body::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(1.3px 1.3px at 141px 88px,#e6f0fc59,transparent),
    radial-gradient(1.3px 1.3px at 418px 293px,#cfe0f547,transparent),
    radial-gradient(1.3px 1.3px at 87px 389px,#bcd4ff40,transparent),
    radial-gradient(2px 2px at 296px 154px,#eef4fd70,transparent),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.05'/%3E%3C/svg%3E");
  background-size:620px 620px,480px 480px,760px 760px,360px 360px,180px 180px}

/* L2 配方本体：四段共用。板块只给参数，不再各自画三瓣。 */
.business::after,.about::before,.approach::before,.contact::before,.scope-section::before{
  content:'';position:absolute;left:calc(-1 * var(--bleed));right:calc(-1 * var(--bleed));
  top:calc(-1 * var(--lt-bleed));height:calc(100% + var(--lt-bleed) + var(--lt-bleed-b,var(--lt-bleed)));z-index:-1;pointer-events:none;
  background:radial-gradient(var(--lt-w) var(--lt-hh) at var(--lt-x) var(--lt-y),var(--lt-c),transparent 74%);
  mask-image:linear-gradient(transparent,#000 var(--lt-in),#000 var(--lt-out),transparent)}

/* 下侧出血可以单独收：上侧为「接住上一屏」而外扩，末屏下侧却没有任何东西要接。
   实测 contact 下侧出血 210px 时，图层底边落到 4192、页脚只到 4094，
   于是页面底部凭空多出 98px 的可滚动空白（scan 无硬边，但 scrollHeight 对不上 body 高度）。
   收到 0：光在末屏内部就已经被 --lt-out 渐隐到透明，页脚交给 L1 底光轴兜底。

   ⚠️ 必须写 0px 不能写 0：无单位 0 是 <number>，进到配方的
   calc(100% + <length> + <number>) 里整个算式非法 → height 回退 auto → 空伪元素 0 高
   → 这一屏的光【整层消失】而 CSS 不报任何错。
   实测：写 0 时 .contact::before 的 computed height = 0px（同屏 business 971 / about 889 /
   approach 1747 都正常）。写 0px 后 = 985.7px，底边正好落在页脚上沿，scrollHeight 不变。
   这个 bug 的隐蔽之处在于：截图上那一屏依然「看着有光」——因为居中的白色文案本身很亮，
   拿它当光的读数就会被骗过去。 */ 
.contact::before{--lt-bleed-b:0px}

/* business 是 1:1 两列 grid（两列正文各占 89–713 / 713–1337，空槽正好在 x≈713）。
   锚在 50% 时，峰值落在【两栏之间那条空槽】上——最亮的地方是空的，两列正文反而在衰减区
   （实测峰值 25，两列正文所在的 20% / 80% 只有 16–18）。对对称两列，单条居中径向是错的选择。

   但【不要改成两簇】：实测双焦点（28%/72%）整体反而变暗（纵向峰 22 vs 36），
   且会在 hero→business 接缝处造出新的向下台阶，等于重演 v57 的「两块斑」。
   正确做法是把椭圆压成一条「横带」——横向铺到两列都在亮区里，强度降一档：
   --lt-w 40%→64%、--lt-hh 52%→50%、--lt-y 49%→48%、--lt-c 2e→24。
   实测 20–85% 区间从「16↔25 起伏」变成「22–27 平台」，两列都吃到光，空槽不再独占峰值。

   ⚠️ 测这一屏时别被截图骗：motion.css:89 写了
   .business::after{opacity:calc(.55 + var(--hero-p,0)*.45)}，而整页截图是 scrollY=0 拍的
   → hero-p=0 → 业务屏的光【只以 55% 强度入镜】。要按真实观感测，必须滚过首屏再截。 */
.business{position:relative;isolation:isolate;padding:96px 0 110px;border-top:0;background-image:var(--rule);background-size:100% 1px;background-position:left top;background-repeat:no-repeat;--lt-bleed:180px;--lt-x:50%;--lt-y:48%;--lt-w:64%;--lt-hh:50%;--lt-c:#a6caff24;--lt-in:24%;--lt-out:82%}

/* 业务介绍的氛围图要铺满整个视口宽度。
   原先左右只外扩一个 --gutter，而 --gutter 封顶 96px，business 自身又被
   min(…,1248px) 限宽——两下一夹，这层背景的宽度上限就是 1248 + 2×96 = 1440px，
   视口再宽它也长不动了。后果是一串只在宽屏暴露的空档：
   1440 下左右各差 2px（看不出来，所以一直没被发现），
   1920 下各差 232px、2560 下各差 552px——中间一条竖带、两侧硬切边。
   calc((100vw - 100%) / 2) 里的 100% 就是 business 自己的宽度，
   整个式子算出来正好是「business 盒子到视口边缘的距离」，
   与页头那条 padding-inline:max(…) 是同一个思路——页头早就这么处理了，这里漏了。
   注意 motion.css 的 overflow-clip-margin 必须同步放宽，否则多出来的部分会被裁回来。 */
.business::before{content:'';position:absolute;inset:-120px calc(-1 * max(var(--gutter),calc((100vw - 100%) / 2))) -30px;z-index:-1;pointer-events:none;background:url('assets/business-atmosphere.webp') center 55%/cover no-repeat;opacity:.5;mask-image:linear-gradient(transparent,#000 18%,#000 78%,transparent)}

/* 三档非居中光晕：左右外档是峰值，中档最弱。
   峰值锚在 --track 的一半处（页边距的中部），正文列只吃衰减、吃不到峰；
   两侧对同一组数值，所以强度差本身就让正文区最弱，不需要再加横向 mask。
   原来用 left:50% + translate:-50% + width:min(720px,86vw) 居中，光晕只有中间一块，
   窄盒之外是纯黑——这就是视觉断层的来源。改成 left/right 各外扩 --bleed 铺满视口。 */
/* 峰的纵向锚点不能放在图层自己的顶边（原来是 `at X 0`）。
   顶边之上没有像素、顶边上已是满强度，必然出现一步跳变——实测 Δ+21.6，
   在 hero 比视口高的机器上正好落进 hero 内部，就是那条「断层」。
   现在把峰的锚点下移到【段落的分隔线】位置（也就是 top 的负值处）：
   business 段顶 -150px / 盒高 430 → 35%；about -70/380 → 18%；approach -120/320 → 38%。
   再用同长度的纵向渐入 mask 把顶边压到 0，于是「进得来、出得去」都没有硬边。 */

.business-head{display:flex;align-items:end;justify-content:space-between;gap:48px}

.business-head>p{max-width:26em;color:var(--muted);font-size:1rem;line-height:1.85;margin:0 0 8px}

.business-head h2{line-height:1.35;margin:0}

.services{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:58px 0 0}

.service{position:relative;min-height:360px;padding:56px 48px 48px 0;isolation:isolate}

.service+.service{border-left:0;background-image:var(--rule-v);background-size:1px 100%;background-position:left top;background-repeat:no-repeat;padding-left:64px;padding-right:0}

.service+.service::after{content:'';position:absolute;left:-1px;top:50%;translate:0 -50%;width:1px;height:32px;background:var(--line-strong)}

.service+.service .service-copy::before{content:'';position:absolute;left:-2.5px;top:0;width:5px;height:5px;border-radius:50%;background:#c4e3ff;box-shadow:0 0 14px 4px #457ee64d}

.service-index{display:flex;align-items:center;gap:14px;margin:0 0 24px;font-size:.75rem;letter-spacing:.24em;color:#96abc7;font-variant-numeric:tabular-nums}

.service-index::after{content:'';height:1px;width:56px;background:linear-gradient(90deg,var(--line-strong),transparent)}

.service-copy{position:static}

.service h3{font-size:clamp(1.75rem,2.6vw,2.25rem);font-weight:500;line-height:1.3;letter-spacing:.005em;margin:0 0 26px}

.geo h3{letter-spacing:-.025em}

.subtitle{color:#d6e3f5;font-size:1.125rem;margin:0 0 14px}

.description{color:var(--muted);font-size:1rem;line-height:1.9;margin:0;max-width:25em}

.service-link{display:inline-flex;align-items:center;min-height:48px;margin-top:32px;font-size:.9375rem;color:#d6e3f5;text-decoration:underline;text-decoration-color:#a6caff66}

.service-link::after{content:'';position:absolute;inset:0;z-index:3}

.service-link:hover{text-decoration-color:#d6e3f5}

.service-link:focus-visible{outline:none}

.service-link:focus-visible::after{outline:2px solid var(--blue);outline-offset:6px}

/* A faint base silhouette becomes visible on hover and keyboard focus. */
.art{position:absolute;z-index:-1;pointer-events:none;opacity:.45;transition:opacity .5s ease,transform .65s ease;mask-image:linear-gradient(90deg,transparent,#000 66%)}

.service:hover .art,.service:focus-within .art{opacity:.8}

.service::before{content:'';position:absolute;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(ellipse at 70% 45%,#698fbd16,transparent 70%);opacity:0;transition:opacity .5s}

.service:hover::before,.service:focus-within::before{opacity:1}

.signal{width:310px;height:310px;right:12px;top:40px}

.orbit{position:absolute;inset:30px;border:1px solid #8db7e699;border-radius:50%;transform:rotate(-30deg) scaleY(.55)}

.o2{transform:rotate(34deg) scaleY(.6);inset:18px}

.o3{transform:rotate(85deg) scaleY(.5);inset:44px}

.nucleus{position:absolute;width:12px;height:12px;border-radius:50%;left:149px;top:149px;background:#c4e3ff;box-shadow:0 0 36px 10px #457ee64d}

.beam{position:absolute;width:5px;height:5px;background:#a8d8ff;border-radius:50%;left:46px;top:114px}

.b2{left:245px;top:198px}

.b3{left:186px;top:60px}

.development-art{width:320px;height:310px;right:-6px;top:32px}

.development-art img{display:block;width:100%;height:100%;object-fit:contain}

/* .about 原本没有定位上下文，加 position/isolation 只为让下面的 ::before 有处可挂。
   position:relative 不带偏移量，不改变布局；isolation:isolate 把负 z-index 收在本段内部，
   不会跑到页面底色下面去。 */
/* 原先 .about 自己是 grid 1fr/1.5fr：左栏 kicker+事实表、右栏 h2+正文，
   大标题因此落在右栏，与相邻的 .approach（标题在左栏）换边，视线左右横跳。
   现在拆成「横贯的章节头 + 下层两列」：头里 kicker+h2 在左、导语在右（与
   business/approach/scope 同构），事实表与正文各自独立成列。
   注意没有为了对称而改左右——about 的资料表本来就该在窄的左列，改的是「标题被塞进右栏」。 */
.about{position:relative;isolation:isolate;padding:110px 0 120px;border-top:0;background-image:var(--rule);background-size:100% 1px;background-position:left top;background-repeat:no-repeat;--lt-bleed:170px;--lt-x:62%;--lt-y:46%;--lt-w:36%;--lt-hh:54%;--lt-c:#a6caff33;--lt-in:24%;--lt-out:82%}

/* 同款三档，强度各降一档（9% / 5%）：这一段是叙述文，不需要抢亮度。
   峰的纵向锚点 18% = 段顶 -70px / 盒高 380，正好落在分隔线上；顶边由 mask 渐入压到 0。 */

.contact h2{font-size:clamp(2.125rem,min(4.6vw,6.4vh),3.75rem);font-weight:500;line-height:1.28;letter-spacing:.03em;margin:0 0 30px}

/* 这条只管首页的五个章节标题。早先写成不带限定的 `h2[id$="-title"]`，属性选择器是
   (0,2,1)，会压过子页 .geo-page h2 的 (0,1,1)——GEO / 技术开发两页的服务标题、
   流程标题被顶到 50.4px，而同页 .geo-next h2（没有 id）仍是 38px，一页里出现两档；
   h1 才 64.8px，层级也被压扁。收回首页，让子页继续用 geo.css 自己的 38px。 */
body:not(.geo-page) h2[id$="-title"]:not(#contact-title){font-size:clamp(2rem,min(4.4vw,5.6vh),3.25rem);font-weight:500;letter-spacing:.015em}

.about-head{display:flex;align-items:end;justify-content:space-between;gap:48px}

.about-head>p{max-width:26em;color:var(--muted);font-size:1rem;line-height:1.85;margin:0 0 8px}

.about-head h2{line-height:1.35;margin:0}
/* 品牌信条（v74）：关于屏章节头里的「曦光破晓，钧衡致远」八字。
   作为 h2 之上的品牌信念大字——kicker(12px) → creed(40px,轻字重+字距) → h2(50px)，
   形成「信什么 → 做什么」的递进。沿用本屏语言：浅蓝白、weight 300、字距 .12em，
   不抢 h2 的结构性标题地位，靠颜色/字重而非尺寸突出。 */
.about-head .brand-creed{margin:14px 0 18px;font-size:clamp(1.625rem,min(3.2vw,3.4vh),2.5rem);font-weight:300;letter-spacing:.12em;line-height:1.5;color:#e3edf9}

.about-body{display:grid;grid-template-columns:1fr 1.5fr;gap:72px;align-items:start;margin:58px 0 0}

.about-facts{display:grid;margin:0;padding:0}

.about-facts>div{display:grid;grid-template-columns:112px minmax(0,1fr);gap:18px;padding:18px 0}

.about-facts>div+div{background-image:var(--rule);background-size:100% 1px;background-position:left top;background-repeat:no-repeat}

.about-facts dt{font-size:.8125rem;letter-spacing:.14em;color:#96abc7;line-height:1.7}

/* 尺度对比：关于屏事实表把「标签」压到 13px 窄字距、把「数值」提到 17px，
   形成标签/数值的尺度落差——不必改文案，只靠字号就把四组事实读成主从。 */
.about-facts dd{margin:0;font-size:1.0625rem;line-height:1.7;color:#d6e3f5}

.about-story>p{color:var(--muted);font-size:1rem;line-height:1.95;max-width:36em;margin:0 0 20px}

.contact{position:relative;isolation:isolate;display:block;text-align:center;border-top:0;background-image:var(--rule);background-size:100% 1px;background-position:left top;background-repeat:no-repeat;padding:150px 0 158px;--lt-bleed:210px;--lt-x:50%;--lt-y:42%;--lt-w:30%;--lt-hh:44%;--lt-c:#a6caff38;--lt-in:20%;--lt-out:78%}

/* contact 段只动横向：纵向仍是原来的居中光晕（top:4% + 居中圆心），
   因为这一段的正文是居中的 CTA，最亮点本该落在它身上——
   若也改成「顶部锚点」，光带就跑到标题上方去了，CTA 反而落在暗处。
   做法：中央晕保留（略降强度），左右各补一道外翼，把两侧的空档填上。
   纵向锚点仍是 50%（最亮点落在 CTA 上）。图层顶边在段内（top:4%），
   所以也加了对称渐入渐出，否则顶/底边各留一道 Δ≈5 的浅台阶。 */

.contact .kicker{margin:0 0 34px}

.contact-description{color:var(--muted);max-width:32em;font-size:1.0625rem;line-height:1.85;margin:0 auto;text-wrap:balance}

.contact-channel{position:relative;display:inline-flex;flex-direction:column;align-items:center;gap:10px;margin:66px auto 0;padding:40px 0 0;border:0}

.contact-channel::before{content:'';position:absolute;left:50%;top:0;width:132px;height:1px;margin-left:-66px;background:linear-gradient(90deg,transparent,#a6caffb8 34%,#a6caffb8 66%,transparent)}

.contact-channel::after{content:'';position:absolute;left:50%;top:-2px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#c4e3ff;box-shadow:0 0 14px 5px #457ee659}

.contact-channel p{margin:0;font-size:1.125rem;letter-spacing:.04em;color:#eef1f7}

.contact-channel span{font-size:.8125rem;letter-spacing:.22em;color:#8ea4bd}

/* 联系清单 + 二维码：替换「联系方式即将公布」占位（2026-10-12 用户提供真实信息）。
   布局：公司名下方一行两栏——左侧联系清单（窄标签 + 值，左对齐），右侧二维码。
   样式沿用本屏语言：muted 小标签、浅色值、细下划线链接；
   二维码 132px 与上方 ::before 那条 132px 横线同宽，是刻意呼应。
   二维码取自用户微信卡片，已裁掉「凉都物流」名称区（只留码本身）。 */
.contact-grid{display:flex;align-items:center;justify-content:center;gap:72px;margin-top:14px}
.contact-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px;text-align:left}
.contact-list li{display:flex;align-items:baseline;gap:16px;font-size:.9375rem;line-height:1.7;color:#c9d6e8}
.contact-list .cl-label{flex:none;font-size:.75rem;letter-spacing:.18em;color:#71879f}
.contact-list a{color:#dce8f7;text-decoration:none;padding-bottom:2px;background-image:linear-gradient(90deg,rgba(166,202,255,.35),rgba(166,202,255,.35));background-size:100% 1px;background-position:left bottom;background-repeat:no-repeat;transition:color .3s}
.contact-list a:hover{color:#fff}
.contact-qr{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px}
.contact-qr img{display:block;width:132px;height:132px;border-radius:8px}
.contact-qr figcaption{font-size:.75rem;letter-spacing:.22em;color:#8ea4bd}

@media(max-width:700px){.contact-grid{flex-direction:column;gap:34px}.contact-list li{font-size:.875rem}.contact-qr img{width:118px;height:118px}}

.principle{position:relative;padding-left:22px;font-size:clamp(1.0625rem,1.5vw,1.3125rem);line-height:1.7;color:#d6e3f5}

.principle::before{content:'';position:absolute;left:0;top:.62em;width:10px;height:1px;background:var(--line-strong)}

.scope-section{position:relative;isolation:isolate;width:min(calc(100% - 2 * var(--gutter)),var(--page-width));margin-inline:auto;padding:96px 0 110px;border-top:0;background-image:var(--rule);background-size:100% 1px;background-position:left top;background-repeat:no-repeat;--lt-bleed:200px;--lt-x:38%;--lt-y:46%;--lt-w:42%;--lt-hh:58%;--lt-c:#a6caff2b;--lt-in:20%;--lt-out:82%}

.scope-head{display:flex;align-items:end;justify-content:space-between;gap:48px}

.scope-head>p{max-width:26em;color:var(--muted);font-size:1rem;line-height:1.85;margin:0 0 8px}

.scope-head h2{line-height:1.35;margin:0}

.scope-wrap{margin:48px 0 0;padding:44px 0 0;background-image:var(--rule);background-size:100% 1px;background-position:left top;background-repeat:no-repeat}

.scope{width:100%;border-collapse:collapse;text-align:left}

.scope thead th{font-size:.75rem;font-weight:400;letter-spacing:.16em;color:#96abc7;padding:0 0 16px}

.scope tbody tr{background-image:var(--rule);background-size:100% 1px;background-position:left top;background-repeat:no-repeat}

.scope tbody th,.scope tbody td{padding:24px 0;vertical-align:top;font-weight:400}

/* 尺度对比：服务范围屏原来是一张很平的表，方向名（GEO / 技术开发）缩在
   1.06rem 里，被更长的描述文字压住。放大成 28px / 300 字重，让每一行左侧
   有个明确的「大词」锚点——与方法屏 01–04 同一套「大而轻的索引」语言。
   右列的量词「六 / 四」再做成数据强调（.scope-num），一屏两个尺度的锚点
   分处不同列、不抢戏。 */
.scope tbody th{font-size:1.75rem;font-weight:300;letter-spacing:-.01em;line-height:1.2;color:var(--text);white-space:nowrap}

.scope tbody td{font-size:.9375rem;line-height:1.8;color:var(--muted);padding-right:32px}

.scope tbody td:last-child{color:#96abc7;padding-right:0;white-space:nowrap}

/* 服务范围里的量词做成数据强调：比正文大、比方向名小，是行内第二锚点。 */
.scope-num{font-size:1.375rem;font-weight:300;letter-spacing:-.01em;color:#eef1f7;font-variant-numeric:tabular-nums}

.scope-note{margin:22px 0 0;font-size:.8125rem;color:#96abc7}

footer{width:min(calc(100% - 2 * var(--gutter)),var(--page-width));margin:auto;border-top:0;background-image:var(--rule);background-size:100% 1px;background-position:left top;background-repeat:no-repeat;padding:30px 0 38px;display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:28px;color:#96abc7;font-size:.8125rem}

.footer-brand{display:flex;align-items:baseline;gap:12px;font-size:1.125rem;font-weight:500;letter-spacing:.09em;color:#d6e3f5}

.footer-brand span{font-size:.75rem;font-weight:300;letter-spacing:.2em;color:#96abc7}

footer nav{display:flex;align-items:center;justify-self:center;gap:clamp(18px,2.6vw,34px);font-size:.8125rem;color:#96abc7}

footer nav a{display:inline-flex;align-items:center;min-height:44px;transition:color .2s}

footer nav a:hover{color:#fff}

/* 服务直达：此前进入两个子页的唯一入口是首页 business 的两张卡，
   geo.html 里指向 development.html 的链接数为 0——在 GEO 页想横向看技术开发，
   只能先"返回业务概览"回首页再点，链路断一环。
   用一条竖线把它和左边的锚点导航分成两组，不加文字标签也能看出不是同一类。
   注意这两个链接是 geo.html / development.html，不是 # 锚点，
   nav-spy 只取 footer nav a[href^="#"]，不会被算进"当前板块"的联动。 */
.footer-services{border-left:1px solid var(--line);padding-left:clamp(16px,2.2vw,28px);gap:clamp(16px,2.2vw,28px)}

.footer-top{display:inline-flex;align-items:center;min-height:44px;color:#96abc7;transition:color .2s}

.footer-top::after{content:'\2191';margin-left:8px;font-size:.9em}

.footer-top:hover{color:#d6e3f5}

/* Work method: the bridge between "understand us" and "talk to us". */
.kicker{margin:0 0 22px;font-size:.75rem;font-weight:400;letter-spacing:.38em;color:#96abc7}

.step{display:block;font-size:18px;color:#96abc7;font-variant-numeric:tabular-nums;margin-bottom:22px}

.step::before{content:'';display:block;width:24px;height:1px;background:var(--line-strong);margin-bottom:14px}

/* 屏高 1147px = 1.27 个视口，塞了两个内容单元（①怎么做事：标题+四步 ②做什么：三条原则+对照表）。
   现有单焦点锚在 y30%，实测到 y≈2800 就回落到 17.9（= L1 平层）——「三条原则 + 对照表」
   约 450px 完全没光。这是结构问题不是光问题：L2 配方的前提是「一屏 ≈ 一个内容单元」。

   视觉侧给的权宜解是给 .approach::after 加第二个焦点（--lt-y:66%），实测下半屏 17.8→34–39、
   两峰之间谷 33 读作一条连续光。但【先不做】——下一步的结构改造要把 table.scope 移出这一屏，
   拆完约 700px，单焦点就够，现在加的第二个焦点会变成废码。
   方法屏下半屏会一直暗到结构改完为止，这是有意识的取舍。

   ⚠️ 移动端断点（约 style.css:485）里有一条 .approach::before{height:220px}，
   若将来真加 ::after，必须为它补一条同等覆盖，否则手机上会拖一条 100%+600px 的大光。 */
.approach{position:relative;isolation:isolate;width:min(calc(100% - 2 * var(--gutter)),var(--page-width));margin-inline:auto;padding:110px 0 120px;border-top:0;background-image:var(--rule);background-size:100% 1px;background-position:left top;background-repeat:no-repeat;--lt-bleed:300px;--lt-x:40%;--lt-y:30%;--lt-w:40%;--lt-hh:42%;--lt-c:#a6caff2e;--lt-in:16%;--lt-out:66%}


.approach-head{display:flex;align-items:end;justify-content:space-between;gap:48px}

.approach-head h2{line-height:1.38;margin:0}

.approach-head>p{max-width:26em;color:var(--muted);font-size:1rem;line-height:1.85;margin:0 0 8px}

.approach-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:38px;list-style:none;margin:58px 0 0;padding:0}

/* 尺度对比：内容少的屏靠「某个东西特别大」撑质感，这是最便宜的高级感。
   01–04 从 18px 提到 40px、300 字重（Noto Sans SC 是可变字体，100–900 全段真实可用，
   300 不会触发合成字形）、字距收紧到 -.02em。
   它比下面的 h3（20px）还大，是刻意的主次倒置：大而轻的索引负责"节奏"，
   小而实的名称负责"读"——靠字重（300 vs 500）和颜色（#96abc7 vs #d6e3f5）把主次分开，
   不靠大小。
   ⚠️ 必须限定在 .approach-steps 下：.step 这个类子页 .geo-process 也在用
   （geo.css:35 另有一份），改成全局会连 geo.html / development.html 一起改掉。 */
.approach-steps .step{font-size:2.5rem;line-height:1;font-weight:300;letter-spacing:-.02em;margin-bottom:28px}

.approach-steps h3{font-size:1.25rem;font-weight:500;margin:0 0 14px}

.approach-steps p{font-size:.9375rem;line-height:1.8;color:var(--muted);margin:0;max-width:24em}

.approach-steps li{display:flex;flex-direction:column}

.approach-steps li>p:not(.yield){margin-bottom:16px}

.approach-steps .yield{margin-top:auto;padding-top:14px;font-size:.8125rem;letter-spacing:.02em;color:#96abc7;background-image:linear-gradient(90deg,var(--line),transparent);background-size:64px 1px;background-position:left top;background-repeat:no-repeat}

.approach-rules{margin-top:58px;padding-top:34px;border-top:0;background-image:var(--rule);background-size:100% 1px;background-position:left top;background-repeat:no-repeat;display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:start}

.approach-rules h3{font-size:.8125rem;font-weight:400;letter-spacing:.2em;color:#96abc7;margin:0}

.approach-rules ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:26px}

.approach-rules li{position:relative;padding-left:28px;font-size:1.0625rem;line-height:1.75;color:#d6e3f5}

.approach-rules li::before{content:'';position:absolute;left:0;top:.8em;width:16px;height:1px;background:var(--line-strong)}

@media(max-width:1000px){.service+.service{padding-left:32px}.service{padding-right:28px}.about-body{gap:48px}.signal,.development-art{width:260px;right:-8px;opacity:.16}.approach-steps{grid-template-columns:repeat(2,1fr);gap:34px}.approach-rules ul{grid-template-columns:1fr;gap:14px}}

@media(max-width:1100px){.approach-steps{grid-template-columns:repeat(2,1fr);gap:34px}}

@media(max-width:700px){header{padding-top:18px;gap:12px}.brand{font-size:25px}.brand span{display:none}header nav{gap:18px;font-size:.8125rem}.hero-copy{padding:172px 24px 92px}.hero-kicker{font-size:.6875rem;letter-spacing:.34em;text-indent:.34em;margin-bottom:49px}h1{font-size:clamp(2.5rem,11.4vw,3.5rem);letter-spacing:.06em;line-height:1.2;margin-bottom:26px}.hero-description{font-size:.9375rem;max-width:19em;margin:0 auto 34px;letter-spacing:.05em;text-wrap:balance}.entry{min-height:52px;padding:12px 32px}.business{padding:48px 0 64px}.services{grid-template-columns:1fr}.service,.service+.service{min-height:0;padding:48px 0;border-left:none}.service+.service{border-top:0;background-image:var(--rule);background-size:100% 1px;background-position:left top;background-repeat:no-repeat;padding-top:48px}.service+.service::after{display:none}.service h3{font-size:2.25rem;margin-bottom:20px}.subtitle{font-size:1rem}.description{max-width:21em}.service-link{margin-top:22px}.signal,.development-art{width:250px;height:280px;top:32px;right:0;opacity:.28;mask-image:linear-gradient(90deg,transparent,#000)}.business::before{opacity:.23}.about{padding:64px 0}.about-body{grid-template-columns:1fr;gap:34px}.contact{padding:88px 0 96px}.contact-description{font-size:1rem}.contact-description br{display:none}.approach{padding:64px 0 72px}.scope-section{padding:56px 0 64px}.business-head,.approach-head,.scope-head,.about-head{display:block}.business-head>p,.approach-head>p,.scope-head>p,.about-head>p{margin:18px 0 0}.approach-steps{grid-template-columns:1fr;gap:34px;margin-top:38px}.approach-steps .yield{max-width:20em}.approach-rules{grid-template-columns:1fr;gap:20px;margin-top:42px;padding-top:26px}.approach-rules ul{gap:14px}.approach-rules li{font-size:1rem}.approach::before{height:220px}.about-facts>div{grid-template-columns:96px minmax(0,1fr);gap:14px;padding:16px 0}.contact-channel{margin-top:52px;padding-top:32px}footer{grid-template-columns:1fr;justify-items:start;gap:14px;padding:26px 0 32px}footer nav{justify-self:start;gap:20px;flex-wrap:wrap}.footer-services{border-left:0;padding-left:0;gap:20px} .scope-wrap{margin-top:52px;padding-top:34px}.scope thead{display:none}.scope tbody tr{display:block;padding:24px 0}.scope tbody th,.scope tbody td,.scope tbody td:last-child{display:block;white-space:normal;padding:0}.scope tbody th{margin-bottom:12px}.scope tbody td{margin-bottom:10px;padding-right:0}.scope tbody td::before{content:attr(data-label) ' · ';color:#96abc7}}

/* 窄屏退化：视口只有三四百像素时，三档的间距（--track/2 ≈ 12px）比峰还窄，
   三档会糊成一团、反而更不均匀。退回单档居中，强度 ×0.7（暗房变小，同样亮度更刺眼）。
   尺寸给到 110%，保证 74% 的衰减点落在视口之外——边缘不留硬边。 */
/* 700px 断点不再需要单独覆盖光晕：L2 配方的高度是 calc(100% + 2×bleed)，横向是百分比，随屏自适应。 */

@media(max-height:760px){.hero-copy{padding:150px 24px 88px}}

@media(max-width:380px){header{gap:8px}header nav{gap:8px;font-size:.6875rem}.brand{font-size:21px}}

/* Five-item navigation for the news preview/published column. Keep touch targets. */
@media(max-width:1120px){header:has([data-news-link]) .brand span{display:none}footer:has([data-news-link]){grid-template-columns:auto 1fr}footer:has([data-news-link]) nav{justify-self:end}footer:has([data-news-link]) .footer-services{border-left:0;padding-left:0;justify-self:start}}
@media(max-width:700px){header:has([data-news-link]){flex-wrap:wrap;gap:2px;padding-top:16px;padding-bottom:12px}header:has([data-news-link]) .brand{min-height:36px}header:has([data-news-link]) nav{width:100%;gap:0;justify-content:space-between;font-size:12px}header:has([data-news-link]) nav a{min-height:44px}footer:has([data-news-link]){grid-template-columns:1fr}footer:has([data-news-link]) nav{justify-self:start}html.home-page:has([data-news-link]){scroll-padding-top:136px}}

@media(hover:none){.art{opacity:.3;transform:none}}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}

.footer-filing{grid-column:1/-1;margin:0;font-size:.8125rem;color:var(--muted);font-family:system-ui,sans-serif}.footer-filing a{display:inline-flex;align-items:center;min-height:44px;color:inherit}

/* ── 联系表单 ────────────────────────────────────────────────
   刻意不做成卡片：全站的层次靠留白和渐隐光线建立，一块实心面板会打断
   联系板块「安静收束」的节奏。输入框只留一条底部 hairline，聚焦时提亮，
   与 .contact-list 的下划线链接是同一套语言。
   块级布局在 700px 以下退成单列（与站点其余板块一致）。 */
.lead-form{max-width:620px;margin:56px auto 0;text-align:left}
.lf-title{margin:0 0 26px;font-size:.8125rem;letter-spacing:.22em;color:#8ea4bd;text-align:center}
.lead-form [hidden]{display:none!important}
.lf-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px 36px}
.lf-field{display:flex;flex-direction:column;gap:7px;min-width:0}
.lf-wide{grid-column:1/-1}
.lf-label{font-size:.75rem;letter-spacing:.18em;color:#71879f}
.lf-field input,.lf-field select,.lf-field textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line-strong);border-radius:0;color:var(--text);font:inherit;font-size:.9375rem;line-height:1.7;padding:6px 0 9px;transition:border-color .25s,background-color .25s}
.lf-field input:focus,.lf-field select:focus,.lf-field textarea:focus{outline:none;border-color:var(--blue);background-color:#a6caff08}
.lf-field textarea{resize:vertical;min-height:54px}
.lf-field select{appearance:none;-webkit-appearance:none;padding-right:22px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2371879f' stroke-width='1'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 2px center}
.lf-field option{background:#0b1119;color:var(--text)}
/* 蜜罐：真人看不见。用绝对定位移出视口，不要用 display:none——部分脚本会跳过隐藏字段 */
.lf-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.lf-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:32px}
.lf-submit{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:12px 36px;border:1px solid #9ab4d68c;border-radius:100px;font:inherit;font-size:.9375rem;letter-spacing:.1em;text-indent:.1em;color:var(--text);background-color:transparent;background-image:radial-gradient(70% 130% at 50% 130%,#a6caff1f,transparent 72%);cursor:pointer;transition:background-color .3s,border-color .3s,box-shadow .3s,transform .3s}
.lf-submit:hover:not(:disabled){background-color:#accbfa14;border-color:#d3e3f8;box-shadow:0 22px 52px -24px #a6caffb3;transform:translateY(-2px)}
.lf-submit:disabled{opacity:.5;cursor:not-allowed}
.lf-msg{margin:0;font-size:.875rem;line-height:1.6;color:var(--muted);min-height:1.6em}
.lf-msg--ok{color:#7fe0b0}
.lf-msg--error{color:#f0a0a0}
.lf-msg--note{color:#8ea4bd}
.lf-fallback{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:8px;font-size:.9375rem;line-height:1.7;color:var(--muted)}
.lf-fallback-note{margin:0;color:#8ea4bd}
.lf-fallback-tel{color:var(--text);border-bottom:1px solid var(--line-strong);padding-bottom:2px;letter-spacing:.04em;transition:border-color .25s}
.lf-fallback-tel:hover{border-color:var(--blue)}
.lf-retry{background:transparent;border:1px solid #9ab4d68c;border-radius:100px;color:#8ea4bd;font:inherit;font-size:.8125rem;letter-spacing:.1em;text-indent:.1em;padding:7px 18px;cursor:pointer;transition:border-color .25s,color .25s}
.lf-retry:hover:not(:disabled){border-color:#d3e3f8;color:var(--text)}
.lf-retry:disabled{opacity:.5;cursor:not-allowed}
@media(max-width:700px){.lead-form{margin-top:40px}.lf-grid{grid-template-columns:1fr;gap:22px}.lf-title{margin-bottom:22px}.lf-actions{margin-top:26px}}