:root{--bg:#f6f7fb;--paper:#fff;--ink:#111318;--muted:#636b78;--line:#e5e8ef;--blue:#0a84ff;--shadow:0 24px 80px rgba(29,36,55,.10);--max:1160px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased}a{text-decoration:none;color:inherit}img{max-width:100%;display:block}.nav{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:10;width:min(calc(100% - 32px),1120px);height:58px;border:1px solid rgba(255,255,255,.72);border-radius:999px;background:rgba(255,255,255,.78);backdrop-filter:blur(24px) saturate(180%);box-shadow:0 18px 48px rgba(29,36,55,.10);display:flex;align-items:center;justify-content:space-between;padding:0 10px 0 16px}.brand{display:flex;align-items:center;gap:10px;font-weight:760}.brand img{width:30px;height:30px;border-radius:9px}.nav nav{display:flex;gap:26px;color:#596171;font-size:14px}.nav a:hover{color:#111}.nav-cta{background:var(--blue);color:white;padding:10px 18px;border-radius:999px;font-weight:760;box-shadow:0 10px 28px rgba(10,132,255,.24)}.hero{max-width:var(--max);margin:0 auto;padding:140px 24px 78px;display:grid;grid-template-columns:.88fr 1.12fr;gap:56px;align-items:center}.badge,.eyebrow{display:inline-flex;margin:0 0 18px;padding:8px 12px;border-radius:999px;background:#fff;border:1px solid var(--line);color:#5d6574;font-size:13px;font-weight:700}.hero h1{font-size:clamp(48px,6vw,82px);line-height:1.02;letter-spacing:-.06em;margin:0 0 24px}.lead{font-size:21px;line-height:1.75;color:var(--muted);margin:0}.actions{display:flex;gap:14px;flex-wrap:wrap;margin:30px 0 16px}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:999px;font-weight:780}.btn.primary{background:var(--blue);color:#fff;box-shadow:0 18px 38px rgba(10,132,255,.24)}.btn.secondary{background:#fff;color:#111;box-shadow:inset 0 0 0 1px var(--line)}.meta{color:#7b8391;font-size:14px}.real-shot{margin:0;background:#fff;border:1px solid var(--line);border-radius:28px;padding:12px;box-shadow:var(--shadow)}.real-shot img{border-radius:18px;width:100%;height:auto}.real-shot figcaption{padding:12px 6px 2px;color:#737b88;font-size:13px}.section{max-width:var(--max);margin:0 auto;padding:82px 24px}.section-title{max-width:790px;margin-bottom:36px}.section-title.narrow{max-width:830px}.section-title.center{text-align:center;margin-left:auto;margin-right:auto}h2{font-size:clamp(34px,4.8vw,62px);line-height:1.18;letter-spacing:-.04em;margin:0 0 16px}h3{font-size:25px;line-height:1.35;letter-spacing:-.02em;margin:0 0 8px}.section-title p:not(.eyebrow){font-size:20px;color:var(--muted);line-height:1.75}.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.value-grid article,.feature-row{background:#fff;border:1px solid var(--line);border-radius:26px;box-shadow:0 16px 52px rgba(29,36,55,.06)}.value-grid article{padding:30px}.value-grid strong{font-size:26px;line-height:1.4;letter-spacing:-.02em}.value-grid p,.feature-row p{color:var(--muted);line-height:1.75}.features{padding-top:58px}.feature-list{display:grid;gap:14px}.feature-row{display:grid;grid-template-columns:72px 1fr;gap:20px;padding:26px}.feature-row span{width:48px;height:48px;border-radius:16px;background:#eef5ff;color:var(--blue);font-weight:850;display:grid;place-items:center}.proof{background:#fff;border-radius:36px;box-shadow:inset 0 0 0 1px var(--line);max-width:calc(var(--max) - 48px);padding:58px;margin-top:40px}.proof-grid{display:grid;grid-template-columns:.52fr 1fr;gap:18px}.scenario-card{background:#111318;color:#fff;border-radius:34px;padding:48px;display:grid;grid-template-columns:.9fr 1.1fr;gap:42px;box-shadow:0 24px 80px rgba(0,0,0,.18)}.scenario-card .eyebrow{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.12);color:#d7dbe3}.scenario-card ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}.scenario-card li{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:18px}.scenario-card b{display:block;margin-bottom:6px}.scenario-card span{color:#c9ced8;line-height:1.7}.download{padding:80px 24px 112px}.download-card{max-width:760px;margin:0 auto;text-align:center;background:#fff;border:1px solid var(--line);border-radius:36px;padding:54px 32px;box-shadow:var(--shadow)}.download-card img{width:86px;height:86px;border-radius:22px;margin:0 auto 20px}.download-card h2{line-height:1.2}.download-card p{color:var(--muted);line-height:1.75}.facts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:24px 0}.facts span{padding:8px 12px;border-radius:999px;background:#f1f5fb;color:#596171;font-size:13px}.sha{font-size:12px!important;word-break:break-all}.sha code{background:#f1f5fb;border-radius:8px;padding:4px 6px;color:#333}.note{font-size:13px!important}footer{display:flex;justify-content:space-between;padding:30px max(24px,calc((100vw - var(--max))/2));background:#fff;border-top:1px solid var(--line);color:#7b8391}@media(max-width:900px){.nav nav{display:none}.hero{grid-template-columns:1fr;padding-top:120px}.value-grid,.proof-grid,.scenario-card{grid-template-columns:1fr}.hero h1{font-size:clamp(42px,12vw,64px)}footer{flex-direction:column;gap:8px}.proof{margin-left:24px;margin-right:24px}}
.how-grid,.permission-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.how-grid article,.permission-grid div{background:#fff;border:1px solid var(--line);border-radius:26px;padding:28px;box-shadow:0 16px 52px rgba(29,36,55,.06)}.how-grid span{width:42px;height:42px;border-radius:14px;background:var(--blue);color:#fff;display:grid;place-items:center;font-weight:850;margin-bottom:22px}.permission-grid b{display:block;font-size:22px;line-height:1.4;margin-bottom:8px}.permission-grid span{color:var(--muted);line-height:1.75}.hero-shot img{max-height:660px;object-fit:contain;background:#f7f8fb}@media(max-width:900px){.how-grid,.permission-grid{grid-template-columns:1fr}}

/* Light desktop presentation stage for hero screenshot */
.hero-shot.light-stage{background:linear-gradient(180deg,#ffffff,#f6f8fc);padding:14px}.shot-stage{position:relative;border-radius:22px;background:linear-gradient(135deg,#f9fbff 0%,#eef4ff 55%,#f7f7f8 100%);padding:54px 26px 28px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.8)}.shot-stage:before{content:"";position:absolute;inset:auto -8% -30% -8%;height:46%;background:radial-gradient(ellipse at center,rgba(10,132,255,.10),transparent 62%)}.stage-menu{position:absolute;top:0;left:0;right:0;height:38px;background:rgba(255,255,255,.76);border-bottom:1px solid #e8ecf3;display:flex;align-items:center;gap:8px;padding:0 14px;color:#677080;font-size:12px}.stage-menu span{width:9px;height:9px;border-radius:50%;background:#ff5f57}.stage-menu span:nth-child(2){background:#febc2e}.stage-menu span:nth-child(3){background:#28c840}.stage-menu i{margin-left:auto;width:22px;height:14px;border-radius:9px;background:#dfe6f2}.stage-menu b{font-weight:700;color:#3c4452}.shot-stage img{position:relative;border-radius:18px;box-shadow:0 22px 70px rgba(28,36,58,.16);background:#fff;max-height:620px;object-fit:contain;margin:0 auto}.hero-shot.light-stage figcaption{padding-top:12px}

/* One Switch reference pass: centered hero + large product proof + FAQ */
.hero.one-switch-inspired{display:block;text-align:center;padding-top:132px;max-width:1280px}.hero.one-switch-inspired .hero-copy{max-width:1100px;margin:0 auto}.hero-icon{width:82px;height:82px;border-radius:22px;margin:0 auto 18px;box-shadow:0 18px 44px rgba(10,132,255,.18)}.hero.one-switch-inspired h1{max-width:none;margin-left:auto;margin-right:auto;font-size:clamp(54px,7vw,108px);line-height:1.18;letter-spacing:-.04em}.hero.one-switch-inspired .lead{max-width:730px;margin-left:auto;margin-right:auto;margin-top:32px}.hero.one-switch-inspired .actions{justify-content:center}.hero.one-switch-inspired .hero-shot{max-width:940px;margin:52px auto 0}.designed-grid{display:grid;grid-template-columns:.52fr 1fr;gap:18px}.faq{display:grid;grid-template-columns:.58fr 1fr;gap:42px;align-items:start}.faq .section-title{margin-bottom:0}.faq-list{display:grid;gap:12px}.faq-list details{background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px 22px;box-shadow:0 14px 42px rgba(29,36,55,.05)}.faq-list summary{cursor:pointer;font-weight:800;font-size:18px;letter-spacing:-.01em;line-height:1.5}.faq-list p{color:var(--muted);line-height:1.75;margin:12px 0 0}.final-cta .download-card{background:linear-gradient(180deg,#111318,#1b1f29);color:#fff}.final-cta .download-card p,.final-cta .sha,.final-cta .note{color:#c8ced8}.final-cta .facts span{background:rgba(255,255,255,.10);color:#d9dde5}.final-cta .sha code{background:rgba(255,255,255,.12);color:#fff}@media(max-width:900px){.hero.one-switch-inspired h1{font-size:clamp(46px,13vw,72px)}.designed-grid,.faq{grid-template-columns:1fr}}

/* Jim reference image pass: macOS Control Center-like soft glass stage */
.hero-shot.light-stage{background:linear-gradient(180deg,#ffffff,#f7f9fd);}
.shot-stage{background:
  radial-gradient(circle at 22% 18%, rgba(66,142,255,.42), transparent 32%),
  radial-gradient(circle at 72% 20%, rgba(151,92,255,.34), transparent 30%),
  radial-gradient(circle at 68% 82%, rgba(78,214,142,.38), transparent 34%),
  linear-gradient(135deg,#eef6ff 0%,#f5f0ff 46%,#f3fff7 100%) !important;
  padding:58px 30px 34px;
}
.shot-stage:after{content:"";position:absolute;inset:54px 24px 28px 24px;border-radius:24px;background:rgba(255,255,255,.24);backdrop-filter:blur(18px) saturate(160%);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 24px 70px rgba(52,68,110,.14);pointer-events:none;}
.stage-menu{background:rgba(255,255,255,.50) !important;backdrop-filter:blur(18px) saturate(180%);}
.shot-stage img{z-index:2;position:relative;box-shadow:0 26px 80px rgba(22,32,56,.22),0 0 0 1px rgba(255,255,255,.65);}
.shot-stage:before{content:"";position:absolute;inset:38px 20px 24px 20px;border-radius:26px;background:linear-gradient(135deg,rgba(255,255,255,.20),rgba(255,255,255,.05));filter:blur(.2px);pointer-events:none;}

/* Clean hero environment pass: remove desktop clutter, isolate the real panel */
.hero-shot.light-stage{max-width:760px !important;}
.shot-stage{min-height:600px;display:grid;place-items:center;background:
  radial-gradient(circle at 28% 20%, rgba(10,132,255,.22), transparent 31%),
  radial-gradient(circle at 74% 78%, rgba(103,220,154,.18), transparent 34%),
  linear-gradient(145deg,#fbfcff 0%,#eef4ff 55%,#f8fafc 100%) !important;}
.shot-stage:after{inset:68px 56px 48px 56px;background:rgba(255,255,255,.32);}
.clean-panel-img{width:min(430px,86%) !important;max-height:540px !important;object-fit:contain !important;border-radius:22px !important;box-shadow:0 32px 88px rgba(19,28,48,.24),0 0 0 1px rgba(255,255,255,.75) !important;}
.stage-menu b:after{content:""}.stage-menu i{display:none}

/* Rational layout pass: avoid duplicated left/right screenshots */
.proof-layout{display:grid;grid-template-columns:.48fr 1fr;gap:22px;align-items:stretch}.main-product-shot{height:100%;display:flex;flex-direction:column;justify-content:center}.flow-card{background:#fff;border:1px solid var(--line);border-radius:28px;padding:34px;box-shadow:0 18px 56px rgba(29,36,55,.07)}.flow-card h3{font-size:34px;line-height:1.25;letter-spacing:-.03em;margin-bottom:26px}.flow-card ol{list-style:none;margin:0;padding:0;display:grid;gap:14px}.flow-card li{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:start;padding:18px;border-radius:18px;background:#f5f7fb}.flow-card b{color:#111318}.flow-card span{color:var(--muted);line-height:1.7}.designed-points{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.designed-points article{background:#fff;border:1px solid var(--line);border-radius:26px;padding:30px;box-shadow:0 16px 52px rgba(29,36,55,.06)}.designed-points strong{display:block;font-size:24px;line-height:1.4;margin-bottom:10px}.designed-points span{color:var(--muted);line-height:1.75}@media(max-width:900px){.proof-layout,.designed-points{grid-template-columns:1fr}.flow-card li{grid-template-columns:1fr}}

/* Language menu + landing-page nav */
.nav-actions{display:flex;align-items:center;gap:30px;margin-left:auto}.language-menu{position:relative;margin-right:2px}.language-menu summary{list-style:none;width:40px;height:40px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.72);display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 22px rgba(29,36,55,.07)}.language-menu summary::-webkit-details-marker{display:none}.globe{font-size:18px;line-height:1}.language-panel{position:absolute;right:50%;transform:translateX(50%);top:50px;min-width:132px;padding:8px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.94);backdrop-filter:blur(22px) saturate(180%);box-shadow:0 18px 48px rgba(29,36,55,.14);display:grid;gap:4px}.language-panel a{display:block;padding:10px 12px;border-radius:12px;font-size:14px;font-weight:760;color:#5f6877}.language-panel a.active,.language-panel a:hover{background:#eef5ff;color:#0a65c8}.nav-cta{display:inline-flex;align-items:center;justify-content:center;min-width:104px;height:40px;min-height:40px;padding:0 24px;font-size:15px;line-height:1}.single-action{justify-content:center}.single-action .btn.primary{padding-left:28px;padding-right:28px}@media(max-width:640px){.nav{height:56px;padding-left:12px}.brand span{display:none}.nav-actions{gap:18px}.nav-cta{min-width:86px;height:38px;min-height:38px;padding:0 18px}.language-menu summary{width:38px;height:38px}.language-panel{right:0;transform:none}}

/* Copy restraint + bilingual line-break hygiene */
.hero h1,.section-title h2,.flow-card h3,.download-card h2{text-wrap:balance}.hero h1{overflow-wrap:normal}.download-card{max-width:760px;margin-left:auto;margin-right:auto}.download-card .btn{margin-top:10px}html[lang="en"] .hero h1{letter-spacing:-.02em}

/* MAG mockup panel (在 stage 里渲染 dashboard 样子) */
.hero-mock-panel{
  position:relative;z-index:2;
  background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:18px;width:min(440px,90%);margin:0 auto;
  box-shadow:0 26px 80px rgba(22,32,56,.22),0 0 0 1px rgba(255,255,255,.65);
}
.mock-head{display:flex;align-items:center;gap:12px;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--line);}
.mock-shield{
  width:40px;height:40px;border-radius:10px;
  background:linear-gradient(135deg,#3B82F6,#06B6D4);
  color:white;font-weight:800;font-size:18px;
  display:grid;place-items:center;
  box-shadow:0 6px 14px rgba(10,132,255,.28);
}
.mock-head h4{font-size:14px;font-weight:700;color:#111;margin:0;}
.mock-head p{font-size:12px;color:var(--muted);margin:2px 0 0;}
.mock-list{display:grid;gap:8px;}
.mock-row{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#f6f8fb;border-radius:10px;}
.mock-row img{width:24px;height:24px;border-radius:6px;}
.mock-row .name{flex:1;font-size:13px;font-weight:500;color:#111;}
.mock-row .tag{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;}
.mock-row .tag-running{background:#dcfce7;color:#15803d;}
.mock-row .tag-locked{background:#dbeafe;color:#1d4ed8;}

/* ============ MAG 自身辨识度（不照抄，加 AI agent 调性） ============ */
:root{
  --cyan:#06b6d4;
  --blue-gradient:linear-gradient(135deg,#0a84ff 0%,#06b6d4 100%);
}

/* h1 强调字加品牌渐变（OneTap 全黑，MAG 借此立辨识） */
.hero h1 .accent{
  background:var(--blue-gradient);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* 主 CTA 改用渐变（更 AI 感，跟 nav CTA 区分层级） */
.actions .btn.primary,
.download-card .btn.primary{
  background:var(--blue-gradient);
  box-shadow:0 18px 38px rgba(10,132,255,.30);
}

/* 五阶段生命周期 ribbon —— MAG 独有 section（OneTap 没这种） */
.section.lifecycle{padding:62px 24px;}
.lifecycle-ribbon{
  background:#fff;border:1px solid var(--line);border-radius:32px;
  padding:36px 28px;box-shadow:0 20px 60px rgba(29,36,55,.07);
  display:grid;grid-template-columns:repeat(5,1fr);gap:8px;align-items:stretch;
  position:relative;overflow:hidden;
}
.lifecycle-ribbon:before{
  content:"";position:absolute;left:0;right:0;top:42px;height:2px;
  background:linear-gradient(90deg,transparent,#0a84ff 18%,#0a84ff 82%,transparent);
  opacity:.14;pointer-events:none;
}
.lifecycle-step{
  position:relative;text-align:center;padding:8px 6px;
}
.lifecycle-step .badge-num{
  width:44px;height:44px;border-radius:14px;margin:0 auto 14px;
  background:var(--blue-gradient);color:white;
  display:grid;place-items:center;
  font-weight:850;font-size:18px;letter-spacing:-.02em;
  box-shadow:0 10px 22px rgba(10,132,255,.28);
  position:relative;z-index:1;
}
.lifecycle-step h4{font-size:18px;font-weight:780;line-height:1.4;letter-spacing:-.01em;margin:0 0 8px;color:var(--ink);}
.lifecycle-step p{font-size:13.5px;color:var(--muted);line-height:1.7;margin:0;}
@media(max-width:900px){
  .lifecycle-ribbon{grid-template-columns:1fr 1fr;gap:14px;}
  .lifecycle-ribbon:before{display:none;}
}

/* 副词缀（在 hero badge 上加一点 cyan 调） */
.hero .badge{
  background:#fff;
  border:1px solid var(--line);
  position:relative;
}
.hero .badge:before{
  content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:linear-gradient(135deg,#0a84ff,#06b6d4);
  margin-right:8px;vertical-align:middle;
  box-shadow:0 0 8px rgba(10,132,255,.45);
}

/* ============ 能力配图段（左图右文 / 左文右图 交替） ============ */
.cap-section{max-width:var(--max);margin:0 auto;padding:90px 24px}
.cap-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center}
.cap-grid.reverse{grid-template-columns:1fr 1.05fr}
.cap-grid.reverse .cap-copy{order:2}
.cap-grid.reverse .cap-visual{order:1}
.cap-copy .eyebrow{margin-bottom:14px}
.cap-copy h2{font-size:clamp(34px,4.6vw,58px);line-height:1.2;letter-spacing:-.04em;margin:0 0 18px}
.cap-copy h2 .accent{background:var(--blue-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.cap-copy p{font-size:18px;line-height:1.85;color:var(--muted);margin:0 0 24px}
.cap-copy ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.cap-copy ul li{display:flex;align-items:flex-start;gap:10px;font-size:15px;color:var(--ink);line-height:1.75}
.cap-copy ul li:before{content:"";flex-shrink:0;width:18px;height:18px;border-radius:50%;background:var(--blue-gradient);margin-top:2px;display:inline-block;background-position:center;background-repeat:no-repeat;background-size:11px 11px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7.5'/></svg>")}
.cap-visual{background:#fff;border:1px solid var(--line);border-radius:28px;padding:32px;box-shadow:0 24px 70px rgba(29,36,55,.08);position:relative;overflow:hidden}
.cap-visual:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 30% 0%,rgba(10,132,255,.07),transparent 50%),radial-gradient(ellipse at 80% 100%,rgba(6,182,212,.06),transparent 50%);pointer-events:none}
.cap-visual > *{position:relative;z-index:1}

/* mock: 锁定在线开关（在 agent 卡片里）*/
.mock-lock{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:0 10px 32px rgba(29,36,55,.06)}
.mock-lock-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.mock-lock-head .ico{width:40px;height:40px;border-radius:10px;display:grid;place-items:center}
.mock-lock-head .ico img{width:28px;height:28px;border-radius:7px}
.mock-lock-head .name{font-size:15px;font-weight:700;color:var(--ink)}
.mock-lock-head .sub{font-size:12px;color:var(--muted);margin-top:2px}
.mock-row-toggle{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:linear-gradient(135deg,rgba(10,132,255,.04),rgba(6,182,212,.03));border:1px solid rgba(10,132,255,.16);border-radius:12px}
.mock-row-toggle .lbl{font-size:13.5px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:8px}
.mock-row-toggle .lock-icon{width:14px;height:14px;color:#f59e0b;flex-shrink:0;}
.mock-row-toggle .hint{font-size:11.5px;color:var(--muted);margin-top:3px;font-weight:400}
.mock-switch{width:40px;height:24px;border-radius:999px;background:var(--blue-gradient);position:relative;box-shadow:0 4px 10px rgba(10,132,255,.32)}
.mock-switch:after{content:"";position:absolute;top:2px;right:2px;width:20px;height:20px;background:#fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.mock-status{margin-top:12px;display:flex;align-items:center;gap:6px;font-size:12.5px;color:#15803d;font-weight:600}
.mock-status .dot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 8px rgba(34,197,94,.55)}

/* mock: 安装进度 */
.mock-install{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:0 10px 32px rgba(29,36,55,.06)}
.mock-install-head{font-size:13px;color:var(--muted);margin-bottom:14px;font-weight:600}
.mock-install-cmd{background:#0b1220;color:#d8e2ef;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;padding:14px 16px;border-radius:10px;line-height:1.7;margin-bottom:14px}
.mock-install-cmd .prompt{color:#06b6d4}
.mock-install-cmd .ok{color:#22c55e}
.mock-install-progress{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:10px;background:#f4f7fb}
.mock-install-progress .check{width:22px;height:22px;border-radius:50%;background:var(--blue-gradient);color:#fff;display:grid;place-items:center;font-weight:700;font-size:12px}
.mock-install-progress .txt{font-size:13px;font-weight:600;color:var(--ink)}

/* mock: 卸载清单 */
.mock-uninstall{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:0 10px 32px rgba(29,36,55,.06)}
.mock-uninstall-head{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:6px}
.mock-uninstall-sub{font-size:12px;color:var(--muted);margin-bottom:16px}
.mock-uninstall-list{display:grid;gap:8px}
.mock-uninstall-item{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font-size:13px}
.mock-uninstall-item.checked{background:#eff6ff;border-color:rgba(10,132,255,.20)}
.mock-uninstall-item .cb{width:18px;height:18px;border-radius:5px;border:1.5px solid #cbd5e1;flex-shrink:0;margin-top:1px;display:grid;place-items:center}
.mock-uninstall-item.checked .cb{background:var(--blue-gradient);border-color:transparent;color:#fff;font-weight:700;font-size:11px}
.mock-uninstall-item .cb:after{content:""}
.mock-uninstall-item.checked .cb:after{content:"✓"}
.mock-uninstall-item .body{flex:1}
.mock-uninstall-item .body strong{display:block;color:var(--ink);font-weight:600;margin-bottom:2px}
.mock-uninstall-item .body span{color:var(--muted);font-size:12px;line-height:1.5}
.mock-uninstall-item .warn{font-size:11px;color:#b45309;background:#fef3c7;padding:2px 6px;border-radius:4px;margin-left:6px;font-weight:600}

/* 痛点段 */
.pain-section{max-width:var(--max);margin:0 auto;padding:90px 24px;text-align:center}
.pain-section h2{font-size:clamp(36px,5vw,68px);line-height:1.2;letter-spacing:-.04em;margin:0 auto 22px;max-width:920px}
.pain-section h2 .accent{background:var(--blue-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.pain-section .lead{max-width:620px;margin:0 auto;font-size:18px;line-height:1.7;color:var(--muted)}
.pain-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:48px;max-width:980px;margin-left:auto;margin-right:auto}
.pain-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px;text-align:left;box-shadow:0 12px 36px rgba(29,36,55,.06)}
.pain-card .ic{
  width:44px;height:44px;border-radius:12px;
  background:linear-gradient(135deg,rgba(10,132,255,.10),rgba(6,182,212,.06));
  border:1px solid rgba(10,132,255,.14);
  display:grid;place-items:center;
  margin-bottom:16px;
  color:var(--blue);
}
.pain-card .ic svg{width:22px;height:22px;display:block;}
.pain-card h4{font-size:17px;font-weight:700;color:var(--ink);margin:0 0 10px;line-height:1.4;letter-spacing:-.01em}
.pain-card p{font-size:14px;color:var(--muted);line-height:1.75;margin:0}

@media(max-width:900px){
  .cap-grid,.cap-grid.reverse{grid-template-columns:1fr;gap:30px}
  .cap-grid.reverse .cap-copy{order:1}
  .cap-grid.reverse .cap-visual{order:2}
  .pain-trio{grid-template-columns:1fr}
}

/* ============ Agent 生态网格（统一尺寸 + 占位卡）============ */
.agent-uniform-grid{
  display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:48px;
}
.agent-cell{
  background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:22px 14px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  transition:transform .18s,box-shadow .18s,border-color .18s;
  box-shadow:0 8px 28px rgba(29,36,55,.04);
}
.agent-cell:hover{
  transform:translateY(-2px);
  border-color:rgba(10,132,255,.30);
  box-shadow:0 14px 36px rgba(10,132,255,.10);
}
.agent-cell .icon-wrap{
  width:56px;height:56px;border-radius:14px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,#f7f9fc,#eef2f8);
  border:1px solid rgba(10,14,20,.04);
  overflow:hidden;
}
.agent-cell .icon-wrap img{
  width:42px;height:42px;object-fit:contain;display:block;
}
.agent-cell .name{
  font-size:13.5px;font-weight:700;color:var(--ink);letter-spacing:-.01em;
  line-height:1.3;
}
.agent-cell.placeholder{
  background:linear-gradient(135deg,rgba(10,132,255,.04),rgba(6,182,212,.03));
  border:1px dashed rgba(10,132,255,.30);
  color:var(--muted);
}
.agent-cell.placeholder .icon-wrap{
  background:transparent;border:none;
  font-size:24px;color:rgba(10,132,255,.55);
}
.agent-cell.placeholder .name{
  color:var(--muted);font-weight:600;font-size:12.5px;
}
@media(max-width:900px){
  .agent-uniform-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:560px){
  .agent-uniform-grid{grid-template-columns:repeat(2,1fr)}
}

/* mock 里用真 app icon（替换占位 .mock-shield 方块） */
.mock-shield-box{
  width:44px;height:44px;border-radius:11px;
  flex-shrink:0;
  overflow:hidden;
  box-shadow:0 6px 14px rgba(10,132,255,.20);
}
.mock-shield-box img{
  width:100%;height:100%;object-fit:contain;display:block;
}

/* Hero h1 两行居中（不再错位） */
.hero.one-switch-inspired h1 .line{display:block;text-align:center;}

/* mock: 配置向导（能力·配 用） */
.mock-config{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px;box-shadow:0 10px 32px rgba(29,36,55,.06)}
.mock-config-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.mock-config-head .title{font-size:15px;font-weight:700;color:var(--ink)}
.mock-config-head .step{font-size:12px;color:var(--muted);font-weight:600;background:#f4f7fb;padding:4px 10px;border-radius:999px}
.mock-config-q{font-size:13px;font-weight:600;color:var(--muted);margin-bottom:12px}
.mock-options{display:grid;gap:8px}
.mock-options .opt{display:flex;align-items:center;gap:10px;padding:11px 14px;border:1px solid var(--line);border-radius:10px;font-size:13.5px;color:var(--ink);font-weight:500;cursor:default}
.mock-options .opt .radio{width:16px;height:16px;border-radius:50%;border:2px solid #cbd5e1;flex-shrink:0;position:relative}
.mock-options .opt.selected{background:linear-gradient(135deg,rgba(10,132,255,.06),rgba(6,182,212,.04));border-color:rgba(10,132,255,.30)}
.mock-options .opt.selected .radio{border-color:var(--blue)}
.mock-options .opt.selected .radio:after{content:"";position:absolute;inset:3px;background:var(--blue);border-radius:50%}
.mock-config-footer{display:flex;justify-content:flex-end;margin-top:18px}
.mock-config-footer .btn-next{font-size:12.5px;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--blue),#06b6d4);padding:8px 16px;border-radius:8px}

/* mock: split-button「打开 ▾」 + agent 列表（能力·用 用） */
.mock-use{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:0 10px 32px rgba(29,36,55,.06)}
.mock-use-row{display:flex;align-items:center;gap:12px;padding:14px;border-bottom:1px solid var(--line)}
.mock-use-row:last-child{border-bottom:none}
.mock-use-row .ico{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;background:#f4f7fb;flex-shrink:0;overflow:hidden}
.mock-use-row .ico img{width:24px;height:24px}
.mock-use-row .info{flex:1;min-width:0}
.mock-use-row .info .name{font-size:14px;font-weight:600;color:var(--ink);line-height:1.3}
.mock-use-row .info .status{font-size:11.5px;color:var(--muted);margin-top:2px}
.mock-split-btn{display:flex;border-radius:999px;background:linear-gradient(135deg,var(--blue),#06b6d4);color:#fff;font-size:12px;font-weight:700;overflow:hidden;box-shadow:0 6px 14px rgba(10,132,255,.28);flex-shrink:0}
.mock-split-btn .main{padding:7px 14px;border-right:1px solid rgba(255,255,255,.25)}
.mock-split-btn .chev{padding:7px 10px;display:flex;align-items:center}
.mock-split-btn .chev svg{width:10px;height:10px}
.mock-use-row.highlighted .mock-split-btn{transform:scale(1.05);box-shadow:0 10px 22px rgba(10,132,255,.40)}
.mock-use-menu{margin-top:8px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:6px;box-shadow:0 14px 32px rgba(29,36,55,.12);max-width:200px;margin-left:auto;display:flex;flex-direction:column;gap:2px;font-size:13px}
.mock-use-menu .item{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:6px;color:var(--ink);font-weight:500}
.mock-use-menu .item.active{background:#eef5ff;color:var(--blue);font-weight:700}
.mock-use-menu .item svg{width:13px;height:13px}

/* ============ 教程页样式（藏在 nav 外，从 app 跳来才能看） ============ */
.breadcrumb{padding:110px 0 24px;font-size:13px;color:var(--muted);max-width:1160px;margin:0 auto;padding-left:24px;padding-right:24px}
.breadcrumb a{color:#5d6574}.breadcrumb a:hover{color:var(--blue)}.breadcrumb .sep{margin:0 8px;opacity:.5}

.tutorial-index-hero{padding:20px 24px 40px;text-align:center;max-width:1160px;margin:0 auto}
.tutorial-index-hero h1{font-size:clamp(40px,5.5vw,72px);font-weight:800;letter-spacing:-.04em;line-height:1.15;color:var(--ink);margin-bottom:18px}
.tutorial-index-hero p{font-size:18px;color:var(--muted);max-width:600px;margin:0 auto;line-height:1.7}

.tutorial-group{margin:50px auto;max-width:1160px;padding:0 24px}
.tutorial-group h2{font-size:22px;font-weight:700;color:var(--ink);margin-bottom:18px;display:flex;align-items:center;gap:10px;line-height:1.4;letter-spacing:-.01em}
.tutorial-group h2 .tag{font-size:11px;font-weight:700;letter-spacing:1px;color:var(--blue);background:rgba(10,132,255,.10);padding:3px 8px;border-radius:4px}

.tutorial-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.tutorial-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;transition:all .15s;display:flex;align-items:flex-start;gap:14px;color:inherit}
.tutorial-card:hover{border-color:rgba(10,132,255,.30);box-shadow:0 14px 36px rgba(10,132,255,.08);transform:translateY(-2px);color:inherit}
.tutorial-card img{width:42px;height:42px;border-radius:9px;flex-shrink:0}
.tutorial-card .info{flex:1;min-width:0}
.tutorial-card .info h3{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:4px;line-height:1.4}
.tutorial-card .info p{font-size:13px;color:var(--muted);line-height:1.65;margin:0}
.tutorial-card.featured{background:linear-gradient(135deg,rgba(10,132,255,.06),rgba(6,182,212,.03));border-color:rgba(10,132,255,.25);grid-column:1/-1}
.tutorial-card.featured .info h3{font-size:17px}
.tutorial-card.featured .info p{font-size:13.5px}

.article{max-width:760px;margin:0 auto;padding:20px 24px 80px}
.article-header{margin-bottom:36px}
.article-header .meta{font-size:12.5px;color:#94a0ae;letter-spacing:.4px;text-transform:uppercase;margin-bottom:12px;font-weight:600}
.article-header h1{font-size:clamp(30px,4vw,42px);font-weight:800;letter-spacing:-.03em;line-height:1.25;color:var(--ink);margin-bottom:16px}
.article-header .lede{font-size:17px;color:var(--muted);line-height:1.75}
.article-body{color:var(--ink);line-height:1.85;font-size:15.5px}
.article-body h2{font-size:26px;font-weight:700;color:var(--ink);margin:48px 0 14px;line-height:1.35;letter-spacing:-.02em}
.article-body h3{font-size:19px;font-weight:700;color:var(--ink);margin:32px 0 10px;line-height:1.45}
.article-body p{margin-bottom:16px;color:var(--muted)}
.article-body strong{color:var(--ink);font-weight:700}
.article-body a{color:var(--blue);border-bottom:1px solid rgba(10,132,255,.35)}
.article-body a:hover{color:#06b6d4;border-bottom-color:#06b6d4}
.article-body ul,.article-body ol{padding-left:24px;margin-bottom:18px;color:var(--muted)}
.article-body li{margin-bottom:8px;line-height:1.85}
.article-body code{background:#f4f7fb;border:1px solid var(--line);border-radius:4px;padding:2px 6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;color:var(--blue)}
.article-body pre{background:#0b1220;border:0;border-radius:10px;padding:18px 20px;overflow-x:auto;margin:20px 0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.7;color:#d8e2ef}
.article-body pre code{background:transparent;border:0;padding:0;color:inherit}
.article-body blockquote{border-left:3px solid var(--blue);padding:8px 0 8px 16px;margin:18px 0;color:var(--muted);background:rgba(10,132,255,.04);border-radius:0 6px 6px 0}
.article-body table{width:100%;border-collapse:collapse;margin:18px 0;font-size:14px}
.article-body th,.article-body td{padding:11px 14px;border-bottom:1px solid var(--line);text-align:left;line-height:1.65}
.article-body th{background:#f4f7fb;color:var(--ink);font-weight:700}
.article-body td{color:var(--muted)}

.callout{background:rgba(10,132,255,.06);border-left:3px solid var(--blue);border-radius:0 8px 8px 0;padding:14px 18px;margin:20px 0}
.callout.tip{background:rgba(46,213,115,.08);border-left-color:#2ED573}
.callout.warn{background:rgba(245,158,11,.10);border-left-color:#F59E0B}
.callout strong{display:block;margin-bottom:4px;color:var(--ink);font-size:14px}
.callout p{color:var(--muted);font-size:14px;line-height:1.75;margin:0}

.mag-shortcut{background:linear-gradient(135deg,rgba(10,132,255,.06),rgba(6,182,212,.04));border:1px solid rgba(10,132,255,.25);border-radius:14px;padding:22px 24px;margin:24px 0}
.mag-shortcut .label{font-size:11px;font-weight:700;letter-spacing:1px;color:var(--blue);margin-bottom:8px;display:block}
.mag-shortcut h4{font-size:17px;font-weight:700;color:var(--ink);margin-bottom:6px;line-height:1.4}
.mag-shortcut p{color:var(--muted);font-size:14px;line-height:1.75;margin-bottom:10px}
.mag-shortcut .cta{display:inline-block;font-size:13px;font-weight:700;color:#fff !important;background:linear-gradient(135deg,var(--blue),#06b6d4);padding:9px 18px;border-radius:999px;border:0}

.related-articles{margin-top:60px;padding-top:32px;border-top:1px solid var(--line)}
.related-articles h3{font-size:11.5px;letter-spacing:1px;text-transform:uppercase;color:#94a0ae;font-weight:700;margin-bottom:16px}
.related-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.related-list a{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;gap:10px;align-items:center;transition:all .15s;color:inherit}
.related-list a:hover{border-color:rgba(10,132,255,.35);box-shadow:0 6px 16px rgba(29,36,55,.06);color:inherit}
.related-list a img{width:28px;height:28px;border-radius:6px}
.related-list a .name{font-size:14px;font-weight:500;color:var(--ink)}

/* ============ 子页面用：跟主页同步的 nav 模板（无教程入口）============ */
.subpage-nav{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:10;width:min(calc(100% - 32px),1120px);height:58px;border:1px solid rgba(255,255,255,.72);border-radius:999px;background:rgba(255,255,255,.78);backdrop-filter:blur(24px) saturate(180%);box-shadow:0 18px 48px rgba(29,36,55,.10);display:flex;align-items:center;justify-content:space-between;padding:0 10px 0 16px}
.subpage-nav .brand{display:flex;align-items:center;gap:10px;font-weight:760}
.subpage-nav .brand img{width:30px;height:30px;border-radius:9px}
.subpage-nav .actions{display:flex;align-items:center;gap:14px}
.subpage-nav .lang{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.72);color:#596171;text-decoration:none}
.subpage-nav .lang:hover{color:var(--blue)}
.subpage-nav .cta{display:inline-flex;align-items:center;justify-content:center;min-width:104px;height:40px;padding:0 24px;font-size:15px;font-weight:760;line-height:1;background:var(--blue);color:#fff;border-radius:999px;box-shadow:0 10px 28px rgba(10,132,255,.24)}

/* 子页面 footer 极简 */
.subpage-footer{padding:60px 24px 40px;text-align:center;border-top:1px solid var(--line);background:#fff;color:#7b8391;font-size:13px;margin-top:80px}
.subpage-footer .desc{margin-bottom:8px}

/* Hero mockup 升级：行内显示「机器在做事」状态 */
.mock-row-detail{
  display:flex;align-items:flex-start;gap:12px;padding:12px 14px;
  background:#f6f8fb;border-radius:10px;
}
.mock-row-detail img{width:28px;height:28px;border-radius:7px;flex-shrink:0;margin-top:1px;}
.mock-row-detail .info{flex:1;min-width:0;}
.mock-row-detail .name-line{
  font-size:13.5px;font-weight:600;color:#111;line-height:1.4;
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
}
.mock-row-detail .action{
  font-size:11.5px;color:#636b78;line-height:1.55;margin-top:3px;
  display:flex;align-items:center;gap:5px;
}
.tag-locked-mini{
  font-size:10px;font-weight:700;padding:1px 6px;border-radius:4px;
  background:#dbeafe;color:#1d4ed8;
}
/* 守护刚拉回那一行的强调态 */
.mock-row-recover{
  background:linear-gradient(135deg,rgba(10,132,255,.08),rgba(6,182,212,.04));
  border:1px solid rgba(10,132,255,.20);
}
.mock-row-recover .action{color:#0a65c8;font-weight:500;}
.dot-pulse{
  width:6px;height:6px;border-radius:50%;background:#0a84ff;
  box-shadow:0 0 0 0 rgba(10,132,255,.6);
  animation:pulse-dot 1.6s infinite;flex-shrink:0;
}
@keyframes pulse-dot{
  0%{box-shadow:0 0 0 0 rgba(10,132,255,.55);}
  70%{box-shadow:0 0 0 8px rgba(10,132,255,0);}
  100%{box-shadow:0 0 0 0 rgba(10,132,255,0);}
}