@layer reset, base, components, responsive;
@layer reset { *,*::before,*::after { box-sizing:border-box; } body,h1,h2,h3,h4,p { margin:0; } button,a { -webkit-tap-highlight-color:transparent; } button { font:inherit; } a { color:inherit; text-decoration:none; } img { max-width:100%; } button { cursor:pointer; } [hidden] { display:none!important; } }
@layer base {
  :root { color-scheme:light; --paper:#f8fcfa; --mint:#e8f6ef; --ink:#173d33; --green:#217a5b; --muted:#6a7d75; --line:#dce8e1; --font:'Noto Sans SC Variable','PingFang SC','Microsoft YaHei',sans-serif; }
  html { scroll-behavior:smooth; scroll-padding-top:105px; }
  body { color:var(--ink); background:var(--paper); font-family:var(--font); font-size:1rem; line-height:1.7; -webkit-font-smoothing:antialiased; }
  ::selection { background:#c1ead6; color:var(--ink); }
  :focus-visible { outline:3px solid #287c60; outline-offset:5px; }
  .container { width:min(1200px,calc(100% - 96px)); margin-inline:auto; }
  .section-pad { padding-block:100px; }
  em { font-style:normal; color:var(--green); }
  .eyebrow { font-size:.875rem; font-weight:500; letter-spacing:.08em; color:var(--green); }
  .overline { display:block; font-size:.75rem; letter-spacing:.13em; color:var(--muted); font-weight:500; }
  .skip-link { position:fixed; top:8px; left:8px; z-index:99; background:white; padding:12px; transform:translateY(-160%); } .skip-link:focus { transform:none; }
}
@layer components {
  .site-header { position:sticky; top:0; z-index:30; background:#f8fcfaed; backdrop-filter:blur(16px); border-bottom:1px solid #e6eee780; }
  .nav-shell { min-height:88px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
  .brand { display:inline-flex; align-items:center; gap:11px; font-weight:650; font-size:1.2rem; white-space:nowrap; }
  .brand img { object-fit:contain; } .brand-divider { width:1px; height:18px; background:#cbd9d1; margin-inline:8px; } .brand-caption { color:var(--muted); font-size:.875rem; font-weight:400; }
  nav { display:flex; align-items:center; gap:32px; font-size:.875rem; } nav a { transition:color 180ms; } nav a:hover { color:var(--green); } nav .nav-cta { border:1px solid #bad2c5; padding:10px 20px; border-radius:7px; } .nav-cta span { margin-left:18px; }
  .menu-toggle { border:1px solid var(--line); background:white; border-radius:6px; padding:7px 10px; font-size:.875rem; }
  .hero { display:grid; grid-template-columns:1fr 1.05fr; gap:35px; align-items:center; min-height:710px; padding-block:70px 88px; }
  .hero-eyebrow { display:flex; align-items:center; gap:10px; margin-bottom:27px; letter-spacing:.03em; } .eyebrow-line { width:22px; height:2px; background:var(--green); }
  h1 { font-size:clamp(2.8rem,4.25vw,3.7rem); line-height:1.36; letter-spacing:-.045em; font-weight:550; }
  .hero-description { color:var(--muted); max-width:440px; margin-top:25px; line-height:1.9; }
  .hero-actions { display:flex; align-items:center; gap:16px; margin-top:35px; }
  .button { display:inline-flex; justify-content:center; align-items:center; gap:25px; padding:14px 23px; border:1px solid transparent; border-radius:7px; font-weight:500; font-size:.9375rem; transition:background 180ms,transform 180ms,box-shadow 180ms; } .button:hover { transform:translateY(-2px); } .button:active { transform:translateY(0); } .button-primary { background:var(--green); color:white; box-shadow:0 5px 14px #217a5b14; } .button-primary:hover { background:#185f46; box-shadow:0 8px 22px #217a5b25; } .button-text { padding-inline:14px; } .button-text:hover { background:var(--mint); }
  .hero-footnote { display:flex; flex-wrap:wrap; align-items:center; gap:9px; font-size:.75rem; color:var(--muted); margin-top:24px; } .mini-check { color:var(--green); } .footnote-divider { height:10px; width:1px; background:#c9d6ce; margin-inline:2px; }
  .hero-visual { position:relative; padding:30px 0 42px; min-width:0; perspective:1100px; }
  .visual-orbit { position:absolute; width:105%; aspect-ratio:1; border:1px solid #deece2; border-radius:50%; top:-4%; left:1%; background:radial-gradient(ellipse,#e1f2e7a0,transparent 68%); pointer-events:none; } .visual-orbit::after { content:''; position:absolute; inset:9%; border-radius:50%; border:1px dashed #d6e6db; }
  .workbench { position:relative; background:#fff; border:1px solid #dae7de; border-radius:12px; box-shadow:0 30px 70px -30px #234f3933,0 4px 16px #21482f05; transform:rotateY(-2deg) rotateX(2deg); overflow:hidden; }
  .window-bar { min-height:45px; padding:10px 16px; display:flex; gap:18px; align-items:center; background:#fafcfb; border-bottom:1px solid #e9efeb; font-size:.75rem; color:#74867b; } .window-dots { display:flex; gap:5px; } .window-dots i { width:6px; height:6px; border-radius:50%; background:#d2ded6; } .sample-label { margin-left:auto; background:#eef4f0; padding:2px 6px; border-radius:3px; font-size:.75rem; white-space:nowrap; }
  .workbench-body { display:flex; } .mock-sidebar { width:50px; flex-shrink:0; background:#f3f7f4; border-right:1px solid #e9efeb; display:flex; flex-direction:column; align-items:center; padding:17px 6px; gap:17px; color:#859a8e; } .mock-sidebar>span { width:30px; height:30px; display:grid; place-items:center; font-size:1.2rem; } .mock-sidebar .rail-active { color:var(--green); background:#deeee3; border-radius:6px; } .mock-sidebar>span:last-child { margin-top:auto; }
  .mock-main { padding:23px 20px 12px; flex:1; min-width:0; } .mock-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; } .mock-heading h2 { font-size:1rem; font-weight:600; margin-top:4px; } .mock-heading .overline { font-size:.75rem; letter-spacing:.08em; } .quiet-tag { font-size:.75rem; color:#7c8e82; white-space:nowrap; }
  .mock-platforms { display:flex; justify-content:space-between; gap:8px; padding:20px 0; font-size:.75rem; color:#687a70; } .mock-platforms>span { display:flex; align-items:center; gap:6px; white-space:nowrap; } .text-mark { width:21px; height:21px; border-radius:5px; font-size:.75rem; display:inline-grid; place-items:center; font-weight:600; } .pdd { background:#fff0ee; color:#c44c3d; } .taobao { background:#fff2e9; color:#cf722b; } .xianyu { background:#fff8d9; color:#857327; } .jd { background:#fbedef; color:#b95663; }
  .mock-chat { border:1px solid #e2eae4; border-radius:8px; padding:16px; background:linear-gradient(#fff,#fcfdfc); } .mock-chat-head { display:flex; align-items:center; gap:9px; border-bottom:1px solid #eff3f0; padding-bottom:13px; margin-bottom:18px; } .avatar { width:31px; height:31px; background:#f0ede4; color:#8b8169; border-radius:8px; display:grid; place-items:center; font-size:.875rem; flex-shrink:0; } .mock-chat-head strong { display:block; font-size:.875rem; font-weight:550; } .mock-chat-head small { display:block; font-size:.75rem; color:var(--muted); margin-top:1px; } .chat-time { margin-left:auto; font-size:.75rem; color:#93a096; }
  .chat-bubble { font-size:.8125rem; line-height:1.8; padding:11px 13px; border-radius:8px; max-width:90%; } .buyer { background:#f1f4f2; width:fit-content; border-top-left-radius:2px; } .merchant { background:#e5f3e9; margin-left:auto; border-top-right-radius:2px; } .knowledge-match { display:flex; align-items:center; gap:9px; margin:16px 0 13px; padding:11px 13px; border:1px solid #d4e7da; background:#f6fbf7; border-radius:6px; } .knowledge-match strong { display:block; font-size:.8125rem; font-weight:500; } .knowledge-match small { display:block; font-size:.75rem; color:var(--muted); } .knowledge-match>span:last-child { margin-left:auto; color:var(--green); } .match-icon { font-size:1.25rem; color:var(--green); } .chat-status { font-size:.75rem; color:#7d9785; text-align:right; margin-top:10px; } .mock-bottom { display:flex; justify-content:space-between; gap:8px; font-size:.75rem; color:#7a8c7f; margin-top:15px; } .mock-bottom>span:first-child { display:flex; align-items:center; gap:6px; } .status-dot { width:5px; height:5px; border-radius:50%; background:#6bac86; }
  .floating-note { position:absolute; right:-17px; bottom:6px; display:flex; gap:12px; align-items:center; padding:15px 23px 15px 15px; background:#fff; border:1px solid #e0e9e2; border-radius:10px; box-shadow:0 12px 30px #234f3910; } .floating-note strong { display:block; font-size:.875rem; font-weight:500; } .floating-note small { display:block; font-size:.75rem; color:var(--muted); margin-top:3px; } .note-icon { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--mint); color:var(--green); } .visual-caption { position:absolute; bottom:5px; left:15px; font-size:.75rem; color:#8ca395; letter-spacing:.18em; }
  .platform-section { padding:30px 0 54px; border-top:1px solid var(--line); } .platform-intro { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:30px; } .platform-intro p { font-size:.9375rem; color:var(--muted); } .platform-intro strong { color:var(--ink); font-weight:500; } .platform-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; } .platform-item { display:flex; gap:12px; align-items:center; } .platform-mark { width:42px; height:42px; flex-shrink:0; border-radius:10px; display:grid; place-items:center; font-size:1.2rem; font-weight:600; } .platform-item strong { display:block; font-size:1rem; font-weight:550; } .platform-item div>span { display:block; font-size:.75rem; color:var(--muted); margin-top:4px; } .platform-note { font-size:.75rem; color:#7c8c83; margin-top:25px; }
  .product-section { background:#eff6f1; border-block:1px solid #e4ede6; } .section-heading { margin-bottom:45px; } .section-heading h2 { font-size:2.6rem; font-weight:550; line-height:1.4; letter-spacing:-.035em; margin-top:16px; } .section-heading p { margin-top:17px; color:var(--muted); }
  .product-heading { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:40px; } .scroll-hint { font-size:.8125rem; color:var(--muted); display:flex; align-items:center; gap:15px; padding-bottom:6px; } .scroll-hint>span { display:grid; place-items:center; width:34px; height:34px; border:1px solid #cbdacf; border-radius:50%; }
  .story-layout { display:grid; grid-template-columns:.78fr 1.22fr; gap:70px; align-items:start; } .story-copy { min-width:0; } .story-step { padding:50px 0; scroll-margin-top:140px; } .chapter-number { font-size:.75rem; letter-spacing:.12em; color:#758b7b; } .story-step h3 { font-size:2.15rem; font-weight:500; letter-spacing:-.025em; line-height:1.5; margin:17px 0; } .story-step>p { color:var(--muted); line-height:1.9; } .feature-list { list-style:none; padding:0; margin:22px 0; display:grid; gap:9px; font-size:.875rem; } .feature-list li::before { content:'✓'; color:var(--green); margin-right:12px; } .chapter-footnote { display:block; color:#6d8374; font-size:.8125rem; border-left:2px solid #b8d1c0; padding-left:12px; margin-top:26px; }
  .story-visual { align-self:stretch; min-width:0; } .story-sticky { position:sticky; top:116px; } .story-navigation { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin-bottom:17px; border-bottom:1px solid #d4e1d7; } .story-navigation a { font-size:.875rem; padding:13px 4px; text-align:center; color:#6b8173; border-bottom:2px solid transparent; margin-bottom:-1px; transition:color 180ms,border-color 180ms; white-space:nowrap; } .story-navigation a>span { font-size:.75rem; margin-right:4px; opacity:.7; } .story-navigation a[aria-current] { color:var(--green); border-bottom-color:var(--green); font-weight:600; }
  .demo-window { border:1px solid #d7e3d9; border-radius:12px; background:white; box-shadow:0 18px 45px #284c3410; overflow:hidden; } .demo-topbar { padding:14px 20px; min-height:55px; display:flex; justify-content:space-between; align-items:center; gap:10px; border-bottom:1px solid #e6eee8; background:#fbfdfb; font-size:.8125rem; } .demo-topbar>span:first-child { display:flex; gap:8px; align-items:center; } .demo-panel { padding:28px; border-bottom:1px solid var(--line); } .demo-panel:last-child { border-bottom:0; } .demo-title { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:25px; } .demo-title h4 { font-size:1.1rem; font-weight:550; margin-top:5px; } .demo-title .overline { font-size:.75rem; } .demo-badge { font-size:.75rem; padding:4px 9px; background:#eef6f0; color:#518267; border-radius:4px; white-space:nowrap; }
  .inbox-row { display:flex; gap:12px; align-items:center; padding:21px 0; border-bottom:1px solid #e8eee9; } .inbox-row .platform-mark { width:38px; height:38px; border-radius:9px; } .inbox-row strong { font-size:.9375rem; font-weight:500; } .inbox-row p { font-size:.8125rem; color:var(--muted); margin-top:5px; } .row-state { font-size:.75rem; margin-left:auto; white-space:nowrap; color:#6c8a74; background:#f0f6f1; border-radius:4px; padding:3px 7px; }
  .demo-insight { display:flex; align-items:flex-start; gap:12px; background:#f1f8f3; border:1px solid #e3eee5; border-radius:8px; margin-top:25px; padding:17px; } .insight-icon { color:#4b8967; font-size:1.25rem; } .demo-insight strong { font-size:.875rem; font-weight:500; } .demo-insight p { font-size:.8125rem; color:var(--muted); margin-top:4px; }
  .knowledge-product { display:flex; align-items:center; gap:13px; margin-bottom:20px; } .knowledge-symbol { width:43px; height:43px; display:grid; place-items:center; background:#eef5ef; color:#649377; border-radius:8px; font-size:1.4rem; } .knowledge-product strong { font-size:.9375rem; font-weight:500; } .knowledge-product p { font-size:.75rem; color:var(--muted); margin-top:3px; } .source-card,.knowledge-answer { padding:16px 18px; border:1px solid #e0e9e2; border-radius:7px; margin-top:13px; } .source-heading { font-size:.75rem; color:#5c7967; font-weight:500; } .source-card p,.knowledge-answer p { font-size:.875rem; margin:9px 0; line-height:1.9; } .source-card mark { color:var(--ink); background:#e0f0e3; padding:1px 2px; } .source-footer { font-size:.75rem; color:var(--muted); } .knowledge-answer { background:#f4faf5; border-color:#d6e7d9; } [data-panel="1"] .demo-insight { margin-top:16px; }
  .flow-canvas { padding:10px 28px 5px; background-image:radial-gradient(#d7e4d9 .75px,transparent .75px); background-size:15px 15px; } .flow-node { border:1px solid #d8e5db; background:white; padding:14px; border-radius:8px; display:flex; gap:12px; align-items:center; box-shadow:0 3px 8px #294c3505; } .flow-node strong { display:block; font-size:.875rem; font-weight:500; } .flow-node small { display:block; font-size:.75rem; color:var(--muted); margin-top:3px; } .flow-icon { width:31px; height:31px; background:#edf5ef; color:var(--green); display:grid; place-items:center; border-radius:6px; flex-shrink:0; } .node-kind { margin-left:auto; font-size:.75rem; color:var(--muted); } .flow-node-accent { border-color:#8cbd9b; background:#f3faf5; } .flow-line { position:relative; width:1px; height:25px; background:#b7cfbd; margin-inline:auto; } .flow-line::after { content:''; position:absolute; top:0; left:-2px; width:5px; height:8px; border-radius:3px; background:#58a778; } .flow-end { display:flex; gap:20px; justify-content:center; background:#e9f4ed; border:1px solid #d7e8dd; padding:9px; border-radius:6px; font-size:.8125rem; color:#517d62; } .demo-caption { text-align:center; color:var(--muted); font-size:.75rem; margin-top:18px; }
  .order-card { background:#fafcf9; border:1px solid #e0e8df; border-radius:8px; padding:17px; } .order-card-top { display:flex; gap:8px; align-items:center; } .order-card-top strong { font-size:.8125rem; font-weight:500; } .order-card h5 { font-size:1rem; font-weight:500; margin:15px 0 4px; } .order-card p { font-size:.8125rem; color:var(--muted); } .order-card p span { margin-left:15px; } .order-reference { display:block; font-size:.75rem; margin-top:12px; color:#85948a; } .delivery-timeline { list-style:none; padding:0 0 0 8px; margin:23px 0 0; } .delivery-timeline li { display:flex; gap:14px; position:relative; padding-bottom:21px; } .delivery-timeline li:last-child { padding-bottom:0; } .delivery-timeline li:not(:last-child)::after { content:''; position:absolute; width:1px; background:#d2e5d8; top:26px; bottom:0; left:12px; } .delivery-timeline li>span { border:1px solid #cde1d3; background:#f2f8f4; border-radius:50%; height:26px; width:26px; font-size:.8125rem; color:var(--green); display:grid; place-items:center; } .delivery-timeline strong { font-size:.875rem; font-weight:500; display:block; } .delivery-timeline small { font-size:.75rem; color:var(--muted); }
  .demo-toolbar { display:flex; justify-content:space-between; align-items:center; gap:15px; font-size:.8125rem; color:#6a8372; padding:15px 3px; } .demo-toolbar button { font-size:.8125rem; color:var(--green); background:transparent; border:0; padding:5px 7px; border-radius:5px; } .demo-toolbar button:hover { background:#dfeee3; } .demo-toolbar button span { margin-right:5px; }
  .js .story-step { min-height:440px; display:flex; flex-direction:column; justify-content:center; } .js .demo-panel { min-height:495px; border:0; }
  .scenario-tabs { display:flex; gap:8px; margin-bottom:25px; flex-wrap:wrap; } .scenario-tabs button { background:transparent; color:var(--muted); border:1px solid var(--line); padding:11px 23px; font-size:.875rem; border-radius:6px; transition:background 180ms,color 180ms; } .scenario-tabs button[aria-selected="true"] { background:var(--ink); color:#fff; border-color:var(--ink); } .scenario-tabs button:hover { border-color:#9fbdae; }
  .scenario-panel { display:grid; grid-template-columns:1fr 1.05fr; min-height:410px; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:white; margin-bottom:20px; } .scenario-copy { padding:40px; } .scenario-index { font-size:.75rem; letter-spacing:.14em; color:#739682; } .scenario-copy h3 { font-size:1.8rem; line-height:1.5; font-weight:500; letter-spacing:-.025em; margin:16px 0; } .scenario-copy>p { color:var(--muted); line-height:1.9; font-size:.9375rem; } .scenario-copy .scenario-problem { color:var(--ink); margin-bottom:13px; } .scenario-result { border-top:1px solid var(--line); padding-top:20px; margin-top:24px; } .scenario-result span { display:block; font-size:.75rem; color:var(--muted); margin-bottom:7px; } .scenario-result strong { font-size:.9375rem; color:var(--green); font-weight:500; }
  .scenario-illustration { background:#edf5ef; padding:30px; position:relative; isolation:isolate; min-height:380px; } .scenario-illustration>.sample-label { display:inline-block; background:#f9fcf9; color:#6e8777; } .scenario-process { display:flex; align-items:center; justify-content:space-between; gap:8px; position:relative; z-index:1; margin-top:30px; } .scenario-process>div { display:flex; flex-direction:column; align-items:flex-start; gap:6px; } .scenario-process>span { color:#93b69e; } .process-number { width:30px; height:30px; display:grid; place-items:center; border:1px solid #bdD6c5; border-radius:50%; font-size:.8125rem; color:#4b795c; background:#f6fbf7; margin-bottom:6px; } .scenario-process strong { font-size:.875rem; font-weight:500; } .scenario-process small { font-size:.75rem; color:#728978; max-width:90px; } .commerce-art { position:absolute; width:100%; height:auto; right:0; bottom:20px; z-index:-1; opacity:.88; object-fit:contain; } .art-caption { position:absolute; bottom:25px; left:30px; right:20px; font-size:.75rem; color:#718e7c; letter-spacing:.03em; }

  .download-panel { border-radius:18px; background:#173d33; color:white; padding:65px; display:flex; justify-content:space-between; gap:45px; align-items:center; } .download-panel .eyebrow { color:#a5cdb7; } .download-panel h2 { font-size:2.8rem; font-weight:500; line-height:1.4; margin:22px 0 18px; } .download-panel p { color:#b3ccbf; } .download-action { display:flex; flex-direction:column; align-items:flex-start; gap:18px; } .download-platform { font-size:.875rem; color:#c9ded1; letter-spacing:.04em; } .button-unavailable { color:#b8d0c1; background:#315447; border-color:#476757; cursor:not-allowed; } .button-unavailable:hover { transform:none; } .button-light { color:var(--ink); background:#e8f6ef; } .download-action p { font-size:.8125rem; max-width:260px; }
  details { border-bottom:1px solid var(--line); padding:20px 0; } summary { cursor:pointer; font-size:1rem; font-weight:500; } details p { max-width:800px; color:var(--muted); padding:17px 0 2px; line-height:1.9; }
  .footer { border-top:1px solid var(--line); padding-block:30px; display:flex; align-items:center; gap:30px; } .footer p,.footer>span { font-size:.8125rem; color:var(--muted); } .footer>span { margin-left:auto; }
  .wechat-contact { position:fixed; right:18px; top:50%; z-index:20; transform:translateY(-50%); color:var(--ink); }
  .wechat-disclosure { position:relative; padding:0; border:0; }
  .wechat-trigger { display:flex; width:54px; min-height:62px; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:8px; border:1px solid #dce5da; border-radius:10px; background:#fafbf8; color:#647465; box-shadow:0 3px 12px #22412d0a; cursor:pointer; list-style:none; }
  .wechat-trigger::-webkit-details-marker { display:none; }
  .wechat-trigger span { font-size:.6875rem; }
  .wechat-trigger:hover,.wechat-disclosure[open] .wechat-trigger { color:#2f573d; border-color:#a9bba2; background:#f1f5ec; }
  .wechat-panel { position:absolute; right:calc(100% + 12px); top:50%; transform:translateY(-50%); width:228px; padding:16px; border:1px solid #dce5da; border-radius:12px; background:#fff; box-shadow:0 10px 30px #22412d14; text-align:center; }
  /* Bridge the visual gap so moving from the trigger to the QR never collapses it. */
  .wechat-panel::after { content:''; position:absolute; top:0; bottom:0; right:-13px; width:13px; }
  .wechat-panel img { display:block; width:180px; height:auto; margin:12px auto; background:#fff; }
  .wechat-panel strong,.wechat-panel span { display:block; }
  .wechat-panel strong { font-size:.875rem; font-weight:500; color:#2f573d; }
  .wechat-panel span { font-size:.6875rem; color:#647465; }
  #download { padding-bottom:35px; } .getting-started { padding-bottom:25px; } .getting-started ol { padding:0; list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:25px; margin:0; } .getting-started li { position:relative; padding:17px 0; } .getting-started li>span { display:block; color:#90a99a; font-size:.8125rem; margin-bottom:9px; } .getting-started strong { font-size:.9375rem; font-weight:500; } .getting-started li p { color:var(--muted); font-size:.8125rem; margin-top:5px; } .getting-started li:not(:last-child)::after { content:'→'; position:absolute; top:40px; right:10px; color:#b7cabc; } .activation-note { color:var(--muted); font-size:.8125rem; margin-top:18px; }
  .faq-section { display:grid; grid-template-columns:1fr 1.85fr; gap:65px; } .faq-section .section-heading { margin:0; } .faq-list details:first-child { border-top:1px solid var(--line); } .faq-list summary { list-style:none; display:flex; align-items:center; justify-content:space-between; gap:20px; } .faq-list summary::-webkit-details-marker { display:none; } .faq-list summary::after { content:'+'; font-size:1.25rem; color:#6a8c78; } .faq-list details[open] summary::after { content:'−'; }
  .flow-line::after { animation:flow-travel 1800ms ease-in-out infinite; animation-play-state:paused; } .story-sticky.is-in-view .flow-line::after { animation-play-state:running; }
  @keyframes flow-travel { 0% { transform:translateY(0); opacity:0; } 20% { opacity:1; } 80% { opacity:1; } 100% { transform:translateY(19px); opacity:0; } }
}
@layer responsive {
  @media(min-width:1500px) { .hero { gap:55px; } }
  @media(max-width:1150px) { .container { width:calc(100% - 64px); } .hero { grid-template-columns:1fr 1fr; gap:24px; min-height:660px; } h1 { font-size:3rem; } .brand-caption,.brand-divider { display:none; } .mock-main { padding:18px 12px 12px; } .mock-sidebar { width:38px; } .quiet-tag { display:none; } .mock-platforms { flex-wrap:wrap; justify-content:flex-start; gap:12px; } .mock-chat { padding:12px; } .visual-caption { display:none; } .platform-grid { gap:18px; } .platform-item { align-items:flex-start; } .platform-item div>span { max-width:145px; } }
  @media(max-width:850px) { .container { width:calc(100% - 48px); } .nav-shell { min-height:76px; } nav { gap:22px; } .hero { grid-template-columns:1fr; max-width:660px; gap:24px; padding-block:55px 65px; } h1 { font-size:3.5rem; } .hero-description { max-width:520px; } .hero-visual { margin-top:8px; } .workbench { transform:none; } .mock-main { padding:23px 22px 15px; } .mock-sidebar { width:50px; } .mock-platforms { justify-content:space-between; } .platform-grid { grid-template-columns:repeat(2,1fr); gap:25px; } .platform-item div>span { max-width:none; } .section-pad { padding-block:70px; } .section-heading h2 { font-size:2.25rem; } .download-panel { padding:38px; gap:30px; } .download-panel h2 { font-size:2.3rem; } .footer { flex-wrap:wrap; gap:18px; } }
  @media(max-width:600px) { .container { width:calc(100% - 40px); } .brand { font-size:1.1rem; gap:8px; } .brand img { width:32px; height:32px; } .nav-shell { min-height:72px; flex-wrap:wrap; gap:0; } nav { width:100%; gap:18px; padding:0 0 18px; flex-wrap:wrap; font-size:.8125rem; } nav .nav-cta { padding:6px 10px; } .hero { padding-top:40px; gap:17px; } h1 { font-size:2.25rem; line-height:1.43; } .hero-eyebrow { font-size:.75rem; margin-bottom:22px; } .hero-description { font-size:1rem; margin-top:20px; } .hero-actions { gap:4px; margin-top:27px; } .button { padding:12px 17px; gap:15px; } .hero-footnote { gap:7px; font-size:.75rem; } .hero-footnote .footnote-divider:last-of-type { display:none; } .hero-visual { padding:18px 0 49px; } .visual-orbit { width:100%; left:0; top:2%; } .mock-main { padding:15px 11px 10px; } .mock-sidebar { width:32px; padding-inline:3px; } .mock-sidebar img { width:23px; height:23px; } .mock-sidebar>span { width:24px; } .mock-heading h2 { font-size:.875rem; } .mock-platforms { gap:8px; justify-content:flex-start; padding:14px 0; } .text-mark { width:18px; height:18px; } .mock-platforms>span { gap:4px; } .mock-chat { padding:10px; } .mock-chat-head strong { font-size:.8125rem; } .chat-bubble { max-width:98%; padding:9px; } .knowledge-match { padding:9px; gap:7px; } .chat-time { display:none; } .chat-status { font-size:.75rem; text-align:left; } .floating-note { right:6px; bottom:0; padding:12px; } .floating-note strong { font-size:.8125rem; } .mock-bottom>span:last-child { display:none; } .window-bar { gap:9px; padding-inline:11px; } .window-dots { gap:4px; } .platform-intro { display:block; } .platform-intro p { margin-top:9px; } .platform-grid { gap:24px 16px; } .platform-item { gap:9px; } .platform-mark { width:33px; height:33px; font-size:1rem; border-radius:7px; } .platform-item strong { font-size:.9375rem; } .platform-item div>span { line-height:1.7; } .platform-note { font-size:.75rem; } .section-heading h2 { font-size:1.9rem; } .section-pad { padding-block:60px; } .initial-product { padding:24px; } .initial-product h3 { font-size:1.25rem; } .download-panel { padding:30px 25px; flex-direction:column; align-items:stretch; } .download-panel h2 { font-size:2rem; } .footer { gap:13px; } .footer .brand { width:100%; } .footer p { width:100%; } .footer>span { margin-left:0; } .wechat-contact { right:12px; bottom:max(18px,env(safe-area-inset-bottom)); top:auto; transform:none; } .wechat-panel { top:auto; bottom:0; transform:none; } }
  @media(max-width:1150px) { .story-layout { gap:38px; grid-template-columns:.85fr 1.15fr; } .story-step h3 { font-size:1.9rem; } .demo-panel { padding:22px; } .inbox-row .row-state { display:none; } .demo-badge { display:none; } .flow-canvas { padding-inline:10px; } .scenario-copy { padding:30px; } .scenario-illustration { padding:25px; } .scenario-process { gap:5px; } .art-caption { left:25px; } }
  @media(max-width:850px) { .story-layout { display:flex; flex-direction:column; gap:24px; } .story-visual { order:-1; width:100%; } .story-sticky { position:static; } .story-copy { display:grid; grid-template-columns:1fr 1fr; gap:30px; } .story-step,.js .story-step { min-height:0; padding:22px 0; display:block; border-top:1px solid #d4e2d7; } .story-step h3 { font-size:1.6rem; } .story-step p { font-size:.9375rem; } .story-step.is-active { border-top-color:var(--green); } .scroll-hint { display:none; } .demo-panel { padding:28px; } .js .demo-panel { min-height:495px; } .demo-badge { display:inline; } .inbox-row .row-state { display:inline; } .flow-canvas { padding-inline:30px; } .scenario-panel { grid-template-columns:1fr; } .scenario-copy { padding:35px; } .scenario-illustration { min-height:320px; } .commerce-art { width:70%; } .scenario-process { max-width:480px; } .faq-section { grid-template-columns:1fr; gap:20px; } .faq-section h2 br { display:none; } .getting-started ol { gap:17px; } .getting-started li:not(:last-child)::after { right:0; } }
  @media(max-width:600px) { .story-navigation a { font-size:.8125rem; padding:12px 2px; } .story-navigation a>span { font-size:.75rem; margin-right:1px; } .story-copy { grid-template-columns:1fr; gap:8px; } .story-step h3 br { display:none; } .story-step h3 { font-size:1.5rem; } .story-step { scroll-margin-top:90px; } .demo-panel { padding:20px 16px; } .js .demo-panel { min-height:480px; } .demo-topbar { padding:12px; font-size:.75rem; } .demo-topbar .sample-label { font-size:.75rem; } .demo-title h4 { font-size:1rem; } .demo-badge { display:none; } .demo-title { margin-bottom:18px; } .inbox-row { gap:10px; padding-block:19px; } .inbox-row .platform-mark { width:31px; height:31px; font-size:1rem; } .inbox-row .row-state { display:none; } .inbox-row strong { font-size:.875rem; } .inbox-row p { font-size:.8125rem; } .demo-insight { padding:14px; margin-top:24px; } .demo-insight p { font-size:.8125rem; } .knowledge-product { gap:9px; } .knowledge-product strong { font-size:.875rem; } .knowledge-product p { font-size:.75rem; } .source-card,.knowledge-answer { padding:13px; } .flow-canvas { padding-inline:0; } .flow-node { padding:12px 9px; gap:8px; } .node-kind { display:none; } .flow-node small { font-size:.75rem; } .scenario-tabs { gap:7px; } .scenario-tabs button { padding:10px 11px; font-size:.8125rem; flex:1; } .scenario-copy { padding:26px; } .scenario-copy h3 { font-size:1.6rem; } .scenario-illustration { padding:23px; min-height:330px; } .scenario-process { gap:6px; margin-top:25px; } .scenario-process strong { font-size:.8125rem; } .scenario-process small { font-size:.75rem; } .scenario-process>span { display:none; } .commerce-art { width:100%; bottom:25px; } .art-caption { left:23px; font-size:.75rem; } .getting-started ol { grid-template-columns:1fr 1fr; gap:8px 25px; } .getting-started li:not(:last-child)::after { display:none; } .activation-note { font-size:.8125rem; } .faq-section { padding-top:45px; } }
  @media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; } }

  .menu-toggle { min-height:44px; }
  .large-text .nav-shell { flex-wrap:wrap; padding-block:15px; }
  .large-text .hero { grid-template-columns:1fr; max-width:1200px; }
  .large-text .hero-description { max-width:100%; }
  .large-text .hero-visual { max-width:100%; }
  .large-text .visual-orbit { width:100%; left:0; }
  .large-text .floating-note { position:relative; right:auto; bottom:auto; margin-top:15px; width:fit-content; }
  .large-text .visual-caption { position:static; display:block; margin-top:15px; }
  .large-text .workbench { transform:none!important; }
  .large-text .mock-sidebar { width:3.5rem; gap:1rem; }
  .large-text .mock-sidebar>span { width:2.5rem; height:2.5rem; }
  .large-text .text-mark { width:1.5rem; height:1.5rem; flex-shrink:0; }
  .large-text .platform-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .large-text .platform-mark { width:2.3rem; height:2.3rem; }
  .large-text .platform-intro { flex-wrap:wrap; }
  .large-text .story-layout { display:flex; flex-direction:column; gap:30px; }
  .large-text .story-visual { order:-1; width:100%; }
  .large-text .story-sticky { position:static; }
  .large-text .story-copy { display:grid; grid-template-columns:1fr 1fr; gap:30px; }
  .large-text .story-step { min-height:0; display:block; }
  .large-text .scenario-panel { grid-template-columns:1fr; }
  .large-text .scenario-illustration { min-height:24rem; }
  .large-text .scenario-process { max-width:none; }
  .large-text .scenario-process small { max-width:8rem; }

  .large-text .faq-section { grid-template-columns:1fr; gap:30px; }
  .large-text .download-panel { flex-wrap:wrap; }
  .large-text .download-action p { max-width:none; }
  .large-text .getting-started ol { grid-template-columns:1fr 1fr; }
  @media(max-width:850px) {

    .large-text .story-navigation { grid-template-columns:1fr 1fr; }
    .large-text .story-navigation a { white-space:normal; }
    .large-text .hero-actions,.large-text .demo-topbar,.large-text .mock-platforms,.large-text .mock-heading,.large-text .mock-bottom,.large-text .demo-title { flex-wrap:wrap; }
    .large-text .hero h1 { font-size:1.65rem; }
    .large-text .window-bar { flex-wrap:wrap; }
    .large-text .mock-sidebar { display:none; }
    .large-text .hero-eyebrow { font-size:.75rem; letter-spacing:0; }
    .large-text .hero-eyebrow .eyebrow-line { display:none; }
    .large-text .floating-note { padding:14px; }
    .large-text .floating-note .note-icon { display:none; }
    .large-text .inbox-row { flex-wrap:wrap; }
    .large-text .scenario-tabs { flex-direction:column; }
    .large-text .scenario-process { flex-direction:column; align-items:flex-start; }
    .large-text .scenario-process>div { gap:3px; }
    .large-text .scenario-process>span { display:none; }
    .large-text .scenario-illustration { min-height:33rem; }
    .large-text .process-number { width:1.5rem; height:1.5rem; }
    .large-text .knowledge-product { flex-wrap:wrap; }
    .large-text .flow-node { flex-wrap:wrap; }
    .large-text .demo-toolbar { flex-wrap:wrap; }


    .large-text .button { flex-wrap:wrap; }
    .large-text .order-card-top { flex-wrap:wrap; }
    .large-text .order-card .row-state { margin-left:0; }
    .large-text .delivery-timeline li>span { flex-shrink:0; }
  }
}