:root { --ink:#172234; --muted:#697588; --line:#e5eaf1; --blue:#3267ed; --navy:#102040; --pale:#f5f8ff; --purple:#755ce8; --orange:#ee9856; --green:#49af89; font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif; color:var(--ink); background:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; }
a { color:inherit; text-decoration:none; }
.section-shell { width:min(1120px,calc(100% - 48px)); margin:0 auto; }
.site-header { height:76px; display:flex; align-items:center; justify-content:space-between; width:min(1200px,calc(100% - 48px)); margin:auto; }
.brand { display:flex; align-items:center; gap:10px; color:#19243a; font-weight:750; font-size:18px; letter-spacing:-.4px; }
.brand-mark { position:relative; display:inline-flex; align-items:flex-end; gap:2px; width:23px; height:23px; padding:3px; overflow:hidden; border-radius:7px; background:linear-gradient(145deg,#547cf5,#284bc3); transform:rotate(-7deg); box-shadow:0 3px 8px #315ddd44; }
.brand-mark i { display:block; width:4px; background:#fff; border-radius:2px; opacity:.96; }.brand-mark i:nth-child(1){height:8px}.brand-mark i:nth-child(2){height:13px}.brand-mark i:nth-child(3){height:17px}
nav { display:flex; gap:36px; margin-left:100px; } nav a { color:#667287; font-size:14px; } nav a:hover,.button-text:hover,.text-link:hover { color:var(--blue); }
.header-action { color:#2e61e5; font-size:14px; font-weight:650; }.header-action span { margin-left:8px; font-size:18px; }
.hero { display:grid; grid-template-columns:45% 55%; align-items:center; min-height:610px; padding:70px 0 60px; }
.eyebrow { display:flex; align-items:center; gap:8px; margin:0 0 19px; color:#5770aa; font-size:13px; font-weight:650; letter-spacing:.4px; }.eyebrow span { width:17px; height:2px; background:#6388fa; }
h1,h2,h3,p { margin-top:0; } h1 { margin-bottom:24px; color:#13203a; font-size:55px; line-height:1.18; letter-spacing:-3px; }.hero-description { max-width:450px; margin-bottom:29px; color:var(--muted); font-size:16px; line-height:1.85; }
.hero-actions { display:flex; gap:14px; align-items:center; }.button { display:inline-flex; gap:18px; align-items:center; justify-content:center; min-height:46px; border-radius:7px; padding:0 20px; font-size:14px; font-weight:650; }.button-primary { color:white; background:var(--blue); box-shadow:0 10px 20px #3267ed33; }.button-primary:hover { background:#2558d5; }.button-primary span { font-size:17px; }.button-text { color:#37445b; }.hero-note { margin:19px 0 0 4px; color:#9ba5b5; font-size:12px; }
.hero-product { position:relative; height:415px; }.product-glow { position:absolute; inset:14% 2% 0; border-radius:40%; background:radial-gradient(ellipse,#dae5ff 0%,#f8faff 58%,transparent 72%); }.window { position:absolute; z-index:1; top:24px; right:0; width:650px; height:354px; overflow:hidden; border:1px solid #d8e0ec; border-radius:11px; background:#fff; box-shadow:0 30px 55px #172a5430; transform:perspective(1200px) rotateY(-5deg) rotateX(2deg); }.window-bar { display:flex; align-items:center; gap:5px; height:27px; padding:0 11px; border-bottom:1px solid #edf0f5; background:#fafbfd; }.window-bar span { width:6px; height:6px; border-radius:50%; background:#d6dce5; }.window-bar b { margin-left:45%; color:#9ca6b5; font-size:9px; font-weight:500; }.app-layout { display:flex; height:calc(100% - 27px); }.app-nav { width:41px; padding-top:11px; background:#17233a; text-align:center; }.mini-logo { width:20px; height:20px; margin:0 auto 18px; border-radius:6px; color:#fff; background:#4977f6; font-size:11px; font-weight:bold; line-height:20px; }.app-nav i { display:block; width:17px; height:17px; margin:0 auto 13px; border-radius:4px; background:#71809a44; }.app-nav i.active { background:#7b9dfb; }.app-nav em { display:block; width:19px; height:19px; margin:56px auto 0; border-radius:50%; background:#f4bb75; }.app-sidebar { width:145px; padding:14px 9px; background:#f7f9fc; }.workspace { display:flex; justify-content:space-between; padding:0 6px 15px; font-size:10px; }.workspace small { color:#94a0b1; }.nav-label { margin:7px 6px; color:#9ba7b6; font-size:8px; }.nav-label.second { margin-top:18px; }.nav-item { display:flex; gap:7px; align-items:center; height:25px; padding:0 6px; color:#718095; font-size:9px; }.nav-item span { font-size:12px; }.nav-item b { margin-left:auto; padding:1px 5px; border-radius:7px; color:#4d72d8; background:#e9efff; font-size:8px; }.nav-item.selected { color:#2d5ad5; border-radius:4px; background:#e8efff; font-weight:700; }.project-row { display:flex; gap:5px; align-items:center; padding:5px 6px; color:#778396; font-size:8px; }.project-row i { width:6px; height:6px; border-radius:2px; background:#a38dfa; }.project-row:nth-child(2) i{background:#6dc1a5}.app-content { flex:1; padding:17px 21px; background:#fff; }.content-top { display:flex; align-items:center; justify-content:space-between; }.content-top small { color:#9ba7b6; font-size:8px; }.content-top h2 { margin:2px 0 0; font-size:17px; }.content-top button { border:0; border-radius:4px; padding:6px 9px; color:#fff; background:#416eee; font-size:8px; }.stats { display:flex; gap:8px; margin:15px 0; }.stats div { width:31%; padding:8px; border:1px solid #edf0f5; border-radius:5px; }.stats small { display:block; color:#9ba6b4; font-size:8px; }.stats strong { display:block; margin-top:4px; color:#344363; font-size:17px; }.task-title { display:flex; justify-content:space-between; margin:5px 0 8px; color:#4d596d; font-size:10px; font-weight:bold; }.task-title small { color:#9ca7b6; font-size:8px; font-weight:normal; }.task-card { display:flex; align-items:center; gap:8px; min-height:42px; padding:6px 0; border-top:1px solid #f0f2f6; }.check { display:block; width:12px; height:12px; border:1px solid #cfd7e2; border-radius:4px; }.check.blue { border-color:#6389f8; background:#6389f8; }.task-card div { flex:1; }.task-card strong { display:block; color:#516077; font-size:9px; }.task-card small { color:#a4adbb; font-size:7px; }.avatar { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; color:white; font-size:7px; }.a1{background:#e59165}.a2{background:#78a0da}.a3{background:#a790d9}.a4{background:#64aa92}
.float-card { position:absolute; z-index:2; display:flex; align-items:center; gap:8px; border:1px solid #e0e6ef; border-radius:9px; background:#fff; box-shadow:0 14px 35px #1e376522; }.progress-card { top:0; right:-16px; width:190px; padding:10px; }.icon-box { display:grid; width:25px; height:25px; place-items:center; border-radius:6px; color:#4770ed; background:#eaf0ff; }.float-card small { display:block; color:#8e9aab; font-size:8px; }.float-card strong { color:#33415a; font-size:11px; }.progress-card svg { width:42px; margin-left:auto; }.progress-card path { fill:none; stroke:#5b80f2; stroke-width:2; }.comment-card { bottom:1px; left:-25px; width:216px; padding:10px; }.comment-card div { flex:1; }.comment-card strong { display:block; font-size:9px; }.comment-card p { margin:2px 0 0; color:#8490a1; font-size:8px; }.comment-card>b { align-self:flex-start; color:#adb6c3; font-size:7px; font-weight:400; }
.trusted { display:flex; align-items:center; justify-content:space-between; padding:25px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.trusted p { margin:0; color:#8290a3; font-size:13px; }.trusted div { display:flex; align-items:center; gap:27px; color:#46546b; font-size:18px; font-weight:700; letter-spacing:-1px; }.trusted i { width:4px; height:4px; border-radius:50%; background:#b2bdca; }
.features { padding:120px 0 110px; }.section-intro { display:flex; justify-content:space-between; align-items:end; margin-bottom:44px; }.section-intro h2,.workflow-copy h2,.download-content h2 { margin:0; color:#17243e; font-size:38px; line-height:1.28; letter-spacing:-2px; }.feature-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }.feature-card { position:relative; min-height:274px; overflow:hidden; padding:25px 23px; border:1px solid #e6eaf1; border-radius:10px; background:#fff; }.feature-card:hover { transform:translateY(-4px); box-shadow:0 14px 28px #15294c10; transition:.2s; }.feature-icon { display:grid; width:31px; height:31px; place-items:center; margin-bottom:18px; border-radius:8px; font-size:16px; font-weight:700; }.purple{color:#775ee3;background:#eeeaff}.blue{color:#3a6eee;background:#e8efff}.orange{color:#dd873e;background:#fff0e4}.green{color:#309c76;background:#e5f8f0}.feature-card h3 { margin-bottom:9px; font-size:16px; }.feature-card>p { max-width:190px; color:#7b8798; font-size:12px; line-height:1.7; }.project-preview,.task-preview,.risk-preview,.bars { position:absolute; right:16px; bottom:15px; left:16px; }.project-preview { padding:11px; border-radius:7px; background:#f4f1ff; }.project-preview b,.project-preview small { display:block; font-size:9px; }.project-preview small { margin-top:3px; color:#948caf; font-size:8px; }.project-preview span { position:absolute; top:12px; right:10px; color:#765ee4; font-size:9px; font-weight:bold; }.project-preview i { display:block; height:3px; margin-top:8px; overflow:hidden; border-radius:2px; background:#dfd8fb; }.project-preview em { display:block; width:68%; height:100%; background:#826ce9; }.task-preview { display:flex; align-items:center; gap:5px; padding:9px; border-radius:6px; background:#f5f8ff; color:#647188; font-size:8px; }.task-preview>i { width:10px; height:10px; border:1px solid #8aa6f9; border-radius:3px; }.task-preview b { flex:1; font-size:8px; }.task-preview span { color:#e09368; }.task-preview .done { border:0; background:#7193f5; }.risk-preview { padding:10px; border-left:3px solid #f1a15c; border-radius:0 5px 5px 0; background:#fff8f2; }.risk-preview span,.risk-preview small { display:block; color:#c68a5c; font-size:8px; }.risk-preview b { display:inline-block; margin:2px 5px 0 0; color:#dc8845; font-size:20px; }.risk-preview small { display:inline; color:#a99485; }.bars { display:flex; align-items:end; gap:5px; height:58px; padding:7px 11px; border-radius:6px; background:#f2faf7; }.bars i { width:12px; border-radius:3px 3px 0 0; background:#8bceb6; }.bars i:nth-child(1){height:24%}.bars i:nth-child(2){height:46%}.bars i:nth-child(3){height:37%}.bars i:nth-child(4){height:72%}.bars i:nth-child(5){height:58%}.bars i:nth-child(6){height:91%;background:#52b38e}.bars i:nth-child(7){height:66%}
.workflow { display:grid; grid-template-columns:54% 46%; align-items:center; min-height:450px; padding:80px 0; }.workflow-visual { position:relative; height:300px; }.flow-line { position:absolute; top:140px; right:30px; left:30px; height:2px; background:linear-gradient(90deg,#a9bbf8,#7798f5); transform:rotate(-10deg); }.flow-step { position:absolute; display:grid; width:94px; height:94px; place-content:center; border-radius:50%; text-align:center; box-shadow:0 13px 25px #23427a19; }.flow-step b { font-size:20px; }.flow-step span { margin-top:3px; font-size:10px; }.first { top:107px; left:20px; color:#5574d8; background:#eaf0ff; }.second { top:35px; left:155px; color:#745fd1; background:#f0edff; }.third { top:112px; left:305px; color:#238d72; background:#e4f7ef; }.fourth { top:20px; right:30px; color:#d58345; background:#fff0e3; }.workflow-copy { padding-left:30px; }.workflow-copy>p:not(.eyebrow) { max-width:380px; margin:22px 0; color:#778497; font-size:14px; line-height:1.85; }.text-link { color:#3969e5; font-size:14px; font-weight:650; }.text-link span { margin-left:10px; font-size:18px; }
.download-section { margin-top:35px; color:#fff; background:#152a56; }.download-content { display:grid; grid-template-columns:46% 54%; gap:60px; align-items:center; min-height:405px; }.eyebrow.light { color:#a9c4ff; }.eyebrow.light span { background:#9dc0ff; }.download-content h2 { color:#fff; }.download-content>div>p:not(.eyebrow) { margin:19px 0 0; color:#a5b4d0; font-size:14px; }.download-panel { padding:22px; border:1px solid #ffffff1d; border-radius:12px; background:#ffffff0b; }.download-title { display:flex; align-items:center; gap:11px; padding-bottom:16px; border-bottom:1px solid #ffffff1d; }.light-mark { box-shadow:none; }.download-title strong,.download-title small { display:block; }.download-title strong { font-size:15px; }.download-title small { margin-top:3px; color:#9daeca; font-size:11px; }.download-options { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding-top:15px; }.download-option { display:flex; align-items:center; gap:9px; min-height:54px; padding:8px; border:1px solid #ffffff18; border-radius:7px; background:#ffffff0c; }.download-option:hover { border-color:#8db0ff88; background:#ffffff16; }.platform-icon { display:grid; width:25px; height:25px; place-items:center; border-radius:6px; background:#fff2; font-size:15px; }.windows { font-size:17px; }.android { color:#adf0c7; }.download-option div { flex:1; }.download-option strong,.download-option small { display:block; }.download-option strong { font-size:11px; }.download-option small { margin-top:2px; color:#a5b5d2; font-size:9px; }.download-option>b { color:#b8cbfb; font-size:9px; }.download-option em { font-size:13px; font-style:normal; }.download-status { margin:13px 0 0; color:#8fa2c6; font-size:10px; text-align:center; }
.site-footer { display:flex; align-items:center; min-height:96px; color:#95a0af; font-size:12px; }.site-footer p { flex:1; margin:0 0 0 25px; }.site-footer .brand { font-size:15px; }.site-footer .brand-mark { width:20px; height:20px; }
.download-modal { position:fixed; z-index:20; inset:0; display:grid; place-items:center; padding:20px; opacity:0; pointer-events:none; transition:opacity .18s ease; }.download-modal[aria-hidden="false"] { opacity:1; pointer-events:auto; }.download-modal__backdrop { position:absolute; inset:0; background:#101a2fd1; backdrop-filter:blur(5px); }.download-modal__dialog { position:relative; width:min(100%,410px); padding:32px; border:1px solid #e5eaf3; border-radius:14px; background:#fff; box-shadow:0 25px 70px #00000042; transform:translateY(10px) scale(.98); transition:transform .18s ease; }.download-modal[aria-hidden="false"] .download-modal__dialog { transform:translateY(0) scale(1); }.download-modal__close { position:absolute; top:12px; right:14px; width:28px; height:28px; border:0; border-radius:50%; color:#8793a5; background:transparent; font-size:24px; line-height:24px; cursor:pointer; }.download-modal__close:hover { color:#27344c; background:#f2f5f9; }.download-modal__icon { display:grid; width:43px; height:43px; place-items:center; margin-bottom:18px; border-radius:12px; color:#fff; background:linear-gradient(145deg,#638cff,#315edc); font-size:24px; box-shadow:0 8px 18px #3e6bea40; }.download-modal__dialog h2 { margin:0 0 10px; color:#1c2940; font-size:21px; }.download-modal__dialog p { margin:0; color:#6f7c8f; font-size:14px; line-height:1.75; }.download-modal__dialog p strong { color:#33435c; }.download-modal__actions { display:flex; justify-content:flex-end; gap:10px; margin-top:26px; }.modal-button { height:39px; padding:0 16px; border:0; border-radius:7px; font:inherit; font-size:13px; font-weight:650; cursor:pointer; }.modal-button--secondary { color:#5b687c; background:#f1f4f8; }.modal-button--secondary:hover { background:#e7ecf2; }.modal-button--primary { color:#fff; background:#3267ed; box-shadow:0 7px 15px #3267ed30; }.modal-button--primary:hover { background:#285ad7; }.download-modal__qr { display:none; padding-top:4px; text-align:center; }.download-modal__qr img { display:block; width:190px; height:190px; margin:18px auto 12px; border:8px solid #fff; border-radius:8px; box-shadow:0 4px 16px #1a2e5715; image-rendering:auto; }.download-modal.is-ios .download-modal__icon { background:linear-gradient(145deg,#526fbd,#2e477e); }.download-modal.is-ios .download-modal__description,.download-modal.is-ios .modal-button--primary { display:none; }.download-modal.is-ios .download-modal__qr { display:block; }.download-modal.is-ios .download-modal__actions { justify-content:center; margin-top:20px; }.ios { color:#eef2ff; }
@media (max-width:900px) { nav { margin-left:0; gap:20px; }.hero { grid-template-columns:1fr; padding-top:70px; }.hero-copy { text-align:center; }.eyebrow { justify-content:center; }.hero-description { margin-right:auto; margin-left:auto; }.hero-actions { justify-content:center; }.hero-product { width:min(100%,650px); margin:45px auto 0; }.window { right:50%; width:92%; transform:translateX(50%) perspective(1200px) rotateY(-3deg); }.feature-grid { grid-template-columns:repeat(2,1fr); }.workflow { grid-template-columns:1fr; }.workflow-visual { max-width:580px; width:100%; margin:auto; }.workflow-copy { padding:30px 0 0; text-align:center; }.workflow-copy>p:not(.eyebrow) { margin-right:auto; margin-left:auto; }.download-content { grid-template-columns:1fr; gap:30px; padding:65px 0; }.download-content>div:first-child { text-align:center; }.trusted { flex-direction:column; gap:16px; } }
@media (max-width:620px) { .section-shell,.site-header { width:calc(100% - 32px); }.site-header { height:64px; }.site-header nav,.header-action { display:none; }.hero { min-height:0; padding:58px 0 32px; } h1 { font-size:39px; letter-spacing:-2px; }.hero-product { height:255px; margin-top:28px; }.window { top:12px; height:220px; }.app-sidebar { width:100px; }.app-content { padding:10px; }.float-card { transform:scale(.72); transform-origin:center; }.progress-card { right:-34px; }.comment-card { bottom:-17px; left:-45px; }.trusted div { gap:13px; font-size:15px; }.features { padding:72px 0; }.section-intro { display:block; text-align:center; margin-bottom:30px; }.section-intro h2,.workflow-copy h2,.download-content h2 { font-size:30px; letter-spacing:-1.4px; }.feature-grid { grid-template-columns:1fr; }.feature-card { min-height:240px; }.workflow { padding:35px 0 65px; }.workflow-visual { height:235px; transform:scale(.8); transform-origin:center; margin:-17px 0; }.download-options { grid-template-columns:1fr; }.site-footer { flex-wrap:wrap; gap:16px; padding:22px 0; }.site-footer p { flex-basis:100%; order:3; margin:0; }.site-footer>span { margin-left:auto; } }