:root {
  --ink: #08231c;
  --ink-deep: #051812;
  --ink-soft: #10382c;
  --paper: #f3f6ee;
  --paper-2: #eaf0e7;
  --lime: #c7f36b;
  --lime-bright: #d8ff79;
  --mint: #b9f5d3;
  --muted: #8fa99c;
  --text: #17352a;
  --line: rgba(20, 72, 54, .16);
  --line-light: rgba(231, 255, 237, .18);
  --shadow: 0 24px 70px rgba(2, 22, 15, .18);
  --radius: 18px;
  --container: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background: var(--paper);
  font-family: "Inter", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; vertical-align: -.16em; }
.container { width: min(var(--container), calc(100% - 56px)); margin-inline: auto; }
.mono { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; letter-spacing: .11em; text-transform: uppercase; font-size: .7rem; }
.skip-link { position: fixed; z-index: 100; top: 10px; left: 10px; padding: .55rem .9rem; color: var(--ink); background: var(--lime); border-radius: 6px; transform: translateY(-160%); transition: transform .2s; }
.skip-link:focus { transform: translateY(0); }

/* Shared controls */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 50px;
  padding: .75rem 1.25rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 700;
  line-height: 1.2;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.button:hover { transform: translateY(-2px); }
.button:focus-visible, .text-link:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible { outline: 3px solid rgba(199, 243, 107, .8); outline-offset: 3px; }
.button-lime { color: var(--ink); background: var(--lime); box-shadow: 0 9px 25px rgba(112, 155, 72, .2); }
.button-lime:hover { background: var(--lime-bright); box-shadow: 0 13px 30px rgba(112, 155, 72, .31); }
.button-outline { color: inherit; border-color: currentColor; background: transparent; }
.button-outline:hover { color: var(--ink); background: var(--lime); border-color: var(--lime); }
.button-dark { color: var(--lime); background: var(--ink); }
.button-small { min-height: 39px; padding: .55rem 1rem; font-size: .87rem; }
.button-full { width: 100%; }
.button-end { margin-left: auto; }
.text-link { display: inline-flex; align-items: center; gap: .45rem; color: var(--ink); font-weight: 700; border-bottom: 1px solid currentColor; padding-bottom: .16rem; transition: color .2s; }
.text-link:hover { color: #4d8139; }
.eyebrow { display: flex; align-items: center; gap: .75rem; margin: 0 0 1.3rem; color: #5d7e6c; font-size: .73rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow.light { color: var(--mint); }
.section-index { display: inline-grid; width: 28px; height: 28px; place-items: center; color: var(--ink); background: var(--lime); border-radius: 50%; font-size: .7rem; letter-spacing: 0; }
.status-dot { display: inline-block; width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(199, 243, 107, .12); }

/* Header */
.site-header { position: relative; z-index: 20; color: #eef9ee; background: var(--ink); }
.header-inner { display: flex; align-items: center; min-height: 78px; gap: 2rem; }
.brand { display: inline-flex; align-items: center; gap: .7rem; flex: 0 0 auto; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.brand img { width: 36px; height: 36px; }
.brand span { display: inline-flex; flex-direction: column; }
.brand small { margin-top: .2rem; color: var(--muted); font-size: .62rem; font-weight: 500; letter-spacing: .12em; }
.desktop-nav { display: flex; align-items: center; gap: 1.8rem; margin-left: auto; color: #b4cfc0; font-size: .9rem; }
.desktop-nav a, .site-footer a { transition: color .2s; }
.desktop-nav a:hover, .site-footer a:hover { color: var(--lime); }
.header-contact { margin-left: .35rem; }
.menu-toggle { display: none; width: 42px; height: 42px; padding: .65rem; color: inherit; background: transparent; border: 1px solid var(--line-light); border-radius: 8px; }
.menu-toggle span { display: block; width: 100%; height: 2px; margin: 5px 0; background: currentColor; transition: transform .2s; }
.mobile-nav { display: none; }

/* Hero */
.hero { position: relative; isolation: isolate; color: #f0faef; background: var(--ink); overflow: hidden; }
.hero-grid { position: absolute; z-index: -1; inset: 0; opacity: .28; background-image: linear-gradient(rgba(192, 238, 201, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(192, 238, 201, .09) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(to bottom, #000 0%, transparent 90%); }
.hero-grid::after { content: ""; position: absolute; width: 720px; height: 720px; top: -290px; right: -120px; background: radial-gradient(circle, rgba(101, 178, 104, .28), transparent 68%); }
.hero-layout { display: grid; grid-template-columns: .83fr 1.17fr; align-items: center; gap: 4rem; min-height: 650px; padding-block: 5.8rem 4rem; }
.hero-copy { position: relative; z-index: 2; }
.hero h1 { max-width: 600px; margin: 0 0 1.35rem; font-size: clamp(3rem, 6.4vw, 5.7rem); line-height: 1.09; letter-spacing: -.075em; }
.lime-text { color: var(--lime); }
.hero-description { max-width: 480px; margin: 0 0 2rem; color: #b7cec1; font-size: 1.08rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.5rem; }
.hero-meta { display: flex; align-items: center; gap: .85rem; color: #8da99b; font-size: .78rem; }
.hero-meta .icon { color: var(--lime); margin-right: .25rem; }
.hero-meta i { width: 4px; height: 4px; border-radius: 50%; background: #5e8372; }
.hero-visual { position: relative; min-width: 0; padding: 2.1rem 0 2.2rem; }
.visual-heading { display: flex; align-items: center; justify-content: space-between; margin: 0 0 .9rem; padding-inline: 1.2rem; color: #7c9f8e; }
.live-label { display: inline-flex; align-items: center; gap: .55rem; color: var(--lime); font-size: .7rem; }
.product-window { position: relative; z-index: 2; margin: 0 auto; width: min(100%, 610px); padding: .55rem; border: 1px solid rgba(206, 248, 201, .25); border-radius: 15px; background: rgba(11, 50, 37, .8); box-shadow: 0 30px 80px rgba(0, 0, 0, .32); transform: rotate(1.4deg); }
.window-toolbar, .window-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem .75rem .85rem; color: #a3c1ae; font-size: .67rem; }
.window-toolbar .icon { color: var(--lime); }
.window-dots { display: flex; gap: 5px; }
.window-dots i { display: block; width: 7px; height: 7px; border-radius: 50%; background: #769987; }
.window-dots i:first-child { background: #b3d47c; }
.hero-screen { width: 100%; aspect-ratio: 1.6; object-fit: cover; border: 1px solid rgba(213, 255, 210, .22); border-radius: 7px; background: #0e3026; }
.window-footer { padding: .72rem .5rem .15rem; color: #80a28f; }
.window-footer .status-dot { width: 6px; height: 6px; margin-right: .3rem; }
.orbit { position: absolute; z-index: 0; border: 1px solid rgba(183, 238, 177, .18); border-radius: 50%; pointer-events: none; }
.orbit-one { width: 680px; height: 350px; top: 100px; left: 25px; transform: rotate(-24deg); }
.orbit-two { width: 690px; height: 430px; top: 15px; left: 18px; transform: rotate(29deg); border-color: rgba(183, 238, 177, .11); }
.floating-note { position: absolute; z-index: 3; right: -1.3rem; bottom: 2.7rem; display: flex; align-items: center; gap: .7rem; width: 220px; padding: .8rem .95rem; border: 1px solid rgba(219, 255, 210, .25); border-radius: 10px; color: #ddf0dd; background: rgba(10, 42, 31, .94); box-shadow: 0 15px 30px rgba(0, 0, 0, .25); font-size: .73rem; }
.floating-note strong, .floating-note span { display: block; }
.floating-note span { margin-top: .17rem; color: #92b6a0; line-height: 1.35; }
.note-icon { display: grid; width: 27px; height: 27px; place-items: center; flex: 0 0 auto; color: var(--ink); background: var(--lime); border-radius: 7px; }
.note-icon .icon { width: 15px; }
.visual-caption { display: flex; align-items: center; gap: .55rem; margin-top: 1.1rem; color: #668575; font-size: .69rem; }
.tiny-line { width: 33px; height: 1px; background: var(--lime); }
.visual-caption .mono { margin-left: auto; color: #809e8f; }
.capability-strip { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-light); color: #a8c4b3; }
.capability-strip span { display: flex; align-items: center; justify-content: center; gap: .55rem; min-height: 76px; border-right: 1px solid var(--line-light); font-size: .82rem; }
.capability-strip span:first-child { border-left: 1px solid var(--line-light); }
.capability-strip .icon { color: var(--lime); }

/* Light sections */
.section { padding-block: 7rem; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 3rem; margin-bottom: 3rem; }
.section-heading h2 { max-width: 640px; margin: 0; color: var(--ink); font-size: clamp(2.3rem, 4.5vw, 4.2rem); letter-spacing: -.065em; line-height: 1.13; }
.section-heading > p { max-width: 330px; margin: 0 0 .35rem; color: #678273; font-size: .94rem; }
.feature-section { background: var(--paper); }
.feature-tabs { display: grid; grid-template-columns: repeat(4, 1fr); margin-bottom: 1.1rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.feature-tabs button { display: flex; align-items: center; gap: .7rem; min-width: 0; padding: 1.1rem .8rem; color: #799487; background: transparent; border: 0; border-right: 1px solid var(--line); text-align: left; font-weight: 700; transition: color .2s, background .2s; }
.feature-tabs button:first-child { border-left: 1px solid var(--line); }
.feature-tabs button span { color: #91a99a; font: .69rem "SFMono-Regular", Consolas, monospace; }
.feature-tabs button .icon { margin-left: auto; }
.feature-tabs button:hover, .feature-tabs button[aria-selected="true"] { color: var(--ink); background: #e9f2df; }
.feature-tabs button[aria-selected="true"] .icon { color: #5c9c3d; }
.feature-panel { display: grid; grid-template-columns: .81fr 1.19fr; gap: 4rem; min-height: 475px; padding: 3.2rem 3.5rem; border-radius: var(--radius); background: #e9f0e6; }
.feature-content { align-self: center; }
.feature-kicker { display: block; margin-bottom: 1rem; color: #679273; font-size: .75rem; font-weight: 800; letter-spacing: .12em; }
.feature-content h3 { margin: 0 0 1.15rem; color: var(--ink); font-size: clamp(2rem, 3.4vw, 3.1rem); line-height: 1.2; letter-spacing: -.06em; }
.feature-content p { max-width: 510px; margin: 0 0 1.25rem; color: #668070; font-size: .94rem; }
.check-list { display: grid; gap: .55rem; margin: 1.35rem 0 1.7rem; padding: 0; list-style: none; color: #315745; font-size: .86rem; }
.check-list li { display: flex; align-items: baseline; gap: .6rem; }
.check-list li::before { content: "✓"; color: #5c9c3d; font-weight: 900; }
.fine-print { color: #7f9789 !important; font-size: .75rem !important; }
.feature-media { align-self: center; min-width: 0; margin: 0; }
.media-topline { display: flex; align-items: center; gap: .4rem; margin: 0 0 .6rem; color: #6b8e79; font: .67rem "SFMono-Regular", Consolas, monospace; }
.media-topline > span:last-child { margin-left: auto; color: #91a998; }
.feature-media img { width: 100%; max-height: 370px; object-fit: contain; object-position: center; border: 1px solid rgba(33, 79, 51, .16); border-radius: 9px; background: #d8e2d7; box-shadow: 0 14px 35px rgba(48, 80, 50, .1); }
.feature-media figcaption { margin-top: .75rem; color: #627b6c; font-size: .78rem; }
.feature-media figcaption span { float: right; color: #93a99a; }
.ai-demo { align-self: center; display: grid; grid-template-columns: 1fr 30px 1.06fr; gap: .72rem; align-items: center; min-width: 0; padding: 1.3rem; border: 1px solid rgba(41, 86, 57, .15); border-radius: 13px; background: #dfeadd; }
.demo-label { grid-column: 1 / -1; display: flex; align-items: center; gap: .4rem; color: #50765e; font-size: .7rem; font-weight: 800; letter-spacing: .1em; }
.demo-label .icon { color: #5d9e40; }
.demo-label span { margin-left: auto; color: #91a593; font: .65rem "SFMono-Regular", Consolas, monospace; font-weight: 400; }
.ai-brief, .ai-plan { border-radius: 9px; background: #f5f8f0; }
.ai-brief { display: grid; gap: .75rem; padding: 1.1rem; }
.ai-brief > span { color: #779181; font-size: .7rem; }
.ai-brief strong { color: var(--ink); font-size: .93rem; line-height: 1.45; }
.ai-brief > div { display: flex; flex-wrap: wrap; gap: .4rem; }
.ai-brief > div span { padding: .3rem .42rem; color: #66816f; background: #e3eee0; border-radius: 4px; font-size: .65rem; }
.flow-connector { color: #6c9948; text-align: center; font-size: 1.4rem; }
.ai-plan { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; padding: .75rem; }
.ai-plan:last-child { margin-bottom: 0; }
.step-badge { display: grid; width: 25px; height: 25px; place-items: center; flex: 0 0 auto; color: var(--ink); background: var(--lime); border-radius: 50%; font: .66rem "SFMono-Regular", Consolas, monospace; }
.ai-plan strong, .ai-plan small { display: block; }
.ai-plan strong { color: var(--ink); font-size: .78rem; }
.ai-plan small { margin-top: .12rem; color: #7a9482; font-size: .65rem; line-height: 1.4; }
.ai-plan > .icon { width: 17px; margin-left: auto; color: #5b9643; }
.feature-bottom { display: flex; align-items: center; gap: 1.4rem; margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--line); color: #769182; font-size: .78rem; }
.feature-bottom > div { display: flex; flex-wrap: wrap; gap: .45rem; }
.feature-bottom > div span { padding: .4rem .62rem; color: #567363; background: #e5ede1; border-radius: 5px; }
.feature-bottom .text-link { margin-left: auto; color: #578344; white-space: nowrap; }

/* Workflow */
.workflow-section { padding-top: 2rem; background: #e8efe3; }
.workflow-section .section-heading { margin-bottom: 2.2rem; }
.muted-heading { color: #8ba091; }
.workflow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.workflow li { min-height: 230px; padding: 1.65rem 1.3rem 1.2rem; border-right: 1px solid var(--line); }
.workflow li:first-child { border-left: 1px solid var(--line); }
.workflow-number { display: flex; align-items: center; justify-content: space-between; color: #77a064; font: .75rem "SFMono-Regular", Consolas, monospace; }
.workflow-number .icon { color: #5b9344; }
.workflow h3 { margin: 2rem 0 .55rem; color: var(--ink); font-size: 1.25rem; letter-spacing: -.04em; }
.workflow p { margin: 0; color: #6b8274; font-size: .82rem; line-height: 1.7; }

/* Download and contact */
.download-section { color: #eaf8e9; background: var(--ink); }
.download-section .section-heading h2 { color: #f0faef; }
.download-section .section-heading > p { color: #93b2a0; }
.download-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.download-card, .contact-card { min-width: 0; padding: 2.1rem; border: 1px solid var(--line-light); border-radius: var(--radius); }
.download-card { color: #eaf8e9; background: #0b3024; }
.contact-card { color: var(--ink); background: var(--lime); border-color: transparent; }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: 2rem; }
.system-icon, .contact-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 9px; }
.system-icon { color: var(--ink); background: var(--lime); }
.contact-icon { color: var(--lime); background: var(--ink); }
.system-icon .icon, .contact-icon .icon { width: 22px; height: 22px; }
.release-tag { color: #91b29d; font-size: .67rem; }
.download-card h3, .contact-card h3 { margin: 0 0 .35rem; font-size: 2rem; letter-spacing: -.06em; line-height: 1.15; }
.download-card h3 span { display: block; color: #9bc5a6; font-size: .95rem; font-weight: 500; letter-spacing: 0; }
.release-version { margin: 0 0 .9rem; color: var(--lime); font: 800 3rem "SFMono-Regular", Consolas, monospace; line-height: 1; letter-spacing: -.09em; }
.release-version span { font-size: 1.05rem; letter-spacing: -.02em; }
.download-description { margin: 0 0 1.2rem; color: #a6c5af; font-size: .78rem; }
.download-note { margin: .85rem 0 1.3rem; color: #829f8e; font-size: .74rem; line-height: 1.6; }
.download-benefits { display: flex; flex-wrap: wrap; gap: .7rem 1.15rem; color: #b7d5be; font-size: .73rem; }
.download-benefits .icon { color: var(--lime); width: 14px; }
.checksum { margin-top: 1.5rem; border-top: 1px solid var(--line-light); color: #a5c3ae; font-size: .7rem; }
.checksum summary { padding-top: .8rem; color: #bbd6c0; cursor: pointer; list-style: none; }
.checksum summary::-webkit-details-marker { display: none; }
.checksum summary span { float: right; color: var(--lime); }
.checksum > div { overflow-wrap: anywhere; }
.checksum p { margin: .45rem 0; }
.checksum code { display: block; padding: .65rem; color: #e0f5db; background: #071f18; border-radius: 5px; font: .64rem "SFMono-Regular", Consolas, monospace; line-height: 1.5; }
.release-notes { margin-top: 1.5rem; border-top: 1px solid var(--line-light); color: #a5c3ae; font-size: .72rem; }
.release-notes summary { padding-top: .8rem; color: #bbd6c0; cursor: pointer; list-style: none; }
.release-notes summary::-webkit-details-marker { display: none; }
.release-notes summary span { float: right; color: var(--lime); }
.release-notes ul { margin: .65rem 0 .2rem 1.1rem; padding: 0; }
.release-notes li { margin: .38rem 0; }
.contact-card .card-top { color: #51755b; }
.contact-card .mono { color: #53785c; }
.contact-card h3 { color: var(--ink); }
.contact-card > p { color: #52735c; font-size: .84rem; }
.wechat-label { display: block; margin: 1.7rem 0 .45rem; color: #54765d; font-size: .72rem; font-weight: 700; }
.wechat-field { display: flex; min-height: 53px; border: 1px solid rgba(8, 35, 28, .28); border-radius: 8px; overflow: hidden; background: rgba(255, 255, 255, .25); }
.wechat-field input { min-width: 0; width: 100%; padding: 0 1rem; color: var(--ink); background: transparent; border: 0; outline: 0; font: 700 1rem "SFMono-Regular", Consolas, monospace; }
.wechat-field button { display: inline-flex; align-items: center; gap: .35rem; padding: 0 .95rem; color: var(--lime); background: var(--ink); border: 0; font-size: .76rem; font-weight: 700; }
.wechat-field button:hover { color: var(--ink); background: #b6e659; }
.wechat-help { margin-top: .62rem !important; color: #6d8a72 !important; font-size: .71rem !important; }
.contact-bottom { display: flex; align-items: center; gap: .5rem; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid rgba(8, 35, 28, .18); color: #56755d; font-size: .72rem; }
.contact-bottom .status-dot { background: #5e9942; box-shadow: 0 0 0 4px rgba(94, 153, 66, .12); }
.contact-card .fine-print { color: #668169 !important; }

/* FAQ, closing and footer */
.faq-section { background: var(--paper); }
.faq-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: 5rem; }
.faq-layout h2 { margin: 0; color: var(--ink); font-size: clamp(2.6rem, 4vw, 4.2rem); letter-spacing: -.07em; line-height: 1.1; }
.faq-intro { margin: 1.3rem 0; color: #6a8373; font-size: .84rem; }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.3rem 0; color: var(--ink); cursor: pointer; font-weight: 700; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { color: #5f9544; font-size: 1.3rem; transition: transform .2s; }
.faq-list details[open] summary span { transform: rotate(45deg); }
.faq-list details p { max-width: 720px; margin: -.45rem 2rem 1.35rem 0; color: #698073; font-size: .84rem; }
.closing { padding-block: 3.7rem; color: var(--ink); background: var(--lime); }
.closing .container { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.closing span { font-size: 1.15rem; font-weight: 800; }
.closing p { margin: .25rem 0 0; color: #587346; font-size: .84rem; }
.site-footer { color: #a2bdab; background: var(--ink-deep); }
.footer-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; padding-block: 2.9rem; }
.footer-top > div { display: flex; flex-wrap: wrap; gap: 1.6rem; color: #8fae9b; font-size: .78rem; }
.footer-bottom { display: flex; justify-content: space-between; gap: 1rem; padding-block: 1.1rem 1.4rem; border-top: 1px solid var(--line-light); color: #658475; font-size: .67rem; }
.footer-bottom a { color: #a2bdab; }
.toast { position: fixed; z-index: 70; left: 50%; bottom: 25px; max-width: min(420px, calc(100% - 32px)); padding: .8rem 1.1rem; color: #eff9ec; background: #092b20; border: 1px solid rgba(199, 243, 107, .4); border-radius: 9px; box-shadow: 0 12px 30px rgba(0, 0, 0, .22); transform: translateX(-50%); font-size: .82rem; }
.toast[hidden] { display: none; }
.poster-dialog { width: min(94vw, 760px); max-height: 92vh; padding: 1.1rem; color: var(--text); background: var(--paper); border: 0; border-radius: 14px; box-shadow: var(--shadow); }
.poster-dialog::backdrop { background: rgba(1, 13, 9, .78); backdrop-filter: blur(4px); }
.poster-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .85rem; }
.poster-heading h2 { margin: 0; color: var(--ink); font-size: 1.2rem; }
.poster-heading p { margin: .2rem 0 0; color: #6b8374; font-size: .75rem; }
.poster-heading button { width: 34px; height: 34px; color: #5d7c69; background: transparent; border: 1px solid var(--line); border-radius: 50%; font-size: 1.2rem; line-height: 1; }
.poster-dialog > img { max-height: calc(92vh - 100px); width: 100%; object-fit: contain; object-position: top center; overflow: auto; border-radius: 7px; }
.noscript-note { position: fixed; z-index: 80; bottom: 0; left: 0; width: 100%; padding: .75rem 1rem; color: var(--ink); background: var(--lime); text-align: center; font-size: .8rem; }

@media (max-width: 1020px) {
  .header-inner { gap: 1rem; }
  .desktop-nav { gap: 1rem; }
  .hero-layout { grid-template-columns: 1fr; gap: 1rem; padding-top: 4.6rem; }
  .hero-copy { max-width: 760px; }
  .hero-visual { width: min(100%, 700px); margin: 0 auto; }
  .feature-panel { gap: 2.2rem; padding-inline: 2.1rem; }
  .faq-layout { gap: 3rem; }
}

@media (max-width: 760px) {
  .container { width: min(var(--container), calc(100% - 36px)); }
  .desktop-nav, .header-contact { display: none; }
  .menu-toggle { display: block; margin-left: auto; }
  .mobile-nav { position: absolute; left: 0; right: 0; display: grid; width: 100%; padding: .4rem 18px 1rem; color: #d9edda; background: var(--ink); border-top: 1px solid var(--line-light); box-shadow: 0 15px 20px rgba(0, 0, 0, .18); }
  .mobile-nav[hidden] { display: none; }
  .mobile-nav a { padding: .72rem 0; border-bottom: 1px solid var(--line-light); font-size: .9rem; }
  .hero-layout { min-height: auto; padding-block: 4rem 2.8rem; }
  .hero h1 { font-size: clamp(2.7rem, 13vw, 4.3rem); }
  .hero-description { font-size: .96rem; }
  .hero-meta { flex-wrap: wrap; }
  .visual-heading { padding-inline: .3rem; }
  .product-window { transform: none; }
  .floating-note { right: .4rem; bottom: 1.5rem; width: auto; max-width: 200px; }
  .orbit { display: none; }
  .capability-strip { grid-template-columns: repeat(2, 1fr); }
  .capability-strip span { min-height: 60px; padding: .4rem; border-bottom: 1px solid var(--line-light); font-size: .72rem; text-align: center; }
  .capability-strip span:nth-child(odd) { border-left: 1px solid var(--line-light); }
  .section { padding-block: 4.7rem; }
  .section-heading { display: block; margin-bottom: 2rem; }
  .section-heading > p { margin-top: 1.1rem; }
  .feature-tabs { grid-template-columns: repeat(2, 1fr); }
  .feature-tabs button:nth-child(3), .feature-tabs button:nth-child(4) { border-top: 1px solid var(--line); }
  .feature-panel { display: block; min-height: 0; padding: 1.8rem 1.2rem; }
  .feature-media, .ai-demo { margin-top: 2.4rem; }
  .feature-media figcaption span { float: none; display: block; margin-top: .2rem; }
  .feature-bottom { display: block; }
  .feature-bottom > div { margin: .8rem 0 1rem; }
  .feature-bottom .text-link { margin-left: 0; }
  .workflow { grid-template-columns: repeat(2, 1fr); }
  .workflow li:nth-child(3), .workflow li:nth-child(4) { border-top: 1px solid var(--line); }
  .download-grid, .faq-layout { grid-template-columns: 1fr; gap: 1rem; }
  .download-card, .contact-card { padding: 1.45rem; }
  .faq-layout { gap: 2.4rem; }
  .closing .container, .footer-top, .footer-bottom { display: block; }
  .closing .button { margin-top: 1.25rem; }
  .footer-top > div { margin-top: 1.5rem; }
  .footer-bottom > * { display: block; margin-top: .5rem; }
}

@media (max-width: 460px) {
  .hero-actions { display: grid; }
  .hero-actions .button { width: 100%; }
  .visual-heading { display: block; }
  .live-label { display: flex; margin-top: .5rem; }
  .window-toolbar, .window-footer { font-size: .57rem; }
  .floating-note { position: relative; right: auto; bottom: auto; width: fit-content; max-width: 100%; margin: .75rem 0 0 auto; }
  .ai-demo { grid-template-columns: 1fr; }
  .flow-connector { transform: rotate(90deg); }
  .wechat-field button { padding-inline: .7rem; }
  .workflow { display: block; }
  .workflow li, .workflow li:nth-child(3), .workflow li:nth-child(4) { min-height: 0; border-top: 0; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
  .workflow li:last-child { border-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}