:root { color-scheme:light; --ink:#17253e; --muted:#63718a; --blue:#2457df; --line:#e5eaf2; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:96px; }
body { margin:0;color:var(--ink);background:#fff;font:14px/1.7 "Microsoft YaHei UI","PingFang SC",system-ui,sans-serif; }
a { color:inherit;text-decoration:none; } a:focus-visible { outline:3px solid #2861e9;outline-offset:5px; }
.skip-link { position:absolute;top:-80px;left:20px;z-index:100;background:white;padding:12px; }.skip-link:focus { top:10px; }
.site-header { border-bottom:1px solid var(--line);background:#fff; }
.header-inner,.section-wrap,.hero,.capability-strip { width:min(1280px,calc(100% - 96px));margin-inline:auto; }
.header-inner { min-height:84px;display:flex;align-items:center;gap:32px;justify-content:space-between; }
.brand { display:flex;align-items:center;gap:10px;font-size:26px;font-weight:750;letter-spacing:-.8px;white-space:nowrap; }
.brand-icon { display:grid;place-items:center;width:34px;height:36px;border-radius:9px;background:var(--blue);color:#fff;font:700 25px system-ui; }
.brand-divider { width:1px;height:24px;background:#dae0ea;margin:0 5px; }.brand small { font-size:12px;letter-spacing:0;font-weight:500;color:var(--muted); }
nav { display:flex;gap:32px;color:#4c5c76;font-size:13px; }nav a:hover { color:var(--blue); }
.nav-console { border:1px solid #dce4f4;border-radius:6px;padding:9px 17px;font-size:13px;color:var(--blue);white-space:nowrap; }
.nav-console span { margin-left:16px; }.hero { display:grid;grid-template-columns:1fr 1.03fr;gap:48px;align-items:center;padding:78px 0 72px; }
.eyebrow { color:var(--blue);font-size:11px;letter-spacing:1.7px;font-weight:650;margin:0 0 22px; }.eyebrow>span { display:inline-block;width:7px;height:7px;background:var(--blue);border-radius:50%;margin-right:8px; }
h1 { font-size:clamp(38px,3.55vw,54px);letter-spacing:-1.8px;line-height:1.32;margin:0 0 23px;font-weight:700; }h1 em { font-style:normal;color:var(--blue); }
.description { font-size:14px;color:var(--muted);line-height:1.95;margin:0; }.hero-actions { display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:30px; }
.primary,.secondary { display:inline-flex;align-items:center;justify-content:space-between;gap:24px;padding:13px 20px;border-radius:6px;font-size:13px;font-weight:600; }.primary { background:var(--blue);color:#fff;box-shadow:0 4px 10px #2457df18; }.primary:hover { background:#1644be; }.secondary { border:1px solid var(--line);background:#fff; }
.privacy { margin:18px 0 0;font-size:11px;color:#7b879b;display:flex;align-items:center;gap:7px; }.privacy svg { width:15px;fill:none;stroke:currentColor;stroke-width:1.5; }
.product-visual { border:1px solid #d9e1f0;border-radius:12px;background:#f3f6fb;box-shadow:0 28px 65px -28px #274b8655;overflow:hidden;transform:perspective(1500px) rotateY(-5deg); }
.visual-top { height:43px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 16px;background:#fff;border-bottom:1px solid var(--line);font-size:10px;color:#8592a8; }.visual-top b { font-weight:400;font-size:9px;border:1px solid var(--line);border-radius:4px;padding:2px 6px; }
.window-dots { display:flex;gap:5px; }.window-dots i { width:6px;height:6px;border-radius:50%;background:#d8dfeb; }
.visual-body { display:flex;min-height:340px; }.visual-nav { width:48px;background:#172540;display:flex;align-items:center;flex-direction:column;gap:23px;padding:18px 0; }.mini-brand { color:#88acff;font:700 22px system-ui; }.visual-nav i { width:14px;height:12px;border:1px solid #7585a0;border-radius:3px; }.visual-nav .selected { background:#5283f2;border-color:#5283f2;box-shadow:0 0 0 7px #263d65; }
.visual-workspace { flex:1;min-width:0;padding:18px; }.visual-title { display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;font-size:12px; }.visual-title span { font-size:9px;color:#8190a5; }
.visual-monitor { background:#172943;border-radius:5px;position:relative;overflow:hidden; }.visual-monitor svg { width:100%;display:block; }.visual-label { position:absolute;left:12px;top:10px;color:#b9cbe5;font-size:9px; }.visual-caption { position:absolute;bottom:9px;right:12px;color:#9cb0ca;font-size:8px; }
.visual-modules { display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px; }.visual-modules>div { background:#fff;border:1px solid var(--line);padding:12px 8px;border-radius:5px; }.module-icon { color:#3d6de1;font-size:15px; }.visual-modules strong,.visual-modules small { display:block;font-size:10px; }.visual-modules small { font-size:8px;color:#8b96a8;margin-top:4px; }
.visual-bottom { display:flex;justify-content:space-between;padding:10px 17px;color:#8c99ad;font-size:9px;border-top:1px solid var(--line); }
.capability-strip { display:flex;align-items:center;justify-content:space-between;gap:20px;padding:25px 0;border-block:1px solid var(--line);color:#5c6b83; }.capability-strip>span { font-size:12px;color:#8c97a9; }.capability-strip strong { font-size:14px;font-weight:500; }.capability-strip i { height:14px;width:1px;background:var(--line); }
.platform { padding-block:78px; }.section-heading { display:flex;align-items:end;justify-content:space-between;gap:24px; }.section-heading .eyebrow { margin-bottom:12px; }h2 { margin:0;font-size:29px;font-weight:650;letter-spacing:-.6px; }.section-heading>p { margin:0;color:var(--muted);font-size:12px; }.capabilities { display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:36px; }
.capabilities article { position:relative;border:1px solid var(--line);border-radius:10px;padding:28px;background:#fff; }.feature-icon { display:grid;place-items:center;width:44px;height:44px;background:#edf3ff;color:var(--blue);border-radius:9px;font-size:23px; }.tag { position:absolute;right:24px;top:32px;color:#397764;background:#f0f8f4;border:1px solid #dceee4;padding:3px 9px;border-radius:4px;font-size:10px; }.tag.muted { background:#faf6ed;color:#957844;border-color:#ece3cf; }
h3 { font-size:19px;margin:22px 0 10px;font-weight:650; }.capabilities p { color:var(--muted);font-size:13px;min-height:66px; }.capabilities ul { padding:16px 0 20px;margin:0;list-style:none;border-bottom:1px solid var(--line); }.capabilities li { color:#65738b;font-size:12px;margin:8px 0; }.capabilities li::before { content:'✓';color:#5580d5;margin-right:9px; }.capabilities a { display:flex;justify-content:space-between;color:var(--blue);font-size:12px;margin-top:20px; }
.workflow { background:#f6f8fc;border-block:1px solid var(--line);padding:60px 0; }.workflow .eyebrow { margin-bottom:12px; }.workflow-steps { display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:35px; }.workflow-steps article { border-top:1px solid #d9e1ef;padding-top:22px; }.workflow-steps span { color:var(--blue);font:500 15px system-ui; }.workflow-steps h3 { margin:10px 0 8px;font-size:17px; }.workflow-steps p { margin:0;color:var(--muted);font-size:12px; }
.future { padding-block:70px;display:flex;justify-content:space-between;gap:40px;align-items:center; }.future .eyebrow { margin-bottom:12px; }.future p:last-child { color:var(--muted);font-size:13px; }.roadmap-items { display:grid;gap:10px;width:34%; }.roadmap-items>span { display:flex;justify-content:space-between;gap:30px;border:1px solid var(--line);padding:14px 20px;border-radius:6px;font-size:13px; }.roadmap-items small { color:#8d9ab0; }
.cta { display:flex;align-items:center;justify-content:space-between;gap:24px;background:#edf3ff;border:1px solid #e0e8fb;padding:32px 40px;border-radius:10px;margin-bottom:60px; }.cta h2 { font-size:23px; }.cta p { color:var(--muted);font-size:12px;margin-bottom:0; }
footer { display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:28px;border-top:1px solid var(--line);font-size:11px;color:#8691a5; }footer .brand { font-size:22px;color:var(--ink); }
@media(min-width:1600px){.hero { padding-block:100px; }}
@media(max-width:1000px){.header-inner,.section-wrap,.hero,.capability-strip{width:calc(100% - 48px)}.brand small,.brand-divider{display:none}nav{gap:18px}.hero{gap:25px}.capabilities{gap:12px}.capabilities article{padding:20px}.section-heading>p{display:none}.tag{right:16px;font-size:9px}.visual-workspace{padding:12px}.visual-modules small{display:none}}
@media(max-width:720px){.header-inner{min-height:70px;gap:12px}nav{display:none}.brand{font-size:24px}.hero{grid-template-columns:1fr;padding:44px 0;gap:36px}h1{font-size:40px}.desktop-break{display:none}.product-visual{transform:none}.capability-strip{flex-wrap:wrap;justify-content:start;gap:14px 24px}.capability-strip>span{width:100%}.capability-strip i{display:none}.capability-strip strong{font-size:12px}.platform{padding-block:44px}h2{font-size:25px}.capabilities,.workflow-steps{grid-template-columns:1fr}.capabilities p{min-height:0}.workflow{padding:40px 0}.workflow-steps{gap:22px}.future,.cta{flex-direction:column;align-items:stretch;padding-block:36px}.roadmap-items{width:100%}.cta{padding:24px;margin-bottom:32px}.cta .primary{align-self:start}footer{flex-wrap:wrap}footer>span{display:none}.privacy{font-size:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Motion-led product presentation: bounded transform/opacity effects only. */
.hero-shell { position:relative;isolation:isolate;overflow:hidden;background:#f7faff;color:var(--ink); }
.hero-shell::before { content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 85% 15%,#d7e5ff70,transparent 60%),linear-gradient(120deg,#ffffff,#f1f6ff); }
.hero-shell::after { content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(#5287e909 1px,transparent 1px),linear-gradient(90deg,#5287e909 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(to right,transparent,#000); }
.hero { position:relative;padding-block:86px; }
.hero-light { position:absolute;z-index:-1;width:520px;height:520px;right:-100px;top:-140px;pointer-events:none;border-radius:50%;background:radial-gradient(circle,#689dfb22,transparent 68%);animation:light-drift 12s ease-in-out infinite alternate; }
.hero .eyebrow { color:#2457df; }.hero .eyebrow>span { background:#4776e7;box-shadow:0 0 12px #6592f344; }
.hero h1 { font-size:clamp(40px,3.9vw,60px);line-height:1.28;letter-spacing:-1px; }
.hero h1 em { background:linear-gradient(100deg,#2457df,#377ac8);background-clip:text;-webkit-background-clip:text;color:transparent; }
.hero .description { color:#63718a; }.hero .privacy { color:#7b879b; }.hero .primary { background:#2457df;box-shadow:0 6px 20px #2457df20; }.hero .primary:hover { background:#1644be; }
.hero .secondary { background:#fff;border-color:#dce5f2;color:#304668; }.hero .secondary:hover { background:#f9fbff;border-color:#adc4ed; }
.hero-copy>.eyebrow,.hero-copy>h1,.hero-copy>.description,.hero-actions,.hero .privacy { animation:content-enter .75s cubic-bezier(.2,.7,.2,1) both; }
.hero-copy>h1 { animation-delay:80ms; }.hero-copy>.description { animation-delay:160ms; }.hero-actions { animation-delay:230ms; }.hero .privacy { animation-delay:290ms; }
.product-visual { transform:perspective(1500px) rotateY(-5deg);border-color:#d9e1f0;box-shadow:0 24px 64px #274b8622,0 0 0 8px #87acdf05;animation:product-enter 1s cubic-bezier(.2,.7,.2,1) both,product-float 8s 1s ease-in-out infinite; }
.visual-top { background:#fff;border-color:#e5eaf2;color:#8592a8; }.visual-top b { color:#8592a8;border-color:#e5eaf2; }.window-dots i { background:#d8dfeb; }.window-dots i:first-child { background:#88a9df; }
.visual-title { color:#233b5d; }.visual-monitor { isolation:isolate; }.scan-sweep { position:absolute;inset:-100% -10%;pointer-events:none;z-index:1;background:linear-gradient(180deg,transparent 48%,#67c8ed16 51%,#83ddf048 52%,transparent 52.4%);animation:scan-sweep 6s linear infinite; }
.visual-modules>div { transition:transform .25s ease,border-color .25s ease; }.visual-modules>div:hover { transform:translateY(-3px);border-color:#b7c9ed; }
.visual-bottom { color:#7588a2; }
.primary,.secondary,.nav-console { transition:transform .22s ease,background-color .22s ease,box-shadow .22s ease,border-color .22s ease; }
.primary:hover,.secondary:hover,.nav-console:hover { transform:translateY(-2px); }.primary:active,.secondary:active,.nav-console:active { transform:translateY(0); }
.primary>span,.secondary>span,.nav-console>span,.capabilities a>span { transition:transform .22s ease; }.primary:hover>span,.nav-console:hover>span,.capabilities a:hover>span { transform:translate(3px,-2px); }
.site-header nav a { position:relative; }.site-header nav a::after { content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;background:#2457df;transform:scaleX(0);transform-origin:left;transition:transform .22s; }.site-header nav a:hover::after { transform:scaleX(1); }
.capabilities article { transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease; }.capabilities article:hover { transform:translateY(-6px);box-shadow:0 16px 36px #2b487a0d;border-color:#c2d2ed; }.feature-icon { transition:transform .28s ease,background .28s ease; }.capabilities article:hover .feature-icon { transform:rotate(-6deg);background:#e3edff; }
.roadmap-items>span { transition:transform .22s ease,border-color .22s ease; }.roadmap-items>span:hover { transform:translateX(-4px);border-color:#c7d5ec; }
.reveal { opacity:0;transform:translateY(22px);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.2,1); }.reveal.is-visible { opacity:1;transform:none; }.capabilities article:nth-child(2),.workflow-steps article:nth-child(2) { transition-delay:70ms; }.capabilities article:nth-child(3),.workflow-steps article:nth-child(3) { transition-delay:140ms; }
.footer-actions { display:flex;align-items:center;gap:24px; }#motionToggle { appearance:none;border:1px solid #e0e6ef;background:#fff;color:#63718a;border-radius:5px;padding:7px 10px;font:inherit;cursor:pointer; }#motionToggle:disabled { cursor:default; }#motionToggle:focus-visible { outline:2px solid #2457df;outline-offset:3px; }
.page-hidden *, .page-hidden *::before,.page-hidden *::after,.hero-away .hero *,.hero-away .hero *::before,.hero-away .hero *::after { animation-play-state:paused!important; }
.motion-off *,.motion-off *::before,.motion-off *::after { animation:none!important;transition:none!important; }.motion-off .reveal { opacity:1;transform:none; }
@keyframes content-enter { from { opacity:0;transform:translateY(16px); } to { opacity:1;transform:translateY(0); } }
@keyframes product-enter { from { opacity:0;translate:24px 10px; } to { opacity:1;translate:0 0; } }
@keyframes product-float { 0%,100% { translate:0 0; } 50% { translate:0 -9px; } }
@keyframes scan-sweep { from { transform:translateY(-26%); } to { transform:translateY(26%); } }
@keyframes light-drift { to { transform:translate(-90px,70px);opacity:.65; } }
@media(max-width:720px) { .hero { padding-block:48px; }.hero h1 { font-size:40px; }.hero-light { width:360px;height:360px;right:-140px; }.product-visual { transform:none; }.footer-actions { gap:14px;flex-wrap:wrap; }.hero .description { font-size:13px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important;transition:none!important; }html{scroll-behavior:auto}.reveal{opacity:1;transform:none} }
