/* 版式思路：首屏是宣传片全屏循环；往下按“老板管 AI 员工”的一天来讲：
   派活（对话）→ 请示响铃（来电界面）→ 改规矩（员工手册）。三个手机画面是全页唯一的“道具”，其余保持安静。
   字体只用系统字（Google Fonts 在国内打不开），用字重、字距和等宽字拉开层次；等宽字专门写“电脑 · Agent”这种产品里的真实叫法。 */
:root{
  --ink:#0d1210;
  --paper:#f4f6f3;
  --card:#ffffff;
  --fg:#141a17;
  --sub:#5a645e;
  --line:#dfe5e0;
  --green:#07c160;
  --green-ink:#05864a;
  --green-wash:#e6f6ec;
  --amber:#d9730d;
  --amber-wash:#fdf1e3;
  --red:#e5484d;
  --bubble-me:#95ec69;
  --bubble-me-fg:#10210a;
  --f-display:"PingFang SC","HarmonyOS Sans SC","MiSans","Microsoft YaHei UI","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",sans-serif;
  --f-body:-apple-system,BlinkMacSystemFont,"PingFang SC","HarmonyOS Sans SC","MiSans","Microsoft YaHei","Noto Sans SC",sans-serif;
  --f-mono:ui-monospace,"SF Mono","Cascadia Code","JetBrains Mono",Consolas,"Microsoft YaHei",monospace;
  --max:1120px;
  --r:16px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0f1412; --card:#171d1a; --fg:#e8eee9; --sub:#9aa69f; --line:#27302b;
    --green-ink:#3ad783; --green-wash:#11291c; --amber:#f0a04b; --amber-wash:#2c2012;
    --bubble-me:#3f8f2a; --bubble-me-fg:#f1fbe9;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0f1412; --card:#171d1a; --fg:#e8eee9; --sub:#9aa69f; --line:#27302b;
  --green-ink:#3ad783; --green-wash:#11291c; --amber:#f0a04b; --amber-wash:#2c2012;
  --bubble-me:#3f8f2a; --bubble-me-fg:#f1fbe9;
  color-scheme:dark;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--paper);color:var(--fg);font:16px/1.75 var(--f-body);overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--max);margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--f-display);text-wrap:balance}
h2{font-size:clamp(26px,5vw,40px);line-height:1.25;font-weight:800;letter-spacing:-.01em}
.eyebrow{font:600 13px/1 var(--f-mono);letter-spacing:.08em;color:var(--green-ink);margin-bottom:14px;display:block}
.band{padding-block:clamp(64px,10vw,112px);scroll-margin-top:16px}
.band.tight{padding-top:0}
.intro{max-width:36em;color:var(--sub);font-size:clamp(16px,2.2vw,18px);margin-top:14px}
.btn{display:inline-flex;align-items:center;gap:9px;min-height:50px;padding:0 26px;border-radius:999px;font:700 16px/1 var(--f-body);text-decoration:none;border:0;cursor:pointer;transition:transform .15s,background-color .15s,border-color .15s}
.btn:active{transform:scale(.97)}
.btn svg{width:18px;height:18px;flex:none}
.btn-go{background:var(--green);color:#fff}
.btn-go:hover{background:#06ad56}
.btn-line{background:transparent;color:var(--fg);border:1px solid var(--line)}
.btn-line:hover{border-color:var(--green)}
.row-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* ---------- 首屏 ---------- */
.hero{position:relative;color:#fff;background:var(--ink);overflow:hidden;isolation:isolate}
.hero .hero-bg{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:62% 30%;z-index:-2}
.hero .ai-note{position:absolute;right:16px;bottom:12px;font:11px/1.4 var(--f-mono);color:rgba(255,255,255,.55)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(13,18,16,.6) 0%,rgba(13,18,16,.25) 35%,rgba(13,18,16,.72) 75%,var(--ink) 100%),
             linear-gradient(90deg,rgba(13,18,16,.78) 0%,rgba(13,18,16,0) 70%)}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:calc(18px + env(safe-area-inset-top,0px))}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo i{width:32px;height:32px;border-radius:9px;background:var(--green);display:grid;place-items:center;flex:none}
.logo i svg{width:19px;height:19px}
.logo b{font:800 19px/1.1 var(--f-display);display:block}
.logo small{font:11px/1.2 var(--f-mono);opacity:.6;letter-spacing:.04em;display:block}
.topbar nav{display:flex;gap:22px;font-size:15px}
.topbar nav a{text-decoration:none;opacity:.8}
.topbar nav a:hover{opacity:1}
@media (max-width:640px){.topbar nav .opt{display:none}}

.hero-body{padding-block:clamp(88px,15vw,160px) clamp(120px,16vw,190px);max-width:780px}
.hero .cn{font:700 15px/1 var(--f-mono);letter-spacing:.12em;color:var(--green);display:block;margin-bottom:18px}
.hero h1{font-size:clamp(56px,12vw,112px);line-height:1.05;font-weight:900;letter-spacing:.02em}
.hero .en{display:block;margin-top:14px;font:700 clamp(20px,3.4vw,32px)/1.25 var(--f-body);letter-spacing:-.01em;color:#fff}
.hero p.sub-h{margin-top:26px;font:800 clamp(20px,3vw,26px)/1.4 var(--f-display);color:#fff}
.hero p.sub-h + p{margin-top:10px}
.hero h1 .ph{display:inline-block;white-space:nowrap;font-weight:inherit}
.hero h1 span{color:var(--green)}
.hero p{margin-top:22px;font-size:clamp(16px,2.3vw,19px);line-height:1.8;color:rgba(255,255,255,.84);max-width:33em}
.btn-glass{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.btn-glass:hover{background:rgba(255,255,255,.2)}
.specs{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:28px;font:13px/1.6 var(--f-mono);color:rgba(255,255,255,.62)}
.specs b{color:#fff;font-weight:600}

.shot{margin-top:-110px;position:relative;z-index:2}
.shot figcaption{font:12px/1.4 var(--f-mono);color:var(--sub);margin-top:12px;text-align:right}
@media (max-width:640px){.shot{margin-top:-80px}.shot figcaption{text-align:center}}

/* 三折叠手机：电脑宽度展开三屏，手机宽度只剩中间的对话（合上就是手机） */
.fold{display:grid;grid-template-columns:1fr 1.15fr 1fr;background:#1a1f1c;padding:10px;border-radius:30px;box-shadow:0 30px 80px -20px rgba(0,0,0,.5);font-size:13px;line-height:1.5;color:var(--fg)}
.pane{background:var(--card);display:flex;flex-direction:column;min-width:0;min-height:520px}
.pane + .pane{border-left:2px solid #1a1f1c}
.pane.list{border-radius:22px 0 0 22px}
.pane.doc{border-radius:0 22px 22px 0;background:var(--paper)}
.pane-top{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:16px 16px 10px}
.pane-top b{font:800 16px/1.2 var(--f-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pane-top .plus,.pane-top .back{font-size:20px;color:var(--sub);line-height:1}
.search{margin:0 14px 8px;background:var(--paper);border-radius:10px;padding:7px 12px;color:var(--sub);font-size:12px}
.item{display:grid;grid-template-columns:40px 1fr auto;gap:10px;align-items:center;padding:11px 14px}
.item.on{background:var(--green-wash)}
.item i{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;color:#fff;font:700 17px/1 var(--f-display);font-style:normal}
.item div{min-width:0}
.item b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item small{display:block;color:var(--sub);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item time{font:11px/1 var(--f-mono);color:var(--sub);align-self:start;margin-top:4px}
.tabs{margin-top:auto;display:flex;justify-content:space-around;border-top:1px solid var(--line);padding:10px 0 12px;font-size:12px;color:var(--sub)}
.tabs .on{color:var(--green-ink);font-weight:700}
.talk{background:var(--paper)}
.talk .pane-top{background:var(--card);border-bottom:1px solid var(--line)}
.talk-body{display:grid;gap:10px;padding:12px 12px 14px;align-content:start}
.talk-body > time{justify-self:center;font:11px/1 var(--f-mono);color:var(--sub)}
.talk .msg{max-width:94%}
.talk .msg .av{width:30px;height:30px;border-radius:8px;font-size:13px}
.talk .msg .bub{background:var(--card);font-size:13px;padding:8px 11px}
.ask-card{background:var(--amber-wash);border:1px solid var(--amber);border-radius:12px;padding:10px 12px;margin-left:40px}
.ask-card b{color:var(--amber);font:700 11px/1 var(--f-mono);letter-spacing:.06em;display:block;margin-bottom:4px}
.ask-card div{display:flex;gap:6px;margin-top:8px}
.ask-card span{flex:1;text-align:center;border-radius:8px;padding:5px 0;font-weight:700;background:var(--card);border:1px solid var(--line)}
.ask-card span.y{background:var(--green);color:#fff;border-color:var(--green)}
.file{display:flex;gap:10px;align-items:center;background:var(--card);border-radius:12px;padding:10px 12px;margin-left:40px}
.file .pdf{flex:none;width:34px;height:40px;border-radius:6px;background:var(--red);color:#fff;font:700 10px/40px var(--f-mono);text-align:center}
.file b{display:block;font-size:13px}
.file small{color:var(--sub);font-size:11.5px}
.done{margin-left:40px;font-size:12px;color:var(--green-ink);font-weight:600}
.input{margin-top:auto;display:flex;gap:8px;padding:10px 12px 14px;background:var(--card);border-top:1px solid var(--line)}
.input span:first-child{flex:1;background:var(--paper);border-radius:10px;padding:7px 12px;color:var(--sub)}
.input .send{background:var(--green);color:#fff;border-radius:10px;padding:7px 14px;font-weight:700}
.paper{margin:4px 14px;background:var(--card);border-radius:14px;padding:16px;display:grid;gap:8px;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.doc-title{font:800 18px/1.3 var(--f-display)}
.paper small{color:var(--sub);font-size:12px}
.paper small strong{color:var(--fg)}
.paper .up{color:var(--green-ink)}
.bars{display:flex;align-items:flex-end;gap:10px;height:130px;padding:8px 4px 22px;border-bottom:1px solid var(--line);margin-top:4px}
.bars span{flex:1;height:var(--h);background:var(--green);border-radius:6px 6px 0 0;position:relative;opacity:.85}
.bars span:nth-child(2){opacity:1}
.bars em{position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);font:11px/1 var(--f-mono);font-style:normal;color:var(--sub);white-space:nowrap}
.paper p{font-size:12.5px;color:var(--sub);margin-top:4px}
.doc-btns{margin-top:auto;display:flex;gap:8px;padding:12px 14px 14px}
.doc-btns span{flex:1;text-align:center;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:7px 0;font-weight:600}
@media (max-width:899px){
  .fold{grid-template-columns:1fr;max-width:380px;margin:0 auto;border-radius:34px}
  .pane.list,.pane.doc{display:none}
  .pane.talk{border-radius:26px;min-height:0}
}

/* ---------- 痛点时间线 ---------- */
.log{margin-top:40px;border-top:1px solid var(--line)}
.log li{list-style:none;display:grid;grid-template-columns:5.5em 1fr;gap:16px;padding-block:22px;border-bottom:1px solid var(--line);align-items:baseline}
.log time{font:600 15px/1.4 var(--f-mono);color:var(--sub)}
.log p{font-size:clamp(17px,2.4vw,20px);line-height:1.6;min-width:0}
.log strong{font-weight:800}
.log .bad time{color:var(--amber)}
.verdict{margin-top:28px;font:800 clamp(20px,3vw,26px)/1.4 var(--f-display)}
.verdict span{color:var(--green-ink)}

/* ---------- 三个场景：文字 + 手机画面 ---------- */
.scene{display:grid;gap:clamp(32px,6vw,80px);align-items:center}
.scene + .scene{margin-top:clamp(72px,10vw,120px)}
@media (min-width:900px){.scene{grid-template-columns:1fr 1fr}.scene.flip .copy{order:2}}
.copy{min-width:0}
.copy ul{list-style:none;display:grid;gap:12px;margin-top:24px}
.copy li{padding-left:18px;border-left:2px solid var(--line);color:var(--sub)}
.copy li strong{color:var(--fg)}
.phone{background:var(--card);border:1px solid var(--line);border-radius:28px;padding:18px 16px 20px;max-width:420px;width:100%;justify-self:center;box-shadow:0 24px 60px -30px rgba(10,30,20,.35)}
.phone-head{display:flex;justify-content:space-between;align-items:center;padding:4px 6px 14px;border-bottom:1px solid var(--line);margin-bottom:16px;gap:12px}
.phone-head b{font:700 16px/1.2 var(--f-display)}
.phone-head small{font:12px/1 var(--f-mono);color:var(--green-ink);white-space:nowrap}
.mock-note{font:12px/1.4 var(--f-mono);color:var(--sub);text-align:center;margin-top:16px}

/* 对话 */
.chat{display:grid;gap:14px;font-size:15px;line-height:1.6}
.msg{display:flex;gap:10px;align-items:flex-start;max-width:92%}
.msg .av{flex:none;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:#fff;font:700 15px/1 var(--f-display)}
.msg .bub{background:var(--paper);border-radius:4px 14px 14px 14px;padding:9px 13px;min-width:0}
.msg.me{justify-self:end;flex-direction:row-reverse}
.msg.me .bub{background:var(--bubble-me);color:var(--bubble-me-fg);border-radius:14px 4px 14px 14px}
.who{display:block;font:11px/1.3 var(--f-mono);color:var(--sub);margin-bottom:3px}
.sys{justify-self:center;font:12px/1.4 var(--f-mono);color:var(--sub);background:var(--paper);padding:5px 12px;border-radius:999px;text-align:center}
.report{border-left:3px solid var(--green);background:var(--green-wash);border-radius:4px 12px 12px 4px;padding:10px 13px}
.report .who{color:var(--green-ink)}

/* 来电式请示：固定深色，像真的来电界面 */
.call{background:linear-gradient(180deg,#1b2420,#0d1210);color:#fff;border:0;text-align:center;padding:36px 24px 30px}
.call .from{font:12px/1 var(--f-mono);letter-spacing:.1em;color:#9aa69f}
.ring{width:96px;height:96px;margin:26px auto 18px;border-radius:50%;background:#07c160;display:grid;place-items:center;font:800 40px/1 var(--f-display);position:relative}
.ring::before,.ring::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid rgba(7,193,96,.5);animation:ring 2s ease-out infinite}
.ring::after{animation-delay:1s}
@keyframes ring{from{transform:scale(.9);opacity:1}to{transform:scale(1.5);opacity:0}}
.call h3{font-size:24px;font-weight:800}
.call .ask{margin:14px auto 0;max-width:20em;color:#d6ddd8;font-size:15px;line-height:1.6}
.call .chain{margin:16px auto 0;display:inline-block;font:12px/1.5 var(--f-mono);color:#f0a04b;border:1px solid rgba(240,160,75,.4);border-radius:999px;padding:5px 12px}
.pick{display:flex;justify-content:space-around;margin-top:34px}
.pick div{display:grid;justify-items:center;gap:8px;font-size:13px;color:#c3ccc6}
.pick i{width:62px;height:62px;border-radius:50%;display:grid;place-items:center}
.pick i svg{width:26px;height:26px}
.pick .no i{background:var(--red)}
.pick .yes i{background:#07c160}

/* 员工手册 */
.book{display:grid;gap:12px}
.rule{border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.rule h4{font:700 15px/1.4 var(--f-display);display:flex;gap:10px;align-items:baseline}
.rule h4 em{font:600 12px/1 var(--f-mono);font-style:normal;color:var(--sub)}
.rule p{color:var(--sub);font-size:14px;margin-top:4px}
.rule.edit{border-color:var(--green);background:var(--green-wash)}
.rule.edit p{color:var(--fg)}
.rule mark{background:transparent;color:var(--green-ink);font-weight:700;border-bottom:2px solid var(--green)}
.synced{display:flex;align-items:center;gap:8px;justify-content:center;font:13px/1.4 var(--f-mono);color:var(--green-ink);margin-top:4px}

/* ---------- 团队规矩 ---------- */
.rules{display:grid;gap:0;margin-top:40px;border-top:1px solid var(--line)}
@media (min-width:820px){.rules{grid-template-columns:1fr 1fr;column-gap:56px}}
.rules div{padding-block:20px;border-bottom:1px solid var(--line)}
.rules h3{font-size:18px;font-weight:800}
.rules p{color:var(--sub);font-size:15px;margin-top:4px}

/* ---------- 一分钟装好（深色） ---------- */
.dark{background:var(--ink);color:#e8eee9}
.dark .eyebrow{color:#3ad783}
.dark .intro{color:#9aa69f}
.dark h2 span{color:#3ad783}
.clock{font:800 clamp(56px,12vw,120px)/1 var(--f-mono);color:#3ad783;letter-spacing:-.04em;margin-top:8px}
.clock small{font-size:.3em;color:#9aa69f;letter-spacing:0;margin-left:10px}
.steps{margin-top:44px;display:grid;gap:14px}
@media (min-width:820px){.steps{grid-template-columns:repeat(3,1fr)}}
.steps li{list-style:none;border:1px solid #2c3631;background:#151c18;border-radius:var(--r);padding:22px}
.steps time{font:700 14px/1 var(--f-mono);color:#3ad783}
.steps h3{font-size:19px;color:#fff;margin:12px 0 6px}
.steps p{color:#9aa69f;font-size:15px}
.nos{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:28px;font:14px/1.6 var(--f-mono);color:#9aa69f}
.nos s{text-decoration-color:#e5484d;text-decoration-thickness:2px}

/* ---------- 全平台 ---------- */
.plat{display:grid;gap:36px;margin-top:40px}
@media (min-width:820px){.plat{grid-template-columns:1fr 1fr;gap:56px}}
.plat-col{display:grid;gap:10px;align-content:start}
.plat-col h3{font:600 13px/1 var(--f-mono);letter-spacing:.08em;color:var(--sub);margin-bottom:6px}
.pf{display:grid;grid-template-columns:1fr auto;column-gap:16px;align-items:center;padding:16px 18px;border-radius:var(--r);background:var(--card);border:1px solid var(--line)}
.pf b{font:800 19px/1.3 var(--f-display)}
.pf small{grid-row:2;color:var(--sub);font-size:14px}
.pf em{grid-row:1/3;grid-column:2;font:600 13px/1 var(--f-mono);font-style:normal;padding:8px 12px;border-radius:999px;border:1px dashed var(--line);color:var(--sub);white-space:nowrap}
.note{color:var(--sub);font-size:14px;margin-top:18px}

/* ---------- 支持的 AI 员工 ---------- */
.agents{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.agents span{display:flex;align-items:center;gap:9px;font:600 15px/1 var(--f-mono);padding:8px 16px 8px 8px;border-radius:999px;background:var(--card);border:1px solid var(--line)}
.agents i{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:#fff;font:700 13px/1 var(--f-display);font-style:normal}
.agents .more{border-style:dashed;color:var(--sub);padding-left:16px}

/* ---------- 安全 ---------- */
.promises{display:grid;gap:28px;margin-top:40px}
@media (min-width:820px){.promises{grid-template-columns:repeat(3,1fr)}}
.promises h3{font-size:18px;margin-bottom:6px}
.promises p{color:var(--sub);font-size:15px}

/* ---------- 开发者 ---------- */
.dev{border:1px solid var(--line);background:var(--card);border-radius:24px;padding:clamp(28px,5vw,48px);display:grid;gap:28px}
@media (min-width:900px){.dev{grid-template-columns:1.1fr 1fr;align-items:center}}
.dev pre{font:13px/1.7 var(--f-mono);background:var(--ink);color:#cfe9da;border-radius:14px;padding:18px 20px;overflow-x:auto;min-width:0}
.dev pre .c{color:#6f7d75}
.dev pre .k{color:#3ad783}

/* ---------- 常见问题 ---------- */
.faq{margin-top:36px;display:grid;border-top:1px solid var(--line)}
@media (min-width:900px){.faq{grid-template-columns:1fr 1fr;column-gap:56px}}
details{border-bottom:1px solid var(--line)}
summary{cursor:pointer;list-style:none;padding:20px 32px 20px 0;font-weight:700;font-size:17px;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:4px;top:15px;font:400 24px/1 var(--f-mono);color:var(--sub)}
details[open] summary::after{content:"−"}
details p{color:var(--sub);padding-bottom:20px;font-size:15px}

.end h2{max-width:14em}
footer{border-top:1px solid var(--line);padding-block:28px calc(28px + env(safe-area-inset-bottom,0px));color:var(--sub);font:13px/1.6 var(--f-mono)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px}
footer a{text-decoration:none}
footer a:hover{color:var(--fg)}
.langs{display:flex;flex-wrap:wrap;gap:4px 14px;width:100%;padding-top:14px;margin-top:6px;border-top:1px solid var(--line)}
.langs a[aria-current]{color:var(--green-ink);font-weight:700}

/* ---------- 多语言 ---------- */
.hero .en:empty{display:none}
.lat .hero h1{font-size:clamp(44px,8.6vw,92px);letter-spacing:-.025em;line-height:1.02}
.lat .hero h1 .ph{display:inline;white-space:normal}
.lat .hero .cn{letter-spacing:.06em}
.lang-pick{position:relative;font:13px/1 var(--f-mono)}
.lang-pick select{appearance:none;-webkit-appearance:none;background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:7px 28px 7px 12px;font:inherit;cursor:pointer}
.lang-pick select option{color:#141a17;background:#fff}
.lang-pick::after{content:"▾";position:absolute;right:11px;top:50%;transform:translateY(-50%);color:#fff;pointer-events:none;font-size:11px}
.topbar .right{display:flex;align-items:center;gap:22px;min-width:0}
.topbar nav a{white-space:nowrap}
.logo small{white-space:nowrap}
.lang-pick select{max-width:11em;text-overflow:ellipsis}
@media (max-width:640px){.topbar nav{display:none}.lang-pick select{max-width:8.5em}}

@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}.btn{transition:none}.ring::before,.ring::after{animation:none;opacity:.5}}