/* ============================================================
   格物 GridFlow 官网 —— 四页共用层
   **对外界面,与后台 app.css 是两套基准**(项目全局约定:对内后台追求一致
   与可读,对外界面每个 brief 单独定)。不要把这里的 token 并进 app.css ——
   那边被 test_type_scale.py 十条测试盯着,混在一起两边互相绊。

   两条铁律,改这个文件前先读:
   1. **区块一律不许带底色。** 整站背景是一张 position:fixed 的照片 + 一层
      同样 fixed 的压暗。区块一带底色就等于叠第二层,滚到接缝处出现一条
      黑边。允许设 background 的只有 .bgfix / .bgscrim / ::selection / :hover。
   2. **类选择器区块只写 padding-top / padding-bottom。** `.hero` 与 `.wrap`
      特异性相同(0,1,0),后写的 `padding:` 简写会把 `.wrap` 的左右内边距
      清零,文字贴到屏幕左边。本项目已踩两次。nav / footer 是元素选择器,
      打不过 .wrap,用简写安全。
   ============================================================ */

@font-face{font-family:"得意黑";src:url("/assets/fonts/smiley-sub-v2.woff2") format("woff2");
           font-weight:400;font-display:swap}
@font-face{font-family:"思源黑体";src:url("/assets/fonts/noto-sub-v2.woff2") format("woff2");
           font-weight:100 900;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("/assets/fonts/jbmono-v2.woff2") format("woff2");
           font-weight:400;font-display:swap}

:root{
  /* 与系统同一根色轴的暗端(duijie.html 暗色模式那组),不新造第三套 */
  --bg:#0d1116;
  --ink:#e7eaee; --ink2:#bcc5d0; --ink3:#8f9cab;
  --blue:#6FA8E0; --blue-hi:#8DBEEC; --glow:rgba(111,168,224,.30);
  --disp:"得意黑","思源黑体",system-ui,sans-serif;
  --sans:"思源黑体",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --gut:clamp(24px,5vw,92px);
  --line:rgba(255,255,255,.18);
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);
     font-size:17px;line-height:1.75;-webkit-font-smoothing:antialiased;
     overflow-x:hidden;min-height:100dvh;display:flex;flex-direction:column}
a{color:inherit;text-decoration:none}
::selection{background:var(--blue);color:#0d1116}
.wrap{padding-left:var(--gut);padding-right:var(--gut)}

/* ── 全程固定的实景照片 ──
   钉在视口上不动,内容从上面滑过。跟登录页是同一个文件:点「登录」过去是缓存命中。
   用 position:fixed 图层而不是 background-attachment:fixed —— 后者 iOS Safari 会忽略。 */
.bgfix{position:fixed;inset:0;z-index:-2;background-color:#1E5FA8;
  background-image:image-set(url("/assets/login-bg.webp") type("image/webp"),
                             url("/assets/login-bg.jpg")  type("image/jpeg"));
  background-size:cover;background-position:58% center}
/* **全站唯一的压暗层**,和照片一起 fixed —— 所以它永远对着照片的同一块地方,
   压暗跟着照片走、不跟着滚动位置走。横向左重右轻(字在左),纵向压住上半的天空
   (照片最亮处)。 */
.bgscrim{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(6,11,18,.74) 0%,rgba(6,11,18,.54) 34%,
             rgba(6,11,18,.30) 64%,rgba(6,11,18,.16) 100%),
             linear-gradient(180deg,rgba(6,11,18,.22) 0%,rgba(6,11,18,.07) 44%,
             rgba(6,11,18,0) 68%)}

/* ── 顶栏(全站唯一的导航) ──
   顶栏和页脚都直接压在照片上,没有底色兜着。所以字统一走白色系 —— 带灰的白
   (#bcc5d0 / #8f9cab)在实景照片上会被"吃掉"。分三档,都是白,区别只在
   "在不在前面":LOGO 纯白 → 顶栏链接 92% → 页脚 72%。
   字影是给顶栏用的:它正压在照片最亮的天空上,光靠调白不够,得让字自己带点底。
   用字影而不是给顶栏加深色横条 —— 加横条就违反"不许带底色"那条了。 */
/* z-index 70 要高过 .mobmenu 的 60 —— 菜单展开时顶栏必须浮在遮罩**之上**,
   否则 LOGO 和「登录」被自己的遮罩压成灰的,那个叉也糊,看着像渲染坏了。
   菜单链接是纵向居中的,不会和 84px 高的顶栏打架。 */
nav{position:relative;z-index:70;display:flex;align-items:center;
    gap:36px;height:84px;flex:none;text-shadow:0 1px 14px rgba(6,11,18,.55)}
.logo{display:flex;align-items:center;gap:13px;font-family:var(--disp);
      font-size:25px;letter-spacing:.02em;margin-right:auto;color:#fff;
      white-space:nowrap}
.logo svg{width:34px;height:34px;flex:none;
          filter:drop-shadow(0 0 14px rgba(141,190,236,.45))}
.navlinks{display:flex;gap:32px;font-size:16.5px;color:rgba(255,255,255,.92)}
.navlinks a{position:relative;padding-top:4px;padding-bottom:4px;transition:color .16s}
/* 下划线用 border-bottom 画,**不用 background** —— 两个原因:
   ①这个文件里所有别的发丝线(.item / .ramp div / footer)都是 border,一致;
   ②"区块不许带底色"那条测试是按选择器白名单判的,用 background 画线会撞上它。
   1px 的下划线当然不会造成接缝,但与其给守门测试开个口子,不如把这一处
   写成跟其它发丝线一样的样子 —— 口子开多了,那条测试就废了。
   收起状态 right:100% → 宽度为 0 → 线看不见;展开时 right:0 → 满宽。 */
.navlinks a::after{content:"";position:absolute;left:0;right:100%;bottom:0;
  border-bottom:1px solid var(--blue-hi);transition:right .22s cubic-bezier(.2,.7,.3,1)}
.navlinks a:hover{color:#fff}
.navlinks a:hover::after{right:0}
/* 当前所在栏目:下划线常驻 */
.navlinks a.on{color:#fff}
.navlinks a.on::after{right:0}
.navlogin{font-size:16.5px;color:#fff;border:1px solid rgba(255,255,255,.55);
          border-radius:4px;padding-top:9px;padding-bottom:9px;
          padding-left:22px;padding-right:22px;white-space:nowrap;
          transition:border-color .16s,color .16s,background .16s}
.navlogin:hover{border-color:var(--blue-hi);color:var(--blue-hi);background:rgba(141,190,236,.10)}

/* ── 手机端汉堡菜单 ──
   窄屏顶栏塞不下三个栏目名,但**不给入口等于这三页在手机上不存在** ——
   国内 B2B 客户大量是在微信里点开链接看的。电脑端(>900px)完全不出现,
   .burger 和 .mobmenu 默认都是 display:none,只在下面的窄屏断点里打开。

   这两个类是"区块不许带底色"白名单里的例外,理由写在测试注释里:
   按钮和 position:fixed 的全屏遮罩都不参与文档流滚动,造不成接缝黑边。 */
.burger{display:none;flex:none;width:42px;height:42px;padding:0;border:0;
        background:none;cursor:pointer;
        flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger i{display:block;width:22px;height:1.5px;border-radius:1px;
          background:#fff;transition:transform .2s,opacity .2s}
/* 展开时三道杠变叉:上下两道旋转成 X,中间那道淡出 */
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.mobmenu{display:none;position:fixed;inset:0;z-index:60;
         flex-direction:column;justify-content:center;gap:2px;
         padding-left:var(--gut);padding-right:var(--gut);
         background:rgba(6,11,18,.95)}
.mobmenu.open{display:flex}
.mobmenu a{font-family:var(--disp);font-weight:400;color:#fff;
           font-size:clamp(26px,7.5vw,40px);line-height:1.2;
           border-top:1px solid rgba(255,255,255,.16);
           padding-top:24px;padding-bottom:24px}
.mobmenu a:last-child{border-bottom:1px solid rgba(255,255,255,.16)}

/* ── 页脚:一根发丝线 + 版权,不带底色 ── */
footer{flex:none;border-top:1px solid rgba(255,255,255,.20);padding:22px 0 26px;
       display:flex;flex-wrap:wrap;gap:8px 30px;align-items:center;
       font-size:14.5px;color:rgba(255,255,255,.72);
       text-shadow:0 1px 12px rgba(6,11,18,.55)}
footer .sp{margin-right:auto}
/* 备案号按规定要链到工信部。全局 a 是 color:inherit + 无下划线，所以它跟旁边的
   文字长得一模一样、看不出能点 —— 悬停给一道下划线，够了，不必在页脚放一个
   蓝色链接把视线拽过去。 */
footer a:hover{text-decoration:underline}

/* ── 二级页通用区块 ──
   不做卡片、不做图标格子。简洁靠留白和发丝线,不靠框。 */
/* ⚠️ 已知取舍(实测,别当成没人发现过):横向压暗层左重右轻(为的是让照片右半边的
   海和天保持原样),于是**右列的正文一直压在照片最亮处**。/download 实测右下 1.37:1、
   右上 2.22:1,左列 6.15 / 4.42 —— 右列达不到 4.5:1 这条线。
   试过 text-shadow,只把 1.37 抬到 1.51,不解决问题(算过:右边缘要从 .16 加到约 .63
   才够,那等于把照片压死)。加底色更不行 —— 区块一带底色拼缝处就露黑边,有测试守着。
   眼下的对策是**排版层面的**:长正文放左列,右列只放短句。真要根治得动压暗层或收窄
   内容区,那是一次视觉改版,得先定。 */
.sec{position:relative;   /* 只写 top/bottom:简写会清掉 .wrap 的左右内边距 */
     padding-top:clamp(76px,12vh,150px);padding-bottom:clamp(64px,10vh,128px)}
.eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.2em;
         color:var(--blue-hi);margin-bottom:16px;text-transform:uppercase}
.sec-h{font-family:var(--disp);font-weight:400;font-size:clamp(28px,3.8vw,52px);
       line-height:1.18;max-width:20em;margin-bottom:clamp(36px,5.5vh,64px)}
.lead{font-size:clamp(17px,1.5vw,21px);color:var(--ink2);max-width:38em;
      font-weight:300;margin-bottom:clamp(28px,4vh,48px)}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
       gap:clamp(30px,4.5vw,72px)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
       gap:clamp(30px,4.5vw,72px)}
.item{border-top:1px solid var(--line);padding-top:24px}
.item .n{font-family:var(--mono);font-size:12.5px;letter-spacing:.2em;
         color:var(--blue);margin-bottom:14px}
.item h3{font-family:var(--disp);font-weight:400;font-size:clamp(20px,2.1vw,27px);
         line-height:1.3;margin-bottom:12px}
.item p{font-size:15.5px;color:var(--ink2);line-height:1.85;max-width:34em}
.tail{border-top:1px solid var(--line);padding-top:clamp(48px,8vh,96px);
      padding-bottom:clamp(40px,7vh,80px)}
.tail h2{font-family:var(--disp);font-weight:400;font-size:clamp(24px,3vw,40px);
         line-height:1.25;max-width:22em}
.tail p{font-size:16px;color:var(--ink2);margin-top:20px;max-width:34em}

/* 「减少动态效果」是无障碍开关:前庭功能障碍、晕动症、偏头痛的人会在系统里
   打开它。**这里必须用 !important** —— 通配符 `*` 特异性是 0,0,0,打不过
   `.navlinks a`、`.burger i` 这些具体规则,不加 !important 这条等于没写,
   开了开关四处动效照动。这是 W3C 推荐写法,不是偷懒。
   用 0.01ms 而不是 0:有些浏览器把时长设成 0 会连 transitionend 事件都不发,
   依赖那个事件的脚本会卡住;0.01ms 快到看不见,事件照常触发。 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important}
}
@media (max-width:900px){
  .navlinks{display:none}
  .burger{display:flex}
  /* 加了三道杠之后,窄屏顶栏放不下原尺寸的 LOGO —— 实测 390px 下
     LOGO(153) + 三道杠(42) + 登录(75) + 两个 gap(72) + 左右留白(48) = 390,
     正好占满,于是 LOGO 和「登录」双双被压得换行,看着像页面坏了。
     窄屏单独收一档:间距 36→16,LOGO 25→20px、图标 34→28px,
     登录按钮左右内边距 22→15。算下来约 311px,留出富余。 */
  nav{gap:16px}
  .logo{font-size:20px}
  .logo svg{width:28px;height:28px}
  .navlogin{font-size:15.5px;padding-left:15px;padding-right:15px}
  .grid3,.grid2{grid-template-columns:1fr;gap:34px}
  /* 手机竖屏是从这张宽照片里裁一条竖的出来。取景点还留在 58% 的话,裁出来
     只剩海和远处的城市 —— 起重机、集装箱、卡车、那个人全在照片左边,全被
     裁掉了,就看不出是物流。往左挪到 34%,把港口那一侧留在画面里。 */
  .bgfix{background-position:34% center}
}