/* 瓴渡 site-wide styles, lifted from index.html (2026-09-25). The hero keeps its own rules inline. */
/* 字体（2026-10-06 上线前，Leon「字体问题参考国内常见站点的做法」）：不再从 Google Fonts 加载（国内访问不稳、阻塞首屏）。
   英文和数字用自托管的 Inter / JetBrains Mono（可变字重 woff2，latin 子集，各约 40–50 KB，assets/fonts/）；中文用系统字体：苹方、冬青黑体、微软雅黑、Noto Sans CJK。 */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/inter-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:100 800;font-display:swap;src:url(fonts/jetbrains-mono-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --bg:#ffffff;
  /* lindos.cn palette: brand blue + slate */
  --ink:#0F172A; --ink-2:#475569; --ink-3:#64748B;
  --line:#E2E8F0; --line-2:#F1F5F9;
  --blue:#1D4ED8; --blue-deep:#1E3A8A; --blue-100:#DBEAFE; --blue-soft:#EFF6FF;
  --green:#16A34A; --red:#DC2626; --off:#CBD5E1;
  --sans:"Inter","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Noto Sans CJK SC",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --gut:clamp(16px,3vw,40px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.7 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p{margin:0}
ul,ol{list-style:none;margin:0;padding:0}
.wrap{max-width:1360px;margin:0 auto;border-left:1px solid var(--line);border-right:1px solid var(--line)}

/* nav: a pill slides between the items; one shared panel under the bar moves and resizes from one menu to the next (site.js) */
.nav{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.88);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.nav-in{position:relative;display:flex;align-items:center;gap:32px;height:56px;padding:0 var(--gut)}
/* 品牌区（2026-10-04 Leon：「logo + 瓴渡 + lindos 的组合，这样就不会和右边的瓴渡OS 有冲突了」）：官方渐变标志（不改色、不拉伸）+「瓴渡」+ 拉丁字「LINDOS」，
   LINDOS 比中文小一号、字距开、--ink-2，一行；在 1440 / 390 / 320 比过上下叠、竖线分隔、同色三种排法后定这一种 */
.brand{display:flex;align-items:center;gap:10px;flex:none;white-space:nowrap}
.brand-mark{display:block;flex:none;width:28px;height:28px}
.brand-cn{font:600 19px/1 var(--sans);letter-spacing:.06em}
.brand-en{font:500 12px/1 "Inter",var(--sans);letter-spacing:.18em;color:var(--ink-2);transform:translateY(1px)}
.nav-links{position:relative;isolation:isolate;display:flex;gap:2px;margin-left:auto;font-size:13px;color:var(--ink-2)}
.nav-links a:hover{color:var(--ink)}
.nav-dd>a{display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:6px;transition:color .2s}
.nav-dd.open>a{color:var(--ink)}
.nav-pill{position:absolute;left:0;top:0;height:32px;width:0;border-radius:6px;background:var(--line-2);opacity:0;pointer-events:none;z-index:-1;transition:transform .25s cubic-bezier(.22,1,.36,1),width .25s cubic-bezier(.22,1,.36,1),opacity .15s}
.nav-cta{font-size:13px;padding:6px 14px;border:1px solid var(--ink);border-radius:6px;transition:color .25s,border-color .25s}
.nav-cta:hover,.nav-cta:focus-visible{color:var(--blue);border-color:var(--blue)}   /* hover without the beam (touch, reduced motion); with the beam: the buttons section below */
.nav-dd>a::after{content:"";display:inline-block;width:5px;height:5px;margin-left:7px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.55;transition:transform .2s}
.nav-dd.open>a::after{transform:translateY(1px) rotate(225deg)}
/* the shared panel: its left / width / height ease from one menu to the next; the menus inside slide sideways and cross-fade */
.nav-pop{position:absolute;top:100%;left:0;margin-top:6px;z-index:20;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 36px rgba(15,23,42,.08);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .18s,transform .18s,visibility 0s .18s,left .2s cubic-bezier(.23,1,.32,1),width .2s cubic-bezier(.23,1,.32,1),height .2s cubic-bezier(.23,1,.32,1)}
.nav-pop.open{opacity:1;visibility:visible;transform:none;transition:opacity .18s,transform .18s,left .2s cubic-bezier(.23,1,.32,1),width .2s cubic-bezier(.23,1,.32,1),height .2s cubic-bezier(.23,1,.32,1)}
.nav-pop::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}   /* hover bridge up to the bar */
.nav-viewport{position:relative;height:100%;overflow:hidden;border-radius:inherit}
.nav-viewport .nav-menu{position:absolute;top:0;left:0;width:max-content;padding:8px;opacity:0;visibility:hidden;transition:opacity .2s cubic-bezier(.32,.72,0,1),transform .2s cubic-bezier(.32,.72,0,1),visibility 0s .2s}
.nav-viewport .nav-menu.on{opacity:1;visibility:visible;transform:none;transition:opacity .2s cubic-bezier(.32,.72,0,1),transform .2s cubic-bezier(.32,.72,0,1)}
.nav-viewport .nav-menu.out-l{transform:translateX(-32px)}
.nav-viewport .nav-menu.out-r{transform:translateX(32px)}
.nav-viewport .nav-menu.pre-l{transform:translateX(-32px);transition:none}
.nav-viewport .nav-menu.pre-r{transform:translateX(32px);transition:none}
.nav-menu a{display:block;padding:7px 12px;border-radius:6px;font-size:13px;line-height:1.5;color:var(--ink-2);white-space:nowrap;transition:background .15s,color .15s}
.nav-menu a:hover,.nav-menu a:focus-visible{color:var(--ink);background:var(--line-2)}
.nav-menu a b{display:block;font-weight:500;color:var(--ink)}
.nav-menu a small{display:block;font-size:11px;line-height:1.5;color:var(--ink-3)}
.nav-menu a.all{margin-top:6px;padding-top:11px;border-top:1px solid var(--line);color:var(--blue);border-radius:0}
.nav-menu a.all:hover{background:none}
/* 解决方案 / 案例 (Leon 2026-09-26: 再分分类；分行业放案例，标题的几个是最有代表性的): the industries on the left, the representative titles on the right */
.nav-menu.sols,.nav-menu.cases{display:grid;grid-template-columns:auto auto;column-gap:8px}
/* 2026-10-03 整站规划第二节：解决方案下拉去掉「按行业」左栏，只留十个通用方案两列（名称 + 一句话）和「查看全部方案 →」 */
.nav-menu.sols{grid-template-columns:auto}
.nav-ind{display:flex;flex-direction:column;padding-right:8px;border-right:1px solid var(--line-2)}
.nav-h{display:block;padding:6px 12px 4px;font:400 10px/1.4 var(--mono);letter-spacing:.08em;color:var(--ink-3)}
.nav-focus{display:grid;grid-template-columns:1fr 1fr;column-gap:4px;align-content:start}
.nav-focus.one{grid-template-columns:1fr}
.nav-focus .nav-h{grid-column:1/-1}
.nav-menu.sols a.all,.nav-menu.cases a.all{grid-column:1/-1}
.nav-menu.os-menu{display:grid;grid-template-columns:auto auto;column-gap:8px}
.nav-menu .feat{display:flex;flex-direction:column;justify-content:flex-end;width:168px;padding:14px;border:1px solid var(--line);border-radius:8px;background:linear-gradient(180deg,#fff,var(--blue-soft))}
.nav-menu .feat:hover{background:linear-gradient(180deg,#fff,var(--blue-100))}
.nav-menu .feat .ai-orb{width:128px;height:128px;margin:0 auto 10px}   /* the 128px connecting design from site.js, not the 64 scaled up (Leon 2026-09-26: 顶部导航下拉里的瓴渡OS 卡片换成更大号的 connecting) */
.nav-menu .feat b{font-weight:500;letter-spacing:.02em;color:var(--blue);background:linear-gradient(120deg,#1D4ED8 15%,#3B82F6 55%,#60A5FA 90%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.nav-menu .feat small{white-space:normal}   /* slogan 换成 928 口径「空间智能 先知先行 ｜ Sense to Act」（2026-10-02 M0）：卡片 140px 内折成两行 */
/* 2026-10-03 整站规划第二节：卡片不写「瓴渡OS」（栏目名、Logo 已有），只留球和 slogan，同手机菜单 */
.nav-menu .feat{justify-content:center;gap:12px}
.nav-menu .feat .ai-orb{margin-bottom:0}
.nav-menu .feat small{font-size:12px;line-height:1.6;color:var(--ink-2);text-align:center}
/* 2026-10-04 Leon：「瓴渡OS 菜单下拉的平台概览和 thinking orb 卡片是同个链接，不如就把 thinking orb 卡片里写上平台概览」：球卡写「平台概览」，slogan 留作小字，右栏不再列平台概览 */
.nav-menu .feat{gap:0}
.nav-menu .feat .ai-orb{margin-bottom:10px}
.nav-menu .feat b{font-size:15px;font-weight:600;line-height:1.4;letter-spacing:.04em;text-align:center}
.nav-menu .feat small{margin-top:2px;font-size:11.5px;line-height:1.5;color:var(--ink-3)}
.nav-menu .feat .sep{display:block;height:0;overflow:hidden}   /* 电脑下拉：slogan 在「｜」处分两行（不显示竖线）；手机一行小卡里照常显示 */
.nav-cta{white-space:nowrap}
@media (max-width:560px){.nav-in{gap:14px}}
@media (max-width:359px){.brand{gap:8px}.brand-en{letter-spacing:.12em}}
.nav-col{display:flex;flex-direction:column;justify-content:center}

/* shared heads */
.head{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:30px var(--gut) 24px;border-bottom:1px solid var(--line)}
h1{font:500 clamp(34px,4vw,52px)/1.12 var(--sans);letter-spacing:-.02em}
h2{font:500 clamp(24px,2.6vw,34px)/1.2 var(--sans);letter-spacing:-.015em}
.aside{font-size:12px;color:var(--ink-3);white-space:nowrap}
.idx{font:400 11px/1 var(--mono);color:var(--ink-3);letter-spacing:.06em}

/* buttons */
.btn{display:inline-flex;align-items:center;height:42px;padding:0 20px;border:1px solid var(--ink);border-radius:6px;font-size:14px;color:var(--ink);background:#fff;transition:background .25s,color .25s,border-color .25s}
.btn-primary{background:var(--blue);border-color:var(--blue);color:#fff}   /* the one saturated block of brand blue outside the picture */
/* hover (Leon 2026-09-26: 所有按钮的 hover 换成适合页面风格和元素的): border-beam's light (site.js beam) fades in and travels round.
   White buttons let their ink edge fade to the hairline as the light arrives, so the beam becomes the edge, as on the library's
   AI input card; the blue button deepens under the dark-surface beam. Without the beam (touch, reduced motion) a plain blue hover. */
.btn:hover,.btn:focus-visible{color:var(--blue);border-color:var(--blue)}
.btn-primary:hover,.btn-primary:focus-visible{color:#fff;background:var(--blue-deep);border-color:var(--blue-deep)}
.beam-wrap>.btn,.beam-wrap>.nav-cta{transition:background .6s ease,color .25s,border-color .6s ease}
.beam-wrap>.btn:not(.btn-primary):hover,.beam-wrap>.btn:not(.btn-primary):focus-visible,
.beam-wrap>.nav-cta:hover,.beam-wrap>.nav-cta:focus-visible{color:var(--ink);border-color:var(--line)}
.beam-wrap>:focus-visible{outline:1.5px solid currentColor;outline-offset:-5px}   /* the wrapper clips outside, so the focus ring sits inside */
.beam-wrap>.pill:focus-visible{outline-offset:-2px}
.beam-wrap{display:inline-flex}   /* border-beam's wrapper round a button (site.js beam): the beam's ring lies on its edge = the button's border */

@keyframes dash{to{stroke-dashoffset:-14}}
/* the card is a reader's note pinned to the picture: white paper, one brand-blue hairline, the same blues as the digits */
.ai-card{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:12px;padding:11px 14px 10px 12px;border-radius:8px;background:rgba(255,255,255,.94);border:1px solid rgba(29,78,216,.5);-webkit-backdrop-filter:blur(8px) saturate(1.3);backdrop-filter:blur(8px) saturate(1.3);box-shadow:0 12px 32px -16px rgba(29,78,216,.35);transition:padding .45s cubic-bezier(.2,.7,.2,1),border-radius .45s cubic-bezier(.2,.7,.2,1),column-gap .45s cubic-bezier(.2,.7,.2,1),grid-template-columns .45s cubic-bezier(.2,.7,.2,1)}
/* the AI light: a bright run of brand blue travelling round the hairline, never stopping (Leon: 边框的 AI 蓝色流光要始终存在) */
@property --ai-ang{syntax:'<angle>';inherits:false;initial-value:0deg}
@supports ((mask-composite:exclude) or (-webkit-mask-composite:xor)){
.ai-card::before,.msg::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;background:conic-gradient(from var(--ai-ang),rgba(29,78,216,0) 0deg,rgba(29,78,216,0) 190deg,#93C5FD 250deg,#1D4ED8 300deg,#60A5FA 335deg,rgba(29,78,216,0) 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;animation:aiSweep 2.6s linear infinite}
}
@keyframes aiSweep{to{--ai-ang:360deg}}
body.paused .ai-card::before{animation-play-state:paused}
.ai-side{display:flex;flex-direction:column;align-items:center;gap:4px;transition:gap .35s}
.ai-side b{font-weight:500;font-size:11px;line-height:1.1;letter-spacing:.02em;white-space:nowrap;max-height:14px;max-width:64px;overflow:hidden;transition:max-height .35s,max-width .35s,opacity .2s;color:var(--blue);background:linear-gradient(120deg,#1D4ED8 15%,#3B82F6 55%,#60A5FA 90%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}   /* same blues as the orb */
.ai-orb{width:32px;height:32px;display:block}   /* the AI card's orb: the library's 32px design of 轨道 working, 1:1 (Leon 2026-09-26: AI卡片改为 32px working). Orb boxes are the library's sizes 64 / 32 / 20, drawn 1:1; the nav card is the 128px connecting design from site.js */
.ai-body{min-width:0;max-height:200px;overflow:hidden;white-space:nowrap;padding-left:12px;border-left:1px solid var(--line-2);transition:opacity .18s,max-height .45s cubic-bezier(.2,.7,.2,1),padding .45s cubic-bezier(.2,.7,.2,1),border-color .45s}
.ai-card li{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;padding:3px 0;font-size:13px;line-height:1.6;color:var(--ink)}
.ai-card li b{font-weight:400;font-size:11px;color:var(--ink-3);padding-top:1px}
.ai-card li span{min-height:21px}
/* rows resolve out of raw 0/1 (same material as the picture): the text so far, then a tail of bits that shrinks as it decodes */
.ai-card li span::after{content:attr(data-bits);font:400 11px/1 var(--mono);letter-spacing:.08em;color:var(--blue);opacity:.55;margin-left:2px;white-space:nowrap}
.ai-card li.act span:not(:empty){justify-self:start;color:var(--blue);background:var(--blue-soft);border-radius:4px;padding:0 6px;margin-left:-6px}
.ai-card li.act.done span::after{content:"";display:inline-block;width:5px;height:5px;margin-left:7px;border-radius:50%;background:var(--green);vertical-align:1px;opacity:1}

/* sections */
.sec{border-top:1px solid var(--line)}
section{scroll-margin-top:56px}

/* capability: the 瓴渡OS explainer (0/1 streams → orb → AI card), then the three written steps */
.os{position:relative;display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line);background:linear-gradient(180deg,#fff,var(--blue-soft) 140%)}
.os-col{position:relative;z-index:1;display:flex;flex-direction:column;padding:26px var(--gut) 34px;min-height:440px}
.os-col>.idx{margin-bottom:18px}
.os-in{justify-content:flex-start;gap:22px}
.lane p{display:flex;align-items:baseline;gap:8px;font-size:12px}
.lane p b{font-weight:400;color:var(--ink)}
.lane p span{font-size:11px;color:var(--ink-3)}
.lane canvas{display:block;width:100%;height:76px;margin-top:6px}
.os-core{align-items:center;gap:16px}
.os-orb{display:flex;flex-direction:column;align-items:center;gap:6px;margin:6px 0}
.os-orb canvas{width:64px;height:64px;display:block}
.os-orb b{font-weight:500;font-size:15px;letter-spacing:.02em;color:var(--blue);background:linear-gradient(120deg,#1D4ED8 15%,#3B82F6 55%,#60A5FA 90%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.os-brain{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:100%;max-width:360px;margin-top:10px;padding-top:14px;border-top:1px solid var(--line);font-size:11px;line-height:1.6;color:var(--ink-3);text-align:center}
.os-brain b{display:block;font-weight:500;font-size:12px;color:var(--ink);margin-bottom:2px}
.os-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:340px}
.os-chips li{font-size:11px;line-height:1;padding:5px 10px;border:1px solid var(--line);border-radius:4px;background:#fff;color:var(--ink-2);transition:border-color .3s,color .3s,background .3s}
.os-chips li.on{border-color:var(--blue);color:var(--blue);background:var(--blue-soft)}
.os-out{justify-content:flex-start}
.os-card{position:relative;width:100%;max-width:320px;margin:auto 0}
.os-card .ai-card{display:block;padding:10px 14px 10px}
.os-card .ai-body{border:0;padding:0}
.os-card li{grid-template-columns:auto 1fr auto;align-items:center}
.os-card li .dot{opacity:0;transition:opacity .3s}
.os-card li.done .dot{opacity:1}
.os-note{margin-top:16px;font-size:11px;line-height:1.7;color:var(--ink-3);max-width:320px}
.os-links{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:0}
.os-links path{fill:none;stroke:var(--blue);stroke-width:1;stroke-dasharray:3 4;opacity:.5;animation:dash .9s linear infinite}
.os-links path.tie{opacity:.8;stroke-dasharray:2 3}
.spec{margin-top:16px;border-top:1px solid var(--line-2)}
.spec li{display:grid;grid-template-columns:56px 1fr;gap:10px;padding:8px 0;border-bottom:1px solid var(--line-2);font-size:12px;line-height:1.6}
.spec li b{font-weight:400;color:var(--ink)}
.spec li span{color:var(--ink-3)}
.cap-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.cap{padding:28px var(--gut) 30px;border-right:1px solid var(--line);display:flex;flex-direction:column}
.cap:last-child{border-right:0}
.cap h3{font:500 19px/1.35 var(--sans);margin-top:14px;letter-spacing:-.01em}
.cap p{font-size:13px;color:var(--ink-2);margin-top:10px;max-width:360px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--green)}
.dot.warn{background:var(--red);animation:blink 1.4s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}
body.paused .dot.warn,body.paused .links *,body.paused .os-links *{animation-play-state:paused}

.chain{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--line)}
.step{position:relative;padding:22px 24px 26px;border-right:1px solid var(--line)}
.step:first-child{padding-left:var(--gut)}
.step:last-child{border-right:0}
.step::before{content:"";position:absolute;top:-1px;left:0;height:2px;width:0;background:var(--blue);transition:width 1.2s cubic-bezier(.2,.7,.2,1)}
.step.on::before{width:100%}
.step .idx{transition:color .4s}
.step.on .idx{color:var(--blue)}
.step h4{font:500 15px/1.35 var(--sans);margin-top:10px}
.step p{font-size:12px;color:var(--ink-3);margin-top:6px}

/* solutions */
.filters{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:14px var(--gut);border-bottom:1px solid var(--line)}
.filters .idx{margin-right:10px}
.pill{font:400 12px/1 var(--sans);border:1px solid var(--line);border-radius:4px;padding:6px 13px;background:#fff;color:var(--ink-2);cursor:pointer;transition:all .2s}
.pill:hover,.pill:focus-visible{color:var(--ink);border-color:var(--ink-3)}
.beam-wrap>.pill:not([aria-pressed="true"]):hover,.beam-wrap>.pill:not([aria-pressed="true"]):focus-visible{border-color:var(--line)}   /* the beam's compact light rides the hairline */
.pill[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.sol-grid{display:grid;grid-template-columns:1fr 1fr}
.sol{display:grid;grid-template-columns:52px 1fr auto;gap:18px;align-items:start;padding:24px var(--gut);border-bottom:1px solid var(--line);transition:background .25s,opacity .3s}
.sol:nth-child(odd){border-right:1px solid var(--line)}
/* hover（2026-10-02，Leon：ascii 动画现有设计全部归档）：方案卡、起步卡轻微上浮，边框转瓴渡蓝。原来的深色底 + 0/1 流动 + 编号解码
   归档在 versions/archived-2026-10-02/ascii/parts/card-hover/。卡片排在细线网格里：自己的细线变透明，外圈 1px 瓴渡蓝用 box-shadow 画
   （盖住相邻卡片的细线，又不撑出横向滚动）；只在能悬停的设备上浮（触屏点一下不会停在上浮状态），键盘聚焦也显示蓝框；按钮仍是 border-beam */
.sol h3,.sol p,.sol .idx,.chips i,.cta h3,.cta p,.cta .idx{transition:color .25s,border-color .25s}
.sol,.cta{position:relative}
.sol:focus-visible,.cta:focus-visible{z-index:1;outline:none;border-color:transparent;box-shadow:0 0 0 1px var(--blue)}
@media (hover:hover){
  .sol,.cta{transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s,border-color .25s,background .25s,opacity .3s}
  .sol:hover,.cta:hover{z-index:1;transform:translateY(-2px);background:#fff;border-color:transparent;box-shadow:0 0 0 1px var(--blue),0 14px 28px -20px rgba(29,78,216,.45)}
  .sol:hover h3,.cta:hover h3{color:var(--blue)}
  .sol:hover .arrow{transform:translateX(4px);color:var(--blue)}
  .cta:hover .go{color:var(--blue)}
}
@media (prefers-reduced-motion:reduce){.sol:hover,.cta:hover{transform:none}}
.sol{scroll-margin-top:72px}
.sol-ka{display:grid;gap:2px;margin-top:10px}
.sol-ka div{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:baseline}
.sol-ka dt{font-size:11px;color:var(--ink-3);transition:color .25s}
.sol-ka dd{margin:0;font-size:12px;line-height:1.6;color:var(--ink-2);transition:color .25s}
.more-row{display:flex;justify-content:flex-end;padding:18px var(--gut)}
.text-link{font-size:13px;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:2px;transition:color .2s,border-color .2s}
.text-link:hover,.text-link:focus-visible{color:var(--blue);border-color:var(--blue)}
.intro{padding:26px var(--gut);border-bottom:1px solid var(--line);font-size:15px;line-height:1.75;color:var(--ink-2)}
.intro span{display:block;max-width:640px}
.fnote{padding:14px var(--gut) 18px;border-top:1px solid var(--line);font-size:11px;color:var(--ink-3)}
.sol.dim{opacity:.22}
.sol .idx{padding-top:7px}
.sol h3{font:500 17px/1.4 var(--sans);letter-spacing:-.005em}
.sol p{font-size:13px;color:var(--ink-3);margin-top:6px}
.sol .meta{display:flex;flex-direction:column;align-items:flex-end;gap:14px;padding-top:4px}
.chips{display:flex;gap:4px}
.chips i{font:normal 400 11px/1 var(--sans);color:var(--ink-2);border:1px solid var(--line);border-radius:3px;padding:3px 5px}
.arrow{font-size:15px;color:var(--ink-3);transition:transform .25s,color .25s}

.cta-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.cta{padding:28px var(--gut) 34px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:10px;transition:background .25s}
.cta:last-child{border-right:0}
.cta h3{font:500 18px/1.35 var(--sans);margin-top:4px}
.cta p{font-size:13px;color:var(--ink-2);flex:1}
.cta .go{font:400 11px/1 var(--mono);color:var(--ink-3);margin-top:14px;letter-spacing:.04em}
.closing{padding:56px var(--gut) 60px;border-top:1px solid var(--line);font:400 clamp(20px,2.3vw,30px)/1.5 var(--sans);letter-spacing:-.01em;color:var(--ink-2)}
.closing b{font-weight:600;color:var(--ink)}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding:18px var(--gut);border-top:1px solid var(--line);font-size:12px;color:var(--ink-3)}
.foot a:hover{color:var(--ink)}

@media (max-width:1400px){.wrap{border-left:0;border-right:0}}
@media (max-width:980px){
  .nav-links{display:none}
  .nav-cta,.beam-wrap:has(>.nav-cta){margin-left:auto}
    .os{grid-template-columns:1fr}
  .os-col{min-height:0;padding:22px var(--gut) 26px}
  .os-core{padding-top:34px;padding-bottom:34px}
  .os-out{align-items:center}
  .os-out>.idx{align-self:flex-start}
  .cap-grid,.cta-grid{grid-template-columns:1fr}
  .cap,.cta{border-right:0;border-bottom:1px solid var(--line)}
  .cap:last-child,.cta:last-child{border-bottom:0}
  .chain{grid-template-columns:1fr}
  .step,.step:first-child{padding:16px var(--gut);border-right:0;border-bottom:1px solid var(--line)}
  .step:last-child{border-bottom:0}
  .sol-grid{grid-template-columns:1fr}
  .sol:nth-child(odd){border-right:0}
}
@media (max-width:560px){
  .head{flex-direction:column;align-items:flex-start;gap:8px}
  .ai-card{column-gap:8px;padding:8px 11px 7px 9px;border-radius:7px}
  .ai-side b{font-size:10px}
  .ai-body{padding-left:8px}
  .ai-card li{font-size:12px;line-height:1.55;gap:8px;padding:1px 0}
  .ai-card li b{font-size:10px}
  .ai-card li span{min-height:18px}
  .sol{grid-template-columns:36px 1fr;gap:12px}
  .sol .meta{grid-column:2;flex-direction:row;align-items:center;justify-content:space-between;padding-top:0}
}

/* ---------- section pages (2026-09-25, 栏目页说明) ---------- */
/* nav: the current section, and the phone menu */
.nav-links a.cur{color:var(--blue);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.nav-toggle{display:none;position:relative;flex:none;width:36px;height:36px;padding:0;border:1px solid var(--line);border-radius:6px;background:#fff;cursor:pointer}
.nav-toggle i{position:absolute;left:9px;right:9px;top:50%;height:1px;background:var(--ink);transition:transform .2s,opacity .2s}
.nav-toggle i:nth-child(1){transform:translateY(-5px)}
.nav-toggle i:nth-child(3){transform:translateY(5px)}
.nav.open .nav-toggle i:nth-child(1){transform:rotate(45deg)}
.nav.open .nav-toggle i:nth-child(2){opacity:0}
.nav.open .nav-toggle i:nth-child(3){transform:rotate(-45deg)}
/* footer site map, five groups above the existing line */
.foot-map{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;padding:30px var(--gut) 16px;border-top:1px solid var(--line);font-size:12px;line-height:1.9}
.foot-map b{display:block;font-weight:500;color:var(--ink);margin-bottom:6px}
.foot-map a{display:block;color:var(--ink-3)}
.foot-map a:hover{color:var(--ink)}
/* page head: breadcrumb, eyebrow, h1, lead, buttons; a message card or a large orb on the right */
.phead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:48px;align-items:center;padding:44px var(--gut) 52px;border-bottom:1px solid var(--line)}
.phead.solo{grid-template-columns:1fr}
.crumb{font-size:11px;color:var(--ink-3);margin-bottom:18px}
.crumb a:hover{color:var(--ink)}
.eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:20px;font:500 12px/1 var(--sans);letter-spacing:.08em;color:var(--blue)}
.eyebrow::before{content:"";flex:none;width:7px;height:7px;background:var(--blue)}
.phead .lead{margin-top:20px;font-size:15px;line-height:1.75;color:var(--ink-2);max-width:560px}
.phead-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.phead-media{display:flex;justify-content:center;min-width:0}
.phead-media .msg{width:100%}
.p404{min-height:160px}
/* message card (static): the AI card's paper, hairline and soft blue shadow, a 20px orb (the library's inline size) in the header */
.msg{position:relative;margin:0;max-width:440px;padding:14px 16px 12px;border-radius:8px;background:rgba(255,255,255,.94);border:1px solid rgba(29,78,216,.5);box-shadow:0 12px 32px -16px rgba(29,78,216,.35);font-size:13px;line-height:1.7;color:var(--ink)}
.msg header{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:13px}
.msg header .ai-orb{width:20px;height:20px;flex:none}
.msg header b{font-weight:500}
.msg header span{color:var(--ink-2)}
.msg header em{margin-left:auto;font-style:normal;font-size:11px;color:var(--ink-3)}
.msg p+p{margin-top:2px}
.msg .advice{margin-top:8px;padding:6px 10px;border-radius:4px;background:var(--blue-soft)}
.msg .advice b{font-weight:500;color:var(--blue)}
.msg .basis{margin-top:6px;font-size:12px;color:var(--ink-3)}
.msg footer{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line-2)}
.msg footer span{font-size:12px;line-height:1;padding:6px 12px;border:1px solid var(--line);border-radius:999px;color:var(--ink-2)}
.msg-note{margin-top:10px;font-size:11px;color:var(--ink-3)}
/* numbered section heads, body text (720px), lists and notes */
.head.num>div>.idx{display:block;margin-bottom:10px}
.head.num .aside{white-space:normal;max-width:46%;text-align:right}
.body{padding:26px var(--gut) 34px}
.body>*{max-width:720px}
.body p{font-size:15px;line-height:1.8;color:var(--ink-2)}
.body p+p{margin-top:12px}
.body .spec{margin-top:20px}
.body .spec li{grid-template-columns:76px 1fr;font-size:13px}
.body .spec.wide li{grid-template-columns:108px 1fr}
.body .body-card{margin-top:24px}
.body .pending,.pending{color:var(--ink-3)}
.body ol.list{counter-reset:n;margin-top:4px}
.body ol.list li{position:relative;padding:10px 0 10px 36px;border-bottom:1px solid var(--line-2);font-size:14px;line-height:1.7;color:var(--ink-2);counter-increment:n}
.body ol.list li::before{content:"0" counter(n);position:absolute;left:0;top:13px;font:400 11px/1 var(--mono);color:var(--ink-3);letter-spacing:.06em}
.empty{padding:40px var(--gut) 48px;font-size:14px;color:var(--ink-3)}
/* comparison table */
.tbl{padding:4px var(--gut) 8px;overflow-x:auto;border-bottom:1px solid var(--line)}
.cmp{width:100%;min-width:560px;border-collapse:collapse;font-size:13px;line-height:1.7}
.cmp th,.cmp td{padding:14px 20px 14px 0;border-bottom:1px solid var(--line-2);text-align:left;vertical-align:top}
.cmp thead th{font-weight:500;font-size:14px;color:var(--ink);border-bottom:1px solid var(--line)}
.cmp tbody th{font-weight:400;font-size:12px;color:var(--ink-3);white-space:nowrap;width:96px}
.cmp td{color:var(--ink-2)}
.cmp tbody tr:last-child td,.cmp tbody tr:last-child th{border-bottom:0}
/* in-page table of contents (solution pages) */
.toc{position:sticky;top:56px;z-index:5;display:flex;gap:22px;padding:0 var(--gut);overflow-x:auto;scrollbar-width:none;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.toc::-webkit-scrollbar{display:none}
.toc a{flex:none;padding:13px 0 11px;font-size:12px;color:var(--ink-3);border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.toc a:hover{color:var(--ink)}
.toc a.on{color:var(--blue);border-color:var(--blue)}
main.has-toc section{scroll-margin-top:100px}
/* grids: two and four columns, index with an English word on the right, a second row of linked cards */
.cap-grid.c2{grid-template-columns:repeat(2,1fr)}
.cap-grid.c4{grid-template-columns:repeat(4,1fr)}
.cap-grid.c4 .cap p{max-width:none}
.cap.noidx h3{margin-top:0}
.idx.sp{display:flex;justify-content:space-between;gap:8px}
.idx.sp em{font-style:normal}
.cta-grid.rows .cta:nth-child(-n+3){border-bottom:1px solid var(--line)}
.sol-grid.c3{grid-template-columns:repeat(3,1fr)}
.sol-grid.c3 .sol{border-right:1px solid var(--line)}
.sol-grid.c3 .sol:last-child{border-right:0}
/* example switcher (瓴渡OS page): pills and four rows on the left, the matching message card on the right */
.ex{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}
.ex-left{border-right:1px solid var(--line)}
.ex-left .filters{border-bottom:1px solid var(--line-2)}
.ex-rows{margin:0;padding:8px var(--gut) 20px;border-top:0}
.ex-rows li{grid-template-columns:40px 1fr;font-size:13px;padding:10px 0}
.ex-right{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:26px var(--gut) 30px;min-width:0}
/* terminal blocks (感知终端 page): number, name and note, the solutions that use it */
.term{display:grid;grid-template-columns:52px 1fr auto;gap:18px;align-items:start;padding:24px var(--gut);border-bottom:1px solid var(--line);scroll-margin-top:72px}
.term .idx{padding-top:7px}
.term h3{font:500 17px/1.4 var(--sans);letter-spacing:-.005em}
.term p{font-size:13px;color:var(--ink-3);margin-top:6px}
.term .chips{flex-wrap:wrap;justify-content:flex-end;max-width:380px;padding-top:4px}
.term .chips a{font:400 11px/1.4 var(--sans);color:var(--ink-2);border:1px solid var(--line);border-radius:3px;padding:3px 6px;transition:color .2s,border-color .2s}
.term .chips a:hover{color:var(--blue);border-color:var(--blue)}
/* industry groups (解决方案总页): the industry on the left, its solution cards on the right */
.ind{display:grid;grid-template-columns:220px 1fr;border-bottom:1px solid var(--line)}
.ind>h3{padding:24px var(--gut);font:500 19px/1.35 var(--sans);letter-spacing:-.01em;border-right:1px solid var(--line)}
.ind .sol{border-right:0}
.ind .sol:last-child{border-bottom:0}
/* 按行业查看 (solutions hub): per industry, each generic solution with this industry's scenes (Leon 2026-09-26: 解决方案改为抽象的版本) */
.trade li{display:grid;grid-template-columns:minmax(150px,200px) 1fr;gap:16px;align-items:baseline;padding:14px var(--gut);border-bottom:1px solid var(--line-2)}
.trade li:last-child{border-bottom:0}
.tr-g{font:500 15px/1.45 var(--sans);color:var(--ink);transition:color .2s}
.tr-g:hover{color:var(--blue)}
.tr-s{font-size:13px;line-height:1.7;color:var(--ink-3)}
.tr-s a{color:var(--ink-2);border-bottom:1px solid var(--line);transition:color .2s,border-color .2s}
.tr-s a:hover{color:var(--blue);border-color:var(--blue)}
/* 适用现场 (generic solution pages): one card per scene; a scene with its own page links to it */
.scene-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));border-bottom:1px solid var(--line)}
.scene{display:flex;flex-direction:column;gap:6px;min-height:118px;padding:22px var(--gut);border-right:1px solid var(--line);border-top:1px solid var(--line);margin-top:-1px;transition:background .2s}
.scene b{font:500 17px/1.4 var(--sans);color:var(--ink)}
.scene small{margin-top:auto;font-size:12px;color:var(--ink-3);transition:color .2s}
a.scene:hover{background:var(--blue-soft)}
a.scene:hover small{color:var(--blue)}
@media (max-width:760px){.trade li{grid-template-columns:1fr;gap:2px}.scene{min-height:0}}
.case-slot{padding:24px var(--gut);font-size:14px;color:var(--ink-2)}   /* 案例 by industry: the slot until a case is authorised */
.case-slot .rel{margin-top:8px;font-size:12px;color:var(--ink-3)}
.case-slot .text-link{font-size:12px}
.ind{scroll-margin-top:72px}
/* previous / next solution */
.pn{display:flex;justify-content:space-between;gap:16px;padding:18px var(--gut);border-top:1px solid var(--line);font-size:13px}
.pn a{color:var(--ink-2);transition:color .2s}
.pn a:hover{color:var(--blue)}
@media (max-width:980px){
  .nav-toggle{display:block}
  .nav.open .nav-links{display:flex;flex-direction:column;gap:0;position:absolute;left:0;right:0;top:100%;max-height:calc(100vh - 56px);overflow:auto;padding:6px var(--gut) 16px;background:#fff;border-bottom:1px solid var(--line);font-size:14px}
  .nav.open .nav-dd::before{display:none}
  .nav.open .nav-dd>a{display:flex;height:auto;padding:11px 0;border-radius:0;border-bottom:1px solid var(--line-2)}
  .nav.open .nav-menu{display:block;position:static;width:auto;opacity:1;visibility:visible;transform:none;margin:0;padding:4px 0 8px;min-width:0;border:0;border-radius:0;box-shadow:none;transition:none}
  .nav.open .nav-menu a{padding:6px 0 6px 14px;white-space:normal;border-radius:0}
  .nav.open .nav-menu a small{display:none}
  .nav.open .nav-menu a.all{margin-top:4px;padding-top:8px;border-top:0}
  /* 手机菜单里也留瓴渡OS 卡片（2026-10-03 Leon）：一行小卡，32px connecting 球 + slogan；不再写「瓴渡OS」（Logo、栏目名已有，「整个画面有三个 瓴渡OS 了」） */
  .nav.open .nav-menu .feat{display:grid;grid-template-columns:32px 1fr;column-gap:12px;align-items:center;justify-content:start;width:auto;margin:6px 0 8px;padding:8px 12px;border-radius:8px}
  .nav.open .nav-menu .feat .ai-orb{grid-row:1/3;width:32px;height:32px;margin:0;flex:none}
  /* 2026-10-04：一行小卡也写「平台概览」，slogan 在下面一行小字（320 宽两项并排放不下） */
  .nav.open .nav-menu .feat b{display:block;font-size:14px;line-height:1.4;text-align:left}
  .nav.open .nav-menu .feat small{display:block;margin:0;font-size:11.5px;line-height:1.5;color:var(--ink-3);text-align:left;white-space:nowrap}
  .nav.open .nav-menu .feat .sep{display:inline;height:auto}
  .nav.open .nav-ind,.nav.open .nav-h{display:none}   /* phones: the representative titles and 查看全部 only */
  .nav.open .nav-focus{display:block}
  .nav-pop,.nav-pill{display:none}
  .foot-map{grid-template-columns:1fr 1fr}
  .phead{grid-template-columns:1fr;gap:32px;padding:32px var(--gut) 36px}
  .phead-media{justify-content:flex-start}
  .cap-grid.c2,.cap-grid.c4{grid-template-columns:1fr}
  .cap-grid.m2{grid-template-columns:1fr 1fr}
  .cap-grid.m2 .cap:nth-child(odd){border-right:1px solid var(--line)}
  .cap-grid.m2 .cap:nth-last-child(-n+2){border-bottom:0}
  .sol-grid.c3{grid-template-columns:1fr}
  .sol-grid.c3 .sol{border-right:0}
  .ex{grid-template-columns:1fr}
  .ex-left{border-right:0;border-bottom:1px solid var(--line)}
  .ind{grid-template-columns:1fr}
  .ind>h3{padding-bottom:12px;border-right:0;border-bottom:1px solid var(--line-2)}
}
@media (max-width:560px){
  .head.num .aside{max-width:none;text-align:left}
  .term{grid-template-columns:36px 1fr;gap:12px}
  .term .chips{grid-column:2;justify-content:flex-start;max-width:none}
  .cmp tbody th{width:72px}
}
/* frames (2026-09-26 night, Leon: 继续把每个页面的框架都搭出来，先不用做太多美化): a dashed slot names the content a place still needs */
.slot{max-width:720px;padding:12px 16px 14px;border:1px dashed #CBD5E1;border-radius:6px;background:var(--line-2)}
.slot-tag{display:block;margin-bottom:4px;font:400 10px/1.4 var(--mono);letter-spacing:.08em;color:var(--ink-3)}
.slot p,.body .slot p{font-size:13px;line-height:1.7;color:var(--ink-3)}
.body .slot+.slot,.body .spec+.slot,.body p+.slot{margin-top:16px}
.body>.slot:first-child{margin-top:0}
.phead .slot{margin-top:20px;max-width:560px}
.slot-i{font-size:12px;color:var(--ink-3);border-bottom:1px dashed #CBD5E1}
.term .spec{max-width:440px;margin-top:12px}
.ph-box{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:16/9;border:1px dashed #CBD5E1;border-radius:8px;background:var(--line-2);font-size:12px;color:var(--ink-3)}
.vid{padding:26px var(--gut) 34px}
.vid .ph-box{max-width:960px}
/* contact form (内容框架 4.15; not wired: a valid submit goes to thanks.html) */
.form{display:grid;gap:18px;max-width:calc(720px + 2 * var(--gut));padding:26px var(--gut) 34px}
.form label,.form fieldset{display:grid;gap:6px;min-width:0;margin:0;padding:0;border:0;font-size:13px;color:var(--ink-2)}
.form [hidden]{display:none}
.form legend{padding:0;margin-bottom:6px}
.form i{font-style:normal;color:var(--blue)}
.form input[type=text],.form select,.form textarea{width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:6px;background:#fff;font:400 14px/1.5 var(--sans);color:var(--ink)}
.form input[type=text]:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--blue)}
.form .opts{display:flex;flex-wrap:wrap;gap:8px 20px}
.form .opts label,.form .agree{display:flex;align-items:center;gap:6px}
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:560px){.form .row2{grid-template-columns:1fr}}
/* pages.html: every page, its template and state */
.pages td small{display:block;font-size:11px;color:var(--ink-3)}
.pages td a:hover{color:var(--blue)}
.pages code{font:400 11px/1.6 var(--mono);color:var(--ink-3)}
/* 现场重放 (2026-09-27): the film on its page, and a card per film on the 案例 page */
.vid video{display:block;width:100%;max-width:1200px;aspect-ratio:16/9;border:1px solid var(--line);border-radius:8px;background:#fff}
.replay-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));border-top:1px solid var(--line)}
.replay-card{display:flex;flex-direction:column;gap:8px;padding:22px var(--gut) 24px;border-right:1px solid var(--line);transition:background .2s}
.replay-card img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--line);border-radius:6px;margin-bottom:6px}
.replay-card b{font:500 17px/1.45 var(--sans);color:var(--ink)}
.replay-card small{font-size:12px;color:var(--ink-3);transition:color .2s}
a.replay-card:hover{background:var(--blue-soft)}
a.replay-card:hover small{color:var(--blue)}
/* 现场重放卡片一排（模拟实况页「更多场景」、案例页）。原先的 3D 模拟实况嵌入块 .sim / .sim-box / .sim-veil … 2026-10-05 删去：/os/sim 改用 assets/simpage.css 的 .sp-*（SIM） */
.sim-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));border-top:1px solid var(--line)}
.sim-cards>div{padding:22px var(--gut) 24px}
.sim-cards .replay-card.cur{background:var(--blue-soft)}
/* 3D 页首背景 (2026-09-29): sim/bg/<场景>/ 铺在标题后面（assets/sim.js）；左侧白色渐变托住文字，右侧是场景和它的 AI 卡片。
   不在手机舞台里的页，手机和窄屏上封面图放到文字下面，当一张配图。
   视频 (2026-09-30)：3D 跑不了时 sim.js 换成录好的循环视频，放在封面的位置、同样裁切，能播了再淡入（.looping） */
.phead.has-bg{position:relative;isolation:isolate;overflow:hidden;min-height:clamp(520px,64vh,660px);background:#E6E9EC}
.phead-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.phead-bg img,.phead-bg iframe,.phead-bg video{position:absolute;inset:0;display:block;width:100%;height:100%;border:0}
.phead-bg img,.phead-bg video{object-fit:cover;object-position:62% 50%;transition:opacity .8s}
.phead-bg iframe,.phead-bg video{opacity:0;transition:opacity .8s}
.phead-bg.live iframe,.phead-bg.looping video{opacity:1}
.phead-bg.live img,.phead-bg.looping img{opacity:0}
.phead-bg::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.92) 27%,rgba(255,255,255,.62) 41%,rgba(255,255,255,0) 55%)}
.phead.has-bg>div:not(.phead-bg){max-width:620px}
.phead-note{position:absolute;left:var(--gut);bottom:14px;margin:0;font-size:11px;color:var(--ink-3)}
@media (max-width:980px){
  .phead.has-bg{display:flex;flex-direction:column;align-items:stretch;gap:0;min-height:0;padding-bottom:0;background:#fff}
  .phead-bg{position:relative;inset:auto;z-index:0;order:2;aspect-ratio:16/7;margin:28px calc(-1 * var(--gut)) 0}
  .phead-bg::after{display:none}
  .phead-note{position:static;order:3;padding:8px 0 14px}
}
/* 手机舞台 (2026-09-29 试点，Leon：「面向移动端专门做一轮适配，先拿一个页面开始，需要让白模动效能占据竖屏大部分画面」)：build.py phead(m=True)，M_STAGE 里的页。
   手机和窄屏上，页首是导航下面一整屏的 3D：场景按竖屏机位构图（sim/bg/SPEC.md 第 9 节），AI 卡片在画面下方（场景自己画）；
   标题、眉题和「3D 仿真」说明盖在画面上方的白色渐变里（渐变随标题高度走，sim.js 把标题下沿告诉场景，镜头避开这一块）；导语和按钮放到画面下面。
   电脑上和其他 3D 页首一样。封面和视频：竖屏有两版构图，屏幕矮一些（宽高比 ≥ 1/2，如带着工具栏的手机浏览器）用 poster-s / loop-s（390×607），
   高屏用 poster-m / loop-m（390×787）；都是占满宽度、底边对齐（卡片在底部）：比画面高就裁掉上面标题后面那一截，
   比画面矮就在上面留一条底色，藏在标题的白色渐变里，上沿 48px 淡出，看不出接缝 */
@media (max-width:980px){
  .phead.has-bg.m-stage{display:block;padding:0;background:#fff}
  .m-stage .phead-bg{position:relative;inset:auto;z-index:0;margin:0;aspect-ratio:auto;height:calc(100vh - 57px);height:calc(100svh - 57px);min-height:480px;max-height:1000px;overflow:hidden;background:#E6E9EC}
  .m-stage .phead-bg img,.m-stage .phead-bg video{object-position:100% 100%}
  .m-stage .phead-top{position:absolute;top:0;left:0;right:0;z-index:1;padding:16px var(--gut) 64px;
    background:linear-gradient(180deg,rgba(255,255,255,.95) 0,rgba(255,255,255,.88) calc(100% - 68px),rgba(255,255,255,0))}
  .m-stage .crumb{margin-bottom:12px}
  .m-stage .eyebrow{margin-bottom:12px}
  .m-stage .phead-note{position:static;margin-top:8px;padding:0}
  .m-stage .phead-more{padding:4px var(--gut) 32px}
}
@media (max-width:980px) and (orientation:portrait){
  .m-stage .phead-bg img,.m-stage .phead-bg video{top:auto;height:auto;
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 48px);mask-image:linear-gradient(180deg,transparent,#000 48px)}
}
/* 全屏铺满 (2026-10-02, Leon：「测试站有错误的左右画面留白，应该是全屏左右充满的」)：带 3D 背景的页首（首页整屏演示、各页 3D 页首）
   伸出 .wrap（最宽 1360、两侧 1px 框线）铺满视口宽度；文字仍按原栏位对齐，左右内边距补上伸出的宽度。
   --fw 是栏位内宽，--bleed 是栏位到视口边缘的距离；--vw 由 site.js 写入不含滚动条的视口宽度（没有时退回 100vw） */
:root{--frame-b:1px;--fw:calc(min(var(--vw,100vw),1360px) - 2 * var(--frame-b));--bleed:calc((var(--vw,100vw) - var(--fw)) / 2)}
@media (max-width:1400px){:root{--frame-b:0px}}   /* 与上面 .wrap 去框线的断点一致 */
html{overflow-x:clip}
.phead.has-bg{margin-inline:calc(-1 * var(--bleed));padding-inline:calc(var(--bleed) + var(--gut))}
.phead.has-bg .phead-note{left:calc(var(--bleed) + var(--gut))}
.nav{margin-inline:calc(-1 * var(--bleed));padding-inline:var(--bleed)}   /* 导航底色和底线同样铺满，导航内容仍在栏位里 */
@media (max-width:980px){
  .phead.has-bg:not(.m-stage) .phead-bg{margin-inline:calc(-1 * (var(--bleed) + var(--gut)))}
}
/* 瓴渡OS 四页（2026-10-02 M2）：五层架构总览图；感知终端 8 款硬件卡片（按 CELL / GRID 分组） */
.arch-fig{margin:0;padding:6px var(--gut) 30px}
.arch-fig img{display:block;width:100%;max-width:1200px;height:auto;border:1px solid var(--line);border-radius:8px}
.arch-fig figcaption{margin-top:10px;font-size:12px;color:var(--ink-3)}
.hw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(380px,100%),1fr))}   /* 1360 宽排 3 列：CELL 五款 3 + 2，GRID 三款一排 */
.hw{display:flex;flex-direction:column;gap:6px;padding:24px var(--gut) 26px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);scroll-margin-top:72px}
.hw-img{display:flex;align-items:center;justify-content:center;height:190px;margin-bottom:12px;border-radius:8px;background:linear-gradient(180deg,#fff,var(--line-2))}
.hw-img img{max-width:72%;max-height:150px;object-fit:contain}
.hw h3{font:500 17px/1.4 var(--sans);letter-spacing:-.005em}
.hw>p{font-size:13px;color:var(--ink-3)}
.hw-spec{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;margin-top:12px}
.hw-spec li{display:flex;flex-direction:column;gap:2px;min-width:0}
.hw-spec b{font:500 19px/1.2 var(--sans);color:var(--ink)}
.hw-spec b small{margin-left:3px;font-size:12px;font-weight:400;color:var(--ink-3)}
.hw-spec span{font-size:12px;line-height:1.5;color:var(--ink-2)}
.hw sup{font-size:9px;margin-left:1px;color:var(--ink-3)}
.hw-notes{margin-top:auto;padding-top:12px;border-top:1px solid var(--line-2);font-size:11px;line-height:1.6;color:var(--ink-3)}
.hw-notes li+li{margin-top:4px}
.hw-notes sup{margin:0 4px 0 0}
.hw-spec+.hw-notes{margin-top:16px}
/* 页脚 · 手机（2026-10-03 Leon：「页脚在移动端看起来结构不清晰」）：每组一行，组名在上，链接横排换行，组间细线分隔 */
@media (max-width:640px){
  .foot-map{grid-template-columns:1fr;gap:0;padding:6px var(--gut) 4px}
  .foot-map>div{display:flex;flex-wrap:wrap;column-gap:16px;row-gap:0;padding:14px 0;border-bottom:1px solid var(--line-2)}
  .foot-map>div:last-child{border-bottom:0}
  .foot-map b{flex:0 0 100%;margin-bottom:4px;font-size:13px}
  .foot-map a{display:inline-block;font-size:12.5px;line-height:2}
  .foot{flex-direction:column;align-items:flex-start;gap:6px}
}

/* ==========================================================================
   公共组件（2026-10-03《整站规划》第三节：首页的视觉语言，全站同一套）
   样张 /kit.html；Python 构造函数在 sitegen/common.py「公共组件」一节，各函数 docstring 写明产出的 HTML。
   与首页同名的类（.kicker、.scn*、.flow / .fl-*、canvas.fl-orb）逐条照抄 index.html 内联 <style>：首页那份仍在、排在后面，
   两份相同，首页因此不变——改其中一处时两处一起改。其余是新类（首页的 .home-page #… 写法改成可复用的类名），首页没有用到。
   ========================================================================== */

/* 节头：蓝色小栏目名（两字为主）+ 大 H2 + 灰色小字（首页 .home-page .sec>.head）；节与节换底色：白 / .alt 浅灰 / 白 …，结尾 .start-band */
.kicker{display:block;margin-bottom:10px;font:600 12px/1 var(--sans);letter-spacing:.12em;color:var(--blue)}
a.kicker{display:inline-block;transition:color .2s}
a.kicker:hover,a.kicker:focus-visible{color:var(--blue-deep)}
.khead{padding:44px var(--gut) 22px}
.khead h2{font-size:clamp(26px,3vw,38px);line-height:1.2;letter-spacing:-.01em}
.khead .aside{display:block;margin-top:8px;font-size:14px;color:var(--ink-3);white-space:normal;overflow-wrap:anywhere}   /* 节头小字放不下就折行（基础 .aside 不折行，首页 .head .aside 仍按首页） */
.khead+.intro{border-bottom:0;padding-top:0}
.sec.alt{background:#F8FAFC}
.sec>.flow{background:transparent;border-bottom:0}
@media (max-width:640px){.khead{padding:36px var(--gut) 18px}
  .khead h2{font-size:max(20px,min(26px,calc((100vw - 2 * var(--gut)) / var(--h2n,99))))}}   /* 首页的节头在 320 宽会折行；通用版按字数收字号（kicker_head 写 --h2n） */

/* 起步带：每页结尾同一块瓴渡蓝渐变带，白卡「预约交流」为主（首页 #contact 与 .home-cta）。start() / start_band() 产出 */
.sec.start-band{background:linear-gradient(135deg,#1E3A8A,#1D4ED8 60%,#3B82F6);color:#fff;border-top:0}
.start-band .khead h2{color:#fff}
.start-band .kicker,.start-band .aside{color:#BFDBFE}
.start-band .intro{border-bottom:0;padding-top:0;color:#DBEAFE}
.start-band+*{border-top:0}
.start-cta{gap:12px;padding:4px var(--gut) 48px}
.start-cta .cta{border:1px solid rgba(255,255,255,.28);border-radius:12px;background:rgba(255,255,255,.08);color:#fff}
.start-cta .cta:hover{background:rgba(255,255,255,.16)}
.start-cta .cta h3{color:#fff}.start-cta .cta p{color:#DBEAFE}.start-cta .cta .idx,.start-cta .cta .go{color:#93C5FD}
.start-cta .cta:first-child{background:#fff;color:var(--ink);border-color:#fff}
.start-cta .cta:first-child h3{color:var(--blue)}.start-cta .cta:first-child p{color:var(--ink-2)}.start-cta .cta:first-child .idx,.start-cta .cta:first-child .go{color:var(--blue)}
@media (max-width:640px){.start-cta{grid-template-columns:1fr}.start-cta .cta{padding:20px}}

/* 场景卡与价值预期（首页第二屏，照抄）：等轴白模 SVG 循环（site.js：滚出视口暂停，减少动态效果停在 data-still 那一帧）+ 名称 + 一句话 + 价值预期 */
.scn-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;padding:0 var(--gut)}
.scn{display:flex;flex-direction:column;padding:10px 10px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;color:inherit;text-decoration:none;transition:border-color .25s,box-shadow .25s}
.scn:hover{border-color:var(--blue-100);box-shadow:0 12px 30px -20px rgba(29,78,216,.5)}
.scn-fig{aspect-ratio:16/10;margin-bottom:12px;border-radius:8px;background:linear-gradient(180deg,#F8FAFC,#F1F5F9);overflow:hidden}
.scn-art{width:100%;height:100%;display:block}
.scn .scn-lb,.ins-scope-fig .scn-lb{display:none}   /* 场景卡里画面只有约 170–230 宽，现场名词标签缩到 5px 看不清，只在大图（首页焦点、方案页「价值」、页首）里显示 */
.scn h3{margin:0 4px 4px;font-size:16px;font-weight:600;color:var(--ink);transition:color .25s}
.scn:hover h3{color:var(--blue)}
.scn p{margin:0 4px;font-size:13px;line-height:1.6;color:var(--ink-2);text-wrap:pretty}
.scn-kpi{margin:auto 4px 0;padding-top:12px}
.scn-kpi span{display:block;padding-top:10px;border-top:1px solid var(--line-2);font-size:11px;letter-spacing:.06em;color:var(--ink-3)}
.scn-kpi ul{margin:6px 0 0;padding:0;list-style:none;display:grid;gap:4px}
.scn-kpi li{display:flex;align-items:baseline;gap:6px;font-size:12.5px;line-height:1.4;color:var(--ink);white-space:nowrap}
.scn-kpi i{flex:none;width:12px;font-style:normal;font-weight:600;color:var(--blue);text-align:center}
.scn-note{margin:14px var(--gut) 0;font-size:12px;line-height:1.7;color:var(--ink-3)}
@media (max-width:1100px){.scn-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){
  .scn-grid{grid-template-columns:1fr 1fr;gap:8px}
  .scn{padding:6px 6px 12px;border-radius:10px}
  .scn-fig{margin-bottom:10px;border-radius:7px}
  .scn h3{font-size:15px;margin:0 4px 3px}
  .scn p{font-size:12.5px;line-height:1.55}
  .scn-kpi{padding-top:10px}.scn-kpi span{padding-top:8px;font-size:10.5px}
  .scn-kpi li{font-size:12px}
  .scn-note{font-size:11.5px}
}
/* 场景卡的列数：默认同首页（5 / 平板 3 / 手机 2）；.c3、.c4 用在一节只放三、四张的地方 */
.scn-grid.c3{grid-template-columns:repeat(3,1fr)}
.scn-grid.c4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1100px){.scn-grid.c4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.scn-grid.c3,.scn-grid.c4{grid-template-columns:1fr 1fr}}

/* 流程图（首页「如何工作」，照抄）：三段竖排，段间虚线上蓝点往下流；中间一段是蓝边主卡，里面一颗时快时慢的 connecting 球（site.js：canvas[data-orb-flip]） */
.flow{padding:8px var(--gut) 28px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#fff,var(--blue-soft) 160%)}
.fl-step{max-width:960px;margin:0 auto;padding:22px 0}
.fl-step>.idx{display:block;margin-bottom:14px}
.fl-dims{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin:0;padding:0;list-style:none}
.fl-dims li{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px;border:1px solid var(--line);border-radius:10px;background:#fff}
.fl-dims li.more{border-style:dashed;background:transparent}
.fl-ic{display:flex;align-items:center;justify-content:center;width:32px;height:32px;margin-bottom:6px;font-size:20px;color:var(--ink-3)}
.fl-ic svg{width:32px;height:32px}
.fl-dims b{font-size:15px;font-weight:600;color:var(--ink)}
.fl-dims small{font-size:11.5px;line-height:1.5;color:var(--ink-3)}
.fl-biz{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.fl-biz>span{font-size:13px;font-weight:600;color:var(--blue)}
.fl-biz ul{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.fl-biz li{font-size:12px;padding:4px 10px;border:1px solid var(--line);border-radius:4px;background:#fff;color:var(--ink-2)}
.fl-link{position:relative;height:40px;max-width:960px;margin:0 auto}
.fl-link i{position:absolute;left:50%;top:0;bottom:0;border-left:1px dashed var(--blue);opacity:.5}
.fl-link i::after{content:"";position:absolute;left:-4px;top:0;width:7px;height:7px;border-radius:50%;background:var(--blue);animation:fl-drop 1.6s linear infinite}
@keyframes fl-drop{from{top:-4px;opacity:0}20%{opacity:1}to{top:36px;opacity:0}}
.fl-core{padding:22px;border:1px solid var(--blue-100);border-radius:14px;background:#fff;box-shadow:0 10px 30px -18px rgba(29,78,216,.45)}
.fl-onto{display:flex;align-items:center;gap:22px}
.fl-orb{flex:none;width:72px;height:72px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0,#BFDBFE 30%,#3B82F6 70%,#1D4ED8 100%);box-shadow:0 0 0 0 rgba(59,130,246,.35);animation:fl-pulse 2.4s ease-out infinite}
@keyframes fl-pulse{to{box-shadow:0 0 0 18px rgba(59,130,246,0)}}
.fl-onto dl{display:grid;gap:8px;margin:0;flex:1}
.fl-onto dl div{display:grid;grid-template-columns:44px 1fr;align-items:baseline}
.fl-onto dt{font-size:14px;font-weight:600;color:var(--blue)}
.fl-onto dd{margin:0;font-size:13px;color:var(--ink-2)}
.fl-brain{margin:16px 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-3)}
.fl-brain b{margin-right:6px;font-weight:600;color:var(--ink)}.fl-brain span{margin:0 10px}
.fl-agents{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0;padding:0;list-style:none}
.fl-agents li{display:flex;align-items:center;gap:8px;padding:12px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:14px;font-weight:500}
.fl-agents i{width:8px;height:8px;border-radius:50%;background:var(--blue);animation:fl-blink 2s infinite}
.fl-agents li:nth-child(2) i{animation-delay:.5s}.fl-agents li:nth-child(3) i{animation-delay:1s}.fl-agents li:nth-child(4) i{animation-delay:1.5s}
@keyframes fl-blink{0%,100%{opacity:.25}30%{opacity:1}}
.fl-note{margin:12px 0 0;font-size:12px;color:var(--ink-3)}
@media (max-width:640px){
  .fl-dims{grid-template-columns:repeat(3,1fr);gap:8px}
  .fl-dims li{padding:10px}
  .fl-agents{grid-template-columns:1fr 1fr;gap:8px}
  .fl-core{padding:18px 16px}
  .fl-onto{gap:16px}.fl-orb{width:56px;height:56px}
}
@media (prefers-reduced-motion:reduce){.fl-link i::after,.fl-orb,.fl-agents i{animation:none}}
canvas.fl-orb{background:none;box-shadow:none;animation:none;width:64px;height:64px}   /* 思考球 1:1：64 是库里的设计尺寸（原写 72 是放大了，2026-10-05 B 发现）；首页 .fl-tri 里是 128，见下 */
.fl-ic svg.ic{fill:none;stroke:#94A3B8;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}   /* fl_dims() 用 ICONS 图标时：同首页流程图的灰线 */
/* 「原理」中段三栏（2026-10-04 Leon：「中间是 thinking orb + 建模，左边是实时脑，右边是认知脑，一边是 01 粒子效果，一边是 Agent 思考粒子效果」）：
   左实时脑（0/1 快速流向中间）· 中思考球 + 现场建模 · 右认知脑（粒子慢慢会聚）。粒子由 site.js 画（canvas[data-fl]），下面垫同帧静态 SVG（无脚本时看它）。
   电脑三栏；手机中间在上、左右两栏并排在下。首页内联 <style> 里有同样一份（首页那份排在后面），改一处两处一起改。 */
.fl-tri{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,320px) minmax(0,1fr);gap:0;padding:0;overflow:hidden}
.fl-tri>div{min-width:0;padding:22px}
.fl-mid{display:flex;flex-direction:column;align-items:center;text-align:center;border-left:1px solid var(--line-2);border-right:1px solid var(--line-2)}
.fl-tri canvas.fl-orb{width:128px;height:128px;margin:-4px 0 6px}   /* 128 = site.js 里单独调的 connecting 设计（同导航下拉），不缩放 */
.fl-mid>.idx{margin-bottom:12px;color:var(--blue)}
.fl-mid dl{display:grid;gap:7px;margin:0;width:100%}
.fl-mid dl div{display:grid;grid-template-columns:40px 1fr;align-items:baseline;text-align:left}
.fl-mid dt{font-size:14px;font-weight:600;color:var(--blue)}
.fl-mid dd{margin:0;font-size:13px;color:var(--ink-2)}
.fl-side{display:flex;flex-direction:column}
.fl-bh{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin:0;white-space:nowrap}
.fl-bh b{font-size:16px;font-weight:600;color:var(--ink)}
.fl-bh small{font-size:12px;color:var(--ink-3)}
.fl-bp{margin:6px 0 0;font-size:13px;line-height:1.6;color:var(--ink-2)}
.fl-fx{position:relative;flex:1;min-height:132px;margin-top:14px}
.fl-fx>svg,.fl-fx>canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.fl-fx.fl-live>svg{visibility:hidden}
.fl-fast .fl-fx{-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%);mask-image:linear-gradient(90deg,transparent,#000 22%)}
.fl-slow{text-align:right}.fl-slow .fl-bh{justify-content:flex-end}
@media (max-width:860px){
  .fl-tri{grid-template-columns:1fr 1fr}
  .fl-mid{grid-column:1/-1;order:-1;border:0;border-bottom:1px solid var(--line-2)}
  .fl-mid dl{max-width:340px}
  .fl-fast{border-right:1px solid var(--line-2)}
}
@media (max-width:640px){
  .fl-tri.fl-core{padding:0}
  .fl-tri>div{padding:16px 14px}
  .fl-tri .fl-mid{padding:18px 16px 16px}
  .fl-bh{flex-direction:column;gap:3px}
  .fl-slow .fl-bh{align-items:flex-end}
  .fl-bh b{font-size:15px}.fl-bh small{font-size:11px}
  .fl-bp{display:none}
  .fl-fx{min-height:96px;margin-top:10px}
  .fl-mid dl div{grid-template-columns:36px 1fr}
  .fl-mid dd{font-size:12.5px}
}

/* 卡片：12px 圆角、1px 细线边、白底；做成链接时悬停边转浅蓝、蓝色投影、标题转蓝（同首页场景卡） */
.card{display:block;padding:22px;border:1px solid var(--line);border-radius:12px;background:#fff;color:inherit}
a.card,a.icard,a.pcard{transition:border-color .25s,box-shadow .25s}
a.card:hover,a.icard:hover,a.pcard:hover,a.card:focus-visible,a.icard:focus-visible,a.pcard:focus-visible{border-color:var(--blue-100);box-shadow:0 12px 30px -20px rgba(29,78,216,.5);outline:none}
.card h3,.icard h3,.pcard h3{transition:color .25s}
a.card:hover h3,a.icard:hover h3,a.pcard:hover h3{color:var(--blue)}
.card-go{display:block;margin-top:auto;padding-top:14px;font-size:13px;color:var(--blue)}

/* 图标卡：44px 浅蓝圆角方块里一个线性蓝色图标 + 标题 + 一句（首页「选择瓴渡的理由」的 #why .cap 与 .why-ic） */
.icards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0 var(--gut) 8px}
.icards.c2{grid-template-columns:repeat(2,1fr)}
.icards.c4{grid-template-columns:repeat(4,1fr)}
.icard{display:flex;flex-direction:column;padding:22px;border:1px solid var(--line);border-radius:12px;background:#fff;color:inherit}
.icard h3{margin-top:14px;font:500 19px/1.35 var(--sans);letter-spacing:-.01em}
.icard h3:first-child{margin-top:0}
.icard p{margin-top:10px;max-width:360px;font-size:13px;color:var(--ink-2)}
.icards.c4 .icard p{max-width:none}
.icon-box{display:flex;flex:none;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;background:var(--blue-soft)}
.icon-box svg{width:26px;height:26px;fill:none;stroke:var(--blue);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.icards+.fnote{border-top:0;padding-top:6px}
@media (max-width:980px){.icards,.icards.c2{grid-template-columns:1fr}.icards.c4{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.icards.c4{grid-template-columns:1fr}}

/* chip 行：适用现场、行业 × 方案等短标签（同首页流程图「业务数据」那一排）；一枚 chip 不折行，行内放不下整枚换行；链接的 chip 悬停转蓝 */
.chip-row{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.sec>.chip-row{padding:0 var(--gut) 8px}
.chip{display:inline-block;padding:4px 10px;border:1px solid var(--line);border-radius:4px;background:#fff;font-size:12px;color:var(--ink-2);white-space:nowrap}
a.chip{transition:color .2s,border-color .2s}
a.chip:hover,a.chip:focus-visible{color:var(--blue);border-color:var(--blue-100)}

/* 左右对照：现状 → 之后（手机上下排，箭头朝下）；之后一栏蓝边，可在段后放消息卡 */
.vs{display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);padding:0 var(--gut) 8px}
.vs-col{padding:22px;border:1px solid var(--line);border-radius:12px;background:#fff}
.vs-col.after{border-color:var(--blue-100);box-shadow:0 12px 30px -20px rgba(29,78,216,.5)}
.vs-tag{display:block;margin-bottom:12px;font:600 12px/1 var(--sans);letter-spacing:.12em;color:var(--ink-3)}
.vs-col.after .vs-tag{color:var(--blue)}
.vs-col p{font-size:15px;line-height:1.8;color:var(--ink-2)}
.vs-col p+p{margin-top:10px}
.vs-col .msg{margin-top:18px}
.vs-arrow{display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--blue)}
@media (max-width:760px){.vs{grid-template-columns:1fr}.vs-arrow{height:36px}.vs-arrow i{transform:rotate(90deg)}.vs-col p{font-size:14px}}

/* 问答：<details> 手风琴，没有脚本也能开合 */
.faq{max-width:960px;margin:0 var(--gut) 12px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;list-style:none;cursor:pointer;font-size:16px;font-weight:500;line-height:1.5;color:var(--ink);transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:8px;height:8px;margin-right:4px;border-right:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);transform:translateY(-3px) rotate(45deg);transition:transform .2s}
.faq details[open]>summary::after{transform:translateY(2px) rotate(225deg)}
.faq summary:hover,.faq summary:focus-visible{color:var(--blue);outline:none}
.faq-a{max-width:720px;padding:0 0 18px}
.faq-a p{font-size:14px;line-height:1.8;color:var(--ink-2)}
.faq-a p+p{margin-top:8px}
@media (max-width:640px){.faq summary{font-size:15px;padding:14px 0}}

/* 产品卡：产品图 + 型号 + 名称 + 一句话 + 参数 + 脚注（手机两列） */
.pcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr));gap:12px;padding:0 var(--gut) 8px}
.pcard{display:flex;flex-direction:column;padding:10px 10px 16px;border:1px solid var(--line);border-radius:12px;background:#fff;color:inherit}
.pcard-img{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;margin-bottom:12px;border-radius:8px;background:linear-gradient(180deg,#F8FAFC,#F1F5F9)}
.pcard-img img{max-width:70%;max-height:80%;object-fit:contain}
.pcard-model{margin:0 4px;font:500 11px/1.4 var(--mono);letter-spacing:.06em;color:var(--blue)}
.pcard h3{margin:4px 4px 0;font:500 16px/1.4 var(--sans)}
.pcard p{margin:4px 4px 0;font-size:13px;line-height:1.6;color:var(--ink-2)}
.pcard-spec{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;margin:12px 4px 0;padding-top:12px;border-top:1px solid var(--line-2)}
.pcard-spec li{display:flex;flex-direction:column;gap:2px;min-width:0}
.pcard-spec b{font:500 17px/1.2 var(--sans);color:var(--ink)}
.pcard-spec b small{margin-left:2px;font-size:11px;font-weight:400;color:var(--ink-3)}
.pcard-spec span{font-size:11.5px;line-height:1.5;color:var(--ink-3)}
.pcard-notes{margin:auto 4px 0;padding-top:12px;font-size:11px;line-height:1.6;color:var(--ink-3)}
.pcard-notes li+li{margin-top:4px}
@media (max-width:640px){
  .pcards{grid-template-columns:1fr 1fr;gap:8px}
  .pcard{padding:6px 6px 12px;border-radius:10px}
  .pcard h3{font-size:15px}
  .pcard p{font-size:12.5px}
  .pcard-spec{grid-template-columns:1fr;gap:8px}
  .pcard-spec b{font-size:16px}
}

/* 页内小导航：吸在主导航下面的一行锚点（用各节的 kicker，两字为主）；当前所在的节高亮（site.js）；窄屏在条内横向滑动，不撑出页面 */
.subnav{position:sticky;top:57px;z-index:5;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding:8px var(--gut);border-bottom:1px solid var(--line);background:rgba(255,255,255,.92);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px)}
.subnav::-webkit-scrollbar{display:none}
.subnav a{flex:none;padding:6px 12px;border-radius:6px;font-size:13px;line-height:1.4;color:var(--ink-2);white-space:nowrap;transition:color .2s,background .2s}
.subnav a:hover{color:var(--ink);background:var(--line-2)}
.subnav a.on{color:var(--blue);background:var(--blue-soft)}
main:has(>.subnav) section{scroll-margin-top:104px}

/* 新页首（hero()）：无眉题；标题上方一个蓝色小栏目名链回上级；H1 短、一行——手机上按字数收字号（--h1n = 标题的字宽数，hero() 自动算）；
   两个按钮；示意说明小字。媒体三选一：3D 背景（.has-bg，沿用上面的 3D 页首与手机舞台）、大图（.hero-fig）、思考球（.hero-orb，128px connecting 原尺寸） */
.hero h1{font-size:clamp(40px,4.4vw,60px);line-height:1.08;white-space:nowrap}
.hero .kicker{margin-bottom:14px}
.hero .lead{max-width:520px}
.phead.hero:not(.has-bg){padding:56px var(--gut) 60px}
@media (min-width:981px){.phead.hero:not(.has-bg):not(.solo){grid-template-columns:minmax(0,1fr) minmax(0,560px)}}
.hero:not(.has-bg) .phead-note{position:static;margin-top:14px}
.hero-fig{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:16/10;border-radius:16px;background:linear-gradient(180deg,#F8FAFC,#F1F5F9);overflow:hidden}
.hero-fig>svg,.hero-fig>img{display:block;width:100%;height:100%;object-fit:contain}
.hero-orb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;width:100%;aspect-ratio:16/10;border:1px solid var(--line);border-radius:16px;background:radial-gradient(ellipse 55% 60% at 50% 46%,var(--blue-soft) 0,#fff 75%)}
.hero-orb canvas{width:128px;height:128px}
.hero-orb small{font-size:12px;color:var(--ink-3)}
@media (max-width:980px){
  .hero h1{font-size:max(26px,min(40px,calc((100vw - 2 * var(--gut)) / var(--h1n,8.6))));line-height:1.12}   /* 最小 26px：再长就溢出，sitecheck 报出来，缩短标题 */
  .phead.hero:not(.has-bg){padding:28px var(--gut) 32px}
  .m-stage .kicker{margin-bottom:10px}
}

/* 页首 · 大画面（2026-10-04 晚《子页改版》第三节第 6 条「子页页首画面化」，hero(…, big=True)）：首页首屏的位置关系——标题在左上、按钮在左下，
   右边一整块画面（栏位的 58% 起、铺到视口右缘，同 3D 页首铺满），高度接近首页首屏（一屏减导航，560–820px）。
   画面：hero_scene 引擎场景（会动）、hero_video 循环视频、hero_fig 图 / SVG、hero_orb 思考球，或自己拼的一段（铺满 .hero-pic，自己定位）。
   手机和窄屏（≤980）：标题、导语、按钮在上，画面在下铺满宽（引擎场景 ≤760 宽 4:5 竖构图，其余 16:10）。 */
.phead.hero.hero-big:not(.has-bg){display:grid;grid-template-columns:calc(var(--fw) * .42 - var(--gut)) minmax(0,1fr);gap:0;align-items:stretch;
  min-height:clamp(560px,calc(100vh - 57px),820px);min-height:clamp(560px,calc(100svh - 57px),820px);margin-inline:calc(-1 * var(--bleed));padding:0 0 0 calc(var(--bleed) + var(--gut));background:#fff}
.hero-big .hero-txt{display:flex;flex-direction:column;min-width:0;padding:56px 32px 36px 0}
.hero-big .hero-end{margin-top:auto;padding-top:28px}
.hero-big .phead-cta{margin-top:0}
.hero-big .phead-note{position:static;margin-top:14px}
.hero-pic{position:relative;min-width:0;background:#F4F7FA;overflow:hidden}
.hero-pic>.hero-fig,.hero-pic>.hero-orb,.hero-pic>.hero-scn,.hero-pic>.hero-vid{position:absolute;inset:0;width:auto;height:auto;aspect-ratio:auto;border:0;border-radius:0}
.hero-pic>.hero-fig{padding:clamp(20px,4vw,56px)}
.hero-pic>.hero-orb{background:radial-gradient(ellipse 50% 55% at 50% 46%,var(--blue-soft) 0,#F8FAFC 78%)}
.hero-vid video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
@media (min-width:981px){.hero-big h1{font-size:min(clamp(36px,4.4vw,60px),calc((var(--fw) * .42 - var(--gut) - 36px) / var(--h1n,8)))}}   /* 一行放进左栏 */
@media (max-width:980px){
  .phead.hero.hero-big:not(.has-bg){display:block;min-height:0;margin-inline:0;padding:28px var(--gut) 0}
  .hero-big .hero-txt{padding:0 0 28px}
  .hero-big .hero-end{margin-top:0;padding-top:24px}
  .hero-pic{margin:0 calc(-1 * var(--gut));aspect-ratio:16/10}
}
@media (max-width:760px){.hero-pic.is-scn{aspect-ratio:4/5}}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* 场景卡（scn_card）的画面 2026-10-04 晚起是定格图 <img class="scn-still">（场景引擎「结果」那一刻） */
.scn-fig>.scn-still{display:block;width:100%;height:100%;object-fit:cover}
/* 五层等轴堆叠图放大版（tools/arch_stack.py 的 hero_svg，/os/architecture.html 页首和洞察文章页首共用；2026-10-05 从 os.css 收进来——
   os.css 第 397–402 行、ins.css 第 133–134、141 行与这里重复，可删，主会话定） */
.arch-hero{display:block;height:96%;width:auto;max-width:100%;overflow:visible}
.arch-hero .ah-code{font:600 14px/1 var(--mono);letter-spacing:.06em}
.arch-hero .ah-name{font:400 13.5px/1 var(--sans)}
.arch-hero .ah-tag{font:500 12px/1 var(--sans)}
@media (max-width:980px){.arch-hero{width:100%;height:auto;max-width:460px;margin:0 auto}}
@media (max-width:560px){.arch-hero .ah-code{font-size:17px}.arch-hero .ah-name{font-size:18px}.arch-hero .ah-tag{font-size:16px}}

/* ==========================================================================
   页面跳转的轻过渡（2026-10-05，Leon：「给整站添加一个简易的链接跳转的轻效果，可以是0.2s的渐入渐出？或者你认为合适的效果」）
   只动透明度、不位移（同一套版式的两页，位移会让两页都有的线和字重影）；开了「减少动态效果」的访客三档都不加。
   1. 支持跨页面 View Transitions（Chrome / Edge 126+、Safari 18.2+、iOS 18.2+ 的微信）：纯 CSS。旧页 0.18 s 淡出、新页 0.22 s 淡入，ease-out；
      浏览器照常跳转，新页能画了才开始，不拖慢跳转。顶部导航单独成组（view-transition-name: ld-nav，全站只这一个名字）：新旧两张导航同一节奏
      交叉淡化，两页相同的像素叠起来不变，导航看着不动、只有内容区淡入淡出；当前栏目的高亮跟着换，开着的下拉 / 手机菜单随旧页淡掉。
   2. 只支持同页、不支持跨页 View Transitions（Chrome 111–125、Safari 18.0–18.1）：不认 @view-transition，直接跳，不加效果。
   3. 完全不支持（老安卓 WebView、iOS 18 以前、旧 Firefox、旧内核的国产浏览器）：site.js 拦站内链接，<html> 加 ld-leave 淡出 0.16 s 后再跳；
      新页 body 淡入 0.2 s（fill-mode 只用 backwards，播完不留样式）。判断写 not (view-transition-name:none)：和 not selector(::view-transition)
      分出的浏览器相同，但不认 selector() 的老浏览器也读得懂（site.js 用同一个判断）。ld-leave 只由脚本加，放在判断外面。
   测试开关（site.js，以后可删）：?pt=js 在支持的浏览器里也走第 3 档，?pt=off 全关，?pt=auto 复原；记在本标签页（sessionStorage），跳到别页仍有效。
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  header.nav{view-transition-name:ld-nav}
  ::view-transition-group(root){animation-duration:.22s}
  ::view-transition-old(root){animation-duration:.18s;animation-timing-function:ease-out}
  ::view-transition-new(root){animation-duration:.22s;animation-timing-function:ease-out}
  ::view-transition-group(ld-nav),::view-transition-old(ld-nav),::view-transition-new(ld-nav){animation-duration:.18s;animation-timing-function:ease-out}
}
@keyframes ld-in{from{opacity:0}}
@supports not (view-transition-name:none){
  @media (prefers-reduced-motion:no-preference){body{animation:ld-in .2s ease-out backwards}}
}
html.ld-pt-js body{animation:ld-in .2s ease-out backwards}
html.ld-pt-off body{animation:none}
html.ld-leave body{opacity:0;transition:opacity .16s ease-out}

/* ==========================================================================
   页首主文案同一位置（2026-10-05，Leon：「这些子页面 hero 主文案的位置都不一致」）：所有子页页首的蓝色栏目名、H1、导语落在同一处——
   电脑上栏目名顶边在导航下 56px、H1 顶边在导航下 82px（导航 57 高：113 / 139）；手机和窄屏上 28px / 54px（85 / 111）。
   ① 链回上级的 a.kicker 原是 inline-block，被父元素的行高撑高，整块往下错 7px：改成块级（宽度随字）。
   ② 没有栏目名的页（洞察、案例、隐私政策、404）H1 上面留出栏目名那一行（12px 字 + 14px 间距），H1 和别的页同高。
   ③ 3D 页首（十个方案页）电脑上不再垂直居中：文字从上排起，按钮放到左下、示意小字在按钮下面（同首页首屏、大画面版式「标题左上、按钮左下」）；
      手机舞台里浮在画面上方的标题区也从导航下 28px 起。
   ④ 带图的紧凑页首（提交成功、404）顶对齐。模拟实况（simpage.css .sp-txt）、平台概览（os.css，改成大画面版式）各自对齐到同一位置。
   首页不在内（首屏是整屏 3D 演示，已定稿）。
   ========================================================================== */
.hero a.kicker{display:block;width:fit-content}
.hero h1:first-child{margin-top:26px}
@media (min-width:981px){
  .phead.hero:not(.has-bg):not(.hero-big):not(.solo){align-items:start}
  .phead.hero.has-bg{align-items:stretch;padding-top:56px;padding-bottom:68px}
  .phead.hero.has-bg>div:not(.phead-bg){display:flex;flex-direction:column}
  .phead.hero.has-bg .phead-top,.phead.hero.has-bg .phead-more{display:contents}
  .phead.hero.has-bg .phead-cta{margin-top:auto;padding-top:28px}
  .phead.hero.has-bg .phead-note{bottom:36px}
}
@media (max-width:980px){
  .m-stage .phead-top{padding-top:28px}
  .m-stage .kicker{margin-bottom:14px}
}

/* 导航右上角按钮（2026-10-05）：改叫「联系我们」，一直显示（页首、页尾用「预约交流」，字不重复，右上角也不空）；联系页上标为当前页：蓝字 */
.nav-cta[aria-current="page"]{color:var(--blue)}
/* 问答收起时答句不排版（2026-10-05，子代理 S 提议）：一屏一个「瓴渡OS」的核查不把收起的答句算进去，读屏也只读问题 */
.faq details:not([open])>.faq-a{display:none}