/* site.css -- 公开站的全部样式.
 *
 * 组织方式是**按块型**, 不是按页面. 站上 11 页只有 3 页有设计稿,
 * 按页面写的话另外 8 页当场垮掉; 块型词汇表 (store.BlockSpecs) 才是稳定的那层.
 *
 * 三套视觉靠 <body data-section="feituo|yuncang|zhineng"> 切: 下面的 :root 是主站,
 * 两个 [data-section] 块只覆盖 token, 块型的版式规则一份不重复.
 * chrome (导航项/页脚/法律主体/备案号) **全站取主站**, 换的只有颜色和 logo --
 * 见 CLAUDE.md 的"站点层级", owner 2026-09-03 定的.
 *
 * 设计包: design_handoff/design_handoff_flyto_website/. 颜色/字号/间距是设计给的最终值.
 */

/* ---------- token ---------- */

:root {
  /* 主站: 深蓝黑 + 银灰 */
  --ink: #0A0F1A;           /* 深色区背景 */
  --ink-2: #0C1424;         /* 深色区渐变的另一端 */
  --surface: #F6F7F9;       /* 浅色区背景 */
  --surface-2: #FFFFFF;     /* 浅色区里的"白" (卡片 / 交替区块) */
  --line: #E4E8EF;          /* 浅色区分隔线 */
  --line-ink: rgba(255,255,255,.09);  /* 深色区分隔线 */

  --text: #101828;          /* 浅色区正文 */
  --text-2: #55607A;        /* 浅色区次要文字 */
  --text-3: #8B98AC;        /* 浅色区弱化文字 */
  --text-ink: #E9EDF4;      /* 深色区正文 */
  --text-ink-2: #94A0B8;    /* 深色区次要文字 */
  --text-ink-3: #55607A;    /* 深色区弱化文字 */

  --accent: #7C8AA0;        /* 点缀色 -- 眉标方块, 强调字, hover */
  --accent-on: #FFFFFF;     /* 点缀色上的文字 */
  --btn: #FFFFFF;           /* 主按钮底 (深色区) */
  --btn-text: #0A0F1A;
  --btn-hover: #7C8AA0;
  --btn-hover-text: #FFFFFF;

  --chip: rgba(255,255,255,.07);       /* 深色区图标芯片 */
  --chip-line: rgba(255,255,255,.12);
  --chip-lt: #F0F3F8;                  /* 浅色区图标芯片 */
  --chip-lt-line: #E4E8EF;

  --card: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  --card-line: rgba(255,255,255,.1);
  --card-lt: #FFFFFF;
  --card-lt-line: #E4E8EF;

  --input-bg: #FAFBFC;
  --input-line: #D6DCE6;
  --focus-ring: rgba(124,138,160,.14);

  --nav-bg: rgba(10,15,26,.82);
  --nav-line: rgba(255,255,255,.07);
  --nav-text: #C6CFDD;
  --nav-text-on: #FFFFFF;
  --nav-hover-bg: rgba(255,255,255,.06);
  /* 顶部 logo 按板块换: 有自己正式组合标的板块挂自己的 (云仓), 没有的挂飞驼网络的 (智能).
     同屏只有一个标, 点它就回这个标代表的首页 (Go 那边的 sectionOwnsBrand 决定 href, 两边要一起改).
     以前是"顶栏永远主站标 + 二级条再挂一个板块标", owner 2026-09-22: "显示两个 logo 几个意思?"
     板块页回主站改走二级条左边的"飞驼网络 /"面包屑. */
  --logo: url("/assets/logo/feituo-lockup-dark.png");
  --logo-h: 36px;
  --logo-w: 84px;
  --logo-blend: normal;
  /* 品牌母题: logo 会被滚动带走, 正文里靠它撑住品牌在场 (owner 2026-09-23:
     "正文部分的 LOGO 从不出现, 对企业宣传不利"). 它不是 logo 而是设计系统里的母题图形,
     所以和"一个页面只出一个标"不冲突. 三个板块各一个, 跟 --logo 一样按 data-section 切. */
  --motif: url("/assets/motif/motif-block.svg");

  --foot-bg: #0A0F1A;
  --foot-text: #8B98AC;
  --foot-dim: #5E6A80;
  --foot-faint: #4A5568;

  /* 排版 */
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC",
          "Helvetica Neue", "Microsoft YaHei", sans-serif;
  --serif: "Noto Serif SC", "Songti SC", "STSong", "Noto Serif CJK SC", serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* 尺度 */
  --wrap: 1240px;
  --pad: 24px;
  --gap-block: clamp(88px, 12vw, 150px);   /* 区块上下留白 */
  --r-card: 22px;
  --r-lg: 24px;
  --r-md: 14px;
  --r-sm: 12px;
  --r-pill: 99px;
}

/* 云仓: 品牌蓝 + 青 */
[data-section="yuncang"] {
  --ink: #0B2C6B;
  --ink-2: #123A8F;
  --surface: #F7F9FA;
  --surface-2: #FFFFFF;
  --line: #E2E7EE;
  --line-ink: rgba(255,255,255,.12);

  --text: #12203E;
  --text-2: #55617C;
  --text-3: #8B96A9;
  --text-ink: #EAF0FA;
  --text-ink-2: #AFC2E2;
  --text-ink-3: #7288B4;

  --accent: #1743A0;
  --accent-on: #FFFFFF;
  --btn: #35C5D9;
  --btn-text: #06263B;
  --btn-hover: #FFFFFF;
  --btn-hover-text: #0B2C6B;

  --chip-lt: #EEF4FB;
  --chip-lt-line: #DCE6F2;
  --card-lt-line: #E2E7EE;

  --input-line: #D3DAE5;
  --focus-ring: rgba(23,67,160,.13);

  --nav-bg: rgba(247,249,250,.86);
  --nav-line: #E2E7EE;
  --nav-text: #3D4A66;
  --nav-text-on: #1743A0;
  --nav-hover-bg: rgba(23,67,160,.06);
  /* 云仓有自己的正式组合标 (圆形 FlyTo 蓝青 + "飞驼云仓"四字), 顶栏就直接挂它, 点它回 /yuncang.
     原图 558x325, 按高 36px 折宽 62px. 橙色是飞驼网络的火花色, 不进云仓物料 (设计系统). */
  --logo: url("/assets/logo/yuncang-lockup.png");
  --logo-h: 36px;
  --logo-w: 62px;
  --logo-blend: normal;
  /* 云仓的母题是屋顶 Ô. 橙不进云仓物料, 这里靠 --mark (青) 上色 */
  --motif: url("/assets/motif/motif-roof.svg");

  --foot-bg: #0B2C6B;
  --foot-text: #AFC2E2;
  --foot-dim: #7288B4;
  --foot-faint: #5E74A6;

  --glow: rgba(53,197,217,.22);   /* hero 的光晕 */
  --mark: #35C5D9;                /* 眉标方块 / 强调标点 */
}

/* 智能: 近黑 + 银 */
[data-section="zhineng"] {
  --ink: #0E0F11;
  --ink-2: #1B1E24;
  --surface: #131519;
  --surface-2: #0E0F11;
  --line: rgba(255,255,255,.07);
  --line-ink: rgba(255,255,255,.07);

  --text: #E8EAEE;
  --text-2: #9AA1AC;
  --text-3: #8A93A2;
  --text-ink: #E8EAEE;
  --text-ink-2: #9AA1AC;
  --text-ink-3: #6C7482;

  --accent: #C7CEDA;
  --accent-on: #0E0F11;
  --btn: #E8EAEE;
  --btn-text: #0E0F11;
  --btn-hover: #FFFFFF;
  --btn-hover-text: #0E0F11;

  --chip-lt: rgba(255,255,255,.07);
  --chip-lt-line: rgba(255,255,255,.12);
  --card-lt: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  --card-lt-line: rgba(255,255,255,.1);

  --input-bg: rgba(255,255,255,.05);
  --input-line: rgba(255,255,255,.18);
  --focus-ring: rgba(199,206,218,.14);

  --nav-bg: rgba(14,15,17,.85);
  --nav-line: rgba(255,255,255,.08);
  --nav-text: #9AA1AC;
  --nav-text-on: #FFFFFF;
  --nav-hover-bg: rgba(255,255,255,.06);
  /* 智能在设计系统里没有独立组合标, 顶栏照旧挂飞驼网络的 (深底版), 点它回主站.
     板块身份靠二级条左边的"飞驼智能"文字. */
  --logo: url("/assets/logo/feituo-lockup-dark.png");
  --logo-h: 36px;
  --logo-w: 84px;
  --logo-blend: normal;
  /* 智能的母题是圆环节点, 银色 (--mark) */
  --motif: url("/assets/motif/motif-node.svg");

  --foot-bg: #0A0B0D;
  --foot-text: #8A93A2;
  --foot-dim: #5F6672;
  --foot-faint: #4A505B;
}

/* ---------- 基础 ---------- */

*, *::before, *::after { box-sizing: border-box; }

/* hidden 属性必须压得过下面那些 display:flex/grid 的规则.
   浏览器给 [hidden] 的默认 display:none 是**作者样式之下**的优先级,
   任何一条 .chat__panel{display:flex} 都能把它盖掉 -- 表现成"收起的面板一直开着",
   而且看 HTML 时 hidden 属性明明在, 极难联想到是 CSS 盖的. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
/* 任何一块横向溢出都不许把整页撑宽: 之前页脚站点地图在手机上把 document 撑到 732px,
   fixed 定位的聊天入口跟着被推到视口外 (审视 0.1 / 0.2). clip 不产生滚动容器, sticky 顶栏不受影响. */
html, body { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 900; }

.icon { width: 1em; height: 1em; display: block; }

/* 只给读屏器的文字 */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 版心 */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }

/* 区块.
   .sec--ink 是深色区, .sec--lt 是浅色区. 相邻两个同色区之间不重复上下留白,
   否则中间会空出两倍的距离 (设计稿里 features 接 stats 就是这么处理的). */
.sec { padding: var(--gap-block) var(--pad); position: relative; }
.sec--ink { background: var(--ink); color: var(--text-ink); }
.sec--lt { background: var(--surface); color: var(--text); }
.sec--alt { background: var(--surface-2); color: var(--text); border-top: 1px solid var(--line); }
.sec--ink + .sec--ink { padding-top: 0; }
.sec--ink + .sec--ink > .wrap { border-top: 1px solid var(--line-ink); padding-top: clamp(64px, 8vw, 110px); }
.sec--lt + .sec--lt { padding-top: 0; }

/* 深色区里的网格底纹 -- 设计稿三份都有, 是这套视觉的识别特征之一 */
.sec--ink::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 80px);
}
.sec--ink > * { position: relative; }

/* 区块头 */
.sec__head { max-width: 760px; }
.sec__head--wide { max-width: 100%; }

.eyebrow {
  margin: 0 0 22px; font-family: var(--mono); font-size: 12px;
  letter-spacing: .3em; color: var(--text-3);
  display: flex; align-items: center; gap: 10px;
}
.sec--ink .eyebrow { color: var(--text-ink-3); }
/* 眉标前面这一个是全站出现最多的品牌元素 -- 每个块都有眉标, 所以任何滚动位置都看得到它.
   用 mask 而不是 <img>: 颜色跟 --mark 走 (主站橙 / 云仓青 / 智能银), 一份 svg 三种身份.
   尺寸 14px 是量出来的: 10-12px 时屋顶 Ô 的两个同心圆会并成一团 (scratchpad 的对比图). */
.eyebrow::before {
  content: ""; width: 14px; height: 14px; flex: none;
  background: var(--mark, var(--accent));
  -webkit-mask: var(--motif) center / contain no-repeat;
  mask: var(--motif) center / contain no-repeat;
}
/* 没有母题变量时 (理论上不会发生) 退回原来的小方块, 不至于整行空一块 */
@supports not (mask: url("")) {
  .eyebrow::before { width: 8px; height: 8px; -webkit-mask: none; mask: none; }
}

.sec__title {
  margin: 0 0 24px; font-size: clamp(30px, 4.4vw, 56px);
  line-height: 1.25; color: var(--text); text-wrap: balance;
}
.sec--ink .sec__title { color: #FFFFFF; }
.sec__lede { margin: 0; font-size: 17px; line-height: 1.95; color: var(--text-2); }
.sec--ink .sec__lede { color: var(--text-ink-2); }
.sec__lede p { margin: 0 0 1em; }
.sec__lede p:last-child { margin-bottom: 0; }

/* 按钮 */
.btns { margin: 40px 0 0; display: flex; gap: 16px; flex-wrap: wrap; }
.btn {
  display: inline-block; padding: 15px 34px; border-radius: var(--r-pill);
  font-size: 15px; font-weight: 600; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.btn--primary { background: var(--btn); color: var(--btn-text); border: 1px solid transparent; }
.btn--primary:hover { background: var(--btn-hover); color: var(--btn-hover-text); }
.btn--ghost { border: 1px solid var(--line-ink); color: var(--text-ink); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.sec--lt .btn--ghost { border-color: var(--line); color: var(--text); }
.sec--lt .btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.sec--lt .btn--primary { background: var(--ink); color: #FFFFFF; }
.sec--lt .btn--primary:hover { background: var(--accent); }

/* 图标芯片 */
.chip {
  display: inline-flex; width: 36px; height: 36px; flex: none;
  align-items: center; justify-content: center;
  border-radius: 10px; background: var(--chip-lt); border: 1px solid var(--chip-lt-line);
  color: var(--accent);
}
.chip .icon { width: 19px; height: 19px; }
.sec--ink .chip { background: var(--chip); border-color: var(--chip-line); color: #C9D2DE; }

/* ---------- chrome: 导航 ---------- */

.masthead {
  position: sticky; top: 0; z-index: 60;
  background: var(--nav-bg); border-bottom: 1px solid var(--nav-line);
  -webkit-backdrop-filter: saturate(1.4) blur(18px);
  backdrop-filter: saturate(1.4) blur(18px);
}
.masthead__bar {
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad);
  min-height: 58px; display: flex; align-items: center;
  justify-content: space-between; gap: 24px;
}
.brand { display: flex; align-items: center; gap: 12px; flex: none; }
/* logo 放大到 24px 并配汉字: 字标只有 "FLYTO" 没有一个汉字, 中文访客读不出公司名
   (owner 2026-09-04: "首页只有一个小 logo, 不像官网"). */
/* 组合标 = 橙角 FLYTO 字标 + "—— 飞驼网络 ——" (按 owner VI 里云仓组合标的格式合成, 见 docs/DESIGN_IMPLEMENTATION.md).
   两行, 汉字在图里, 旁边不再放文字. 尺寸按标的比例走变量: 飞驼 84x36, 云仓 62x36. */
.brand__logo {
  display: block; height: var(--logo-h, 36px); width: var(--logo-w, 84px);
  background: var(--logo) left center / contain no-repeat;
  mix-blend-mode: var(--logo-blend);
}
.brand__name { display: none; }
.nav { display: flex; align-items: center; gap: 2px; font-size: 14px; }
.nav > a, .nav__item > a { color: var(--nav-text); padding: 8px 14px; border-radius: 8px; transition: color .2s, background .2s; position: relative; }
.nav > a:hover, .nav__item:hover > a, .nav__item.is-open > a { color: var(--nav-text-on); background: var(--nav-hover-bg); }
/* 当前页: 文字提亮 + 2px 底线 (与 hover 的背景块区分), 服务端输出 aria-current, 无 JS 生效 */
.nav a[aria-current]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; background: var(--accent); border-radius: 1px; }
.nav a[aria-current] { color: var(--nav-text-on); }
.nav__item { position: relative; display: flex; align-items: center; }
.nav__item--has-menu > a { padding-right: 6px; border-radius: 8px 0 0 8px; }
.nav__toggle {
  background: none; border: none; color: var(--nav-text); cursor: pointer; padding: 8px 8px 8px 2px;
  border-radius: 0 8px 8px 0; display: inline-flex; align-items: center;
}
.nav__toggle .icon { width: 12px; height: 12px; transition: transform .2s; }
.nav__item:hover .nav__toggle, .nav__item.is-open .nav__toggle { color: var(--nav-text-on); background: var(--nav-hover-bg); }
.nav__item.is-open .nav__toggle .icon { transform: rotate(180deg); }
.nav__menu {
  position: absolute; top: calc(100% + 10px); left: -8px; min-width: 300px; z-index: 70;
  padding: 10px; border-radius: 16px;
  background: var(--nav-bg); border: 1px solid var(--nav-line);
  -webkit-backdrop-filter: saturate(1.4) blur(20px); backdrop-filter: saturate(1.4) blur(20px);
  box-shadow: 0 24px 64px rgba(0,0,0,.35);
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}
/* 无 JS: :hover / :focus-within 兜底; 有 JS: .is-open (150ms 意图延迟 + click/键盘) */
.nav__item:hover > .nav__menu, .nav__item:focus-within > .nav__menu, .nav__item.is-open > .nav__menu { opacity: 1; transform: none; pointer-events: auto; }
.js .nav__item:hover > .nav__menu { opacity: 0; transform: translateY(6px); pointer-events: none; }
.js .nav__item.is-open > .nav__menu, .js .nav__item:focus-within > .nav__menu { opacity: 1; transform: none; pointer-events: auto; }
.nav__menu::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; } /* 悬停桥, 斜穿不掉 */
.nav__link, .nav__group-head { display: block; padding: 10px 12px; border-radius: 10px; color: var(--nav-text-on); }
.nav__link:hover, .nav__group-head:hover { background: var(--nav-hover-bg); }
.nav__link b, .nav__group-head b { display: block; font-weight: 600; font-size: 14px; }
.nav__link span, .nav__group-head span { display: block; margin-top: 3px; font-size: 12px; line-height: 1.5; color: var(--nav-text); }
.nav__group { padding: 2px 0; }
.nav__group + .nav__group { border-top: 1px solid var(--nav-line); margin-top: 4px; padding-top: 6px; }
.nav__group-links { display: flex; flex-wrap: wrap; gap: 2px; padding: 0 12px 8px; }
.nav__group-links a { font-size: 12.5px; color: var(--nav-text); padding: 4px 10px; border-radius: 6px; background: var(--nav-hover-bg); }
.nav__group-links a:hover { color: var(--nav-text-on); }
/* 产品与服务的两条 (智能在上, 云仓在下) 要比别的下拉宽 */
.nav__item:first-child .nav__menu { min-width: 380px; }
@media (prefers-reduced-motion: reduce) { .nav__menu, .nav__toggle .icon { transition: none; } }
.nav__cta {
  background: var(--btn); color: var(--btn-text) !important;
  padding: 9px 20px !important; border-radius: var(--r-pill); margin-left: 12px; font-weight: 600;
}
.nav__cta:hover { background: var(--btn-hover); color: var(--btn-hover-text) !important; }

.menu-btn {
  display: none; align-items: center; gap: 8px; cursor: pointer;
  background: none; border: 1px solid var(--nav-line); color: var(--nav-text);
  border-radius: var(--r-pill); padding: 7px 16px; font: inherit; font-size: 13px;
}
.menu-btn .icon { width: 16px; height: 16px; }

/* 板块二级导航 (Apple 产品页形态): 板块名 · 本板块页面 · 板块 CTA, 紧贴顶栏 sticky */
.subnav { position: sticky; top: 58px; z-index: 55; background: var(--nav-bg); border-bottom: 1px solid var(--nav-line); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.subnav__bar { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); min-height: 44px; display: flex; align-items: center; gap: 22px; }
.subnav__name { margin: 0; font-weight: 700; font-size: 15px; color: var(--nav-text-on); }
.subnav__name a { display: inline-flex; align-items: center; gap: 10px; }
.subnav__text { letter-spacing: .1em; }
/* 回主站的面包屑: 顶栏挂板块自己的标时, 这是唯一一条回家的路, 所以别做成装饰性小字 */
.subnav__crumb { margin: 0; font-size: 13.5px; display: flex; align-items: center; gap: 8px; flex: none; }
.subnav__crumb a { color: var(--nav-text); padding: 6px 10px 6px 0; border-radius: 8px; }
.subnav__crumb a:hover { color: var(--nav-text-on); text-decoration: underline; text-underline-offset: 3px; }
.subnav__sep { color: var(--nav-line); }
.subnav__list { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; font-size: 13.5px; flex: 1; }
.subnav__list a { color: var(--nav-text); padding: 6px 12px; border-radius: 8px; position: relative; }
.subnav__list a:hover { color: var(--nav-text-on); background: var(--nav-hover-bg); }
.subnav__list a[aria-current] { color: var(--nav-text-on); }
.subnav__list a[aria-current]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; background: var(--accent); }
.subnav__cta { flex: none; font-size: 13px; font-weight: 600; padding: 7px 16px; border-radius: var(--r-pill); background: var(--btn); color: var(--btn-text); }
.subnav__cta:hover { background: var(--btn-hover); color: var(--btn-hover-text); }
@media (max-width: 900px) { .subnav { display: none; } } /* 移动端并进抽屉顶部 */

/* 移动端抽屉. 默认 hidden, 由 JS 开合; 没有 JS 时导航直接横排 (见下面的媒体查询) */
.drawer {
  background: var(--nav-bg); border-bottom: 1px solid var(--nav-line);
  padding: 8px var(--pad) 20px; display: flex; flex-direction: column; gap: 2px;
}
.drawer a { color: var(--nav-text-on); padding: 13px 4px; font-size: 16px; border-bottom: 1px solid var(--nav-line); }
.drawer a:last-child { border-bottom: none; }
.drawer__group { border-bottom: 1px solid var(--nav-line); }
.drawer__group summary { list-style: none; cursor: pointer; padding: 13px 4px; font-size: 16px; color: var(--nav-text-on); display: flex; justify-content: space-between; align-items: center; }
.drawer__group summary::-webkit-details-marker { display: none; }
.drawer__group summary::after { content: "+"; font-size: 20px; color: var(--nav-text); }
.drawer__group[open] summary::after { content: "−"; }
.drawer__group a { display: block; border-bottom: none; padding: 9px 4px 9px 18px; font-size: 15px; color: var(--nav-text); }
.drawer__group a.drawer__leaf { padding-left: 34px; font-size: 14px; }
.drawer__sub { margin: 6px 0 0; padding: 4px 4px 0 18px; }
.drawer__sub a { padding: 0; font-weight: 600; color: var(--nav-text-on); }
.drawer .nav__cta {
  margin: 12px 0 0 !important; text-align: center; padding: 13px !important;
  border-radius: var(--r-sm); border-bottom: none;
}

@media (max-width: 900px) {
  /* JS 可用时收进抽屉; 不可用时 .nav 保持可见并换行, 导航永远够得着 */
  .js .masthead__bar > .nav { display: none; }
  .js .menu-btn { display: inline-flex; }
  .nav { flex-wrap: wrap; justify-content: flex-end; }
  .masthead__bar { padding-top: 8px; padding-bottom: 8px; }
}
@media (min-width: 901px) { .drawer { display: none !important; } }

/* ---------- hero ---------- */

.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 70%, var(--ink) 100%);
  color: var(--text-ink);
}
[data-section="yuncang"] .hero { background: linear-gradient(165deg, #0B2C6B 0%, #123A8F 62%, #16418F 100%); }
[data-section="zhineng"] .hero { background: radial-gradient(80% 100% at 50% -20%, #1B1E24 0%, #0E0F11 70%); }

.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 90px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 90px);
  -webkit-mask-image: radial-gradient(75% 85% at 72% 45%, #000 0%, transparent 78%);
  mask-image: radial-gradient(75% 85% at 72% 45%, #000 0%, transparent 78%);
}
.hero__glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 90% at 78% 30%, var(--glow, rgba(74,90,115,.34)) 0%, transparent 100%);
}
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero__inner {
  position: relative; max-width: var(--wrap); margin: 0 auto;
  padding: clamp(80px, 10vw, 110px) var(--pad);
}
/* 两栏只在真有右侧图时才分. 图位目前普遍是空的 (素材未到),
   无条件写成两栏的话云仓/智能的 hero 会白空半边 --
   主站看不出来是因为粒子动画正好占着那一侧. */
.hero__inner--split {
  /* 文案栏略宽于右侧 (1.15 : 1): 标题是两句话, 逗号处断行才读得通 --
     两栏对半分时它会被挤成三行, "物理世界"拆在两行上. */
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 64px 56px; align-items: center;
}
@media (max-width: 860px) { .hero__inner--split { grid-template-columns: 1fr; } }
.hero__inner--split .hero__title { font-size: clamp(34px, 4.1vw, 58px); }
/* 单栏时标题不能横贯 1240px, 否则一行十几个大字读起来像标语墙 */
.hero__inner:not(.hero__inner--split) .hero__title { max-width: 16em; }
/* 眉标是身份行, 不是装饰: 访客第一眼要读到"飞驼网络". 20px 常规字重, 不再是 mono 小字.
   (owner 2026-09-04) 板块页的眉标仍写"飞驼网络 · 能力内核 / 验证场景", 点明层级. */
.hero__eyebrow {
  margin: 0 0 26px; font-size: 20px; font-weight: 500; letter-spacing: .06em; color: var(--text-ink);
  display: flex; align-items: center; gap: 14px;
}
.hero__eyebrow::before { content: ""; width: 12px; height: 12px; flex: none; background: var(--mark, var(--accent)); }
.hero__title {
  margin: 0; font-size: clamp(36px, 4.8vw, 66px); line-height: 1.22;
  letter-spacing: .01em; color: #FFFFFF; text-wrap: balance;
}
.hero__sub { margin: 30px 0 0; max-width: 540px; font-size: 16.5px; line-height: 1.95; color: var(--text-ink-2); }
.hero__figure { position: relative; }
.hero__figure img { display: block; width: 100%; border-radius: var(--r-lg); }

/* hero 下方的数字条: 由渲染层从同页 stats 块取前三条, 模板里不写死数字 */
.hero__facts {
  margin: 46px 0 0; padding: 0; list-style: none;
  display: flex; gap: 28px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--text-ink-3);
}
.hero__facts b { color: #FFFFFF; font-weight: 600; font-size: 15px; margin-right: .4em; }

/* 智能站是居中式 */
[data-section="zhineng"] .hero__inner { display: block; max-width: 1080px; text-align: center; }
[data-section="zhineng"] .hero__eyebrow { display: inline-flex; }
[data-section="zhineng"] .hero__title {
  margin: 0 auto; max-width: 14em;
  background: linear-gradient(180deg, #FFFFFF 40%, #8A93A2);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-section="zhineng"] .hero__sub { margin: 28px auto 0; max-width: 560px; }
[data-section="zhineng"] .hero .btns { justify-content: center; }
[data-section="zhineng"] .hero__facts { justify-content: center; }
[data-section="zhineng"] .hero__figure { margin: 64px auto 0; max-width: 920px; }

/* ---------- hero 仪表盘 demo: 粒子动画的终点 ----------
 * 三段: (1) JS 起初把它藏着 (只在 .js 下), 粒子在 canvas 上聚成它的线框;
 *       (2) 粒子到位后 JS 加 .is-live, 卡片从线框里浮现;
 *       (3) 浮现后各部件按各自的 transition-delay 依次"活"过来 --
 *           柱子长出来, 波次条填上, 浮卡从左滑入.
 * 没有 JS 时没有 .js, 下面所有 :not(.is-live) 的隐藏态都不生效, 直接是终态.
 */
.demo { position: relative; padding: 0 0 30px; }
.js .demo:not(.is-live) { opacity: 0; transform: translateY(14px) scale(.965); }
.demo { transition: opacity .9s cubic-bezier(.2,.6,.2,1), transform .9s cubic-bezier(.2,.6,.2,1); }
.demo__halo {
  position: absolute; inset: -50px; pointer-events: none; filter: blur(8px);
  background: radial-gradient(60% 60% at 60% 35%, rgba(124,138,160,.13), transparent 70%);
}
.demo__card {
  position: relative; padding: 26px 26px 20px; border-radius: 24px;
  background: rgba(13,20,34,.78); border: 1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: 0 40px 100px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
  animation: ftFloat 8s ease-in-out infinite;
}
@keyframes ftFloat { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-14px) } }
.demo__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.demo__title { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; color: #E9EDF4; }
.demo__tag { font-family: var(--mono); font-size: 10px; letter-spacing: .3em; color: #55607A; }
.demo__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.demo__tile {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px; padding: 12px 14px;
}
.demo__label { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: #8B98AC; }
.demo__num { display: block; margin-top: 6px; font-size: 19px; font-weight: 700; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.demo__num--accent { color: #7C8AA0; }
.demo__bars { display: flex; align-items: flex-end; gap: 5px; height: 58px; margin-bottom: 18px; }
.demo__bar {
  flex: 1; height: var(--h); border-radius: 3px; background: rgba(139,152,172,.3);
  transform-origin: bottom;
  transition: transform .7s cubic-bezier(.2,.7,.2,1) calc(.35s + var(--i, 0) * .05s);
}
.demo__bar--hi { background: #7C8AA0; }
.js .demo:not(.is-live) .demo__bar { transform: scaleY(.04); }
.demo__waves { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.demo__wave { display: flex; align-items: center; gap: 12px; font-size: 12.5px; }
.demo__wlabel { font-family: var(--mono); color: #94A0B8; flex: none; width: 58px; }
.demo__track { flex: 1; height: 5px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.demo__fill {
  display: block; height: 100%; width: var(--w); border-radius: 99px;
  background: rgba(139,152,172,.55);
  transition: width 1.1s cubic-bezier(.2,.7,.2,1) .55s;
}
.demo__fill--active { background: linear-gradient(90deg, #7C8AA0, #C9D2DE); }
.js .demo:not(.is-live) .demo__fill { width: 0; }
.demo__status { font-family: var(--mono); font-size: 11px; color: #55607A; }
.demo__status--on { color: #7C8AA0; }
.demo__agent {
  margin: 0; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.08);
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: #8B98AC; min-height: 1.6em;
}
.demo__agent-k { color: #7C8AA0; }
.demo__float {
  position: absolute; left: -24px; bottom: -4px; padding: 13px 18px; border-radius: 14px;
  background: rgba(10,15,26,.92); border: 1px solid rgba(255,255,255,.14); border-left: 3px solid #7C8AA0;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font-family: var(--mono); font-size: 11px; line-height: 1.9; color: #94A0B8; white-space: nowrap;
  transition: opacity .6s cubic-bezier(.2,.6,.2,1) 1.2s, transform .6s cubic-bezier(.2,.6,.2,1) 1.2s;
}
.demo__float-t { color: #E9EDF4; }
.js .demo:not(.is-live) .demo__float { opacity: 0; transform: translateX(-18px); }
@media (max-width: 900px) { .demo__float { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .js .demo:not(.is-live) { opacity: 1; transform: none; }
  .js .demo:not(.is-live) .demo__bar { transform: none; }
  .js .demo:not(.is-live) .demo__fill { width: var(--w); }
  .js .demo:not(.is-live) .demo__float { opacity: 1; transform: none; }
  .demo__card { animation: none; }
}

/* ---------- 块底图 ----------
 * 图铺满, 主体在右; scrim 从左往右由实到透, 文字压在左侧实的那一段上.
 * 深色区已有的网格底纹 (::before) 叠在图上面, 保持和别的深色块一致的质感. */
.sec--bg { overflow: hidden; }
.sec__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.sec__bg img, .sec__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; display: block; }
/* 视频默认透明, 真开始播了 (site.js 加 .is-playing) 才淡入盖住图 -- 图到视频之间不闪 */
.sec__video { opacity: 0; transition: opacity 1.2s ease; }
.sec__video.is-playing { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .sec__video { display: none; } }

/* story 模式: 视频先独占, 文字后出.
   文字的隐藏只在 .js 且视频真在播 (.is-story-playing) 时生效 -- 没有 JS / autoplay 被拒 /
   reduced-motion, 文字从一开始就在, 内容永远不依赖视频. */
.sec--story { min-height: min(100vh, 900px); }
.js .sec--story.is-story-playing .statement__copy:not(.is-shown) { opacity: 0; transform: translateY(18px); }
.statement__copy { transition: opacity 1.4s cubic-bezier(.2,.6,.2,1), transform 1.4s cubic-bezier(.2,.6,.2,1); }
/* story 模式的蒙版不是"左压右透的渐变", 是 Apple 那种**整块沉黑**:
   视频独占时零蒙版 (震撼归震撼, 一点都不压); 到 reveal 时刻整个画面均匀沉到接近纸面色,
   文字从黑里浮出来 -- 视频还在下面隐隐地动, 但已经是余像.
   没有 JS 时直接是沉黑态 (文字一开始就在, 必须可读). */
.sec--story .sec__scrim { opacity: 1; background: rgba(10,15,26,.86); transition: opacity 2.2s cubic-bezier(.4,0,.2,1); }
.js .sec--story.is-story-playing:not(.is-copy-shown) .sec__scrim { opacity: 0; }
/* 文字浮出比沉黑慢半拍, 先黑再出字 */
.sec--story .statement__copy { transition-delay: .6s; }
/* story 的文字是一屏一句: 居中, 标题大, 正文一行. 不是左栏长文 (owner: "太啰嗦了").
   正文长度由内容控制 -- 这里只保证它一行也站得住, 三段也不至于崩. */
.sec--story .statement__grid { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.sec--story .statement__copy { max-width: 880px; }
.sec--story .eyebrow { justify-content: center; }
.sec--story .sec__title { font-size: clamp(36px, 5.6vw, 76px); margin-bottom: 28px; }
.sec--story .statement__body { max-width: 100%; color: var(--text-ink-2); }
/* 第一段是副标题 (一句), 后面的是小字 (两三句) -- 两档字号, 不然一样大就又是一堵墙 */
.sec--story .statement__body p { margin: 0 0 .8em; font-size: clamp(17px, 1.6vw, 22px); line-height: 1.9; }
.sec--story .statement__body p + p { max-width: 640px; margin: 22px auto 0; font-size: 15px; line-height: 1.9; color: var(--text-ink-3); }
/* 播完定格在末帧 (渐黑的那帧), 视频留着不撤, 文字压在上面 */
/* scrim 尽量轻: 图自己的暗部就该是纸面色 (#0A0F1A), 靠蒙版硬遮出来的暗区和图之间总有一条
   看得见的过渡带, 那就是"贴上去的"感觉 (owner 2026-09-03 拿 Apple 官网对比过).
   这里只在最左 40% 给文字垫一点, 上下边各压一点让块和相邻深色区无缝. 出图时就要求图的左侧是纯暗底. */
.sec__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(10,15,26,.55) 0%, rgba(10,15,26,.3) 28%, rgba(10,15,26,0) 46%),
    linear-gradient(180deg, rgba(10,15,26,.6) 0%, rgba(10,15,26,0) 18%, rgba(10,15,26,0) 82%, rgba(10,15,26,.6) 100%);
}
.sec--lt .sec__scrim { background: linear-gradient(90deg, var(--surface) 0%, var(--surface) 30%, rgba(246,247,249,.8) 55%, rgba(246,247,249,0) 100%); }
.sec--bg > .wrap { position: relative; z-index: 1; }
.sec--bg.sec--ink::before { display: none; }
/* 有底图时正文那一栏收窄, 别压到图的主体上 */
.sec--bg .statement__grid { grid-template-columns: minmax(0, 620px) 1fr; }
/* 有底图时这一块要比普通块高一点, 给图留呼吸 */
.sec--bg { min-height: min(72vh, 720px); display: flex; align-items: center; }
@media (max-width: 860px) {
  .sec--bg .statement__grid { grid-template-columns: 1fr; }
  .sec__bg img { object-position: 70% center; }
  /* 窄屏图在文字后面, scrim 改成整体压暗 */
  .sec__scrim { background: rgba(10,15,26,.74); }
  .sec--lt .sec__scrim { background: rgba(246,247,249,.86); }
}

/* ---------- statement: 左文右图 ---------- */

.statement__grid {
  max-width: var(--wrap); margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 64px; align-items: center;
}
/* 无图时这一栏会占满 1240px, 中文正文一行 90+ 字读不下去. 限宽到 720px --
   有图时它本来就只有半栏宽, 这条限制不起作用. */
.statement__body { max-width: 720px; font-size: 17px; line-height: 2; color: var(--text-2); }
.sec--ink .statement__body { color: var(--text-ink-2); }
/* 深色区里图的阴影要更重, 不然图和底融成一片看不出边界 */
.sec--ink .statement__figure { box-shadow: 0 40px 100px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); }
/* hero 紧接深色 statement 时, 两块之间不要再叠一次留白 */
.hero + .sec--ink { padding-top: 0; }
.hero + .sec--ink > .wrap { padding-top: var(--gap-block); }
.statement__body p { margin: 0 0 1.4em; }
.statement__body p:last-child { margin-bottom: 0; }
.statement__figure {
  margin: 0; aspect-ratio: 4/3; border-radius: var(--r-lg); overflow: hidden;
  box-shadow: 0 32px 80px rgba(10,15,26,.14);
}
.statement__figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 要点列表 (智能站的"落地场景"那种) */
.points { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.points li { display: flex; gap: 12px; align-items: baseline; font-size: 14.5px; color: var(--text-2); }
.points li::before { content: "▸"; font-family: var(--mono); font-size: 11px; color: var(--text-3); flex: none; }
.sec--ink .points li { color: var(--accent); }

/* ---------- pillars ---------- */

/* pillars: 横排卡片. 一开始主站是纵向大编号列表 (照设计稿), 上线后像目录,
   owner 2026-09-04 问"白底这屏打算怎么弄" -- 答案不是换深色 (连续三块深 + 视频人会疲, 白底是喘息
   和"从问题进入方法"的翻页), 是把版式从文档式改成一屏方法论: 四步横排, 幽灵描边大编号, 说明一段.
   白底上这种排版本身就有质感, 不需要图. 三个板块统一用这个, 主站的编号更大. */
.pillars {
  list-style: none; margin: 56px 0 0; padding: 0; counter-reset: pillar;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px;
}
.pillars > li {
  counter-increment: pillar; padding: 34px 28px 32px;
  background: var(--card-lt); border: 1px solid var(--card-lt-line); border-radius: 20px;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.pillars > li:hover { transform: translateY(-4px); box-shadow: 0 24px 56px rgba(10,15,26,.1); border-color: var(--accent); }
.sec--ink .pillars > li { background: var(--card); border-color: var(--card-line); }
.sec--ink .pillars > li:hover { border-color: rgba(124,138,160,.5); box-shadow: 0 24px 60px rgba(0,0,0,.4); }
.pillars__num {
  margin: 0 0 22px; font-family: var(--serif); font-weight: 900;
  font-size: clamp(56px, 5.5vw, 84px); line-height: .9;
  color: transparent; -webkit-text-stroke: 1.5px #AEB9CB;
}
.pillars__num::after { content: ""; display: block; width: 34px; height: 3px; background: var(--accent); margin-top: 18px; }
.pillars__body h3 { margin: 0 0 12px; font-family: var(--sans); font-size: 21px; font-weight: 700; color: var(--text); }
.sec--ink .pillars__body h3 { color: #FFFFFF; }
.pillars__body p { margin: 0; font-size: 14.5px; line-height: 1.9; color: var(--text-2); }
.sec--ink .pillars__body p { color: var(--text-ink-2); }
/* 云仓 / 智能: 同样的卡, 编号小一号, 品牌色描边 */
[data-section="yuncang"] .pillars__num { font-size: 34px; -webkit-text-stroke-color: #9DB2D6; margin-bottom: 12px; }
[data-section="zhineng"] .pillars__num { font-size: 34px; -webkit-text-stroke-color: #4A505B; margin-bottom: 12px; }
[data-section="yuncang"] .pillars__num::after, [data-section="zhineng"] .pillars__num::after { display: none; }
[data-section="yuncang"] .pillars__body h3, [data-section="zhineng"] .pillars__body h3 { font-size: 18px; margin-bottom: 10px; }
[data-section="yuncang"] .pillars__body p, [data-section="zhineng"] .pillars__body p { font-size: 14px; }
[data-section="yuncang"] .pillars > li:hover { border-color: var(--btn); box-shadow: 0 24px 56px rgba(11,44,107,.13); }

/* ---------- 卡片网格: features / showcase 共用 ---------- */

.cards {
  list-style: none; margin: 56px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px;
}
.card {
  background: var(--card-lt); border: 1px solid var(--card-lt-line);
  border-radius: var(--r-card); padding: 32px 28px 36px;
  transition: transform .25s, box-shadow .25s, border-color .25s;
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 24px 56px rgba(10,15,26,.12); border-color: var(--accent); }
.sec--ink .card { background: var(--card); border-color: var(--card-line); }
.sec--ink .card:hover { border-color: rgba(124,138,160,.5); box-shadow: 0 24px 60px rgba(0,0,0,.4); }

.card__figure { aspect-ratio: 16/9; border-radius: var(--r-md); overflow: hidden; margin: 0 0 22px; background: var(--chip-lt); }
.card__figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
.card__label {
  margin: 0 0 16px; font-family: var(--mono); font-size: 11px;
  letter-spacing: .28em; color: var(--accent); text-transform: uppercase;
}
.card__title {
  margin: 0 0 14px; font-family: var(--sans); font-size: 20px; font-weight: 700;
  color: var(--text); display: flex; align-items: center; gap: 12px;
}
.sec--ink .card__title { color: #FFFFFF; }
.card__title a:hover { color: var(--accent); }
.card__desc { margin: 0; font-size: 14.5px; line-height: 1.9; color: var(--text-2); }
.sec--ink .card__desc { color: var(--text-ink-2); }
.card__tags { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.card__tags li {
  font-size: 12px; padding: 4px 12px; border-radius: var(--r-pill);
  background: var(--chip-lt); border: 1px solid var(--chip-lt-line); color: var(--text-2);
}
.card__go { color: var(--accent); font-weight: 400; }

/* showcase 首卡在浅色区里反白 -- 设计稿用它标"已验证"的那一张 */
.sec--lt .cards--showcase > li:first-child {
  background: var(--ink); border-color: var(--ink); color: var(--text-ink);
}
.sec--lt .cards--showcase > li:first-child .card__title { color: #FFFFFF; }
.sec--lt .cards--showcase > li:first-child .card__desc { color: var(--text-ink-2); }
.sec--lt .cards--showcase > li:first-child .chip { background: var(--chip); border-color: var(--chip-line); color: #C9D2DE; }
.sec--lt .cards--showcase > li:first-child .card__figure { background: rgba(255,255,255,.06); }
.sec--lt .cards--showcase > li:first-child:hover { box-shadow: 0 22px 52px rgba(10,15,26,.35); }

/* ---------- stats ---------- */

.stats {
  margin: 64px 0 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0;
}
.stats > div { padding: 32px; border-left: 1px solid var(--line); }
.sec--ink .stats > div { border-color: var(--line-ink); }
.stats > div:first-child { padding-left: 32px; }
.stats dt {
  font-family: var(--serif); font-weight: 900; font-size: clamp(48px, 5.4vw, 76px); line-height: 1;
  color: var(--text);
}
.sec--ink .stats dt {
  background: linear-gradient(180deg, #FFFFFF 35%, #76839B);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stats dd { margin: 18px 0 0; font-size: 15px; font-weight: 600; color: var(--text); }
.sec--ink .stats dd { color: var(--text-ink); }
.stats__note { display: block; margin-top: 8px; font-weight: 400; font-size: 13.5px; line-height: 1.8; color: var(--text-3); }
.sec--ink .stats__note { color: var(--text-ink-2); }

/* ---------- richtext ---------- */

.prose-wrap { max-width: 760px; margin: 0 auto; }
.prose-wrap > .sec__title {
  margin-bottom: 56px; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.3;
  padding-bottom: 28px; border-bottom: 1px solid var(--line);
}
.prose { font-size: 17px; line-height: 2.1; color: var(--text); }
.prose > *:first-child { margin-top: 0; }
.prose > *:last-child { margin-bottom: 0; }
.prose h2 { font-size: clamp(24px, 3vw, 30px); line-height: 1.4; color: var(--text); margin: 2.2em 0 .8em; }
.prose h3 { font-family: var(--sans); font-size: 20px; font-weight: 700; line-height: 1.5; margin: 1.8em 0 .6em; }
.prose h4 { font-family: var(--sans); font-size: 17px; font-weight: 700; margin: 1.6em 0 .5em; }
.prose p { margin: 0 0 1.5em; }
.prose ul, .prose ol { margin: 0 0 1.5em; padding-left: 1.4em; }
.prose li { margin: 0 0 .6em; }
.prose li::marker { color: var(--accent); }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--text); }
.prose b, .prose strong { color: var(--text); font-weight: 700; }
.prose code {
  font-family: var(--mono); font-size: .88em; padding: 2px 6px; border-radius: 5px;
  background: var(--chip-lt); border: 1px solid var(--chip-lt-line);
}
.prose blockquote {
  margin: 2em 0; padding: 4px 0 4px 28px; border-left: 3px solid var(--accent);
  font-family: var(--serif); font-weight: 700; font-size: 20px; line-height: 1.9; color: var(--text);
}
.prose blockquote p { margin: 0; }
.prose figure { margin: 2em 0; }
.prose img { display: block; width: 100%; border-radius: var(--r-md); }
.prose figcaption { margin-top: 12px; font-size: 13.5px; color: var(--text-3); text-align: center; }
.prose hr { margin: 2.5em 0; border: none; border-top: 1px solid var(--line); }
/* 表格在窄屏要能横向滚, 不能把整页撑宽 */
.prose .table-scroll { overflow-x: auto; margin: 2em 0; }
.prose table { border-collapse: collapse; width: 100%; font-size: 14.5px; line-height: 1.7; }
.prose th, .prose td { padding: 12px 16px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose th { background: var(--chip-lt); font-weight: 700; }

/* ---------- CTA ---------- */

.cta__inner { max-width: 880px; margin: 0 auto; text-align: center; }
.cta__inner .sec__title { margin-bottom: 28px; font-size: clamp(32px, 5vw, 64px); }
.cta__inner .sec__lede { margin: 0 auto; max-width: 640px; font-size: 16px; line-height: 2; }
.cta__inner .btns { justify-content: center; margin-top: 44px; }
.sec--cta::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(55% 80% at 50% 110%, var(--glow, rgba(74,90,115,.28)) 0%, transparent 100%);
}
.sec--cta > * { position: relative; z-index: 1; }
/* 转化块上的大母题: 极淡, 是纹理不是图形. 被按钮和文字压住一部分, 像印在纸上而不是贴上去 */
.cta__motif {
  /* 水平方向完整, 只让底边切出去一点 -- 母题认不出形状就失去意义了.
     (试过右下角各切一半: 云仓的屋顶 Ô 碰巧主体还在, 主站的切角方块就成了一段随机弧线) */
  position: absolute; right: clamp(20px, 5vw, 96px); bottom: clamp(-40px, -2.5vw, -10px);
  width: clamp(190px, 22vw, 300px); aspect-ratio: 1; z-index: 0; pointer-events: none;
  background: var(--mark, var(--accent));
  -webkit-mask: var(--motif) center / contain no-repeat;
  mask: var(--motif) center / contain no-repeat;
  opacity: .09;
}
/* 主站是近黑底 + 橙, 对比天生比云仓的蓝底 + 青弱, 给它多一点 */
[data-section="feituo"] .cta__motif { opacity: .13; }
@media (max-width: 720px) { .cta__motif { opacity: .07; width: clamp(150px, 40vw, 200px); } }

/* ---------- 留资表单 ---------- */

.lead__grid {
  max-width: var(--wrap); margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 56px; align-items: start;
}
.lead__form {
  background: var(--card-lt); border: 1px solid var(--card-lt-line);
  border-radius: 20px; padding: 40px 36px;
  box-shadow: 0 24px 64px rgba(10,15,26,.07);
  display: flex; flex-direction: column; gap: 20px;
}
.field { display: flex; flex-direction: column; gap: 9px; font-size: 14px; font-weight: 600; color: var(--text); }
.field__hint { font-weight: 400; color: var(--text-3); }
.field input, .field textarea {
  border: 1px solid var(--input-line); border-radius: var(--r-sm);
  padding: 0 16px; font-size: 16px; font-family: inherit; color: var(--text);
  background: var(--input-bg); outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.field input { height: 52px; }
.field textarea { padding: 14px 16px; line-height: 1.7; resize: vertical; }
.field input:focus, .field textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); background: var(--surface-2);
}
.lead__submit {
  height: 56px; border: none; border-radius: var(--r-sm);
  background: var(--ink); color: #FFFFFF; font-size: 16px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: background .2s;
}
.lead__submit:hover { background: var(--accent); }
.lead__submit[disabled] { opacity: .6; cursor: default; }
.lead__fine { margin: 0; font-size: 12.5px; line-height: 1.7; color: var(--text-3); text-align: center; }
.lead__status {
  margin: 0; padding: 16px; border-radius: var(--r-sm); font-size: 15px; font-weight: 600; text-align: center;
  background: var(--chip-lt); border: 1px solid var(--chip-lt-line); color: var(--text);
}
.lead__status--err { border-color: #E0A0A0; color: #A03030; background: #FDF3F3; }
/* honeypot: 给机器人看的, 真人看不到也 tab 不到 */
.lead__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* 智能站的极简居中表单 */
[data-section="zhineng"] .lead__grid { display: block; max-width: 880px; text-align: center; }
[data-section="zhineng"] .lead__form {
  margin: 40px auto 0; max-width: 520px; background: none; border: none;
  box-shadow: none; padding: 0; gap: 14px; text-align: left;
}
[data-section="zhineng"] .lead__intro .sec__title { font-size: clamp(30px, 4.6vw, 58px); }
[data-section="zhineng"] .lead__intro .sec__lede { margin: 0 auto; max-width: 520px; }

/* ---------- 联系方式 ---------- */

.contacts { margin: 0; display: flex; gap: 40px 56px; flex-wrap: wrap; }
.contacts > div { display: flex; align-items: center; gap: 14px; }
.contacts .chip { width: 44px; height: 44px; border-radius: var(--r-sm); background: var(--ink); border: none; color: var(--text-ink); }
.contacts .chip .icon { width: 20px; height: 20px; }
.contacts dt { font-size: 12.5px; color: var(--text-3); margin-bottom: 6px; }
.contacts dd { margin: 0; font-size: 16px; font-weight: 600; }
.contacts dd a:hover { color: var(--accent); }
.sec--contact { padding-top: 0; }
.sec--contact .wrap { border-top: 1px solid var(--line); padding-top: 48px; }
.sec--contact .sec__title {
  margin-bottom: 28px; font-family: var(--sans); font-size: 14px;
  font-weight: 600; letter-spacing: .2em; color: var(--text-2);
}

/* ---------- 仓网地图 ---------- */

.locations__grid {
  max-width: var(--wrap); margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 56px; align-items: center;
}
.cities { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.cities li {
  background: var(--chip-lt); border: 1px solid var(--chip-lt-line); border-radius: var(--r-pill);
  padding: 9px 20px; font-size: 14px; font-weight: 600; color: var(--text);
}
.map { aspect-ratio: 4/3; border-radius: var(--r-lg); overflow: hidden; background: var(--chip-lt); }
.map__canvas { width: 100%; height: 100%; }
.loclist { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.loclist li { padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card-lt); }
.loclist h3 { margin: 0 0 6px; font-family: var(--sans); font-size: 15px; font-weight: 700; }
.loclist p { margin: 0; font-size: 13.5px; line-height: 1.75; color: var(--text-2); }

/* ---------- 动态列表 ---------- */

.news { list-style: none; margin: 48px 0 0; padding: 0; display: flex; flex-direction: column; }
.news > li { border-top: 1px solid var(--line); }
.news > li:last-child { border-bottom: 1px solid var(--line); }
.news a { display: grid; grid-template-columns: 130px 1fr; gap: 24px; padding: 28px 0; align-items: baseline; transition: opacity .2s; }
.news a:hover { opacity: .62; }
.news time { font-family: var(--mono); font-size: 13px; color: var(--text-3); }
.news h3 { margin: 0 0 8px; font-family: var(--sans); font-size: 19px; font-weight: 700; }
.news p { margin: 0; font-size: 14.5px; line-height: 1.85; color: var(--text-2); }

/* ---------- 页脚 ---------- */

.footer { background: var(--foot-bg); color: var(--foot-text); padding: 64px var(--pad) 40px; }
.footer__top {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 32px; flex-wrap: wrap; padding-bottom: 44px; border-bottom: 1px solid rgba(255,255,255,.08);
}
.footer__top { align-items: flex-start; }
.footer__brand { max-width: 260px; }
.footer__brand address { margin-top: 18px; }
/* min-width: 0 必须有: auto-fit 网格作为 flex 子项时 min-content 等于"全部列一行", 不会缩. */
.footer__map { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 28px 32px; flex: 1 1 320px; min-width: 0; max-width: 760px; }
.footer__col { display: flex; flex-direction: column; gap: 7px; font-size: 13.5px; }
.footer__col a { color: var(--foot-text); }
.footer__col a:hover { color: #FFFFFF; }
.footer__col-head { margin: 0 0 6px; font-weight: 600; font-size: 13px; letter-spacing: .06em; color: #FFFFFF; }
.footer__col-head a { color: #FFFFFF; }
.footer__sub { margin: 8px 0 0; font-size: 13px; }
.footer__sub a { color: #FFFFFF; font-weight: 600; }
.footer__leaf { padding-left: 12px; font-size: 13px; color: var(--foot-dim) !important; }
.footer__leaf:hover { color: var(--foot-text) !important; }
.footer__logo {
  display: block; height: 56px; width: 130px; margin-bottom: 18px;
  background: url("/assets/logo/feituo-lockup-dark.png") left center / contain no-repeat;
}
.footer__tagline { margin: 0; font-size: 13.5px; color: var(--foot-dim); }
.footer address { font-style: normal; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; }
.footer address a { color: var(--foot-text); }
.footer address a:hover { color: #FFFFFF; }
.footer__addr { color: var(--foot-dim); }
.footer__legal { padding-top: 28px; display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 12px; color: var(--foot-faint); }
.footer__legal p { margin: 0; }
.footer__legal a { color: var(--foot-faint); }
.footer__legal a:hover { color: var(--foot-text); }

/* ---------- 在线咨询浮窗 ---------- */

.chat { position: fixed; right: 20px; bottom: 20px; z-index: 99; font-size: 14px; max-width: calc(100vw - 24px); }
.chat__panel {
  width: min(340px, calc(100vw - 40px)); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 20px; margin-bottom: 14px;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 28px 80px rgba(10,15,26,.22);
}
.chat__head {
  margin: 0; padding: 16px 18px; background: var(--ink); color: #FFFFFF;
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 600; font-size: 14.5px;
}
.chat__head > span { display: flex; align-items: center; gap: 9px; }
.dot { width: 8px; height: 8px; border-radius: var(--r-pill); background: #3DCB6C; flex: none; animation: ftDot 2.4s ease-in-out infinite; }
.chat__close { background: none; border: none; color: var(--text-3); font: inherit; font-size: 13px; cursor: pointer; padding: 2px 4px; }
.chat__log { height: 250px; overflow-y: auto; padding: 16px 18px; background: var(--surface); display: flex; flex-direction: column; gap: 10px; }
.chat__msg { margin: 0; padding: 12px 14px; font-size: 13.5px; line-height: 1.8; max-width: 92%; border-radius: 14px; }
.chat__msg--in { background: var(--surface-2); border: 1px solid var(--line); border-bottom-left-radius: 4px; color: var(--text); align-self: flex-start; }
.chat__msg--out { background: var(--ink); color: #FFFFFF; border-bottom-right-radius: 4px; align-self: flex-end; }
.chat__form { display: flex; padding: 12px; gap: 8px; border-top: 1px solid var(--line); background: var(--surface-2); }
.chat__form input {
  flex: 1; height: 42px; border: 1px solid var(--input-line); border-radius: var(--r-pill);
  padding: 0 16px; font-size: 14px; font-family: inherit; outline: none; background: var(--input-bg); color: var(--text);
}
.chat__form input:focus { border-color: var(--accent); background: var(--surface-2); }
.chat__send {
  border: none; border-radius: var(--r-pill); background: var(--ink); color: #FFFFFF;
  padding: 0 18px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.chat__open {
  display: flex; align-items: center; gap: 10px; margin-left: auto;
  background: var(--ink); color: #FFFFFF; border: none; border-radius: var(--r-pill);
  padding: 14px 24px; font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer;
  box-shadow: 0 12px 36px rgba(10,15,26,.32); transition: transform .2s, background .2s;
}
.chat__open:hover { transform: translateY(-2px); }

@keyframes ftDot { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }
/* 主动搭话的气泡: 只到这一级, 不抢屏 -- 点它才展开面板 */
.chat__nudge {
  width: min(320px, calc(100vw - 40px)); margin-bottom: 12px; padding: 14px 16px 12px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 20px 60px rgba(10,15,26,.2); cursor: pointer; position: relative;
  animation: ftNudgeIn .3s cubic-bezier(.2,.6,.2,1);
}
@keyframes ftNudgeIn { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { .chat__nudge { animation: none; } }
.chat__nudge-head { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-3); margin-bottom: 8px; }
.chat__nudge-text { margin: 0; font-size: 14px; line-height: 1.7; color: var(--text); }
.chat__nudge-x { position: absolute; top: 8px; right: 10px; background: none; border: none; color: var(--text-3); font-size: 16px; cursor: pointer; padding: 4px; line-height: 1; }
.chat__quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chat__quick button {
  font: inherit; font-size: 12.5px; padding: 6px 12px; border-radius: var(--r-pill); cursor: pointer;
  background: var(--chip-lt); border: 1px solid var(--chip-lt-line); color: var(--text); transition: background .15s;
}
.chat__quick button:hover { background: var(--ink); color: #FFFFFF; border-color: var(--ink); }
.chat__badge { position: absolute; top: -6px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #E5484D; color: #FFFFFF; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.chat__open { position: relative; }
.chat__msg--sys { background: none; border: 1px dashed var(--line); color: var(--text-3); font-size: 12.5px; align-self: center; max-width: 100%; text-align: center; }
.chat__msg--pending { opacity: .6; }
.chat__msg--failed { border-color: #E5484D; }
.chat__msg--failed a { color: #E5484D; margin-left: 6px; }
.chat__log .chat__quick { margin: 2px 0 6px; }
@media (max-width: 640px) {
  .chat__nudge { width: calc(100vw - 24px); }
  .chat__panel { width: calc(100vw - 24px); }
  .chat__log { height: min(50vh, 320px); }
}

/* ---------- 滚动进场 ----------
 * 默认态是**可见**. 隐藏只由 JS 加上 (.js body 下才生效), 所以不执行 JS 的
 * 抓取方拿到的是完整可见的页面 -- SSR 是这个项目的第一需求, 不能被动画毁掉.
 */
.js [data-reveal] {
  opacity: 0; transform: translateY(26px);
  transition: opacity .8s cubic-bezier(.2,.6,.2,1), transform .8s cubic-bezier(.2,.6,.2,1);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---------- 标准页头 (无 hero 的页面) ---------- */
.page-head { padding-top: clamp(56px, 7vw, 88px); padding-bottom: clamp(24px, 3vw, 40px); }
.page-head .sec__head { max-width: 860px; }
.page-head .sec__title { font-size: clamp(34px, 4.6vw, 60px); }
.page-head__meta { font-family: var(--mono); font-size: 13px; color: var(--text-3); }
.page-head + .sec { padding-top: clamp(24px, 3vw, 40px); }

/* ---------- 网格不留孤儿 (审视 3.2) ----------
 * auto-fit 网格在 1192px 宽容器里是 3 列 (卡片) / 4 列 (支柱), 5 条就是 3+2, 7 条就是 4+3,
 * 最后一行左对齐留空. 按条目数给规则: 5 条居中成 3+2, 7 条 4+3, 4 条一行四列, 8 条两行四列.
 * 用 span 2 的 6/8 列网格实现"最后一行居中", 不改 DOM. */
@media (min-width: 1000px) {
  .cards[data-n="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cards[data-n="8"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cards[data-n="5"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .cards[data-n="5"] > li { grid-column: span 2; }
  .cards[data-n="5"] > li:nth-child(4) { grid-column: 2 / span 2; }
  .cards[data-n="5"] > li:nth-child(5) { grid-column: 4 / span 2; }
  .cards[data-n="7"], .loclist[data-n="7"] { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .cards[data-n="7"] > li, .loclist[data-n="7"] > li { grid-column: span 2; }
  .cards[data-n="7"] > li:nth-child(5), .loclist[data-n="7"] > li:nth-child(5) { grid-column: 2 / span 2; }
  .cards[data-n="7"] > li:nth-child(6), .loclist[data-n="7"] > li:nth-child(6) { grid-column: 4 / span 2; }
  .cards[data-n="7"] > li:nth-child(7), .loclist[data-n="7"] > li:nth-child(7) { grid-column: 6 / span 2; }
  .pillars[data-n="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
  .pillars[data-n="5"] > li { padding: 30px 22px 28px; }
  .pillars[data-n="5"] .pillars__num { font-size: clamp(48px, 4.4vw, 68px); }
}

/* ---------- FAQ 紧凑问答 (features 的 list 版式) ---------- */
.faq {
  list-style: none; margin: 40px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 0 56px;
}
.faq > li { padding: 22px 0 24px; border-top: 1px solid var(--line); }
.sec--ink .faq > li { border-top-color: rgba(255,255,255,.12); }
.faq h3 { margin: 0 0 8px; font-family: var(--sans); font-size: 17px; font-weight: 700; color: var(--text); }
.sec--ink .faq h3 { color: #FFFFFF; }
.faq p { margin: 0; font-size: 14.5px; line-height: 1.85; color: var(--text-2); }
.sec--ink .faq p { color: var(--text-ink-2); }
@media (max-width: 720px) { .faq { grid-template-columns: 1fr; } }

/* ---------- 窄屏 ---------- */

@media (max-width: 720px) {
  :root { --gap-block: clamp(56px, 14vw, 88px); --pad: 18px; }
  .stats > div, .stats > div:first-child { padding: 24px 0 24px 20px; }
  .pillars__num { font-size: 48px; }
  .news a { grid-template-columns: 1fr; gap: 8px; }
  .lead__form { padding: 28px 22px; }
  .chat { right: 12px; bottom: 12px; }
  .footer__brand { max-width: none; }
  .footer__map { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; max-width: none; }
}

/* ---------- 占位框 (?slots=1) ----------
 * 设计稿里的 image-slot: 虚线框 + 对角线 + 标注. 只给 owner 看版式用, 普通访客不出. */
.slot {
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 16px; border: 1px dashed rgba(124,138,160,.55); border-radius: var(--r-md);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; line-height: 1.7;
  color: var(--text-3); background:
    linear-gradient(to top right, transparent calc(50% - .5px), rgba(124,138,160,.25) 50%, transparent calc(50% + .5px)),
    linear-gradient(to top left, transparent calc(50% - .5px), rgba(124,138,160,.25) 50%, transparent calc(50% + .5px)),
    rgba(124,138,160,.06);
}
.sec--ink .slot, .hero .slot { color: var(--text-ink-2); border-color: rgba(255,255,255,.22); }
.slot--169 { aspect-ratio: 16/9; }
.slot--43 { aspect-ratio: 4/3; }
.card .slot { margin: 0 0 22px; }
.hero__figure.slot { border-radius: var(--r-lg); }


/* ==========================================================================
   2026-09-07 品牌火花层 (owner: "不够酷炫"). 原则来自设计系统 README:
   未来橙 #F18200 是唯一的火花, 一屏里不超过 10%; 中性色偏暖; 不用紫蓝渐变, 不用玻璃拟态, 不用照片叠加.
   所以"酷炫"不是加特效堆料, 是: 一个火花色用在对的地方 + 会动的真产品面板 + 光跟着鼠标走.
   ========================================================================== */
:root { --spark: #F18200; --spark-soft: rgba(241,130,0,.16); --mark: #F18200;
        --btn-hover: #F18200; --btn-hover-text: #FFFFFF; --focus-ring: rgba(241,130,0,.22); }
[data-section="yuncang"] { --spark: #35C5D9; --spark-soft: rgba(53,197,217,.18); }
[data-section="zhineng"] { --spark: #C9D2DE; --spark-soft: rgba(201,210,222,.14); --mark: #C9D2DE; }

/* hero: 标题第二句是"答案", 给它火花色的渐变; 光晕慢慢漂 */
.hero__title { font-size: clamp(38px, 5.4vw, 78px); letter-spacing: 0; }
.hero__inner--split .hero__title { font-size: clamp(34px, 4.3vw, 62px); }
.hero__title .t2 {
  background: linear-gradient(92deg, #FFFFFF 0%, #FFE2C2 45%, var(--spark) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-section="yuncang"] .hero__title .t2 { background-image: linear-gradient(92deg, #FFFFFF 0%, #BDF2F8 45%, #35C5D9 100%); }
[data-section="zhineng"] .hero__title .t2 { background-image: linear-gradient(92deg, #FFFFFF 0%, #E8EAEE 40%, #8A93A2 100%); }
.hero__glow {
  background:
    radial-gradient(60% 80% at 80% 28%, var(--glow, rgba(74,90,115,.34)) 0%, transparent 100%),
    radial-gradient(34% 44% at 22% 90%, var(--spark-soft) 0%, transparent 100%);
  animation: ftAurora 14s ease-in-out infinite alternate;
}
@keyframes ftAurora { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(2%, -3%, 0) scale(1.06); } }
[data-section="zhineng"] .hero__glow { animation: none; }
.hero__eyebrow::before { box-shadow: 0 0 0 4px var(--spark-soft); }

/* 按钮: 主按钮悬停变火花色并发光; 幽灵按钮悬停描火花色 */
.btn--primary { box-shadow: 0 10px 30px rgba(0,0,0,.25); transition: background .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s; }
.btn--primary:hover { transform: translateY(-1px); box-shadow: 0 14px 34px var(--spark-soft); }
.btn--ghost:hover { border-color: var(--spark); color: #FFFFFF; background: var(--spark-soft); }
.sec--lt .btn--ghost:hover { color: var(--text); }
.sec--lt .btn--primary:hover { background: var(--spark); }
.nav__cta:hover { background: var(--spark) !important; color: #FFFFFF !important; border-color: var(--spark) !important; }

/* 卡片: 聚光 (鼠标位置的径向高光) + 火花描边 */
.card, .pillars > li { position: relative; overflow: hidden; }
.card::before, .pillars > li::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), var(--spark-soft), transparent 70%);
}
.card:hover::before, .pillars > li:hover::before { opacity: 1; }
.sec--ink .card:hover { border-color: rgba(241,130,0,.45); }
[data-section="yuncang"] .sec--ink .card:hover { border-color: rgba(53,197,217,.5); }
[data-section="zhineng"] .sec--ink .card:hover { border-color: rgba(201,210,222,.4); }
.card:hover .chip { color: var(--spark); border-color: var(--spark-soft); }
.card__go { color: var(--spark); transition: transform .2s; display: inline-block; }
.card:hover .card__go { transform: translate(3px, -3px); }
.card__label { color: var(--spark); }
[data-section="zhineng"] .card__label { color: #8A93A2; }

/* 数字: 深色区的大数字尾巴带一点火花 */
.sec--ink .stats dt { background: linear-gradient(180deg, #FFFFFF 30%, #C9D2DE 70%, var(--spark) 130%); -webkit-background-clip: text; background-clip: text; }
.hero__facts b { color: #FFFFFF; }
.hero__facts li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 10px; background: var(--spark); vertical-align: middle; }

/* 正文链接 / 眉标 */
.prose a { color: var(--text); text-decoration: underline; text-decoration-color: var(--spark); text-underline-offset: 3px; }
.prose a:hover { color: var(--spark); }
.cities li:hover { border-color: var(--spark); color: var(--spark); }

/* 跑马灯 (features 的 marquee 版式) */
.marquee { --dur: 46s; position: relative; margin: 40px calc(-1 * var(--pad)) 0; overflow: hidden; display: flex; gap: 0; padding: 6px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee__track { list-style: none; margin: 0; padding: 0 18px 0 0; display: flex; gap: 14px; flex: none; animation: ftMarquee var(--dur) linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track li { flex: none; padding: 12px 20px; border-radius: var(--r-pill); border: 1px solid var(--line-ink); color: var(--text-ink); font-size: 15px; font-weight: 600; white-space: nowrap;
  background: rgba(255,255,255,.03); display: flex; align-items: center; gap: 12px; }
.marquee__track li::before { content: attr(data-label); font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: var(--spark); text-transform: uppercase; }
.marquee__track li:not([data-label])::before { display: none; }
.sec--lt .marquee__track li { border-color: var(--line); color: var(--text); background: #FFFFFF; }
@keyframes ftMarquee { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } .hero__glow { animation: none; } }

/* ---------- 示意面板 2: 同构波次看板 ---------- */
.dot--rec { background: #E5484D; animation: ftDot 1.2s ease-in-out infinite; }
.belt { position: relative; height: 44px; margin: 0 0 18px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); overflow: hidden; }
.belt__track { position: absolute; inset: 0; display: flex; align-items: center; gap: 10px; padding: 0 12px; animation: ftBelt 9s linear infinite; width: 200%; }
.belt__box { flex: none; width: 34px; height: 22px; border-radius: 5px; background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.08)); border: 1px solid rgba(255,255,255,.14); }
.belt__box:nth-child(4n) { width: 26px; }
.belt__scan { position: absolute; top: 4px; bottom: 4px; left: 46%; width: 2px; background: var(--spark); box-shadow: 0 0 14px var(--spark); animation: ftScan 1.4s ease-in-out infinite; }
@keyframes ftBelt { to { transform: translateX(-50%); } }
@keyframes ftScan { 0%, 100% { opacity: .35 } 50% { opacity: 1 } }
[data-section="yuncang"] .demo__fill--active { background: linear-gradient(90deg, #35C5D9, #BDF2F8); }
[data-section="yuncang"] .demo__status--on, [data-section="yuncang"] .demo__agent-k, [data-section="yuncang"] .demo__num--accent { color: #35C5D9; }
[data-section="yuncang"] .demo__float { border-left-color: #35C5D9; }
[data-section="yuncang"] .demo__card { background: rgba(9,34,86,.78); }

/* ---------- 示意面板 3: 作业视频时间轴 ---------- */
.cam { position: relative; height: 128px; margin: 0 0 16px; border-radius: 14px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 110%, rgba(255,255,255,.12), rgba(255,255,255,.02) 60%), #151C2B; border: 1px solid rgba(255,255,255,.08); }
.cam__frame { position: absolute; inset: 0; }
.cam__box { position: absolute; left: 32%; bottom: 18px; width: 30%; height: 44%; border-radius: 6px; border: 1.5px solid var(--spark); box-shadow: 0 0 0 4px var(--spark-soft); animation: ftBox 3s ease-in-out infinite; }
.cam__box--2 { left: 12%; width: 16%; height: 30%; border-color: rgba(255,255,255,.35); box-shadow: none; animation: none; }
.cam__label { position: absolute; left: 32%; bottom: calc(18px + 44% + 6px); font-family: var(--mono); font-size: 10px; color: var(--spark); letter-spacing: .1em; }
.cam__label::after { content: "运单 ZT…086 · 面单已拍"; }
.cam__ts { position: absolute; right: 12px; top: 10px; font-family: var(--mono); font-size: 11px; color: #E9EDF4; background: rgba(0,0,0,.45); padding: 2px 8px; border-radius: 4px; }
.cam__ts::before { content: "● "; color: #E5484D; }
@keyframes ftBox { 0%, 100% { transform: translateX(0) } 50% { transform: translateX(6%) } }
.tl { margin: 0 0 16px; }
.tl__track { position: relative; height: 34px; border-radius: 8px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07); overflow: hidden; }
.tl__seg { position: absolute; top: 5px; bottom: 5px; left: var(--l); width: var(--w); border-radius: 5px; background: rgba(139,152,172,.3); border: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; padding: 0 8px; }
.tl__seg i { font-style: normal; font-family: var(--mono); font-size: 10px; color: #C9D2DE; white-space: nowrap; overflow: hidden; }
.tl__seg--on { background: var(--spark-soft); border-color: var(--spark); }
.tl__seg--on i { color: #FFFFFF; }
.tl__head { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: #FFFFFF; box-shadow: 0 0 10px rgba(255,255,255,.8); animation: ftHead 12s linear infinite; }
@keyframes ftHead { from { left: 0 } to { left: 100% } }
.tl__ticks { display: flex; justify-content: space-between; margin-top: 6px; font-family: var(--mono); font-size: 10px; color: #55607A; }

/* ---------- 示意面板 4: 三方结算流 ---------- */
.tri { display: grid; grid-template-columns: 1fr 44px 1fr 44px 1fr; align-items: center; gap: 4px; margin: 0 0 16px; }
.tri__node { padding: 12px 12px 10px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); text-align: center; }
.tri__node small { display: block; margin-top: 4px; font-size: 10px; color: #8B98AC; white-space: nowrap; }
.tri__node--hub { border-color: var(--spark); box-shadow: 0 0 0 4px var(--spark-soft); }
.tri__node .demo__num { font-size: 16px; }
.tri__link { position: relative; height: 2px; background: rgba(255,255,255,.12); }
.tri__link span { position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--spark); box-shadow: 0 0 10px var(--spark); animation: ftFlow 2.4s linear infinite; }
.tri__link--b span { animation-delay: 1.2s; }
@keyframes ftFlow { from { left: -4px; opacity: 0 } 15% { opacity: 1 } 85% { opacity: 1 } to { left: calc(100% - 4px); opacity: 0 } }
.ledger { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; gap: 8px; font-family: var(--mono); font-size: 11px; color: #94A0B8; }
.ledger li { display: grid; grid-template-columns: 1.1fr 1fr auto; gap: 8px; opacity: 0; animation: ftLedger .6s ease-out forwards; }
.ledger li:nth-child(1) { animation-delay: .4s } .ledger li:nth-child(2) { animation-delay: 1.1s } .ledger li:nth-child(3) { animation-delay: 1.8s }
.ledger__k { color: #E9EDF4; }
.ledger b { color: var(--spark); font-weight: 600; }
@keyframes ftLedger { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) {
  .belt__track, .belt__scan, .cam__box, .tl__head, .tri__link span { animation: none; }
  .ledger li { opacity: 1; animation: none; }
}
/* 新示意面板的浮卡不压住卡片最后一行: 面板下方留出浮卡的高度 */
.demo--wave, .demo--trace, .demo--settle { padding-bottom: 58px; }
.demo--wave .demo__float, .demo--trace .demo__float, .demo--settle .demo__float { bottom: 6px; }
@media (max-width: 900px) { .demo--wave, .demo--trace, .demo--settle { padding-bottom: 0; } }
@media (max-width: 480px) { .demo__tile .demo__num { font-size: 15px; letter-spacing: 0; } .tri { grid-template-columns: 1fr 24px 1fr 24px 1fr; } .tri__node .demo__num { font-size: 13px; } }

/* ---------- 底图块修正 (2026-09-07) ----------
 * 1. .sec--bg 是 flex 容器, 里面的 .wrap 是 margin:auto 的 flex 子项, 会收缩到内容宽度再居中 --
 *    于是"左栏文字"跑到了页面中间, 压在图的主体上. 给 .wrap 撑满.
 * 2. scrim 的颜色跟板块的纸面色走 (--ink-rgb), 之前写死的是主站深蓝黑, 智能页 (近黑) 和云仓页 (深蓝) 上会露出色差.
 * 3. 左侧压暗略加重: 图的主体不总是老老实实待在右三分之一. */
:root { --ink-rgb: 10, 15, 26; }
[data-section="yuncang"] { --ink-rgb: 11, 44, 107; }
[data-section="zhineng"] { --ink-rgb: 14, 15, 17; }
.sec--bg > .wrap { width: 100%; }
.sec--ink .sec__scrim {
  background:
    linear-gradient(90deg, rgba(var(--ink-rgb), .86) 0%, rgba(var(--ink-rgb), .62) 30%, rgba(var(--ink-rgb), .18) 52%, rgba(var(--ink-rgb), 0) 64%),
    linear-gradient(180deg, rgba(var(--ink-rgb), .7) 0%, rgba(var(--ink-rgb), 0) 16%, rgba(var(--ink-rgb), 0) 84%, rgba(var(--ink-rgb), .7) 100%);
}
.sec--story .sec__scrim { background: rgba(var(--ink-rgb), .86); }
@media (max-width: 860px) { .sec--ink .sec__scrim { background: rgba(var(--ink-rgb), .78); } }