/* ==========================================================================
   星科罗智能 · 中文排版优化补丁
   说明：本文件在 main.css 之后加载，用于修正模板为英文设计的字体与比例，
        使其适配中文显示。不改动模板原有配色与布局结构。
   ========================================================================== */

/* ---------- 1. 字体栈：英文沿用 Space Grotesk，中文落到系统黑体 ---------- */
:root {
  --rs-ff-body: "Space Grotesk", -apple-system, BlinkMacSystemFont, "PingFang SC",
    "Microsoft YaHei", "Hiragino Sans GB", "Source Han Sans SC", "Noto Sans CJK SC",
    "WenQuanYi Micro Hei", sans-serif;
  --rs-ff-title: "Space Grotesk", -apple-system, BlinkMacSystemFont, "PingFang SC",
    "Microsoft YaHei", "Hiragino Sans GB", "Source Han Sans SC", "Noto Sans CJK SC",
    "WenQuanYi Micro Hei", sans-serif;
  --rs-ff-p: "Space Grotesk", -apple-system, BlinkMacSystemFont, "PingFang SC",
    "Microsoft YaHei", "Hiragino Sans GB", "Source Han Sans SC", "Noto Sans CJK SC",
    "WenQuanYi Micro Hei", sans-serif;
  --rs-fs-body: 16px;
}

/* ---------- 2. 正文：中文需要更宽松的行高与字距 ---------- */
body {
  line-height: 1.85;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

p,
.section-description,
.about-description,
.banner-description,
.footer-widget-description,
.work-process-description,
.accordion-body p,
.blog-meta span {
  line-height: 1.9;
  letter-spacing: 0.02em;
}

/* 中文不使用斜体，避免伪斜体难看 */
em,
i,
cite {
  font-style: normal;
}

/* ---------- 3. 标题：去掉负字距，字重收敛（中文 700 过粗） ---------- */
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6,
.section-title,
.banner-title,
.footer-title,
.services-title,
.blog-title,
.counter-title,
.accordion-button,
.work-process-title,
.contact-form-title,
.footer-widget-title,
.offcanvas-title-meta,
.testimonial-avater-title {
  letter-spacing: 0;
  font-family: var(--rs-ff-title);
  text-wrap: pretty;
}

h1, .h1 { line-height: 1.28; font-weight: 600; }
h2, .h2 { line-height: 1.32; font-weight: 600; }
h3, .h3 { line-height: 1.4;  font-weight: 600; }
h4, .h4 { line-height: 1.5;  font-weight: 600; }
h5, .h5 { line-height: 1.6;  font-weight: 500; }
h6, .h6 { line-height: 1.6;  font-weight: 500; }

/* ---------- 4. 主视觉标题：静态胶囊（不滚动），底色随文字宽度 ---------- */
/* 标题整句排成一行（「让家更 懂你 的 智慧生活」），整体居中并略偏左，
   与右下角圆形按钮形成平衡；窄屏放不下时自动折行 */
.rs-banner-one .banner-content-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  /* 居中后再向左轻推，视觉重心略偏左，避免整行贴在画面正中显得呆板 */
  padding-right: 6%;
}

/* 两段文字都不压缩：放不下时「智慧生活」整块换行，而不是把字挤散 */
.rs-banner-one .banner-content-top > * {
  flex: 0 0 auto;
}

.rs-banner-one .banner-title,
.rs-banner-one .banner-pill.is-pill-lg {
  font-size: 92px;
  letter-spacing: 0;
  line-height: 1.24;
  font-weight: 600;
  margin: 0;
}

/* 胶囊：行内块 = 宽度自动贴合文字，不再依赖固定 650px 容器 */
.rs-banner-one .banner-pill {
  display: inline-block;
  padding: 0.02em 0.36em 0.1em;
  margin: 0 0.1em;
  border-radius: 999px;
  background: var(--rs-theme-primary);
  color: var(--rs-title-primary);
  line-height: 1.18;
  white-space: nowrap;
  vertical-align: baseline;
}
/* 同行里的「智慧生活」胶囊：与「的」之间留一点气口 */
.rs-banner-one .banner-pill.is-pill-lg {
  display: inline-block;
  margin: 0 0 0 0.16em;
  color: var(--rs-title-primary);
}
/* 主标题左侧留白与第二行胶囊对齐 */
.rs-banner-one .banner-title .banner-pill {
  margin-left: 0.16em;
}
@media only screen and (max-width: 1600px) {
  .rs-banner-one .banner-title,
  .rs-banner-one .banner-pill.is-pill-lg { font-size: 82px; }
}
@media only screen and (max-width: 1366px) {
  .rs-banner-one .banner-title,
  .rs-banner-one .banner-pill.is-pill-lg { font-size: 72px; }
}
@media only screen and (max-width: 1199px) {
  .rs-banner-one .banner-title,
  .rs-banner-one .banner-pill.is-pill-lg { font-size: 60px; }
  .rs-banner-one .banner-content-top { padding-right: 0; }
}
@media only screen and (max-width: 991px) {
  .rs-banner-one .banner-title,
  .rs-banner-one .banner-pill.is-pill-lg { font-size: 50px; }
  .rs-banner-one .banner-content-bottom { gap: 24px 30px; }
}
@media only screen and (max-width: 767px) {
  .rs-banner-one .banner-title,
  .rs-banner-one .banner-pill.is-pill-lg { font-size: 38px; }
  .rs-banner-one .banner-pill { padding: 0.04em 0.32em 0.1em; }
}
@media only screen and (max-width: 575px) {
  .rs-banner-one .banner-title,
  .rs-banner-one .banner-pill.is-pill-lg { font-size: 28px; }
  .rs-banner-one .banner-title .banner-pill { margin-left: 0.1em; }
}

/* ---------- 5. 案例区大跑马灯：150px -> 56px ---------- */
.rs-text-slide-two .text-slide-title {
  font-size: 56px;
  letter-spacing: 0;
  line-height: 1.1;
  text-transform: none;
}
@media only screen and (max-width: 1600px) {
  .rs-text-slide-two .text-slide-title { font-size: 48px; }
}
@media only screen and (max-width: 1199px) {
  .rs-text-slide-two .text-slide-title { font-size: 40px; }
}
@media only screen and (max-width: 767px) {
  .rs-text-slide-two .text-slide-title { font-size: 30px; }
}

/* 顶部关键词跑马灯 */
.rs-text-slide-one .text-slide-title {
  font-size: 22px;
  letter-spacing: 0.02em;
  font-weight: 500;
}

/* ---------- 6. 区块大标题：60px -> 48px ---------- */
.section-title {
  letter-spacing: 0;
}
.section-title.is-large {
  font-size: 48px;
  line-height: 1.35;
  font-weight: 600;
}
@media only screen and (max-width: 1600px) {
  .section-title.is-large { font-size: 44px; }
}
@media only screen and (max-width: 1199px) {
  .section-title.is-large { font-size: 38px; }
}
@media only screen and (max-width: 767px) {
  .section-title.is-large { font-size: 32px; }
}
@media only screen and (max-width: 575px) {
  .section-title.is-large { font-size: 27px; }
}

/* ---------- 7. 各模块标题字号微调 ---------- */
.rs-contact-one .contact-form-title {
  font-size: 34px;
  letter-spacing: 0;
}
@media only screen and (max-width: 1366px) {
  .rs-contact-one .contact-form-title { font-size: 30px; }
}
@media only screen and (max-width: 767px) {
  .rs-contact-one .contact-form-title { font-size: 26px; }
}

.rs-footer-one .footer-title {
  font-size: 36px;
  letter-spacing: 0;
  line-height: 1.35;
}
.rs-footer-one .footer-widget-title {
  font-size: 20px;
  letter-spacing: 0.02em;
  font-weight: 600;
}

.rs-accordion-one .accordion-button {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.5;
}
.rs-accordion-one .accordion-body p {
  font-size: 16px;
}

.rs-services-one .services-title {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0;
}
.rs-services-one .rs-list-item li {
  font-size: 15px;
  letter-spacing: 0.02em;
}

.work-process-title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0;
}
.work-process-description {
  font-size: 15px;
}

.rs-testimonial-one .testimonial-description {
  font-size: 21px;
  line-height: 1.9;
  letter-spacing: 0.02em;
}
@media only screen and (max-width: 1199px) {
  .rs-testimonial-one .testimonial-description { font-size: 18px; }
}

.rs-counter-one .counter-title {
  font-size: 20px;
  letter-spacing: 0.02em;
  line-height: 1.6;
}

.rs-blog-one .blog-title {
  font-size: 20px;
  line-height: 1.6;
  letter-spacing: 0;
}

/* 圆形按钮中的中文 */
.rs-text-circle span {
  font-size: 14px;
  letter-spacing: 0;
}

/* ---------- 8. 导航与按钮 ---------- */
.main-menu ul > li > a,
.mobile-menu ul > li > a {
  letter-spacing: 0.02em;
  font-size: 16px;
}
.rs-btn {
  letter-spacing: 0.02em;
}
.offcanvas-about p,
.offcanvas-contact-text a {
  line-height: 1.85;
  letter-spacing: 0.02em;
}

/* ---------- 9. 表单：中文占位符与输入体验 ---------- */
input,
textarea,
select,
::placeholder {
  font-family: var(--rs-ff-body);
  letter-spacing: 0.02em;
}
.contact-input textarea {
  line-height: 1.7;
}

/* ---------- 10. 联系区：二维码展示（替代原视频播放按钮） ---------- */
.rs-contact-one {
  position: relative;
}
/* 原装饰背景图会遮挡二维码，取消展示 */
.rs-contact-one .contact-bg-thumb {
  display: none;
}
.rs-contact-one .contact-form {
  margin-bottom: 60px;
}
.rs-contact-one .contact-qrcode {
  text-align: center;
  padding: 40px 20px;
  border-radius: 10px;
  background: var(--rs-bg-secondary);
}
.rs-contact-one .contact-qrcode-head {
  margin-bottom: 30px;
}
.rs-contact-one .contact-qrcode-title {
  font-size: 26px;
  font-weight: 600;
  color: var(--rs-title-primary);
  margin-bottom: 10px;
  letter-spacing: 0;
}
.rs-contact-one .contact-qrcode-description {
  font-size: 15px;
  color: var(--rs-text-primary);
  letter-spacing: 0.02em;
}
.rs-contact-one .contact-qrcode-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px 50px;
}
.rs-contact-one .contact-qrcode-item {
  width: 150px;
}
.rs-contact-one .qrcode-thumb {
  width: 150px;
  height: 150px;
  padding: 10px;
  background: var(--rs-white);
  border: 1px solid var(--rs-border-primary);
  border-radius: 10px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rs-contact-one .qrcode-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.rs-contact-one .qrcode-label {
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: var(--rs-title-primary);
  letter-spacing: 0.02em;
}
@media only screen and (max-width: 1199px) {
  .rs-contact-one .contact-qrcode-list { gap: 24px 30px; }
  .rs-contact-one .contact-qrcode-item,
  .rs-contact-one .qrcode-thumb { width: 130px; }
  .rs-contact-one .qrcode-thumb { height: 130px; }
}
@media only screen and (max-width: 575px) {
  .rs-contact-one .contact-qrcode-item,
  .rs-contact-one .qrcode-thumb { width: 110px; }
  .rs-contact-one .qrcode-thumb { height: 110px; }
  .rs-contact-one .contact-qrcode-title { font-size: 22px; }
}

/* ---------- 11. 页脚：删除订阅栏后两栏等宽 ---------- */
.rs-footer-one .footer-widget {
  letter-spacing: 0.02em;
}
.rs-footer-one .footer-info-text a {
  line-height: 1.8;
}

/* ---------- 12. 中文标点挤压与断行 ---------- */
.section-title,
.banner-title,
.footer-title {
  word-break: normal;
  overflow-wrap: break-word;
}

/* ---------- 13. Banner 说明文字：模板按 150px 英文标题做绝对定位，
        中文字号收敛后会压在标题上，此处改为常规文档流 ---------- */
.rs-banner-one .banner-description {
  position: static !important;
  inset-inline-end: auto !important;
  top: auto !important;
  max-width: 640px;
  margin-top: 35px;
  margin-bottom: 10px;
  font-size: 18px;
  line-height: 1.9 !important;
  letter-spacing: 0.02em;
}
@media only screen and (max-width: 767px) {
  .rs-banner-one .banner-description {
    font-size: 16px;
    margin-top: 25px;
  }
}

/* ---------- 14. 技术小贴士列表（替代原文资讯卡片） ---------- */
.rs-blog-one .tip-list {
  margin-top: 18px;
}
.rs-blog-one .tip-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.rs-blog-one .tip-list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
  font-size: 15px;
  line-height: 1.8;
  letter-spacing: 0.02em;
  color: var(--rs-text-primary);
}
.rs-blog-one .tip-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rs-title-primary);
}
.rs-blog-one .blog-meta-item span {
  letter-spacing: 0.02em;
}

/* ============================================================
   13. 品牌加载动画（替换模板默认白底圆环）
   切换回模板默认样式：把 #pre-load 的 class 改为 "is-classic"
   ============================================================ */
#pre-load {
  background-color: #10171E;
  display: flex;
  align-items: center;
  justify-content: center;
}
#pre-load .preload-inner {
  text-align: center;
}
/* 轨道环 */
#pre-load .preload-orbit {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto 30px;
}
#pre-load .orbit-ring {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(255, 255, 255, 0.10);
  border-top-color: var(--rs-theme-primary);
  border-radius: 50%;
  animation: rs-orbit-spin 1.1s linear infinite;
}
#pre-load .orbit-track {
  position: absolute;
  inset: -6px;
  animation: rs-orbit-spin 1.8s linear infinite reverse;
}
#pre-load .orbit-dot {
  position: absolute;
  top: 0;
  left: 50%;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: var(--rs-theme-primary);
  box-shadow: 0 0 10px rgba(201, 243, 29, 0.9);
}
#pre-load .preload-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 62px;
  transform: translate(-50%, -50%);
  animation: rs-loader-pulse 1.6s ease-in-out infinite;
}
#pre-load .preload-name {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  color: rgba(255, 255, 255, 0.62);
}
#pre-load .preload-bar {
  width: 180px;
  height: 2px;
  margin: 18px auto 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
#pre-load .preload-bar i {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: 2px;
  background: var(--rs-theme-primary);
  animation: rs-loader-bar 1.4s ease-in-out infinite;
}
@keyframes rs-orbit-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes rs-loader-pulse {
  0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.96); }
  50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.04); }
}
@keyframes rs-loader-bar {
  0%   { margin-left: -40%; }
  100% { margin-left: 100%; }
}
/* 想换回模板默认白底圆环：给 #pre-load 加 class="is-classic" */
#pre-load.is-classic {
  background-color: var(--rs-white);
}

/* ============================================================
   14. 计数器：数字与小字都单行显示，数字按胶囊宽度自动缩字号
   ------------------------------------------------------------
   odometer 把数字拆成一堆 inline-block，容器一窄就在数字中间断行
   （3,000 变两行）。这里禁止断行 + 禁止 flex 收缩，
   再由 counter-fit.js 把字号缩到刚好放得下。
   ============================================================ */
.rs-counter-one .counter-title {
  white-space: nowrap;
}
.rs-counter-one .counter-number,
.rs-counter-one .suffix {
  --rs-count-fs: 70px;
  font-size: var(--rs-count-fs);
  flex: 0 0 auto;
  white-space: nowrap;
}
@media only screen and (max-width: 1366px) {
  .rs-counter-one .counter-number,
  .rs-counter-one .suffix { --rs-count-fs: 60px; }
}
@media only screen and (max-width: 1199px) {
  .rs-counter-one .counter-number,
  .rs-counter-one .suffix { --rs-count-fs: 50px; }
}
/* odometer 内部结构同样不许换行 */
.rs-counter-one .counter-number * {
  white-space: nowrap;
}
/* odometer 数字是脚本写入的，保证字号与行高稳定 */
.rs-counter-one .counter-number-wrapper {
  gap: 0.06em;
}

/* ============================================================
   15. 二维码卡片：尺寸贴合二维码本身，去掉多余留白
   ============================================================ */
.rs-contact-one .contact-qrcode-item {
  width: auto;
  padding: 10px 10px 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.rs-contact-one .contact-qrcode-list {
  gap: 16px 18px;
  justify-content: center;
}
.rs-contact-one .qrcode-thumb {
  width: 132px;
  height: 132px;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  border-radius: 8px;
  overflow: hidden;
}
.rs-contact-one .qrcode-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.rs-contact-one .qrcode-label {
  margin: 0;
  font-size: 15px;
}
@media only screen and (max-width: 1199px) {
  .rs-contact-one .qrcode-thumb { width: 116px; height: 116px; }
}
@media only screen and (max-width: 575px) {
  .rs-contact-one .qrcode-thumb { width: 96px; height: 96px; }
  .rs-contact-one .contact-qrcode-item { padding: 8px 8px 7px; gap: 6px; }
  .rs-contact-one .contact-qrcode-list { gap: 10px 12px; }
}

/* ============================================================
   16. 合作伙伴 LOGO：按比例缩放，任意尺寸 logo 都放得下
   ------------------------------------------------------------
   · 格子高度固定、图片只受 max-height / max-width 约束，
     宽高都不写死 → 永远按原比例缩放，不会被拉扁拉长；
   · 用 !important 压住编辑模式换图时写进元素的内联 aspect-ratio，
     否则旧占位图的宽高比会把新 logo 拉变形。
   ============================================================ */
.rs-brand-one .brand-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 76px;
  padding: 0 20px;
  overflow: hidden;
}
.rs-brand-one .brand-thumb img {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 52px !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  display: block;
  transition: transform ease 0.5s;
}
@media only screen and (max-width: 767px) {
  .rs-brand-one .brand-thumb { height: 64px; padding: 0 12px; }
  .rs-brand-one .brand-thumb img { max-height: 42px !important; }
}

/* ============================================================
   17. 编辑模式：工具条不遮挡页头
   ============================================================ */
/* 页头是 absolute/fixed 定位，body 的 padding 推不动它，单独下移 */
.rs-edit-mode #header-sticky {
  top: var(--rs-eb-h, 46px) !important;
}

/* ============================================================
   18. 中文长标题断行
   balance 对中文标点不友好（会把「，」甩到行首），改为只禁止标点行首/行尾
   ============================================================ */
.section-title,
.banner-title,
.contact-qrcode-title,
.footer-title {
  line-break: strict;
  word-break: normal;
  overflow-wrap: break-word;
}

/* ============================================================
   19. 锚点跳转偏移：避免区块标题被吸顶页头压住
   （模板用 scrollIntoView，scroll-margin-top 对其有效）
   ============================================================ */
#home, #about, #solutions, #process, #cases, #clients, #projects, #news, #contact {
  scroll-margin-top: 104px;
}
@media only screen and (max-width: 991px) {
  #home, #about, #solutions, #process, #cases, #clients, #projects, #news, #contact {
    scroll-margin-top: 82px;
  }
}

/* ============================================================
   20. 技术小贴士：三张卡片严格等宽等高
   ============================================================ */
/* 列高撑满 → 同一行三张卡片底边对齐 */
.rs-blog-one .blog-item {
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* 图片固定画幅，换任意尺寸的图都不会把卡片撑高或压扁 */
.rs-blog-one .blog-thumb {
  flex: 0 0 auto;
}
.rs-blog-one .blog-thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 7 / 6;
  object-fit: cover;
  object-position: center;
}
/* 文字区填满剩余高度，剩余空白落在卡片底部，标题位置不受影响 */
.rs-blog-one .blog-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* ============================================================
   21. 页脚备案号（替换原社交图标）
   ============================================================ */
.rs-copyright-one .footer-copyright-record {
  margin-inline-start: auto;
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.55);
}
.rs-copyright-one .footer-copyright-record a {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color 0.3s ease;
}
.rs-copyright-one .footer-copyright-record a:hover {
  color: var(--rs-theme-primary);
}
@media only screen and (max-width: 1600px) {
  /* 右下角有「返回顶部」浮钮，留出避让距离 */
  .rs-copyright-one .footer-copyright-record {
    margin-inline-end: 52px;
  }
}
@media only screen and (max-width: 767px) {
  .rs-copyright-one .footer-copyright-record {
    margin-inline-start: 0;
    margin-inline-end: 0;
    font-size: 12.5px;
  }
}

/* 页脚最后一行不要被右下角「返回顶部」浮钮压住（窄屏尤其明显） */
@media only screen and (max-width: 767px) {
  .rs-copyright-one {
    padding-bottom: 76px;
  }
}