/* 智伴智能体官网 v6 · 浅色版
   在 v5 静态站上加回 Fluent 动效；丝绸仍为静态，仅一次载入淡入。见 DESIGN.md。 */
:root{
  --space:8px;
  --s1:var(--space);--s2:calc(var(--space)*2);--s3:calc(var(--space)*3);--s4:calc(var(--space)*4);
  --s5:calc(var(--space)*5);--s6:calc(var(--space)*6);--s8:calc(var(--space)*8);
  --s10:calc(var(--space)*10);--s12:calc(var(--space)*12);--s16:calc(var(--space)*16);
  --margin:clamp(40px, 2.8vw, 64px);
  --gutter:clamp(24px, 1.25vw, 32px);
  --page:clamp(1200px, calc(100vw - 2 * var(--margin)), 1680px);
  --cols:12;
  --font:"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei","Noto Sans CJK SC",system-ui,sans-serif;
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-decelerate:cubic-bezier(.1,.9,.2,1);
  --ease-accelerate:cubic-bezier(1,0,1,1);
  --ease-standard:cubic-bezier(.8,0,.2,1);
  --ease-entrance:cubic-bezier(0,0,0,1);
  --dur-faster:83ms;
  --dur-fast:167ms;
  --dur-normal:250ms;
  --dur-enter:500ms;
  --fx-y:28px;
  --fx-hero-y:20px;
  --fx-stagger:80ms;
}
.theme-dark{
  color-scheme:dark;
  --bg:#0B0C0E;--surface-1:#111316;--surface-2:#16191D;--line:#24282E;--line-strong:#30353C;
  --text:#E6E8EB;--text-2:#A7ADB6;--text-3:#878D96;
  --accent:#8EA2BF;--accent-deep:#2C3B52;--accent-ink:#E6E8EB;
  --btn-bg:#E6E8EB;--btn-text:#0B0C0E;
  --silk-a:#1B2230;--silk-b:#2A3446;--silk-c:#3B4557;--silk-d:#151A22;--silk-hi:#5A6475;
  --silk-opacity:.9;
}
.theme-light{
  color-scheme:light;
  --bg:#F4F2EE;--surface-1:#EEEBE6;--surface-2:#F9F8F6;--line:#DEDAD3;--line-strong:#CCC6BD;
  --text:#17191D;--text-2:#4B5058;--text-3:#62676F;
  --accent:#2F4767;--accent-deep:#2F4767;--accent-ink:#F9F8F6;
  --btn-bg:#17191D;--btn-text:#F4F2EE;
  --silk-a:#C6CCD6;--silk-b:#B6BFCB;--silk-c:#A6B0BD;--silk-d:#E4E2DE;--silk-hi:#FFFFFF;
  --silk-opacity:1;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.fx{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:16px;line-height:1.7;
  font-feature-settings:"palt" 0;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
p,figure,h1,h2,h3,dl,ol,ul{margin:0;padding:0}
h1,h2,h3{font-weight:500;letter-spacing:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:var(--s2);top:-64px;padding:var(--s1) var(--s2);background:var(--surface-2);border:1px solid var(--line);z-index:100}
.skip:focus{top:var(--s2)}

/* 12 栏网格容器：左右 --margin，内容最大 --page，列间距 --gutter */
.wrap{
  width:100%;
  max-width:calc(var(--page) + var(--margin) * 2);
  margin-inline:auto;
  padding-inline:var(--margin);
}
.grid{
  display:grid;
  grid-template-columns:repeat(12, minmax(0, 1fr));
  column-gap:var(--gutter);
}
.span-12{grid-column:1 / -1}
.span-11{grid-column:1 / 12}
.span-10{grid-column:1 / 11}
.span-8{grid-column:1 / 9}
.span-7{grid-column:1 / 8}
.span-6{grid-column:1 / 7}
.span-5{grid-column:1 / 6}
.span-4{grid-column:1 / 5}
.span-r5{grid-column:8 / -1}
.span-r6{grid-column:7 / -1}
.span-r7{grid-column:6 / -1}

/* 待确认：灰色细线框，非彩色药丸 */
.tbc{display:inline-block;margin-left:var(--s1);padding:0 6px;font-size:12px;line-height:20px;font-weight:400;
  color:var(--text-3);border:1px dashed var(--line-strong);border-radius:2px;vertical-align:2px;white-space:nowrap}

/* 顶栏：与网格同一条左缘。亚克力磨砂为静态材质；滚动后用伪元素加细描边，不改布局。 */
.site-header{position:sticky;top:0;z-index:20;
  background:color-mix(in srgb,var(--bg) 82%, transparent);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  border-bottom:1px solid color-mix(in srgb,var(--line) 85%, transparent);
  transition:background-color var(--dur-fast) var(--ease-standard)}
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;
  background:color-mix(in srgb,var(--text) 22%, var(--line));opacity:0;
  transition:opacity var(--dur-fast) var(--ease-standard)}
.site-header.is-scrolled{background:color-mix(in srgb,var(--bg) 90%, transparent)}
.site-header.is-scrolled::after{opacity:1}
@supports not (background:color-mix(in srgb,red 50%,blue)){.site-header{background:var(--bg)}}
@supports not (backdrop-filter:blur(1px)){.site-header{background:var(--bg)}}
.bar{display:flex;align-items:center;height:64px;gap:var(--s4)}
.brand{display:flex;align-items:center}
.brand .wordmark{height:28px;width:auto}
.brand .wordmark-lg{height:32px}
.nav{display:flex;gap:var(--s4);margin-left:auto;font-size:14px;color:var(--text-2)}
.nav a{padding:var(--s1) 0;position:relative;transition:color var(--dur-fast) var(--ease-standard)}
.nav a:hover,.nav a.is-current{color:var(--text)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--text);
  transform:scaleX(0);transform-origin:left center;transition:transform var(--dur-fast) var(--ease-decelerate)}
.nav a.is-current::after{transform:scaleX(1)}
.bar-aux{display:flex;align-items:center;gap:var(--s3);font-size:14px}
.theme-link{color:var(--text-3)}
.theme-link:hover{color:var(--text)}
.menu{display:none;margin-left:auto}
.menu summary{list-style:none;cursor:pointer;font-size:14px;color:var(--text-2);padding:var(--s1) 0}
.menu summary::-webkit-details-marker{display:none}
.menu[open] .menu-panel{display:flex}
.menu-panel{display:none;position:absolute;left:0;right:0;top:64px;flex-direction:column;padding:var(--s1) var(--margin) var(--s3);
  background:color-mix(in srgb,var(--bg) 88%, transparent);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  border-bottom:1px solid var(--line)}
.menu-panel a{padding:12px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--text-2)}
.menu-panel a:last-child{border-bottom:0}

/* 按钮 */
.btn{display:inline-flex;align-items:center;justify-content:center;height:clamp(48px, 3.333vw, 56px);padding:0 var(--s4);font-size:15px;border-radius:999px;
  border:1px solid var(--line);color:var(--text);position:relative;overflow:hidden;isolation:isolate;
  transition:background-color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard)}
.btn > span{position:relative;z-index:1}
.btn:hover{border-color:var(--text-3)}
.btn-primary{background-color:var(--btn-bg);color:var(--btn-text);border-color:var(--btn-bg);
  box-shadow:0 4px 14px rgba(23,25,29,.12)}
.btn-primary:hover{box-shadow:0 8px 20px rgba(23,25,29,.16)}
.btn[aria-disabled="true"]{cursor:not-allowed;color:var(--text-3);border-color:var(--line);background-color:transparent;box-shadow:none;user-select:none}
.btn[aria-disabled="true"]:hover,.btn[aria-disabled="true"]:active{box-shadow:none;transform:none}
.btn-sm{height:36px;padding:0 var(--s2);font-size:14px}

/* 产品图为视觉主角：浅色细描边、精致圆角、极淡阴影（去黑边后不再叠加深框） */
.shot{margin:0}
.shot-frame{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--surface-2);
  box-shadow:0 4px 12px rgba(23,25,29,.04),0 12px 32px rgba(23,25,29,.06)}
.shot img{width:100%;height:auto}
.shot figcaption,.dh-fig figcaption{margin-top:var(--s2);font-size:13px;color:var(--text-3)}

/* ===== 首屏：文字保持 v2 单栏底对齐，字号可随视口等比缩放；右侧静态克制珠光丝绸 ===== */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);background:var(--bg)}
.silk{position:absolute;inset:0;pointer-events:none;opacity:var(--silk-opacity)}
.silk svg{position:absolute;width:140%;height:140%;left:-20%;top:-20%;max-width:none}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(90deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 78%,transparent) 40%,transparent 74%),
             linear-gradient(0deg,var(--bg) 0%,transparent 30%)}
.hero-inner{position:relative;z-index:2;padding-top:var(--s16);padding-bottom:var(--s12);min-height:clamp(640px, 44.45vw, 800px);display:flex;flex-direction:column;justify-content:flex-end}
.eyebrow,.kicker{font-size:13px;color:var(--text-3);letter-spacing:.08em}
.hero .eyebrow{font-size:clamp(14px, .972vw, 16px);color:var(--text-2);letter-spacing:.04em;margin-bottom:var(--s3)}
.hero h1{font-size:clamp(56px, 3.889vw, 72px);line-height:1.3;font-weight:500;max-width:16em;margin-top:0}
.hero h1 span{display:block}
.hero .lead{margin-top:var(--s3);font-size:clamp(18px, 1.25vw, 22px);color:var(--text-2);max-width:30em}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s5)}
.platforms{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s8);padding-top:var(--s3);border-top:1px solid var(--line);
  font-size:clamp(14px, .972vw, 16px);color:var(--text-2);max-width:clamp(560px, 38.89vw, 720px)}
.platforms span{display:flex;align-items:center;gap:var(--s1)}
.platforms i{width:6px;height:6px;border-radius:50%;background:var(--accent);display:inline-block}

/* 通用区块底：靠明暗交替分层，不再套同一套左序号右标题 */
.section,.site-footer{overflow-x:clip;} .section{padding:var(--s16) 0;border-bottom:1px solid var(--line);background:var(--bg)}
.section.alt{background:var(--surface-1)}
.kicker{margin-bottom:var(--s3)}
.kicker b{font-weight:400;color:var(--accent);margin-right:var(--s1)}

/* ===== 产品介绍：标题与正文从第 1 栏起排，大图与流程带共用同一左右边 ===== */
.product-title{font-size:clamp(48px, 3.333vw, 64px);line-height:1.2;letter-spacing:-.015em;margin-bottom:var(--s5)}
.product-title .ph{display:inline-block}
.intro-body{color:var(--text-2);margin-bottom:var(--s8)}
.intro-body p + p{margin-top:var(--s2)}
.shot-main{margin:0}
.shot-main .shot-frame{margin-top:0}
#product .shot-main{margin-top:0}
#product .grid > .shot-main{margin-top:var(--s8)}
.flow{list-style:none;display:grid;grid-template-columns:repeat(5, minmax(0,1fr));margin-top:var(--s5);
  border-top:1px solid var(--line-strong)}
.flow li{padding:var(--s3) var(--s3) 0 0;font-size:16px}
.flow li + li{border-left:1px solid var(--line);padding-left:var(--s3)}
.flow li span{display:block;font-size:13px;color:var(--accent);font-variant-numeric:tabular-nums;margin-bottom:4px}
.intro-facts{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));margin-top:var(--s6);border-top:1px solid var(--line)}
.intro-facts .fact{padding:var(--s3) var(--s3) 0 0}
.intro-facts .fact + .fact{padding-left:var(--s3);border-left:1px solid var(--line)}
.fact dt{font-size:13px;color:var(--text-3)}
.fact dd{margin:var(--s1) 0 0;font-size:16px}
.fact dd small{display:block;margin-top:2px;font-size:13px;color:var(--text-3)}

/* ===== 核心能力：不对称 bento，01 图与能力卡混排 ===== */
.cap-lead{display:flex;flex-direction:column;justify-content:end}
.cap-title{font-size:clamp(40px, 2.778vw, 52px);line-height:1.2;letter-spacing:-.015em;margin-bottom:var(--s2)}
.cap-title .ph{display:inline-block}
.cap-note{color:var(--text-2);font-size:15px;max-width:28em;margin-top:var(--s2)}
.bento{display:grid;grid-template-columns:repeat(12, minmax(0,1fr));gap:var(--gutter);margin-top:var(--s8);align-items:stretch}
.bento .shot-tools{grid-column:1 / 9;grid-row:1 / 3;margin:0;display:flex;flex-direction:column}
.bento .shot-tools .shot-frame{flex:none}
.bento .shot-tools img{width:100%;height:auto;object-fit:contain;object-position:top left}
.bento .shot-tools figcaption{flex:none}
.bento-side{grid-column:9 / -1;grid-row:1 / 3;display:flex;flex-direction:column;gap:var(--gutter)}
.bento-side .cap{flex:1}
.cap{background:var(--bg);padding:var(--s4);border:1px solid var(--line);display:flex;flex-direction:column;min-height:0;
  border-radius:18px;box-shadow:0 4px 12px rgba(23,25,29,.04);position:relative;overflow:hidden;isolation:isolate;
  transition:box-shadow var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),background-color var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard)}
.cap:hover{box-shadow:0 12px 32px rgba(23,25,29,.08);border-color:var(--line-strong)}
.cap > *{position:relative;z-index:1}
.section.alt .cap{background:var(--surface-2)}
.theme-dark .section.alt .cap{background:var(--surface-1);border-color:var(--line)}
.cap svg{width:28px;height:28px;color:var(--text-2);margin-bottom:var(--s3);flex:none}
.cap h3{font-size:20px;line-height:1.5}
.cap > p{margin-top:var(--s1);font-size:15px;color:var(--text)}
.cap ul{margin:var(--s2) 0 0;padding:0;list-style:none;font-size:14px;color:var(--text-2);border-top:1px solid var(--line)}
.cap li{padding:10px 0 0 14px;position:relative;line-height:1.6}
.cap li::before{content:"";position:absolute;left:0;top:19px;width:5px;height:1px;background:var(--text-3)}
.cap-text{grid-column:1 / 5}
.cap-image{grid-column:5 / 9}
.cap-video{grid-column:9 / -1}
.cap-stack{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:var(--s4)}
.cap-stack svg{margin-bottom:0}
.cap-stack .cap-copy{flex:0 0 240px}
.cap-stack ul{flex:1 1 320px;margin-top:0;border-top:0;display:flex;flex-wrap:wrap;gap:0 32px}
.cap-stack li{flex:1 1 240px}

/* ===== 数字人：左大图，右标题，下方双角度图拉满 12 栏 ===== */
.dh{margin-top:var(--s8);padding-top:var(--s6);border-top:1px solid var(--line)}
.dh-fig{margin:0}
.dh-fig img{width:100%;height:auto;object-fit:contain;border:1px solid var(--line);border-radius:16px;background:var(--surface-2)}
.dh-visual{grid-column:1 / 9;min-width:0}
.dh-side{grid-column:9 / -1;display:flex;flex-direction:column;min-width:0}
.dh-text{display:flex;flex-direction:column;justify-content:flex-start;padding-bottom:0}
.dh-text h3{font-size:clamp(32px, 2.222vw, 40px);line-height:1.3}
.dh-text p{margin-top:var(--s2);font-size:15px;color:var(--text)}
.dh-points{margin:var(--s3) 0 0;padding:0;list-style:none;font-size:14px;color:var(--text-2);border-top:1px solid var(--line)}
.dh-points li{padding:10px 0 0 14px;position:relative;line-height:1.6}
.dh-points li::before{content:"";position:absolute;left:0;top:19px;width:5px;height:1px;background:var(--text-3)}
.dh-small{margin-top:auto;padding-top:var(--s3)}

/* ===== 使用场景：四个等宽栏，大号编号配标题 ===== */
.scene-head{margin-bottom:var(--s8)}
.scene-title{font-size:clamp(40px, 2.778vw, 52px);line-height:1.2;letter-spacing:-.015em;margin-top:var(--s3)}
.scenes{display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:var(--gutter);border-top:1px solid var(--line)}
.scene{padding-top:var(--s5)}
.scene-no{display:block;font-size:40px;line-height:1;font-weight:500;color:var(--accent);font-variant-numeric:tabular-nums;margin-bottom:var(--s3);transform-origin:left center}
.scene h3{font-size:20px;line-height:1.5;margin-bottom:var(--s2)}
.scene p{color:var(--text-2);font-size:15px}

/* ===== 下载：居中标题与卡片组 ===== */
.download{text-align:center}
.download .kicker,.download .dl-title,.download .dl-desc{max-width:28em;margin-left:auto;margin-right:auto}
.dl-title{font-size:clamp(40px, 2.778vw, 52px);line-height:1.2;letter-spacing:-.015em;margin-bottom:var(--s2)}
.dl-desc{color:var(--text-2);font-size:15px}
.dl-grid{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:var(--gutter);margin-top:var(--s8);text-align:left}
.dl{border:1px solid var(--line);background:var(--surface-2);padding:var(--s4);display:flex;flex-direction:column;min-height:280px;
  border-radius:18px;box-shadow:0 4px 12px rgba(23,25,29,.04);position:relative;overflow:hidden;isolation:isolate;
  transition:box-shadow var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),background-color var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard)}
.dl:hover{box-shadow:0 12px 32px rgba(23,25,29,.08);border-color:var(--line-strong)}
.dl > *{position:relative;z-index:1}
.theme-dark .dl{background:var(--surface-1)}
.section.alt .theme-light .dl,.theme-light .section.alt .dl{background:var(--surface-2)}
.dl-top{display:flex;align-items:center;justify-content:space-between}
.dl svg{width:32px;height:32px;color:var(--text)}
.dl-state{font-size:13px;color:var(--text-3)}
.dl h3{margin-top:var(--s4);font-size:22px;line-height:1.5}
.dl > p{margin-top:var(--s1);font-size:14px;color:var(--text-2)}
.dl .meta{margin:var(--s3) 0 var(--s4);font-size:13px;color:var(--text-3)}
.dl .meta div{display:flex;justify-content:space-between;gap:var(--s2);padding:8px 0;border-top:1px solid var(--line)}
.dl .meta dt{color:var(--text-3)}
.dl .meta dd{margin:0;color:var(--text-2);text-align:right}
.dl .meta .tbc{margin-left:0;vertical-align:0}
.dl .btn{margin-top:auto;width:100%}
.svc{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));margin:var(--s6) auto 0;border-top:1px solid var(--line);text-align:left}
.svc .fact{padding:var(--s3) var(--s3) 0 0}
.svc .fact + .fact{padding-left:var(--s3);border-left:1px solid var(--line)}
.svc .fact dd{font-size:15px;color:var(--text-2)}
.dl-note{margin-top:var(--s4);font-size:14px;color:var(--text-3)}

/* ===== 关于：信息表 ===== */
.about-title{font-size:32px;line-height:1.3;margin-bottom:var(--s6)}
.about-body{color:var(--text-2)}
.about-body .mark{width:56px;height:56px;margin-bottom:var(--s3)}
.about-body .about-tbc{margin-top:var(--s2)}
.about-body .slogan{margin-top:var(--s4);color:var(--text);font-size:20px}
.contact{margin:0}
.contact div{display:grid;grid-template-columns:120px 1fr;gap:var(--s2);padding:14px 0;border-bottom:1px solid var(--line);align-items:baseline}
.contact div:first-child{border-top:1px solid var(--line)}
.contact dt{font-size:13px;color:var(--text-3)}
.contact dd{margin:0;font-size:15px}
.contact dd a,.foot-legal a{text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px}

/* 页脚 */
.site-footer{padding:var(--s8) 0 var(--s6);background:var(--bg);font-size:13px;color:var(--text-3)}
.foot-top{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s4);padding-bottom:var(--s5);border-bottom:1px solid var(--line)}
.foot-nav{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4);font-size:14px;color:var(--text-2)}
.foot-nav a:hover,.foot-legal a:hover{color:var(--text)}
.foot-legal{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);padding-top:var(--s3);line-height:1.8}
.foot-legal a{color:var(--text-2)}
.foot-brand p{margin-top:var(--s2);color:var(--text-3)}

/* ===== 响应式：单栏重排，不只是缩小 ===== */
@media (min-width:1441px){
  :root{--space:clamp(8px, 0.556vw, 10px)}
}
@media (max-width:1024px){
  :root{--margin:32px;--gutter:24px;--space:8px}
  .product-title{font-size:36px}
  .cap-title,.scene-title,.dl-title,.dh-text h3{font-size:32px}
  .bento .shot-tools,.bento-side{grid-column:1 / -1;grid-row:auto}
  .bento-side{flex-direction:row}
  .bento-side .cap{flex:1 1 0;min-height:0}
  .cap-text{grid-column:1 / 5}
  .cap-image{grid-column:5 / 9}
  .cap-video{grid-column:9 / -1}
  .scenes{grid-template-columns:repeat(2, minmax(0,1fr));gap:var(--s6) var(--gutter)}
}
@media (max-width:760px){
  :root{--margin:20px;--gutter:16px;--space:8px}
  .nav,.bar-aux .theme-link{display:none}
  .menu{display:block}
  .bar{gap:var(--s2)}
  .brand .wordmark{height:24px}
  .brand .wordmark-lg{height:28px}
  .hero-inner{min-height:0;padding-top:var(--s12);padding-bottom:var(--s8)}
  .hero h1{font-size:28px;line-height:1.45}
  .hero .lead{font-size:16px}
  .hero::after{background:linear-gradient(0deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 55%,transparent) 60%,color-mix(in srgb,var(--bg) 30%,transparent) 100%)}
  .hero-cta .btn{flex:1 1 140px}
  .platforms{margin-top:var(--s6)}
  .section{padding:var(--s10) 0}
  .product-title,.cap-title,.scene-title,.dl-title,.dh-text h3{font-size:28px}
  .about-title{font-size:24px}
  .intro-body,.kicker{margin-bottom:var(--s3)}
  #product .grid > .shot-main{margin-top:var(--s5)}
  .flow{grid-template-columns:1fr;border-top:0;margin-top:var(--s4)}
  .flow li{padding:12px 0;border-top:1px solid var(--line);display:flex;gap:var(--s2);align-items:baseline}
  .flow li + li{border-left:0;padding-left:0}
  .flow li span{margin-bottom:0}
  .intro-facts,.svc{grid-template-columns:1fr}
  .intro-facts .fact,.intro-facts .fact + .fact,
  .svc .fact,.svc .fact + .fact{padding:var(--s2) 0;border-left:0;border-bottom:1px solid var(--line)}
  .bento{margin-top:var(--s5)}
  .bento .shot-tools,
  .bento-side,
  .cap-text,.cap-image,.cap-video,.cap-stack{grid-column:1 / -1;grid-row:auto}
  .bento-side{flex-direction:column}
  .bento-side .cap{flex:none;min-height:auto;height:auto}
  .cap-stack{flex-direction:column;gap:var(--s2)}
  .cap-stack ul{border-top:1px solid var(--line)}
  .span-11,.span-10,.span-8,.span-7,.span-6,.span-5,.span-4,
  .span-r5,.span-r6,.span-r7{grid-column:1 / -1}
  .dh{margin-top:var(--s6);padding-top:var(--s4)}
  .dh-visual,.dh-side,.dh-text,.dh-small{grid-column:1 / -1}
  .dh-side{display:flex;flex-direction:column}
  .dh-text{padding:var(--s3) 0 var(--s2)}
  .dh-small{margin-top:0;padding-top:0}
  .scenes{grid-template-columns:1fr;gap:0}
  .scene{display:grid;grid-template-columns:56px 1fr;gap:var(--s2) var(--s3);padding:var(--s4) 0;border-bottom:1px solid var(--line)}
  .scene-no{grid-row:1 / 3;font-size:28px;margin-bottom:0;padding-top:2px}
  .scene h3,.scene p{grid-column:2}
  .dl-grid{grid-template-columns:1fr;gap:var(--s2);margin-top:var(--s5)}
  .dl{min-height:0}
  .contact div{grid-template-columns:1fr;gap:4px}
  .foot-top{flex-direction:column}
  .foot-legal{flex-direction:column;gap:4px}
}
/* ===== v6 Fluent 动效 ===== */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:40;pointer-events:none}
.scroll-progress > span{display:block;height:100%;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left center;will-change:transform}

@media (hover:hover){
  .btn:hover{transform:translateY(-2px)}
  .cap:hover,.dl:hover{transform:translateY(-3px)}
  .btn:active,.cap:active,.dl:active{transform:scale(.98)}
  .btn[aria-disabled="true"]:hover,.btn[aria-disabled="true"]:active{transform:none}
  .btn::before,.cap::before,.dl::before{
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
    opacity:0;transition:opacity var(--dur-fast) var(--ease-standard);
    background:radial-gradient(180px circle at var(--rx,50%) var(--ry,50%), rgba(255,255,255,.42), transparent 64%)}
  .btn-primary::before{background:radial-gradient(180px circle at var(--rx,50%) var(--ry,50%), rgba(255,255,255,.18), transparent 64%)}
  .btn:hover::before,.cap:hover::before,.dl:hover::before{opacity:1}
}

@keyframes fx-rise{from{opacity:0;transform:translateY(var(--fx-hero-y,20px))}to{opacity:1;transform:translateY(0)}}
@keyframes fx-enter{from{opacity:0;transform:translateY(var(--fx-y,28px))}to{opacity:1;transform:translateY(0)}}
@keyframes fx-shot{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@keyframes fx-header{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}
@keyframes fx-fade{from{opacity:0}to{opacity:var(--silk-opacity,1)}}
@keyframes fx-flip{from{opacity:0;transform:rotateX(65deg)}to{opacity:1;transform:rotateX(0)}}

/* 仅在 head 的 .js 与动效脚本成功加上的 .fx 同时存在时才预隐藏，避免脚本失败时内容不可见 */
.js.fx .site-header{opacity:0;transform:translateY(-100%)}
.js.fx .site-header.is-ready{animation:fx-header 400ms var(--ease-decelerate) both}
.js.fx .silk{opacity:0}
.js.fx .silk.is-ready{animation:fx-fade 600ms var(--ease-decelerate) both}
.js.fx .hero .fx-rise{opacity:0;transform:translateY(var(--fx-hero-y,20px))}
.js.fx .hero.is-ready .fx-rise{animation:fx-rise var(--dur-enter) var(--ease-decelerate) both;animation-delay:var(--fx-delay,0ms)}
.js.fx .hero.is-ready .eyebrow{--fx-delay:0ms}
.js.fx .hero.is-ready h1{--fx-delay:80ms}
.js.fx .hero.is-ready .lead{--fx-delay:160ms}
.js.fx .hero.is-ready .hero-cta{--fx-delay:240ms}
.js.fx .hero.is-ready .platforms{--fx-delay:320ms}

.js.fx .fx-enter{opacity:0;transform:translateY(var(--fx-y,28px))}
.js.fx .fx-enter.is-in{animation:fx-enter var(--dur-enter) var(--ease-decelerate) both;animation-delay:var(--fx-delay,0ms)}
.js.fx .fx-shot{opacity:0;transform:scale(.96)}
.js.fx .fx-shot.is-in{animation:fx-shot 560ms var(--ease-decelerate) both;animation-delay:var(--fx-delay,0ms)}
.js.fx .fx-flip{opacity:0;transform:rotateX(65deg)}
.js.fx .fx-flip.is-in{animation:fx-flip 500ms var(--ease-decelerate) both;animation-delay:var(--fx-delay,0ms);transform-style:preserve-3d}

@media (max-width:768px){
  :root{--fx-y:14px;--fx-hero-y:12px;--fx-stagger:50ms}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js.fx .site-header,.js.fx .silk,.js.fx .fx-rise,.js.fx .fx-enter,.js.fx .fx-shot,.js.fx .fx-flip,
  .js.fx .hero .fx-rise,.js .site-header,.js .silk{
    opacity:1!important;transform:none!important;animation:none!important}
  .btn,.cap,.dl,.nav a,.site-header,.site-header::after,.nav a::after,.scroll-progress > span{transition:none!important}
  .btn:hover,.cap:hover,.dl:hover,.btn:active,.cap:active,.dl:active{transform:none}
  .scroll-progress{display:none}
}