:root {
  color-scheme: light;
  --ink: #20272b;
  --muted: #596970;
  --green: #087f83;
  --green-dark: #06666c;
  --gold: #ad803c;
  --line: #dbe4e8;
  --paper: #f5f8fa;
  --radius: 8px;
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", Arial, sans-serif;
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; color: var(--ink); background: #fff; line-height: 1.75; letter-spacing: 0; }
body.nav-open { overflow: hidden; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-weight: 700; text-wrap: balance; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
button, summary, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
button:disabled { cursor: wait; }
:focus-visible { outline: 3px solid #a57c36; outline-offset: 5px; }
[hidden] { display: none !important; }
.shell { width: min(1224px, calc(100% - 96px)); margin-inline: auto; }
.section { padding-block: 82px; }
.eyebrow { display: flex; align-items: center; gap: 9px; color: var(--green-dark); font-size: 12px; font-weight: 600; }
.status-dot { display: inline-block; flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.skip-link { position: fixed; top: -100px; left: 20px; z-index: 100; padding: 10px 18px; color: #fff; background: var(--green); }
.skip-link:focus { top: 12px; }
.site-header { position: sticky; top: 0; z-index: 40; height: 84px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .94); }
@supports (backdrop-filter: blur(16px)) { .site-header { backdrop-filter: blur(16px); } }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; width: min(1344px, calc(100% - 72px)); height: 100%; margin: auto; }
.brand { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; line-height: 1.25; }
.brand img { width: 172px; height: auto; aspect-ratio: 520 / 128; }
.brand span { margin-top: -1px; font-size: 11px; font-weight: 600; }
.site-nav { display: flex; align-items: center; gap: 30px; font-size: 13px; }
.site-nav > a:not(.nav-contact) { padding-block: 12px; }
.site-nav a:hover { color: var(--green); }
.nav-contact { display: inline-flex; align-items: center; gap: 24px; padding: 10px 17px; border: 1px solid var(--green); border-radius: 4px; background: var(--green); color: #fff; transition: background .18s ease; }
.nav-contact > img { filter: invert(1); }
.site-nav .nav-contact:hover { background: var(--green-dark); color: #fff; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 42px; height: 42px; padding: 0; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.nav-toggle { display: none; }
.close-icon { display: none; }
.nav-toggle[aria-expanded="true"] .close-icon { display: block; }
.nav-toggle[aria-expanded="true"] .menu-icon { display: none; }
.hero { position: relative; isolation: isolate; height: 594px; background: #edf5fc; }
.hero-scene { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: right center; mix-blend-mode: multiply; filter: contrast(1.07) saturate(1.16); }
.hero-inner { position: relative; display: flex; align-items: center; height: 100%; }
.hero-copy { width: 48%; max-width: 550px; padding-bottom: 12px; }
.hero-copy .eyebrow { margin-bottom: 19px; }
.hero-copy .status-dot { background: var(--gold); }
h1 { font-size: 64px; line-height: 1.25; }
.hero-statement { margin-top: 14px; font-size: 26px; font-weight: 600; line-height: 1.5; }
.hero-statement > span { color: #08757b; border-bottom: 2px solid #c59d5b; padding-bottom: 5px; white-space: nowrap; }
.hero-description { max-width: 410px; margin-top: 22px; color: #56615f; font-size: 15px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 30px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 24px; min-height: 48px; padding: 11px 20px; border: 1px solid transparent; border-radius: 4px; font-size: 14px; font-weight: 600; transition: background .18s ease, border-color .18s ease; }
.button-primary { color: #fff; background: var(--green); }
.button-primary > img { filter: invert(1); }
.button-primary:hover { background: var(--green-dark); }
.text-link { display: inline-flex; align-items: center; justify-content: flex-start; gap: 13px; width: fit-content; min-height: 28px; padding: 2px 0; border: 0; border-bottom: 1px solid transparent; background: none; color: inherit; font-size: 13px; font-weight: 600; line-height: 1.7; }
.text-link:hover { border-bottom-color: currentColor; }
.hero-caption { position: absolute; bottom: 26px; right: 0; padding-left: 10px; border-left: 2px solid var(--gold); color: #56615f; font-size: 11px; }
.service-index { border-bottom: 1px solid var(--line); background: #fff; }
.service-index-inner { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.service-index a { display: flex; justify-content: center; align-items: center; gap: 17px; padding-block: 20px; border-right: 1px solid var(--line); font-size: 13px; }
.service-index a:first-child { border-left: 1px solid var(--line); }
.service-index a:hover { background: var(--paper); }
.service-index a span { color: #8d662f; font: 11px/1.5 Consolas, monospace; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; margin-bottom: 38px; }
h2 { font-size: 36px; line-height: 1.5; }
.section-heading .eyebrow { margin-bottom: 13px; }
.section-heading > p { max-width: 350px; padding-bottom: 5px; color: var(--muted); font-size: 14px; }
.product-entry { padding-block: 36px; border-bottom: 1px solid var(--line); background: var(--paper); }
.product-entry-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: 24px; }
.product-entry-heading h2 { font-size: 24px; }
.product-entry-heading .text-link { color: var(--green-dark); }
.product-entry-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.product-entry-item { display: flex; align-items: center; gap: 20px; min-width: 0; padding-right: 32px; }
.product-entry-item + .product-entry-item { padding-right: 0; padding-left: 32px; border-left: 1px solid var(--line); }
.product-entry-icon { flex: 0 0 28px; }
.product-entry-copy { min-width: 0; }
.product-entry-copy h3 { font-size: 18px; }
.product-entry-copy p { margin-top: 3px; color: var(--muted); font-size: 12px; }
.product-entry-copy .secondary-link { display: inline-block; margin-top: 6px; color: var(--green-dark); font-size: 12px; text-decoration: underline; text-underline-offset: 4px; }
.product-entry-item .button { flex-shrink: 0; gap: 12px; margin-left: auto; font-size: 13px; }
.product-entry-status { flex-shrink: 0; margin-left: auto; color: #6b5838; font-size: 13px; }
.offer-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
.offer { position: relative; min-width: 0; padding: 30px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: border-color .2s ease; }
.offer:hover { border-color: #75aaa9; }
.offer h3 { margin-top: 18px; font-size: 24px; line-height: 1.5; }
.offer p { margin-top: 12px; color: var(--muted); font-size: 13px; }
.offer-label { color: #56685e; font-size: 10px; font-weight: 600; line-height: 1.6; }
.offer-top { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.offer .text-link { margin-top: 23px; }
.offer-crm { display: flex; flex-direction: column; grid-column: span 7; grid-row: span 2; padding: 0; background: #e5efff; border-color: #c8d9f1; }
.offer-crm .offer-label { color: #365782; }
.offer-crm .status-dot { background: #4777bc; }
.offer-body { padding: 30px 34px 0; }
.offer-body .offer-label { display: flex; align-items: center; gap: 8px; }
.offer-crm h3 { margin-top: 16px; font-size: 32px; }
.offer-crm .offer-lede { margin-top: 5px; color: var(--ink); font-size: 17px; }
.offer-crm .offer-body > p:not(.offer-lede) { max-width: 460px; }
.offer-actions { display: flex; align-items: baseline; flex-wrap: wrap; gap: 24px; color: #24548f; }
.offer-actions .secondary-link { color: var(--muted); font-size: 12px; text-decoration: underline; text-underline-offset: 4px; }
.crm-preview { margin: 24px 26px 0; }
.crm-preview > a { position: relative; display: block; aspect-ratio: 16 / 8.2; overflow: hidden; border: 1px solid #cbdcf1; border-radius: 4px; background: #fff; }
.crm-preview .crm-screen { width: 100%; height: auto; aspect-ratio: 1440 / 1000; }
.preview-expand { position: absolute; bottom: 12px; right: 12px; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #bed4ef; border-radius: 4px; background: #fff; box-shadow: 0 2px 8px #24466912; }
.crm-preview > a:hover .preview-expand { background: #deedf9; }
.crm-preview figcaption { padding-block: 9px 13px; color: #52616b; font-size: 10px; }
.offer-software { grid-column: span 5; background: #daf0e6; border-color: #c1dfd2; }
.offer-software .offer-label { color: #345b4c; }
.offer-software p { max-width: 360px; color: #3e5b50; }
.offer-software h3 { font-size: 26px; }
.offer-software, .offer-ai { display: flex; flex-direction: column; align-items: flex-start; }
.offer-software .offer-top, .offer-ai .offer-top { width: 100%; }
.offer-software .text-link, .offer-ai .text-link { margin-top: auto; padding-top: 20px; }
.offer-ai { grid-column: span 5; color: #fff; background: #232b30; border-color: #232b30; }
.offer-ai .offer-label { color: #95e4d7; }
.offer-ai p { color: #ccd8db; }
.offer-ai .text-link { color: #a2eee0; }
.offer-ai h3 { font-size: 25px; }
.light-icon { filter: invert(1); }
.offer-hardware, .offer-web, .offer-erp { grid-column: span 4; min-height: 420px; }
.offer-hardware { background: #fbf5e9; border-color: #e9ddc8; }
.offer-hardware .offer-label { color: #735d38; }
.offer-hardware > p { max-width: 265px; }
.hardware-image { width: 100%; height: 212px; margin-top: 16px; object-fit: cover; object-position: 50% 56%; mix-blend-mode: multiply; }
.offer-web { background: #f5f8fb; }
.offer-web h3 { font-size: 23px; }
.web-image { width: calc(100% + 60px); max-width: none; height: 192px; margin: 20px -30px -30px; object-fit: cover; object-position: 50% 58%; mix-blend-mode: multiply; }
.card-action { position: absolute; z-index: 1; right: 19px; bottom: 19px; border-color: #c0d6d7; box-shadow: 0 3px 12px #1528210a; }
.card-action:hover { background: #d6f0ee; }
.offer-erp { display: flex; flex-direction: column; align-items: flex-start; background: #f4f6f7; }
.offer-erp .offer-top { width: 100%; }
.erp-content { margin-top: 34px; }
.coming-label { display: inline-block; padding-left: 9px; border-left: 2px solid var(--gold); color: #8a6b37; font-size: 12px; }
.offer-erp h3 { margin-top: 16px; font-size: 27px; }
.offer-erp .text-link { margin-top: auto; padding-top: 24px; }
.directions { background: var(--paper); border-block: 1px solid var(--line); }
.crm-film { margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--line); }
.film-heading { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 12px 24px; margin-bottom: 24px; }
.film-heading h3 { margin-top: 10px; font-size: 28px; line-height: 1.5; }
.film-heading > span { flex-shrink: 0; color: var(--muted); font-size: 12px; }
.film-player { position: relative; aspect-ratio: 16 / 9; }
.film-player.has-cover video { visibility: hidden; }
.film-cover { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #f5f8fa; }
.film-poster { width: 100%; height: 100%; object-fit: cover; }
.film-cover-play { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 60px; height: 60px; transform: translate(-50%, -50%); border: 1px solid #fff; border-radius: 50%; background: var(--green-dark); }
.film-cover-play > img { filter: invert(1); margin-left: 3px; }
.film-cover:hover .film-cover-play { background: var(--green); }
.crm-film video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #f5f8fa; border: 1px solid var(--line); border-radius: 8px; }
.film-chapters { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 16px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.film-chapters button { min-width: 0; min-height: 74px; padding: 12px; border: 0; border-right: 1px solid var(--line); background: #fff; color: var(--ink); font-size: 13px; text-align: left; }
.film-chapters button:last-child { border-right: 0; }
.film-chapters button span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 10px; }
.film-chapters button:hover { background: #edf5f5; }
.film-chapters button[aria-current="step"] { background: var(--green-dark); color: #fff; }
.film-chapters button[aria-current="step"] span { color: #c9eae7; }
.film-chapters button:focus-visible { position: relative; outline-offset: -4px; }
.film-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; margin-top: 16px; color: var(--muted); font-size: 11px; }
.film-meta a { display: inline-flex; align-items: center; gap: 7px; color: var(--green-dark); text-decoration: underline; text-underline-offset: 4px; }
.film-status { margin-top: 8px; color: var(--muted); font-size: 11px; }
.film-status:empty { display: none; }
.film-transcript { margin-top: 20px; border-top: 1px solid var(--line); }
.film-transcript summary { font-size: 13px; padding-block: 16px; }
.film-transcript ol { margin: 0; padding: 0 0 20px 24px; color: var(--muted); font-size: 13px; line-height: 2; }
.directions-layout { display: grid; grid-template-columns: .9fr 1.4fr; gap: 80px; }
.directions-intro h2 { margin-top: 15px; }
.directions-intro > p:not(.eyebrow) { margin-top: 20px; color: var(--muted); font-size: 14px; }
.directions-intro .text-link { margin-top: 26px; }
.directions-intro .scenario-note { margin-top: 35px; font-size: 11px; color: #65726b; }
.direction-list { border-top: 1px solid #ccd5ce; }
details { border-bottom: 1px solid #ccd5ce; }
summary { display: flex; align-items: center; gap: 20px; padding-block: 24px; list-style: none; cursor: pointer; font-size: 17px; font-weight: 600; }
summary::-webkit-details-marker { display: none; }
summary:hover { color: var(--green); }
.direction-number { align-self: flex-start; padding-top: 4px; color: #647469; font: 11px/1.9 Consolas, monospace; }
summary > span:not(.direction-number) { flex: 1; }
.disclosure-icon { flex-shrink: 0; margin-left: auto; margin-right: 6px; transition: transform .2s ease; }
details[open] .disclosure-icon { transform: rotate(45deg); }
.direction-content { padding: 0 35px 26px; }
.direction-content > p { max-width: 550px; color: var(--muted); font-size: 14px; }
.inline-list { display: flex; flex-wrap: wrap; gap: 9px 20px; margin: 18px 0; padding: 0; list-style: none; color: #3f5949; font-size: 12px; }
.inline-list li { padding-left: 10px; border-left: 2px solid #b3c7b8; }
.direction-content .text-link { color: var(--green); }
.process-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 40px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.process-list li { position: relative; padding: 30px 26px 0; border-right: 1px solid var(--line); }
.process-list li:first-child { padding-left: 0; }
.process-list li:last-child { padding-right: 0; border-right: 0; }
.process-number { color: #916f39; font: 13px/1.5 Consolas, monospace; }
.process-list h3 { margin-top: 21px; font-size: 18px; }
.process-list p { min-height: 72px; margin-top: 10px; color: var(--muted); font-size: 13px; }
.process-output { display: block; margin-top: 20px; padding-top: 13px; border-top: 1px dashed #d3dbd5; color: #405a4b; font-size: 11px; }
.faq { padding-top: 15px; }
.faq-layout { display: grid; grid-template-columns: .9fr 1.4fr; gap: 80px; padding-top: 65px; border-top: 1px solid var(--line); }
.faq h2 { margin-top: 16px; }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-color: var(--line); }
.faq-list summary { padding-block: 20px; font-size: 14px; }
.faq-list details > p { padding: 0 32px 22px 0; color: var(--muted); font-size: 13px; }
.contact { background: #eaf5f4; border-top: 2px solid #b7d8d2; }
.contact-layout { display: grid; grid-template-columns: 1fr 1.1fr; align-items: start; gap: 88px; }
.contact-copy h2 { margin-top: 17px; font-size: 38px; }
.contact-copy > p:not(.eyebrow) { margin-top: 20px; color: var(--muted); font-size: 14px; }
.contact-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 21px; margin-top: 27px; }
.contact-email { display: inline-flex; align-items: center; gap: 7px; overflow-wrap: anywhere; font-size: 12px; }
.contact-email:hover { text-decoration: underline; }
.wecom-contact { display: flex; align-items: center; gap: 20px; margin-top: 40px; }
.wecom-contact > img { width: 112px; height: 112px; padding: 5px; border: 1px solid #d8e1da; background: #fff; }
.wecom-contact strong, .wecom-contact span { display: block; }
.wecom-contact strong { font-size: 15px; }
.wecom-contact span { margin-top: 6px; color: #52645a; font-size: 12px; }
.wecom-contact p { margin-top: 3px; color: var(--muted); font-size: 11px; }
.lead-form { min-width: 0; padding: 29px; border: 1px solid #d4dfd6; border-radius: var(--radius); background: #fff; }
.form-heading h3 { font-size: 21px; }
.form-heading > p { margin-top: 5px; color: var(--muted); font-size: 11px; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.lead-form label { display: flex; flex-direction: column; min-width: 0; gap: 7px; margin-top: 19px; font-size: 12px; }
.lead-form label small { margin-left: 6px; color: #68746b; font-size: 10px; }
input, select, textarea { width: 100%; min-width: 0; padding: 10px 12px; border: 1px solid #dce3dd; border-radius: 4px; background: #fbfcfb; color: var(--ink); font-size: 12px; }
input, select { min-height: 43px; }
textarea { resize: vertical; min-height: 115px; }
input::placeholder, textarea::placeholder { color: #67746b; }
.form-button { width: 100%; margin-top: 22px; }
.form-notice { margin-top: 12px; color: #626f65; font-size: 10px; }
.form-notice a { text-decoration: underline; text-underline-offset: 3px; }
.form-output { display: none; max-width: 100%; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); color: #42584a; font-size: 12px; overflow-wrap: anywhere; white-space: pre-wrap; }
.form-output.is-visible { display: block; }
.mail-action { display: none; align-items: center; gap: 8px; width: fit-content; margin-top: 16px; color: var(--green-dark); font-size: 12px; text-decoration: underline; text-underline-offset: 4px; }
.mail-action.is-visible { display: inline-flex; }
.site-footer { padding-top: 32px; background: #fff; }
.footer-main { display: flex; align-items: center; gap: 45px; padding-bottom: 26px; }
.footer-brand { display: flex; flex-direction: column; align-items: center; }
.footer-brand img { width: 180px; height: auto; aspect-ratio: 520 / 128; }
.footer-brand span { font-size: 11px; }
.footer-main > p { color: var(--muted); font-size: 12px; }
.back-top { margin-left: auto; }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding-block: 22px; border-top: 1px solid var(--line); color: #626f66; font-size: 10px; }
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 20px; margin-left: auto; }
.footer-bottom a:hover { color: var(--green); }
.crm-chat { position: fixed; bottom: 24px; right: 24px; z-index: 60; }
.crm-chat-launcher { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 47px; padding: 10px 17px; border: 1px solid var(--green-dark); border-radius: 5px; background: var(--green-dark); color: #fff; font-size: 13px; box-shadow: 0 5px 18px #1b302321; }
.crm-chat-launcher > img { filter: invert(1); }
.crm-chat-launcher:hover { background: var(--green); }
.crm-chat.is-over-contact:not(.is-open) .crm-chat-launcher { visibility: hidden; pointer-events: none; }
.crm-chat-panel { position: absolute; right: 0; bottom: 61px; display: flex; flex-direction: column; width: min(390px, calc(100vw - 32px)); height: min(600px, calc(100dvh - 170px)); min-height: 240px; border: 1px solid #cbd9ce; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 12px 48px #16362426; }
.crm-chat-head { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; gap: 14px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.crm-chat-head strong { font-size: 14px; }
.crm-chat-head span { display: block; color: var(--muted); font-size: 10px; }
.crm-chat-head .icon-button { width: 33px; height: 33px; border: 0; }
.crm-chat-panel iframe { display: block; width: 100%; min-height: 0; flex: 1; border: 0; }
@media (min-width: 1600px) {
  .hero { height: 650px; }
  .hero-scene { object-position: right center; }
}
@media (max-width: 1100px) {
  .shell { width: calc(100% - 64px); }
  .site-nav { gap: 22px; }
  .hero { height: 560px; }
  h1 { font-size: 52px; }
  .hero-statement { font-size: 23px; }
  .hero-description { max-width: 330px; font-size: 14px; }
  .hero-actions { gap: 18px; }
  .hero-copy { width: 47%; }
  .hero-scene { object-position: right center; }
  .offer { padding: 25px; }
  .offer-crm { padding: 0; }
  .offer-body { padding: 25px 25px 0; }
  .offer h3 { font-size: 22px; }
  .offer-crm h3 { font-size: 30px; }
  .offer-crm .offer-lede { font-size: 15px; }
  .offer-software h3 { font-size: 24px; }
  .offer-web h3 { font-size: 22px; }
  .offer-erp h3 { font-size: 25px; }
  .web-image { width: calc(100% + 50px); margin-inline: -25px; }
  .directions-layout, .faq-layout { gap: 48px; }
  .contact-layout { gap: 48px; }
  .contact-copy h2 { font-size: 32px; }
}
@media (max-width: 800px) {
  .product-entry-list { grid-template-columns: minmax(0, 1fr); }
  .product-entry-item { padding: 0 0 22px; }
  .product-entry-item + .product-entry-item { padding: 22px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .section { padding-block: 64px; }
  .site-header { height: 76px; }
  .header-inner { width: calc(100% - 40px); }
  .brand img { width: 160px; }
  .brand span { font-size: 10px; }
  .nav-toggle { display: inline-flex; }
  .site-nav { position: absolute; left: 0; right: 0; top: 75px; display: none; align-items: stretch; gap: 0; max-height: calc(100dvh - 76px); overflow-y: auto; padding: 14px 24px 24px; border-bottom: 1px solid var(--line); background: #fff; font-size: 15px; }
  .site-nav.is-open { display: flex; flex-direction: column; }
  .site-nav > a:not(.nav-contact) { padding-block: 15px; border-bottom: 1px solid var(--line); }
  .site-nav .nav-contact { justify-content: space-between; margin-top: 20px; padding: 13px 16px; }
  .hero { height: 540px; }
  .hero-copy { width: 55%; }
  h1 { font-size: 44px; }
  .hero-statement { font-size: 21px; }
  .hero-description { max-width: 290px; font-size: 13px; }
  .hero-scene { object-position: right center; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 18px; }
  .hero-caption { font-size: 10px; }
  h2 { font-size: 30px; }
  .section-heading { gap: 30px; }
  .section-heading > p { max-width: 260px; font-size: 12px; }
  .offer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
  .offer-crm { grid-column: 1 / -1; grid-row: auto; display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 26px; }
  .offer-body { padding: 0; }
  .crm-preview { margin: 0 0 0 22px; }
  .crm-preview > a { aspect-ratio: 1440 / 1000; }
  .offer-software, .offer-ai, .offer-hardware, .offer-web, .offer-erp { grid-column: span 1; }
  .offer-hardware, .offer-web { min-height: 430px; }
  .offer-erp { grid-column: 1 / -1; min-height: 0; }
  .offer-erp .erp-content { margin-top: 24px; }
  .offer-erp h3 br { display: none; }
  .offer-erp p { max-width: 500px; }
  .directions-layout, .faq-layout { grid-template-columns: 1fr; gap: 30px; }
  .directions-intro h2 br, .faq h2 br { display: none; }
  .directions-intro .scenario-note { margin-top: 16px; }
  .process-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 0; }
  .process-list li:nth-child(2) { border-right: 0; padding-right: 0; }
  .process-list li:nth-child(3) { padding-left: 0; }
  .faq { padding-top: 0; }
  .faq-layout { padding-top: 45px; }
  .contact-layout { grid-template-columns: 1fr; gap: 38px; }
  .contact-copy h2 br { display: none; }
  .contact-copy > p br { display: none; }
  .wecom-contact { margin-top: 26px; }
}
@media (max-width: 560px) {
  .crm-film { margin-top: 40px; padding-top: 28px; }
  .film-heading h3 { font-size: 23px; }
  .film-chapters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .film-chapters button { min-height: 68px; padding: 10px 12px; font-size: 12px; }
  .film-chapters button:nth-child(3) { border-right: 0; }
  .film-chapters button:nth-child(-n + 3) { border-bottom: 1px solid var(--line); }
  .film-transcript ol { font-size: 12px; }
  .product-entry { padding-block: 28px; }
  .product-entry-heading { margin-bottom: 22px; }
  .product-entry-heading h2 { font-size: 22px; }
  .product-entry-heading .text-link { font-size: 12px; }
  .product-entry-item { flex-wrap: wrap; gap: 12px; }
  .product-entry-icon { flex-basis: 24px; width: 24px; height: 24px; }
  .product-entry-copy { flex: 1; }
  .product-entry-item .button { min-height: 44px; padding-inline: 12px; gap: 8px; font-size: 12px; }
  .product-entry-status { font-size: 12px; }
  html { scroll-padding-top: 90px; }
  .shell { width: calc(100% - 40px); }
  .section { padding-block: 50px; }
  .hero { height: min(652px, calc(100svh - 120px)); min-height: 470px; }
  .hero-scene { top: auto; bottom: 0; height: min(310px, 35svh); object-fit: cover; object-position: right center; }
  .hero-inner { align-items: flex-start; }
  .hero-copy { width: 100%; max-width: none; padding-top: 33px; }
  .hero-copy .eyebrow { margin-bottom: 12px; font-size: 11px; }
  h1 { font-size: 39px; }
  .hero-statement { margin-top: 10px; font-size: 21px; }
  .hero-description { max-width: 100%; margin-top: 14px; font-size: 13px; line-height: 1.85; }
  .hero-description br { display: none; }
  .hero-actions { flex-direction: row; align-items: center; gap: 16px; margin-top: 22px; }
  .hero-actions .button { gap: 17px; padding-inline: 15px; font-size: 12px; }
  .hero-actions .text-link { gap: 6px; font-size: 11px; }
  .hero-caption { bottom: 15px; right: 0; font-size: 9px; color: #52615b; }
  .service-index-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-index a { padding-block: 13px; font-size: 11px; gap: 13px; }
  .service-index a:nth-child(odd) { border-left: 1px solid var(--line); }
  .service-index a:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .section-heading { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 26px; }
  h2 { font-size: 27px; line-height: 1.5; }
  .section-heading > p { max-width: none; font-size: 12px; }
  .section-heading .eyebrow { margin-bottom: 12px; }
  .offer-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .offer { padding: 25px; }
  .offer-crm { display: flex; align-items: stretch; padding: 25px 25px 0; }
  .offer-crm h3 { font-size: 29px; }
  .offer-crm .offer-lede { margin-top: 8px; font-size: 16px; }
  .crm-preview { margin: 25px -8px 0; }
  .crm-preview > a { aspect-ratio: 16 / 10; }
  .offer h3 { margin-top: 17px; font-size: 23px; }
  .offer-crm h3 { font-size: 29px; }
  .offer p { font-size: 13px; }
  .offer-software, .offer-ai { min-height: 250px; }
  .offer-hardware, .offer-web { min-height: 410px; }
  .hardware-image { height: 215px; object-position: 50% 61%; }
  .offer-erp { min-height: 330px; }
  .offer-erp h3 br { display: block; }
  .offer-erp .text-link { padding-top: 25px; }
  .directions-layout { gap: 27px; }
  .directions-intro h2 br { display: block; }
  .directions-intro > p:not(.eyebrow) { font-size: 13px; }
  summary { gap: 13px; padding-block: 22px; font-size: 15px; }
  .direction-content { padding-inline: 27px 0; }
  .direction-content > p { font-size: 13px; }
  .direction-number { padding-top: 1px; font-size: 10px; }
  .inline-list { gap: 10px 16px; font-size: 11px; }
  .process-list { margin-top: 28px; gap: 24px 0; }
  .process-list li { padding: 24px 15px 0; }
  .process-list h3 { margin-top: 15px; font-size: 15px; }
  .process-list p { min-height: 86px; font-size: 12px; }
  .process-output { margin-top: 14px; font-size: 10px; }
  .faq { padding-top: 0; }
  .faq-layout { gap: 23px; padding-top: 40px; }
  .faq-list summary { font-size: 13px; gap: 16px; }
  .faq-list details > p { font-size: 12px; }
  .contact-layout { gap: 33px; }
  .contact-copy h2 { font-size: 30px; }
  .contact-copy h2 br { display: block; }
  .contact-copy > p:not(.eyebrow) { font-size: 13px; }
  .contact-actions { gap: 18px; }
  .contact-email { font-size: 12px; }
  .lead-form { padding: 23px; }
  .form-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lead-form label { font-size: 12px; }
  input, select, textarea { font-size: 16px; }
  .form-button { gap: 15px; padding-inline: 12px; font-size: 12px; }
  .form-notice { font-size: 10px; }
  .footer-main { flex-wrap: wrap; gap: 15px; padding-bottom: 22px; }
  .footer-brand img { width: 160px; }
  .footer-main > p { order: 3; flex-basis: 100%; font-size: 11px; }
  .footer-bottom { align-items: flex-start; flex-direction: column; gap: 9px; padding-bottom: 88px; }
  .footer-bottom nav { margin-left: 0; gap: 20px; }
  .crm-chat { right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); }
  .crm-chat-launcher { min-height: 44px; font-size: 12px; }
  .crm-chat.is-over-intro:not(.is-open) .crm-chat-launcher { visibility: hidden; pointer-events: none; }
  .crm-chat-panel { bottom: 57px; height: min(570px, calc(100dvh - 145px)); }
}
@media (max-width: 360px) {
  h1 { font-size: 34px; }
  .hero-statement { font-size: 18px; }
  .hero-actions { gap: 15px 10px; }
  .hero-actions .button { gap: 12px; padding-inline: 11px; }
  .hero-actions .text-link { font-size: 10px; }
  .offer { padding-inline: 22px; }
  .offer h3 { font-size: 21px; }
  .offer-crm h3 { font-size: 28px; }
  .offer-crm .offer-lede { font-size: 15px; }
  .web-image { width: calc(100% + 44px); margin-inline: -22px; }
  .lead-form { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}