section[id] { scroll-margin-top: 105px; }

/* Use a familiar system sans for readable Chinese and Latin text. */
body, button, input, a { font-family: "Source Han Sans SC", "Noto Sans SC", "Microsoft YaHei", "PingFang SC", Arial, sans-serif; }
body .brand, body .hero h1, body .section-heading h2, body .showcase-copy h2, body .contact-section h2, body .download-card h2, body .feature-card h3, body .tutorial-header h2 { font-family: "Source Han Sans SC", "Noto Sans SC", "Microsoft YaHei", "PingFang SC", Arial, sans-serif; letter-spacing: -.02em; }
.hero-cat { animation: hero-slow-float 10s ease-in-out infinite; will-change: transform; }
@keyframes hero-slow-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -6px, 0); }
}


.hero-cat {
  border-radius: 0;
  -webkit-mask-image: radial-gradient(ellipse 72% 76% at 50% 52%, #000 59%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 76% at 50% 52%, #000 59%, transparent 100%);
}

.support-qr {
  width: 104px;
  height: 104px;
  object-fit: contain;
  flex: none;
  border: 5px solid #fff;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(48, 97, 170, .13);
}

.contact-card strong { display: block; }
.contact-card .copy-button { white-space: nowrap; }

/* Use the supplied real client capture in the workflow showcase. */
.showcase-panel { min-width: 0; padding: 0; overflow: hidden; transform: none; background: #edf5ff; }
.showcase-real-shot { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 1442 / 992; object-fit: contain; object-position: center; }

.contact-modal-dialog { width: min(690px, 100%); max-height:calc(100dvh - 32px); overflow-y:auto; }
.contact-modal-content { display:flex; flex-direction:column; align-items:center; padding:34px 30px 31px; background:linear-gradient(155deg,#f6fbff,#e7f2ff); text-align:center; }
.contact-modal-content .eyebrow { margin-bottom:10px; }
.contact-modal-content h2 { margin:0 0 9px; color:#173568; font-size:30px; }
.contact-modal-content > p { margin:0; color:#6d80a2; font-size:14px; }
.wechat-id { margin-top:8px; color:#266ccd; font-size:21px; letter-spacing:.04em; }
.contact-qr-grid { width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:22px; }
.contact-qr-grid > div { min-width:0; display:flex; flex-direction:column; align-items:center; gap:11px; color:#2663b3; font-size:15px; }
.contact-modal-qr { width:min(260px,100%); height:auto; border:9px solid #fff; border-radius:14px; background:#fff; box-shadow:0 17px 35px rgba(55,102,181,.18); }
.contact-modal-tip { color:#6680a8; font-size:13px; }

.tutorial-header {
  padding: 34px 38px 24px;
  background: linear-gradient(130deg, #f4f9ff, #e2f1ff);
}

.tutorial-header h2 {
  margin: 0 0 10px;
  font-family: Georgia, "Songti SC", serif;
  font-size: 32px;
  color: #173568;
}

.tutorial-header p:last-child { margin: 0; color: #6d80a2; }

.tutorial-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 24px 38px;
}

.tutorial-steps > div {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 144px;
  padding: 16px;
  border: 1px solid #e1eaf6;
  border-radius: 8px;
  background: #fff;
}

.tutorial-steps b { color: #4b88e4; font-size: 18px; }
.tutorial-steps strong { color: #254878; font-size: 15px; }
.tutorial-steps span { color: #7284a3; line-height: 1.55; }

.modal-download {
  display: block;
  margin: 0 38px 34px;
  padding: 13px 18px;
  border-radius: 8px;
  background: #4a86ea;
  color: #fff;
  text-align: center;
  font-weight: 800;
}

.modal-download span { margin-left: 8px; font-size: 18px; }

:is(a, button):focus-visible { outline: 3px solid #205fc6; outline-offset: 3px; }

@media (max-width: 680px) {
  .contact-card { flex-wrap: wrap; }
  .contact-card .copy-button { margin-left: 0; }
  .tutorial-header { padding: 34px 25px 20px; }
  .tutorial-header h2 { font-size: 27px; }
  .tutorial-steps { grid-template-columns: 1fr; padding: 18px 25px; }
  .tutorial-steps > div { min-height: 0; }
  .modal-dialog { max-height: calc(100dvh - 32px); overflow-y: auto; }
  .modal-download { margin: 0 25px 28px; }
  .contact-modal-content { padding:30px 22px 26px; }
  .contact-modal-content h2 { font-size:27px; }
  .contact-qr-grid { gap:10px; }
  .contact-qr-grid > div { font-size:12px; }
  .contact-modal-qr { border-width:5px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  /* Explicitly requested gentle hero motion; never shorten its loop duration. */
  .hero-cat { animation: hero-slow-float 10s ease-in-out infinite !important; }
}
/* Keep the public filing number centered in the homepage footer. */
.footer-legal{text-align:center;line-height:1.8}
.footer-icp{color:inherit;text-decoration:none}
.footer-icp:hover,.footer-icp:focus-visible{color:#326fda;text-decoration:underline}

.header-app-entry{display:inline-flex;align-items:center;gap:6px;flex:none;white-space:nowrap;padding:10px 13px;border-radius:10px;background:#e8f2ff;color:#245fae;font-size:13px;font-weight:700;transition:background .2s,transform .2s}
.header-app-entry:hover{background:#d8e9ff;transform:translateY(-1px)}
@media (min-width:681px) and (max-width:1020px){
  .site-header{gap:12px}
  .main-nav{gap:16px}
}
@media (min-width:681px) and (max-width:1020px){
  .main-nav,.header-download{display:none}
  .menu-button{display:block;margin-left:auto}
  .main-nav.is-open{display:flex;position:absolute;left:0;right:0;top:100%;padding:18px;flex-direction:column;align-items:flex-start;gap:0;background:rgba(249,252,255,.97);border-bottom:1px solid var(--line);box-shadow:0 18px 30px rgba(56,103,181,.12)}
  .main-nav.is-open a{padding:12px 2px}
  .main-nav.is-open a:after{bottom:5px}
}
@media (max-width:680px){
  .site-header{gap:9px}
  .header-app-entry{padding:8px 10px;font-size:12px}
  .menu-button{margin-left:auto}
}
@media (max-width:370px){.site-header .brand-suffix{display:none}}