.guide{background:#f6faf7}.guide .section-intro{margin-bottom:42px}.guide-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.guide-step{display:grid;grid-template-columns:38px 1fr;gap:18px;background:#fff;border:1px solid #deece8;border-radius:14px;padding:23px 25px}.guide-step-no{font-family:'DM Mono';color:var(--orange);font-size:11px;padding-top:3px}.guide-step h3{font-size:16px;color:var(--navy);margin:0 0 7px}.guide-step p{font-size:11px;color:#7b9798;line-height:1.8;margin:0 0 11px}.guide-step code{font-family:'DM Mono';font-size:9px;color:#168e87;background:#e8f7f3;border-radius:5px;padding:5px 8px}.guide-tip{display:flex;align-items:center;gap:14px;margin-top:19px;padding:14px 18px;border-radius:10px;background:#e2f5ef;color:#4e7d7b}.guide-tip span{font-family:'DM Mono';font-size:10px;color:#168e87;white-space:nowrap}.guide-tip p{font-size:11px;margin:0}.guide-tip-secondary{background:#edf3f4}.guide-tip-secondary span{color:#52747b}.module-map{padding:62px 0;background:var(--navy);color:#fff}.module-map-inner{display:grid;grid-template-columns:.75fr 1.25fr;gap:80px;align-items:start}.module-map h2{font-size:31px;line-height:1.35;margin:20px 0 0;letter-spacing:-1px}.module-map h2 span{color:var(--mint)}.module-pills{display:grid;grid-template-columns:1fr 1fr;gap:10px}.module-pills span{display:block;padding:13px 15px;border:1px solid rgba(185,245,233,.16);border-radius:9px;color:#83a9a9;font-size:10px;line-height:1.8}.module-pills b{display:block;color:#d9f4ed;font-size:11px;margin-bottom:2px}@media(max-width:700px){.guide-grid{grid-template-columns:1fr}.guide-step{padding:19px}.guide-tip{align-items:flex-start;flex-direction:column;gap:4px}.module-map-inner{grid-template-columns:1fr;gap:30px}.module-pills{grid-template-columns:1fr}.module-map{padding:50px 0}}

/* 中文宣传文案排版 */
body, button, input, select {
  font-family: 'Noto Sans SC', 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', Arial, sans-serif;
  font-synthesis: none;
}

.product-hero h1 {
  margin: 24px 0 24px;
  font-weight: 900;
  letter-spacing: .015em;
  line-height: 1.22;
  word-break: keep-all;
  text-wrap: balance;
}

.product-hero h1 span,
.product-hero h1 em { white-space: nowrap; }

.product-hero h1 em { letter-spacing: .04em; }
.product-hero .title-period { color: var(--navy); font-weight: 900; margin-left: .06em; }

.product-hero .hero-lead {
  letter-spacing: .025em;
  line-height: 2.05;
  text-wrap: pretty;
}

.product-hero .eyebrow { letter-spacing: .04em; }
.product-hero .hero-ctas { margin-top: 31px; }

/* 各区标题统一为紧凑、清晰的中文展示字；避免标点在换行处显得突兀。 */
.section-intro h2,
.split-head h2,
.pricing h2,
.contact-copy h2,
.module-map h2 {
  font-family: 'Noto Sans SC', 'Microsoft YaHei', 'PingFang SC', sans-serif;
  font-weight: 900;
  letter-spacing: .015em;
  line-height: 1.34;
  word-break: keep-all;
  text-wrap: balance;
}

.section-intro h2 span,
.split-head h2 span,
.pricing h2 span,
.contact-copy h2 em,
.module-map h2 span { white-space: nowrap; }

.section-intro > p,
.split-head > p,
.pricing-wrap > div:first-child > p,
.contact-copy p {
  letter-spacing: .02em;
  text-wrap: pretty;
}

.feature-card h3,
.scene-text h3,
.guide-step h3,
.problem-grid h3,
.flow-track h3 {
  font-family: 'Noto Sans SC', 'Microsoft YaHei', 'PingFang SC', sans-serif;
  font-weight: 800;
  letter-spacing: .015em;
  word-break: keep-all;
  text-wrap: balance;
}

.feature-card p,
.guide-step p,
.scene-text p,
.problem-grid p,
.flow-track p {
  letter-spacing: .015em;
  text-wrap: pretty;
}

@media (max-width: 700px) {
  .product-hero h1 { line-height: 1.27; letter-spacing: .01em; }
  .product-hero .hero-lead { line-height: 1.9; letter-spacing: 0; }
}

/* 首屏产品展示：直接使用真实系统工作台，避免营销页与实际软件界面脱节。 */
.product-hero {
  min-height: max(760px, 100svh);
  padding: 132px 0 48px;
  display: flex;
  align-items: center;
  background:
    radial-gradient(circle at 88% 8%, rgba(101, 216, 198, .24), transparent 31%),
    radial-gradient(circle at 5% 62%, rgba(186, 239, 230, .72), transparent 30%),
    #f5faf8;
}

.product-hero .hero-glow { opacity: .72; }
.product-hero .glow-one { left: -285px; top: auto; bottom: -220px; }
.product-hero .glow-two { right: -220px; top: 92px; }

.product-hero-inner {
  width: min(1450px, calc(100% - 72px));
  display: grid;
  grid-template-columns: minmax(340px, .77fr) minmax(640px, 1.43fr);
  align-items: center;
  gap: clamp(36px, 5vw, 96px);
  position: relative;
  z-index: 1;
}

.product-hero .hero-copy { max-width: 500px; }
.product-hero h1 { font-size: clamp(46px, 4.5vw, 72px); }
.product-hero .hero-lead { max-width: 460px; font-size: 16px; }

.hero-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 37px;
}

.hero-highlights span {
  border: 1px solid rgba(14, 133, 123, .18);
  border-radius: 999px;
  padding: 6px 11px;
  color: #286f6c;
  background: rgba(255, 255, 255, .62);
  font-size: 11px;
  font-weight: 700;
}

.product-screen { min-width: 0; position: relative; }

.screen-caption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 6px 12px;
  color: #5c8182;
  font-size: 11px;
}

.screen-caption span { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: #276e6d; }
.screen-caption i { display: block; width: 8px; height: 8px; border-radius: 50%; background: #1cab98; box-shadow: 0 0 0 5px rgba(28, 171, 152, .14); }
.screen-caption b { font-weight: 500; color: #789a9b; }

.screen-frame {
  overflow: hidden;
  border: 8px solid #fff;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 28px 70px rgba(12, 63, 67, .19), 0 5px 15px rgba(12, 63, 67, .08);
  transform: perspective(1800px) rotateY(-2.5deg) rotateX(1.4deg);
  transform-origin: center;
}

.screen-frame img { display: block; width: 100%; height: auto; }
.product-hero .scroll-hint { bottom: 19px; }

@media (max-width: 1120px) {
  .product-hero { min-height: auto; padding: 136px 0 84px; }
  .product-hero-inner { grid-template-columns: 1fr; gap: 48px; width: min(100% - 64px, 920px); }
  .product-hero .hero-copy { max-width: 620px; }
  .product-screen { width: 100%; }
  .screen-frame { transform: none; }
  .product-hero .scroll-hint { display: none; }
}

@media (max-width: 700px) {
  .product-hero { padding: 105px 0 62px; }
  .product-hero-inner { width: min(100% - 32px, 560px); gap: 38px; }
  .product-hero h1 { font-size: clamp(40px, 12vw, 52px); }
  .product-hero .hero-lead { font-size: 14px; }
  .hero-highlights { margin-top: 28px; }
  .screen-caption b { display: none; }
  .screen-frame { border-width: 4px; border-radius: 11px; }
}

/* 提升小字号的可读性，尤其适合投屏和宣传页浏览。 */
.main-nav a, .login-link { font-size: 14px; }
.eyebrow { font-size: 12px; }
.product-hero .hero-lead { font-size: 18px; }
.hero-highlights span { font-size: 12px; }
.section-intro > p, .split-head > p, .pricing-wrap > div:first-child > p, .contact-copy p { font-size: 15px; }
.feature-card p, .guide-step p, .scene-text p, .problem-grid p, .flow-track p { font-size: 13px; }
.feature-card a, .guide-step code, .guide-tip p, .module-pills span { font-size: 12px; }
.feature-tag, .scene-label, .problem-no, .flow-num { font-size: 11px; }
.footer-links, .copyright { font-size: 12px; }

@media (max-width: 700px) {
  .product-hero .hero-lead { font-size: 16px; }
  .section-intro > p, .split-head > p, .pricing-wrap > div:first-child > p, .contact-copy p { font-size: 14px; }
  .feature-card p, .guide-step p, .scene-text p, .problem-grid p, .flow-track p { font-size: 13px; }
}

/* 宣传型首屏：真实系统大图铺底，文案与按钮浮在前景。 */
.product-hero {
  isolation: isolate;
  overflow: hidden;
  background-color: #eaf6f3;
  background-image:
    linear-gradient(90deg, rgba(235, 248, 245, .97) 0%, rgba(235, 248, 245, .88) 31%, rgba(235, 248, 245, .35) 61%, rgba(235, 248, 245, .12) 100%),
    url('sy.png');
  background-size: cover, min(1450px, 84vw) auto;
  background-position: center, right 52% center;
  background-repeat: no-repeat;
}

.product-hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 580px;
  height: 580px;
  right: -170px;
  top: 8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(44, 190, 169, .2), rgba(44, 190, 169, 0) 69%);
  filter: blur(5px);
  animation: hero-breathe 7s ease-in-out infinite;
  pointer-events: none;
}

.product-hero::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .42;
  background-image: radial-gradient(circle, rgba(15, 118, 110, .24) 1px, transparent 1.5px);
  background-size: 23px 23px;
  mask-image: linear-gradient(90deg, transparent 0%, transparent 44%, #000 75%);
  animation: dot-drift 18s linear infinite;
  pointer-events: none;
}

.product-hero-inner { position: relative; z-index: 2; grid-template-columns: minmax(0, 1fr); }
.product-hero .hero-copy {
  padding: 34px 38px 36px;
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: 24px;
  background: rgba(248, 255, 252, .78);
  box-shadow: 0 22px 55px rgba(17, 81, 78, .12);
  backdrop-filter: blur(10px);
}

.product-hero .hero-ctas .btn-primary {
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 0 0 rgba(255, 112, 74, .35), 0 12px 24px rgba(255, 112, 74, .24);
  animation: button-pulse 2.8s ease-in-out infinite;
}

.product-hero .hero-ctas .btn-primary::after {
  content: '';
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: -45%;
  width: 28%;
  transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent);
  animation: button-shine 3.7s ease-in-out infinite;
}

.product-hero .hero-ctas .btn-primary span { position: relative; z-index: 1; }
.product-screen { display: none; }
.screen-caption { background: rgba(248, 255, 252, .76); border-radius: 999px; padding: 7px 12px; width: fit-content; margin-left: auto; backdrop-filter: blur(8px); }

@keyframes hero-breathe {
  0%, 100% { transform: scale(.92); opacity: .55; }
  50% { transform: scale(1.08); opacity: 1; }
}

@keyframes dot-drift { from { background-position: 0 0; } to { background-position: 46px 32px; } }
@keyframes button-pulse {
  0%, 72%, 100% { box-shadow: 0 0 0 0 rgba(255, 112, 74, .28), 0 12px 24px rgba(255, 112, 74, .24); }
  84% { box-shadow: 0 0 0 10px rgba(255, 112, 74, 0), 0 14px 29px rgba(255, 112, 74, .32); }
}
@keyframes button-shine { 0%, 50% { left: -45%; } 75%, 100% { left: 135%; } }

@media (max-width: 1120px) {
  .product-hero { background-size: cover, cover; background-position: center, center bottom; }
  .product-hero .hero-copy { background: rgba(248, 255, 252, .9); }
}

@media (max-width: 700px) {
  .product-hero { background-image: linear-gradient(180deg, rgba(238, 250, 247, .96), rgba(238, 250, 247, .82)), url('sy.png'); background-size: cover, auto 48%; background-position: center, center bottom; }
  .product-hero .hero-copy { padding: 25px 22px 27px; border-radius: 19px; }
  .product-hero::after { opacity: .22; mask-image: none; }
}