:root{
  --white:var(--color-signal-white,#fff);
  --ink:var(--color-ink-black,#202020);
  --onyx:var(--color-onyx,#090c1d);
  --carbon:var(--color-carbon,#2a2a2a);
  --slate:var(--color-slate,#646464);
  --ash:var(--color-ash,#838383);
  --fog:var(--color-fog,#b3b3b3);
  --cloud:var(--color-cloud,#d4d4d4);
  --bone:var(--color-bone,#e8e8e8);
  --violet:var(--color-brand-violet,#6647f0);
  --blue:var(--color-signal-blue,#0091ff);
  --mint:var(--color-teal-tag,#16c0a4);
  /* ── Knowe 设计 token（对齐右侧 demo :root，勿改值） ── */
  --canvas:#FAF9F6;            /* 页面画布（暖米白，替代 #fff） */
  --surface:#FFFFFF;           /* 白卡片/按钮底 */
  --surface-2:#F4F3EF;         /* 次级面（按钮 hover） */
  --surface-sunken:#F1EFEA;    /* 沉底面（按压态） */
  --ink:#211F1C;               /* 主文字（替代 --ink/#111/#131313） */
  --ink-2:#6C6A63;             /* 次要文字 */
  --ink-3:#A09E96;             /* 弱化文字 */
  --accent:#4B5A8C;            /* 主色：CTA 填充/激活/强调 */
  --accent-hover:#3F4C79;
  --accent-press:#333F66;
  --accent-tint:#ECEEF4;       /* 浅底：选中 tag 底、品牌 mark 底 */
  --accent-ring:rgba(75,90,140,.24); /* 焦点环/描边光晕 */
  --hairline:#ECEAE3;          /* 边框/分隔（灰阶收敛） */
  --r-xs:8px; --r-sm:10px; --r-md:14px; --r-lg:18px;  /* 中圆角族 */
  --shadow-1:0 1px 2px rgba(33,31,28,.04);
  --shadow-2:0 1px 3px rgba(33,31,28,.05),0 6px 16px rgba(33,31,28,.06);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--canvas);color:var(--ink)}
body{font-family:"PingFang SC","Noto Sans SC","Microsoft YaHei","Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit}

/* v6：整站首屏按「150% 观感」放大（相对 v5 ×1.4~1.5，数值以观感为准）——
   导航字号/间距同步放大：brand-word 21→29px、nav-link 13.5→19px、间距 28/29→38/40px，
   栏头高度 78→100px；内容列与样板间同宽 max-width 900→1280px（容纳样板间）。 */
.site-header{height:100px;width:100%;background:transparent}
.nav-wrap{width:100%;max-width:1280px;height:100px;margin:0 auto;display:flex;align-items:flex-start;padding-top:18px}
.brand{display:flex;align-items:center;height:44px;margin-right:38px;gap:8px;flex:0 0 auto}
.brand-word{font-size:29px;font-weight:600;letter-spacing:-.02em;color:var(--ink);line-height:1}
.nav-links{display:flex;gap:40px;align-items:center;height:48px;font-size:19px;font-weight:500;color:var(--ink-2);white-space:nowrap}
.nav-links a{display:inline-flex;align-items:center;gap:6px;height:44px}
/* v9 i18n：中 / EN 语言切换（导航右侧，风格对齐现有 UI：hairline 描边 + accent 高亮选中） */
.lang-switch{display:flex;align-items:center;gap:2px;margin-left:auto;height:44px;padding:3px;border:1px solid var(--hairline);border-radius:999px;background:var(--surface);flex:0 0 auto}
.lang-btn{border:0;background:transparent;color:var(--ink-2);font-family:inherit;font-size:17px;font-weight:600;line-height:1;padding:0 15px;height:36px;border-radius:999px;cursor:pointer}
.lang-btn[aria-pressed="true"]{background:var(--accent);color:#fff}
.lang-btn:not([aria-pressed="true"]):hover{color:var(--ink)}
.lang-btn:not([aria-pressed="true"]):active{transform:scale(.96)}
/* v9 i18n：EN 文案适配——主标题允许换行并略缩字号（英文比中文宽），CTA 主文字缩小防溢出按钮 */
html[lang="en"] h1{white-space:normal;font-size:clamp(24px,5.6vw,56px);line-height:1.22}
html[lang="en"] .cta-main{font-size:20px}

.hero-shell{width:100%;max-width:1280px;margin:0 auto;display:flex;flex-direction:column;align-items:center;padding-top:78px}
.hero-copy{width:100%;padding-top:0;position:relative;z-index:3;display:flex;flex-direction:column;align-items:center}
h1{margin:0 0 26px;font-size:clamp(25px,7.6vw,68px);line-height:1.2;letter-spacing:.015em;font-weight:700;color:var(--ink);white-space:nowrap;text-align:center}
/* v1.2 对齐加固：check 槽位改 flex:0 0 26px（不再依赖 inline-block+line-height 的
   字形度量）；v12（Hirze 返工）起改回「块居中 + 行左对齐」方案：
   · .benefits width:fit-content + margin:0 auto → 整个卖点块收缩到最宽一行的内容宽，
     整块在页面居中（不再按每行单独居中，也不再让行铺满固定宽留左侧白）；
   · li justify-content:flex-start → 每行内 √、头词、展开句都从同一 x 左对齐；
   · 文本槽 flex:0 1 auto + min-width:0 + text-align:left → 展开句按内容宽左对齐
     （不铺满行宽；min-width:0 保留，窄屏仍可收缩换行）；
   · 头词 strong 固定列宽（中文 126px / EN 268px）保持不变——每行头词文字
     在自身固定列内左缘右缘齐平（两端对齐；EN 拉伸量实测见 _cdp-results-v12.txt）。
   v6：字号 15→21px（×1.4）、行高 1.75→1.7（行距绝对值 26.25→35.7px，等比放大）。 */
.benefits{list-style:none;margin:0 auto;padding:0;font-family:inherit;font-size:21px;line-height:1.7;color:var(--ink-2);letter-spacing:0;width:fit-content}
.benefits li{display:flex;align-items:flex-start;justify-content:flex-start;gap:17px;min-height:41px;height:auto;white-space:normal;margin-bottom:17px;padding:0}
.benefits li:last-child{margin-bottom:0}
.benefits strong{font-weight:600;color:var(--ink);display:inline-block;width:126px}
.check{font-family:inherit;color:var(--accent);font-weight:600;font-size:22px;width:26px;flex:0 0 26px;display:inline-flex;align-items:center;justify-content:center;line-height:1}
.benefits li > span:last-child{flex:0 1 auto;min-width:0;text-align:left}
/* v10 产品语对齐：四组头词（中文 6 全角字 × 21px = 126px 固定列）左缘右缘齐平 = 两端对齐；
   v12 EN 头词重译（24–26 字母；实测自然宽 253.34–262.86px，四者最大差 9.52px ≤10px），
   列宽 = 最宽自然宽 262.86 + 5.14 ≈ 268px（落在 4~8px 缓冲档）+ text-align-last:justify
   （末行也强制两端对齐），四行实际拉伸量 5.14–14.66px（见 _cdp-results-v12.txt）。 */
html[lang="en"] .benefits strong{width:268px;text-align:justify;text-align-last:justify}
/* v1.2 CTA：主按钮改「按钮内上下两行」结构（上行主文字 / 下行小字），两个同款按钮
   并排（Windows / macOS），水平+垂直双居中，同高同宽同样式；沿用 .cta-row 的 gap。
   v6：主文字 16→24px（×1.5）、副文字 11.5→17px（×1.48）、按钮 196×60→280×84（×1.43/×1.4）、
   按钮间距 16→24px、与卖点间距 32→46px、圆角 14→20px。
   v10 hover 双图层（Hirze 动画 1:1 落地）：.main-cta 承担定位/裁切/描边容器——
   position:relative + overflow:hidden + border:2px solid（accent 系），尺寸 280×84、圆角 20px 不变；
   padding 归零，文字居中交给内部 .cta-face（层A）与 .cta-face-hover（层B）各自 flex 居中；
   默认底色保持 accent 实心观感（层A 文字浮于其上），hover 时由 .cta-fill（accent-hover→press
   渐变斜切填充条）扫入覆盖。 */
.cta-row{display:flex;align-items:stretch;margin-top:46px;gap:24px;justify-content:center;flex-wrap:wrap}
.main-cta{position:relative;overflow:hidden;border:2px solid var(--accent);width:280px;height:84px;padding:0;border-radius:20px;background:var(--accent);color:#fff;display:inline-flex;align-items:stretch;text-align:center;font-size:24px;font-weight:600;letter-spacing:0;box-shadow:var(--shadow-2)}
.cta-main{font-size:24px;font-weight:600;line-height:1.15;letter-spacing:0}
.cta-sub{font-size:17px;font-weight:400;line-height:1.15;color:rgba(255,255,255,.82);letter-spacing:0}
/* v10：层A（默认可见）——占满按钮内容区，两行文字 flex 居中；hover 整层上滑出 */
.cta-face{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  transition:transform .5s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}
/* v10：层B（hover 显示）——绝对覆盖按钮内部，默认 translateY(100%) 藏于下方；
   hover/focus-visible 时滑入；文字 z 轴高于填充条 */
.cta-face-hover{
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  z-index:2;
  transform:translateY(100%);
  transition:transform .5s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}
/* v10：斜切填充条——铺满层B，默认 translateY(100%) skewY(-12deg) scaleY(0) 藏于下方，
   hover 时 translateY(0) + scaleY(1.5)，以底部为原点向上扫入，形成斜切填充观感 */
.cta-fill{
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  background:linear-gradient(180deg,var(--accent-hover),var(--accent-press));
  transform:translateY(100%) skewY(-12deg) scaleY(0);
  transform-origin:50% 100%;
  transition:transform .5s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}
.cta-face-hover .cta-main,
.cta-face-hover .cta-sub{
  position:relative;
  z-index:1;
}
.main-cta:hover .cta-face:not(.cta-face-hover),
.main-cta:focus-visible .cta-face:not(.cta-face-hover){transform:translateY(-150%)}
.main-cta:hover .cta-face-hover,
.main-cta:focus-visible .cta-face-hover{transform:translateY(0)}
.main-cta:hover .cta-fill,
.main-cta:focus-visible .cta-fill{transform:translateY(0) skewY(-12deg) scaleY(1.5)}
/* v6：样板间按「175% 观感」放大——宽 min(810px,100%)→min(1280px,100%)（1280 桌面视口下
    即满屏宽，hero-shell/nav-wrap max-width 同步 900→1280px 容纳）；aspect-ratio 3/2 不变，
    高 540→853.33px；iframe 虚拟画布 1180px 的 scale 自动从 ≈0.69 提到 ≈1.08——
    实测 1.08305（.knowe-window 左右 1px 边框 → clientWidth 1278，1278/1180），
    fitKnoweFrame 虚拟高度 = max(720, round(851.33/1.08305)) = 786，渲染高 786×1.08305 ≈ 851.3px
    ≈ client 高 851.33px（差 0.05px），scale>1 时内容完整不裁切（见 index.html 脚本注释）。
    v6 滚动节奏（margin-top 68px 仅为样板间与下载按钮的相邻间距，不参与居中）：
    视口 900 − 样板间 853.33 = 46.67 → 滚动到底居中央需上下各 23.33px 留白，
    margin-bottom 取 24px → 实测样板间中心 449.3 vs 视口中心 450，偏移 0.7px（≤20px ✓）。
    页底留白 = 24.1px（<140px 说明：样板间高 853px 已接近满屏，140px 底部留白与「滚动到底居中」
    在 900px 视口下几何互斥——需样板间高 ≤620px 或视口高 ≥1134px 才可同时满足；本版按
    「滚动到底样板间中心 ≈ 视口中心（≤20px 容差）」优先，观感为样板间满屏居中。 */
.product-stage{width:min(1280px,100%);aspect-ratio:3/2;margin:68px auto 24px;position:relative;overflow:visible}
/* v4：去掉 v1 残留的底部淡出 mask——v2/v3 起样板间为独立区块（.knowe-window 亦已置 mask:none），
   删除两条 linear-gradient 让窗口内容完整显示，不出现底部渐隐。 */
.product-window{position:relative;width:100%;height:100%;background:#fff;border-radius:0;border-top:1px solid #efefef;box-shadow:-12px 5px 23px rgba(0,0,0,.03);overflow:hidden}
.workspace-bar{height:36px;border-bottom:1px solid #ececec;display:grid;grid-template-columns:266px 1fr 33px;align-items:center;font-family:Inter,sans-serif;font-size:12px;color:#393939}
.workspace-name{height:100%;display:flex;align-items:center;padding-left:14px;gap:6px}
.workspace-name strong{font-size:13px}
.mini-spark,.spark-mini{font-size:13px;background:linear-gradient(100deg,#ff4c82,#7655ff,#2cc4ee);-webkit-background-clip:text;background-clip:text;color:transparent}
.down{font-size:11px;color:#8f8f8f}
.search-mini{justify-self:center;font-size:19px;color:#8b8b8b;transform:rotate(-20deg)}
.spark-mini{justify-self:center}
.product-grid{display:grid;grid-template-columns:47px 219px 1fr;height:522px}
.rail{background:#050505;display:flex;flex-direction:column;align-items:center;padding-top:9px;color:#aaa;gap:18px;font-family:Inter,sans-serif}
.rail-brain{width:31px;height:31px;border-radius:9px;background:radial-gradient(circle at 50% 48%,#fff 0 9%,#fc83d5 11%,#9f52ee 33%,#4449c3 60%,#151515 62%);color:transparent;box-shadow:inset 0 0 7px rgba(255,255,255,.25)}
.rail-icon{font-size:18px;color:#a9a9a9;line-height:1}
.rail .dots{font-size:20px;letter-spacing:-4px}
.sidebar{border-right:1px solid #ececec;background:#fafafa;font-family:Inter,system-ui,sans-serif;color:#333;padding:11px 9px 0 14px;font-size:12px}
.sidebar-head{font-size:16px;font-weight:600;margin:0 0 9px}
.side-item,.person-row,.space-row{height:28px;display:flex;align-items:center;gap:8px;padding:0 5px;border-radius:5px;white-space:nowrap}
.side-item span:first-child{width:12px;color:#777}
.side-item.muted{color:#777}
.active-home{font-weight:600;color:#2b2b2b}
.sidebar .side-section{font-size:10.5px;color:#8b8b8b;margin:16px 4px 5px}
.person-row{font-weight:500;position:relative}
.avatar{width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-size:8px;font-weight:700;flex:0 0 auto}
.a1{background:linear-gradient(135deg,#d88d6b,#62574d)}
.a2{background:linear-gradient(135deg,#fd8298,#e04f72)}
.a3{background:linear-gradient(135deg,#56c9c8,#2c9b9d)}
.notif{position:absolute;right:-2px;background:#f14275;color:#fff;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700}
.doc-ico{color:#2796d8 !important}
.spaces-title{margin-top:20px !important}
.space-row.selected{background:#ececec;margin-top:2px;height:30px}
.marketing-dot{font-size:18px;color:#ef5f66}
.indent{padding-left:20px}
.task-pane{font-family:Inter,system-ui,sans-serif;background:#fff;overflow:hidden;color:#333}
.task-header{height:76px;border-bottom:1px solid #ececec;padding:10px 14px 0}
.task-title{height:26px;display:flex;align-items:center;gap:7px;font-size:13px}
.market-icon{color:#ed5c61;font-size:17px}.tiny-caret{color:#777;font-size:10px}.star{font-size:17px;color:#6e6e6e;margin-left:2px}
.tabs{height:38px;display:flex;align-items:flex-end;gap:16px;white-space:nowrap;font-size:10.5px;color:#5e5e5e;overflow:hidden}
.tab{height:33px;display:flex;align-items:center;gap:5px;padding-bottom:7px;position:relative}
.selected-tab{font-weight:600;color:#333}.selected-tab:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:#6e55bf}
.chat-dot{color:#5e46ce}.task-dot{color:#8342cd}.schedule-dot{color:#dc4f77}.gantt-dot{color:#ea4c68}.customer-dot{color:#355cae}.view-tab{color:#999}
.table-head{height:36px;display:grid;grid-template-columns:1fr 98px;align-items:center;padding:0 17px;border-bottom:1px solid #f0f0f0;font-size:9.5px;color:#999}
.group-block{padding:11px 14px 0 12px}.group-block.second{padding-top:13px}
.group-title{height:26px;display:flex;align-items:center;gap:5px;font-size:9.5px;color:#888}
.twisty{font-size:14px;color:#666}.twisty.small{margin-left:-3px;margin-right:-2px}.status{font-size:9px;font-weight:600;border-radius:6px;padding:4px 8px;color:#fff;line-height:1}
.status.done{background:#26b69b}.status.progress{background:#2097e5}.count{font-size:10px;color:#888}
.task-row{height:33px;display:grid;grid-template-columns:15px minmax(0,1fr) auto 42px;align-items:center;border-bottom:1px solid #f2f2f2;font-size:11px;color:#5a5a5a;white-space:nowrap}
.task-row.bold{font-weight:500;color:#444;grid-template-columns:13px 14px minmax(0,1fr) auto 42px}
.task-row.indent-task{padding-left:22px;grid-template-columns:15px minmax(0,1fr) 42px}.task-row.add-task{color:#aaa;grid-template-columns:15px 1fr}
.green-check{font-size:10px;color:#27aa84}.empty-check{font-size:13px;color:#c9c9c9}.blue-dot{font-size:11px;color:#79b6f5}.subcount{font-size:9px;color:#a7a7a7}
.assignees{justify-self:end;display:flex;align-items:center;padding-right:1px}.face{width:18px;height:18px;border-radius:50%;border:1.5px solid #fff;margin-left:-5px;display:inline-block;box-shadow:0 0 0 1px rgba(0,0,0,.03)}
.f1{background:linear-gradient(135deg,#e9a47d,#69534a)}.f2{background:linear-gradient(135deg,#f2bd6f,#825a33)}.f3{background:linear-gradient(135deg,#d8b69b,#745e54)}.f4{background:linear-gradient(135deg,#efaa95,#7c4e48)}.f5{background:linear-gradient(135deg,#d8d2bb,#555)}.f6{background:linear-gradient(135deg,#58c4cf,#218293)}.f7{background:linear-gradient(135deg,#e88472,#8c534e)}.f8{background:linear-gradient(135deg,#e8bf73,#7c572f)}.f9{background:linear-gradient(135deg,#d1aa9a,#6e5c59)}.f10{background:linear-gradient(135deg,#70c9a3,#457866)}


@media(max-width:1100px){
  .nav-wrap,.hero-shell{width:calc(100% - 44px)}
}
@media(max-width:820px){
  .site-header{height:auto}.nav-wrap{height:auto;padding:16px 0;align-items:center}.nav-links{display:none}
  .hero-shell{display:flex;flex-direction:column;align-items:center;padding-top:28px;width:calc(100% - 32px)}
  h1{white-space:nowrap;font-size:clamp(25px,7.6vw,68px)}.benefits li{height:auto;margin:8px 0;white-space:normal}
  .product-stage{margin-top:32px}
}

/* Interaction system */
:where(a,button,.tab,.task-row,.side-item,.person-row,.space-row){
  -webkit-tap-highlight-color:transparent;
}
:where(a,button,.tab,.task-row,.side-item,.person-row,.space-row):focus-visible{
  outline:3px solid var(--accent-ring);
  outline-offset:3px;
}
.brand,.nav-links a,.lang-btn,.main-cta,.tab,.task-row,.side-item,.person-row,.space-row,.product-window{
  transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease,background-color .22s ease,border-color .22s ease,color .22s ease,opacity .22s ease;
}
.brand:hover{transform:translateY(-1px)}
.nav-links a{position:relative}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
.nav-links a:hover{color:#181818;transform:translateY(-1px)}
.nav-links a:hover::after{transform:scaleX(1)}
.main-cta:hover{border-color:var(--accent-hover);box-shadow:0 10px 24px rgba(75,90,140,.28);transform:translateY(-1px)}
.main-cta:active{transform:translateY(0) scale(.97)}
.main-cta:active{border-color:var(--accent-press)}
.product-window:hover{box-shadow:0 26px 60px rgba(33,31,28,.14);transform:translateY(-2px)}
.tab,.task-row,.side-item,.person-row,.space-row{cursor:pointer}
.tab:hover{color:#262626;transform:translateY(-1px)}
.side-item:hover,.person-row:hover,.space-row:hover{background:#ededed;color:#222;transform:translateX(2px)}
.task-row:hover{background:#fafafa;transform:translateX(2px)}
.task-row:hover .assignees{transform:translateX(-2px)}
.assignees{transition:transform .2s ease}
.selected-tab{color:#333}
.selected-tab::after{transition:background-color .2s ease,transform .2s ease}
.selected-tab:hover::after{background:#7b5be0;transform:scaleX(1.06)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}


/* Knowe v1.3 interactive embed ------------------------------------------------
   The iframe renders on a wider virtual desktop canvas and is scaled uniformly
   by JS (fitKnoweFrame), so the real app remains interactive without becoming
   the narrow/tablet variant inside the preview. */
.knowe-window{
  width:100%;
  height:100%;
  border-radius:18px;
  border:1px solid rgba(33,31,28,.08);
  background:#faf9f6;
  box-shadow:0 20px 48px rgba(33,31,28,.10);
  mask-image:none;
  -webkit-mask-image:none;
  isolation:isolate;
}
.knowe-scale-viewport{
  position:absolute;
  inset:0;
  overflow:hidden;
  border-radius:inherit;
  background:#faf9f6;
}
.knowe-frame{
  position:absolute;
  left:0;
  top:0;
  display:block;
  width:1180px;
  height:900px;
  border:0;
  margin:0;
  transform-origin:top left;
  background:#faf9f6;
}
.knowe-window:hover{
  box-shadow:0 26px 60px rgba(33,31,28,.14);
}

/* hero-viewport：普通块容器（不锁视口高度、无整体缩放），v2 起内容列恒 900px */
.hero-viewport{width:100%;}