/* ==========================================================================
   星科罗智能 · 视觉升级层 / Signature Theme
   --------------------------------------------------------------------------
   加载顺序：main.css → cn-typography.css → premium-theme.css → 本文件
   定位：只做「配色统一 + 排版节奏 + 动效体系」的最终覆盖，不改结构、不删功能。
   回退方式：删除 index.html 中本文件的 <link> 与 motion.js 的 <script> 即可。

   设计取向（墨玉 × 骨瓷 × 青柠 × 香槟铜）：
   · 60% 骨白/纸白中性底，中性色带极轻微暖色度，不用纯白纯黑；
   · 30% 墨色阶（深色区块、正文、描边）；
   · 10% 强调：品牌青柠仅用于 CTA / 深底 / 2px 装饰，香槟铜用于序号与细线；
   · 模板残留的橙、紫、蓝渐变统一收编到墨色阶，消除"配色打架"。

   动效：100-150ms 反馈 / 200-300ms 状态 / 500-800ms 入场；
   只用 transform · opacity · translate，统一 ease-out 曲线，不用回弹；
   全站尊重 prefers-reduced-motion，JS 失效时内容默认可见。
   ========================================================================== */

/* ---------------------------------------------------------------- 1. 令牌 */
:root {
    /* 墨色阶 */
    --sku-ink: #10171E;
    --sku-ink-soft: #1B2630;
    --sku-ink-2: #3F4951;
    /* 正文：白底 ≈ 9.2:1 */
    --sku-ink-3: #6B747B;
    /* 辅助：白底 ≈ 4.8:1 */
    --sku-deep: #0D1319;
    --sku-deep-2: #16212B;
    --sku-deep-3: #22303B;

    /* 浅色阶（暖调中性，非纯白） */
    --sku-canvas: #F7F6F2;
    --sku-canvas-2: #F1EFE8;
    --sku-paper: #FFFFFF;
    --sku-line: #E4E1D8;
    --sku-line-strong: #CFCBC0;

    /* 强调色 */
    --sku-accent: #C9F31D;
    /* 品牌青柠：仅深底 / 实心 CTA / 细装饰 */
    --sku-accent-dim: #B4D91A;
    --sku-gold: #B08D55;
    /* 香槟铜：序号、细线、次级高亮 */
    --sku-gold-soft: #EFE6D5;

    /* 深底文字 */
    --sku-on-dark: #F5F3ED;
    --sku-on-dark-2: #AEB7BD;
    --sku-on-dark-3: #7E8A92;

    /* 形状 */
    --sku-radius: 14px;
    --sku-radius-lg: 20px;
    --sku-radius-pill: 999px;
    --sku-shadow-sm: 0 2px 12px -8px rgba(16, 23, 30, .28);
    --sku-shadow-md: 0 18px 44px -28px rgba(16, 23, 30, .38);
    --sku-shadow-lg: 0 34px 72px -40px rgba(16, 23, 30, .52);

    /* 动效令牌（100 / 300 / 500 规则） */
    --ease-out-quart: cubic-bezier(.25, 1, .5, 1);
    --ease-out-quint: cubic-bezier(.22, 1, .36, 1);
    --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --dur-1: 120ms;
    --dur-2: 220ms;
    --dur-3: 340ms;
    --dur-enter: 720ms;
}

/* 把模板 main.css 的原始色板整体收编到新 token（一处修改，全站生效） */
:root {
    --rs-theme-primary: var(--sku-accent);
    --rs-theme-secondary: var(--sku-ink);
    --rs-theme-purple: var(--sku-ink-2);
    --rs-theme-purple-light: var(--sku-ink-soft);
    --rs-text-primary: var(--sku-ink-2);
    --rs-title-primary: var(--sku-ink);
    --rs-title-secondary: var(--sku-ink);
    --rs-bg-primary: var(--sku-canvas);
    --rs-bg-secondary: var(--sku-canvas-2);
    --rs-bg-brown: var(--sku-canvas);
    --rs-bg-green: var(--sku-canvas);
    --rs-bg-purple: var(--sku-canvas-2);
    --rs-border-primary: var(--sku-line);
    --rs-light: var(--sku-canvas-2);
    --rs-black: var(--sku-ink);
    --rs-gradient-primary: var(--sku-deep);
    --rs-gradient-secondary: var(--sku-deep-3);
    --rs-rating: var(--sku-gold);
    --rs-placeholder: rgba(63, 73, 81, .5);
}

/* ------------------------------------------------- 2. 全局底色与排版节奏 */
html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--sku-canvas);
    color: var(--sku-ink-2);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* 选区与焦点：品牌色但不刺眼 */
::selection {
    background: var(--sku-accent);
    color: var(--sku-ink);
}

:focus-visible {
    outline: 2px solid var(--sku-accent);
    outline-offset: 3px;
    border-radius: 2px;
}

img {
    max-width: 100%;
}

p {
    color: var(--sku-ink-2);
    line-height: 1.85;
}

h1, h2, h3, h4, h5, h6,
.section-title, .services-title, .blog-title, .work-process-title {
    color: var(--sku-ink);
    line-height: 1.32;
}

/* 标题流体字号：桌面克制、移动不挤 */
.section-title {
    font-size: clamp(30px, 3.5vw, 50px);
    letter-spacing: -.01em;
    font-weight: 700;
}

.section-description {
    font-size: clamp(15px, 1.15vw, 17px);
    line-height: 1.9;
    color: var(--sku-ink-2);
    max-width: 60ch;
}

/* 每个区块标题上方一条香槟铜细线：统一的视觉锚点，不用大图标 */
.section-title::before {
    content: "";
    display: block;
    width: 34px;
    height: 2px;
    margin-bottom: 20px;
    background: var(--sku-gold);
    transform-origin: left center;
    transition: width var(--dur-3) var(--ease-out-quart);
}

.section-title:hover::before {
    width: 58px;
}

/* 深底区块里的标题线换成青柠 */
.black-bg .section-title::before,
.rs-cta-one .section-title::before,
.rs-contact-one .section-title::before,
.rs-footer-one .section-title::before,
.rs-portfolio-one .section-title::before {
    background: var(--sku-accent);
}

.section-title.is-text-white,
.black-bg .section-title,
.rs-cta-one .section-title {
    color: var(--sku-on-dark);
}

/* 下划线标题：hover 时才染色，避免浅底上青柠文字对比度不足 */
.section-title.underline a,
.services-title.underline a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .22em;
    text-decoration-color: var(--sku-line-strong);
    transition: color var(--dur-2) var(--ease-out-quart), text-decoration-color var(--dur-2) var(--ease-out-quart);
}

.section-title.underline a:hover,
.services-title a:hover,
.rs-services-one .services-title a:hover {
    color: var(--sku-ink) !important;
    text-decoration-color: var(--sku-accent) !important;
}

/* 间距节奏：大屏舒展、小屏紧凑，避免每个 section 同一个 120px */
.section-space {
    padding-top: clamp(76px, 8.5vw, 128px);
    padding-bottom: clamp(76px, 8.5vw, 128px);
}

.section-space-bottom {
    padding-bottom: clamp(70px, 8vw, 120px);
}

/* 区块底色交替：骨白 / 纸白 / 微暖灰，制造节奏而不是一片白 */
.rs-about-one,
.rs-blog-one,
.rs-testimonial-one,
.rs-brand-one {
    background-color: var(--sku-paper);
}

.rs-services-one.primary-bg,
.rs-work-process-one,
.rs-counter-one {
    background-color: var(--sku-canvas);
}

.rs-services-one.primary-bg,
.rs-about-one {
    background-image: radial-gradient(1100px 520px at 88% -8%, rgba(176, 141, 85, .07), transparent 68%);
}

/* 深色区块：从死黑改成有层次的墨色渐变 + 一条极淡分隔线 */
.rs-footer-one,
.rs-cta-one,
.rs-contact-one,
.black-bg {
    background-color: var(--sku-deep);
    background-image:
        radial-gradient(900px 460px at 12% 0%, rgba(201, 243, 29, .045), transparent 70%),
        linear-gradient(160deg, var(--sku-deep) 0%, var(--sku-deep-2) 100%);
    color: var(--sku-on-dark-2);
}

.rs-footer-one p,
.rs-cta-one p,
.rs-contact-one p {
    color: var(--sku-on-dark-2);
}

/* ----------------------------------------------------------- 3. 顶部导航 */
#header-sticky {
    transition: background-color var(--dur-3) var(--ease-out-quart),
    box-shadow var(--dur-3) var(--ease-out-quart),
    border-color var(--dur-3) var(--ease-out-quart);
}

.rs-header-one {
    border-bottom-color: rgba(245, 243, 237, .1);
}

.rs-header-one.rs-sticky.has-sticky-bg {
    background: rgba(13, 19, 25, .96);
    border-bottom-color: rgba(245, 243, 237, .09);
    box-shadow: 0 12px 40px -24px rgba(0, 0, 0, .8);
}

/* 菜单下划线由中心展开，替代瞬时变色 */
.onepage-menu > li > a {
    position: relative;
    color: var(--sku-on-dark);
    transition: color var(--dur-2) var(--ease-out-quart);
}

.onepage-menu > li > a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 0;
    height: 2px;
    background: var(--sku-accent);
    transform: translateX(-50%);
    transition: width var(--dur-2) var(--ease-out-quart);
}

.onepage-menu > li > a:hover::after,
.onepage-menu > li > a.active::after,
.onepage-menu > li > a.is-current::after {
    width: 60%;
}

.onepage-menu > li > a:hover,
.onepage-menu > li > a.active,
.onepage-menu > li > a.is-current {
    color: var(--sku-accent);
}

/* 顶部阅读进度条（由 motion.js 更新 scaleX） */
.sku-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2000;
    width: 100%;
    height: 2px;
    background: var(--sku-accent);
    transform: scaleX(0);
    transform-origin: 0 50%;
    pointer-events: none;
    will-change: transform;
}

/* ------------------------------------------------------------- 4. 按钮 */
.rs-btn,
.contact-btn .rs-btn {
    position: relative;
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--sku-ink);
    background-color: var(--sku-accent);
    border: 1px solid transparent;
    box-shadow: var(--sku-shadow-sm);
    transition: transform var(--dur-2) var(--ease-out-quart),
    background-color var(--dur-2) var(--ease-out-quart),
    color var(--dur-2) var(--ease-out-quart),
    box-shadow var(--dur-2) var(--ease-out-quart),
    border-color var(--dur-2) var(--ease-out-quart);
}

.rs-btn:hover,
.contact-btn .rs-btn:hover {
    transform: translateY(-2px);
    background-color: var(--sku-ink);
    color: var(--sku-accent) !important;
    box-shadow: var(--sku-shadow-md);
}

.rs-btn:active,
.contact-btn .rs-btn:active {
    transform: translateY(0) scale(.975);
    transition-duration: var(--dur-1);
}

/* 描边/次要按钮：站点里它们都位于深底，必须用骨白描边 + 骨白字 */
.rs-btn.hover-white,
.rs-btn.has-border,
.rs-btn.is-text-orange,
.rs-btn.has-text {
    background-color: transparent;
    border-color: rgba(245, 243, 237, .4);
    color: var(--sku-on-dark) !important;
}

.rs-btn.hover-white:hover,
.rs-btn.has-border:hover {
    background-color: var(--sku-accent) !important;
    border-color: var(--sku-accent) !important;
    color: var(--sku-ink) !important;
}

/* 表单提交是主操作，保持实心青柠，不被描边规则吞掉 */
.contact-form .rs-btn,
.contact-form .rs-btn.hover-white {
    background-color: var(--sku-accent);
    border-color: var(--sku-accent);
    color: var(--sku-ink) !important;
}

.contact-form .rs-btn:hover {
    background-color: var(--sku-on-dark) !important;
    border-color: var(--sku-on-dark) !important;
    color: var(--sku-ink) !important;
}

.rs-btn.has-text.is-text-orange,
.rs-btn.has-text.is-text-orange:hover,
.rs-btn.has-text.is-text-orange.has-icon svg path {
    color: var(--sku-ink) !important;
}

.rs-btn.has-text.is-text-orange.has-icon svg path {
    fill: var(--sku-ink);
}

/* 模板的橙紫渐变按钮统一收编为墨色（消除杂色） */
.rs-btn.has-gradient,
.rs-btn.has-gradient-purple::before,
.rs-play-btn.has-bg-gradient,
.rs-play-btn.has-bg-gradient::before,
.rs-play-btn.has-bg-gradient::after,
.rs-feature-one .feature-line,
.pricing-switcher-wrapper .switcher {
    background-image: linear-gradient(120deg, var(--sku-deep-2), var(--sku-deep-3));
}

.rs-btn.has-gradient,
.rs-play-btn.has-bg-gradient {
    color: var(--sku-on-dark);
}

/* 圆形箭头按钮：保留品牌青柠，加入克制的呼吸光环 */
.rs-rotate-btn .rs-circle-btn {
    background: var(--sku-accent);
    box-shadow: 0 0 0 0 rgba(201, 243, 29, .18);
    transition: transform var(--dur-3) var(--ease-out-quart),
    box-shadow var(--dur-3) var(--ease-out-quart),
    background-color var(--dur-2) var(--ease-out-quart);
}

.rs-rotate-btn .rs-circle-btn:hover {
    transform: translate(-50%, -50%) scale(1.07);
    box-shadow: 0 0 0 12px rgba(201, 243, 29, .1);
}

.rs-rotate-btn .rs-circle-btn svg {
    transition: transform var(--dur-2) var(--ease-out-quart);
}

/* 回到顶部 */
.backtotop-wrap {
    border-radius: 10px;
    background: var(--sku-ink) !important;
    color: var(--sku-accent) !important;
    border: 1px solid rgba(245, 243, 237, .12);
    transition: transform var(--dur-2) var(--ease-out-quart), opacity var(--dur-2) linear, box-shadow var(--dur-2) var(--ease-out-quart);
}

.backtotop-wrap.has-bg-orange {
    background: var(--sku-ink) !important;
    color: var(--sku-accent) !important;
}

.backtotop-wrap:hover {
    transform: translateY(-3px);
    box-shadow: var(--sku-shadow-md);
    opacity: 1;
}

/* --------------------------------------------------- 5. 关键词跑马灯 */
/* 原来是整条荧光绿，视觉过重；改为深墨延续首屏，青柠只留在分隔符 */
.rs-text-slide-one {
    background: var(--sku-deep) !important;
    border-top: 1px solid rgba(245, 243, 237, .07);
    border-bottom: 1px solid rgba(245, 243, 237, .07);
    padding-top: 22px;
    padding-bottom: 22px;
}

.rs-text-slide-one .text-slide-title,
.brand-marquee .text-slide-title {
    color: var(--sku-on-dark) !important;
    font-size: clamp(15px, 1.5vw, 19px);
    font-weight: 500;
    letter-spacing: .08em;
}

/* 分隔符图形反相为香槟铜，缓缓呼吸，不抢文字 */
.rs-text-slide-one .text-slide-thumb img {
    filter: brightness(0) saturate(100%) invert(72%) sepia(23%) saturate(645%) hue-rotate(352deg) brightness(88%);
    opacity: .85;
    transition: transform var(--dur-3) var(--ease-out-quart);
}

.rs-text-slide-one .text-slide-item:hover .text-slide-thumb img {
    transform: rotate(45deg);
}

/* 案例区巨型描边字降噪，避免和正文抢层次 */
.rs-text-slide-two .text-slide-title,
.rs-text-slide-two.has-stroke-text .text-slide-title {
    color: rgba(245, 243, 237, .12) !important;
    -webkit-text-stroke: 1px rgba(245, 243, 237, .22);
}

/* --------------------------------------------------------- 6. 卡片体系 */
.rs-services-one .services-item,
.rs-blog-one .blog-item,
.rs-work-process-one .work-process-item,
.rs-testimonial-one .testimonial-item,
.contact-qrcode,
.contact-qrcode-item,
.rs-brand-one .brand-item {
    background: var(--sku-paper);
    border: 1px solid var(--sku-line);
    border-radius: var(--sku-radius);
    box-shadow: var(--sku-shadow-sm);
    transition: transform var(--dur-3) var(--ease-out-quart),
    box-shadow var(--dur-3) var(--ease-out-quart),
    border-color var(--dur-3) var(--ease-out-quart),
    background-color var(--dur-3) var(--ease-out-quart);
}

.rs-services-one .services-item:hover,
.rs-blog-one .blog-item:hover,
.rs-work-process-one .work-process-item:hover,
.rs-testimonial-one .testimonial-item:hover,
.contact-qrcode-item:hover,
.rs-brand-one .brand-item:hover {
    transform: translateY(-6px);
    border-color: var(--sku-line-strong);
    box-shadow: var(--sku-shadow-md);
}

/* 服务卡 hover 时的墨色底：从纯黑改成有层次的墨，圆角跟随统一 */
.rs-services-one .services-item::before {
    background: var(--sku-ink);
    border-radius: 0 0 var(--sku-radius) 0;
    transition: width var(--dur-3) var(--ease-out-quart), height var(--dur-3) var(--ease-out-quart), border-radius var(--dur-3) var(--ease-out-quart);
}

.rs-services-one .services-item:hover::before {
    border-radius: var(--sku-radius);
}

.rs-services-one .services-item:hover .services-title,
.rs-services-one .services-item:hover .services-title a {
    color: var(--sku-accent) !important;
}

.rs-services-one .services-item:hover .services-list li,
.rs-services-one .services-item:hover .rs-list-item ul li {
    color: var(--sku-on-dark) !important;
}

/* 卡片图标：轻微上浮 + 回正，不做旋转杂技 */
.services-icon img,
.work-process-icon img {
    transition: transform var(--dur-3) var(--ease-out-quart), filter var(--dur-3) var(--ease-out-quart);
}

.services-item:hover .services-icon img,
.work-process-item:hover .work-process-icon img {
    transform: translateY(-4px);
}

/* 图片容器统一轻微缩放（transform 不触发重排） */
.blog-thumb img,
.portfolio-bg-thumb img,
.gallery-thumb img,
.rs-image img {
    transition: transform 600ms var(--ease-out-quart);
}

.blog-item:hover .blog-thumb img,
.rs-image:hover img {
    transform: scale(1.045);
}

/* 序号 / 计数：香槟铜提供次级强调，不与青柠抢戏 */
.work-process-number,
.counter-number,
.counter-title,
.counter-subtitle {
    color: var(--sku-ink);
}

.work-process-number,
.process-number {
    color: var(--sku-gold) !important;
    font-variant-numeric: tabular-nums;
}

.counter-number .suffix,
.counter-subtitle {
    color: var(--sku-gold);
}

/* 细线、引号、装饰统一到暖灰 */
.rs-testimonial-one .testimonial-quote svg path,
.rs-testimonial-one .testimonial-quote path {
    fill: var(--sku-line-strong);
}

/* ------------------------------------------------------------ 7. 表单 */
.rs-contact-one .contact-form {
    background: var(--sku-ink);
    border: 1px solid rgba(245, 243, 237, .08);
    border-radius: var(--sku-radius-lg);
    box-shadow: var(--sku-shadow-lg);
}

.contact-form input,
.contact-form textarea,
.contact-form select {
    background: var(--sku-deep-2) !important;
    border: 1px solid var(--sku-deep-3) !important;
    color: var(--sku-on-dark) !important;
    border-radius: 8px;
    transition: border-color var(--dur-2) var(--ease-out-quart),
    box-shadow var(--dur-2) var(--ease-out-quart),
    background-color var(--dur-2) var(--ease-out-quart);
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
    border-color: var(--sku-accent) !important;
    background: var(--sku-ink-soft) !important;
    box-shadow: 0 0 0 3px rgba(201, 243, 29, .12);
    outline: none;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: var(--sku-on-dark-3) !important;
}

/* ------------------------------------------------------------ 8. 页脚 */
.rs-footer-one {
    border-top: 1px solid rgba(245, 243, 237, .06);
}

.footer-widget-description,
.footer-info-list li,
.footer-info-list li a,
.footer-1-contact a,
.footer-widget-content p,
.footer-copyright,
.footer-copyright-text,
.copyright-text {
    color: var(--sku-on-dark-2);
}

.footer-widget-title,
.footer-title {
    color: var(--sku-on-dark);
}

.footer-widget-description a:hover,
.footer-info-list li a:hover,
.footer-1-contact a:hover {
    color: var(--sku-accent);
}

.rs-footer-one .footer-info-list li a,
.rs-footer-one .footer-menu a {
    transition: color var(--dur-2) var(--ease-out-quart), transform var(--dur-2) var(--ease-out-quart);
    display: inline-block;
}

.rs-footer-one .footer-info-list li a:hover,
.rs-footer-one .footer-menu a:hover {
    transform: translateX(3px);
}

/* ------------------------------------------- 9. 模板残留杂色最后一网打尽 */
/* 这些选择器来自模板，原本写着橙 / 紫 / 蓝，全部收编到墨色阶 */
.offcanvas-area .mean-container .mean-nav ul li.active > a,
.offcanvas-area .mean-container .mean-nav ul li a.active,
.offcanvas-contact ul li a:hover,
.rs-header-area.has-green-dark .main-menu ul li.active > a,
.rs-header-area.has-green-dark .main-menu ul li a.active,
.rs-header-area.has-green-dark .main-menu .submenu li:hover > a,
.rs-header-area.has-green-dark .main-menu .submenu li a:hover,
.rs-header-area.has-green-dark .main-menu .submenu li a.active,
.rs-header-area.has-green-dark .main-menu > ul > li:hover > a,
.rs-header-area.has-green-dark .main-menu > ul > li:hover > a::after,
.rs-postbox-title a:hover,
.sidebar-blog-title a:hover,
.rs-job-one .job-item:hover .job-number,
.rs-job-one .job-item:hover .job-title,
.rs-job-one .job-title a:hover,
.rs-contact-two .contact-call-content p a:hover {
    color: var(--sku-accent);
}

.offcanvas-area.has-theme-orange .offcanvas-close,
.offcanvas-area.has-theme-orange .offcanvas-social ul li a:hover {
    background: var(--sku-ink);
    border-color: var(--sku-ink);
    color: var(--sku-on-dark);
}

.offcanvas-area.has-theme-orange .offcanvas-contact-text a:hover,
.rs-pagination.swiper-pagination.has-orange .swiper-pagination-bullet:hover,
.rs-pagination.swiper-pagination.has-orange .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: transparent;
    color: var(--sku-accent);
}

.rs-pagination.swiper-pagination.has-orange .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: var(--sku-accent);
}

.rs-why-choose-five,
.rs-why-choose-five .why-choose-experience,
.rs-portfolio-two .portfolio-content-inner::before {
    background-image: linear-gradient(140deg, var(--sku-deep), var(--sku-deep-3));
}

/* -------------------------------------------------- 10. 动效体系（核心） */
/* 接管模板零散的 wow 动画：统一由 motion.js 用 IntersectionObserver 编排。
   关键：即使 JS 未执行，visibility 也是 visible，内容永远不会"消失"。 */
.wow {
    visibility: visible !important;
    animation: none !important;
}

@supports (translate: 0 1px) {
    html.motion-ready [data-reveal] {
        opacity: 0;
        translate: 0 26px;
        transition: opacity var(--dur-enter) var(--ease-out-expo),
        translate var(--dur-enter) var(--ease-out-expo);
        transition-delay: calc(var(--i, 0) * 70ms);
    }

    html.motion-ready [data-reveal].is-revealed {
        opacity: 1;
        translate: 0 0;
    }
}

@supports not (translate: 0 1px) {
    html.motion-ready [data-reveal] {
        opacity: 0;
        transition: opacity var(--dur-enter) var(--ease-out-expo);
    }

    html.motion-ready [data-reveal].is-revealed {
        opacity: 1;
    }
}

/* 首屏编舞：标题、副标题、圆形 CTA 分层进入 */
@keyframes sku-hero-rise {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

html.motion-ready .banner-title {
    animation: sku-hero-rise 820ms var(--ease-out-expo) 120ms both;
}

html.motion-ready .banner-pill.is-pill-lg {
    animation: sku-hero-rise 820ms var(--ease-out-expo) 260ms both;
}

html.motion-ready .rs-banner-one .rs-rotate-btn {
    animation: sku-hero-rise 820ms var(--ease-out-expo) 420ms both;
}

/* 标题装饰线展开 */
@keyframes sku-line-grow {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

html.motion-ready [data-reveal].is-revealed .section-title::before {
    animation: sku-line-grow 600ms var(--ease-out-expo) 180ms both;
}

/* 悬停微交互：只动 transform / opacity / 颜色，60fps 友好 */
.brand-name,
.brand-item .brand-thumb img,
.contact-qrcode-item img,
.testimonial-avater-thumb img,
.header-logo img,
.footer-logo img {
    transition: transform var(--dur-3) var(--ease-out-quart), opacity var(--dur-2) linear;
}

.brand-item:hover .brand-thumb img,
.contact-qrcode-item:hover img,
.testimonial-item:hover .testimonial-avater-thumb img {
    transform: scale(1.06);
}

.header-logo:hover img,
.footer-logo:hover img {
    opacity: .82;
}

/* 链接统一下划线过渡 */
a {
    transition: color var(--dur-2) var(--ease-out-quart);
}

/* 触控设备：去掉位移型 hover，避免"粘住" */
@media (hover: none) {
    .rs-services-one .services-item:hover,
    .rs-blog-one .blog-item:hover,
    .rs-work-process-one .work-process-item:hover,
    .rs-testimonial-one .testimonial-item:hover,
    .contact-qrcode-item:hover,
    .rs-brand-one .brand-item:hover,
    .rs-btn:hover {
        transform: none;
    }
}

/* ------------------------------------------------------- 11. 响应式收敛 */
@media (max-width: 991px) {
    .section-title {
        font-size: clamp(26px, 5vw, 36px);
    }

    .section-title::before {
        margin-bottom: 14px;
    }

    .rs-services-one .services-item,
    .rs-work-process-one .work-process-item {
        padding: 26px;
    }

    html.motion-ready [data-reveal] {
        transition-delay: 0ms;
        /* 移动端不做长 stagger */
    }
}

@media (max-width: 575px) {
    .rs-btn {
        height: 52px;
        padding: 12px 22px;
        font-size: 15px;
    }

    .rs-text-slide-one {
        padding-top: 16px;
        padding-bottom: 16px;
    }
}

/* --------------------------------------------------- 12. 无障碍：减少动效 */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    html.motion-ready [data-reveal] {
        opacity: 1 !important;
        translate: none !important;
    }

    .sku-scroll-progress {
        display: none;
    }
}

/* --------------------------------------------- 13. 视觉精修（二次取证） */
/* 首屏：给背景压一层墨色渐变，白字在浅色照片上也稳稳达标 */
.rs-banner-one .banner-bg-thumb {
    filter: saturate(.55) contrast(1.04);
}

.rs-banner-one .banner-bg-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(13, 19, 25, .86) 0%, rgba(13, 19, 25, .62) 48%, rgba(13, 19, 25, .34) 100%),
        linear-gradient(0deg, rgba(13, 19, 25, .42), transparent 45%);
    pointer-events: none;
}

/* 模板 190px 荧光绿分隔线 → 64px 香槟铜，强调色只留给 CTA */
.divider-line,
.rs-about-one .divider-line {
    width: 64px;
    min-width: 64px;
    height: 2px;
    margin-top: 30px;
    background: var(--sku-gold);
}

/* 服务卡右下角的黑色小方块是模板装饰，静止时收起，hover 铺墨底时再出现 */
.rs-services-one .services-item::before {
    opacity: 0;
}

.rs-services-one .services-item:hover::before {
    opacity: 1;
}

/* 案例区大跑马灯：青柠星号过亮，降为香槟铜并缩小，给正文让位 */
.rs-text-slide-two .text-slide-thumb img {
    filter: brightness(0) saturate(100%) invert(72%) sepia(23%) saturate(645%) hue-rotate(352deg) brightness(88%);
    opacity: .55;
    transform: scale(.72);
}

/* 引号装饰统一到暖灰，别在白卡上跳成荧光绿 */
.testimonial-quote,
.testimonial-icon,
.testimonial-quote svg,
.testimonial-quote svg path,
.testimonial-icon svg path {
    color: var(--sku-line-strong) !important;
    fill: var(--sku-line-strong) !important;
}

/* 角落双色方块装饰降噪，不抢标题 */
.about-shape,
.brand-shape {
    opacity: .22;
    transition: opacity var(--dur-3) var(--ease-out-quart);
}

.about-shape:hover,
.brand-shape:hover {
    opacity: .5;
}

/* 合作伙伴 logo 统一灰度，hover 才恢复原色：避免多个品牌色互相打架 */
.brand-thumb img {
    filter: grayscale(1) contrast(.95);
    opacity: .72;
    transition: filter var(--dur-3) var(--ease-out-quart),
    opacity var(--dur-3) var(--ease-out-quart),
    transform var(--dur-3) var(--ease-out-quart);
}

.brand-item:hover .brand-thumb img {
    filter: none;
    opacity: 1;
}

/* ------------------------------------------- 14. 内容可见性兜底（重要） */
/* 模板的 SplitText 入场由 GSAP / ScrollTrigger 驱动，平滑滚动或长页面下
   偶发不触发，会让标题整段"消失"。统一动效层接管后强制文字常显。 */
.rs-split-text-enable,
.rs-split-text-enable * {
    opacity: 1 !important;
    visibility: visible !important;
}

/* 未被统一动效接管的 wow 元素同样常显：内容永远优先于装饰 */
.wow:not([data-reveal]) {
    opacity: 1 !important;
    visibility: visible !important;
}

/* ------------------------------------------------- 15. 窄屏排版修正 */
@media (max-width: 767px) {
    /* clip 不创建滚动容器，不会破坏吸顶导航 */
    html,
    body {
        overflow-x: clip;
    }

    /* 模板在窄屏仍是横向 flex，标题与副标题 / 描述并排会顶破版心 */
    .rs-banner-one .banner-content-top,
    .section-title-wrapper,
    .rs-about-one .section-title-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .rs-banner-one .banner-title,
    .rs-banner-one .banner-pill.is-pill-lg {
        display: block !important;
        max-width: 100%;
        font-size: clamp(27px, 8vw, 40px) !important;
        line-height: 1.34;
        letter-spacing: -.02em;
        white-space: normal;
    }

    .rs-banner-one .banner-pill.is-pill-lg {
        width: fit-content;
        margin-top: 10px;
    }

    .banner-title .banner-pill {
        display: inline-block;
    }

    .rs-banner-one .rs-rotate-btn {
        transform: scale(.82);
        transform-origin: left center;
    }

    .section-title {
        font-size: clamp(23px, 6.2vw, 30px) !important;
    }

    /* SplitText 生成的行容器默认 nowrap，窄屏会顶破版心 */
    .rs-split-text-enable,
    .rs-split-text-enable * {
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    .section-description {
        font-size: 15px;
    }

    .rs-text-slide-one .text-slide-title {
        font-size: 14px;
        letter-spacing: .04em;
    }

    /* 模板的 about 双图在窄屏仍横向并排，会把整段撑到 600px+ 造成右侧裁切 */
    .rs-about-one .about-content-bottom {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
        max-width: 100%;
    }

    .rs-about-one .about-thumb,
    .rs-about-one .about-thumb img,
    .rs-about-one .about-content-bottom img {
        width: 100% !important;
        max-width: 100% !important;
    }

    .rs-about-one .about-thumb {
        transform: none !important;
        min-width: 0;
    }
}

/* ==========================================================================
   16. 最新基线适配 · 服务项目（六个落地案例）
   --------------------------------------------------------------------------
   基线变化：原「客户评价」模块被替换为 #projects / projects.css。
   projects.css 自带 0.35s ease + 6px 位移 + 大阴影，与全站
   「120/220/340ms + ease-out-quart + 2px 克制上浮」是两套语言。
   本层最后加载，统一其配色权重、悬停幅度、照片色调与动效曲线。
   ========================================================================== */

/* 区块标题：眉题与标签统一到香槟铜，和全站序号体系一致 */
.rs-project-area .project-eyebrow,
.project-tag {
    color: var(--sku-gold);
    letter-spacing: .16em;
}

.rs-project-area .section-description {
    color: var(--sku-ink-2);
}

/* 卡片：1px 细边 + 克制上浮，不用 6px 位移和 40px 扩散阴影 */
.project-item {
    border-color: var(--sku-line);
    background: var(--sku-paper);
    transition: transform var(--dur-2) var(--ease-out-quart),
    border-color var(--dur-2) var(--ease-out-quart),
    box-shadow var(--dur-2) var(--ease-out-quart);
}

.project-item:hover {
    transform: translateY(-2px);
    border-color: var(--sku-line-strong);
    box-shadow: var(--sku-shadow-sm);
}

/* 卡片被 motion.js 标记 data-reveal 后，通用的 720ms 入场 transition 会整体
   覆盖上面的 hover 过渡。此处把「入场」和「hover」写进同一条声明，两者共存：
   前两项带 70ms 递进延迟，后三项即时响应。 */
html.motion-ready .rs-project-area .project-item[data-reveal] {
    transition: opacity var(--dur-enter) var(--ease-out-expo),
    translate var(--dur-enter) var(--ease-out-expo),
    transform var(--dur-2) var(--ease-out-quart),
    border-color var(--dur-2) var(--ease-out-quart),
    box-shadow var(--dur-2) var(--ease-out-quart);
    transition-delay: calc(var(--i, 0) * 70ms), calc(var(--i, 0) * 70ms), 0s, 0s, 0s;
}

/* 六张照片拍摄条件不一（俯视园林 / 夜景 / 水院）：默认轻微降饱和统一冷暖，
   hover 才恢复原色，既保留信息又不让六种色调在同一屏打架 */
.project-thumb img {
    filter: saturate(.82) contrast(1.03);
    transition: transform var(--dur-3) var(--ease-out-quart),
    filter var(--dur-3) var(--ease-out-quart);
}

.project-item:hover .project-thumb img {
    transform: scale(1.035);
    filter: saturate(1) contrast(1);
}

/* 青柠仅作 2px 装饰线，展开曲线与全站标题线一致 */
.project-thumb::after {
    background: var(--sku-accent);
    transition: transform var(--dur-3) var(--ease-out-expo);
}

/* 序号牌：墨玉底 + 香槟铜字，替代纯黑底白字 */
.project-index {
    background: var(--sku-deep);
    color: var(--sku-gold);
    letter-spacing: .14em;
}

.project-title,
.project-link {
    color: var(--sku-ink);
}

.project-link i {
    transition: transform var(--dur-2) var(--ease-out-quart);
}

.project-link:hover i {
    transform: translateX(4px);
}

/* 区块右上「预约看方案」：与全站次要按钮同一套 hover，避免空框感 */
.project-header-cta .rs-btn {
    border-color: var(--sku-line-strong);
    color: var(--sku-ink) !important;
    transition: background-color var(--dur-2) var(--ease-out-quart),
    border-color var(--dur-2) var(--ease-out-quart),
    color var(--dur-2) var(--ease-out-quart);
}

.project-header-cta .rs-btn:hover {
    background: var(--sku-deep);
    border-color: var(--sku-deep);
    color: var(--sku-on-dark) !important;
}

/* WOW 会写入内联 visibility:hidden；内容永远优先于装饰 */
.project-item.wow {
    visibility: visible !important;
}

/* 触控设备不做位移型 hover，避免"粘住" */
@media (hover: none) {
    .project-item:hover {
        transform: none;
    }

    .project-item:hover .project-thumb img {
        transform: none;
    }
}

@media (max-width: 767px) {
    .rs-project-area .section-title {
        font-size: clamp(23px, 6.2vw, 30px) !important;
    }

    .project-content {
        padding: 20px 18px 24px;
    }

    .project-thumb {
        aspect-ratio: 4 / 3;
    }
}

/* ---------------------------------------------------------------- 17. 杂色收敛 */
/* 服务卡片图标来自 uploads/，其中「无线」是蓝色 wifi，与墨玉体系冲突；
   统一灰阶，hover 才恢复原色，与合作伙伴 logo 的处理保持一致 */
.services-icon img {
    filter: grayscale(1) contrast(1.06);
    opacity: .76;
    transition: filter var(--dur-3) var(--ease-out-quart),
    opacity var(--dur-3) var(--ease-out-quart);
}

.rs-services-one .services-item:hover .services-icon img {
    filter: none;
    opacity: 1;
}

/* 三张二维码内嵌绿 / 橙 / 红品牌圆标，默认灰阶，hover 恢复，避免三点杂色跳脱 */
.contact-qrcode-item .qrcode-thumb img {
    filter: grayscale(1);
    transition: filter var(--dur-3) var(--ease-out-quart);
}

.contact-qrcode-item:hover .qrcode-thumb img {
    filter: none;
}

@media (prefers-reduced-motion: reduce) {
    .project-item,
    .project-thumb img,
    .project-thumb::after,
    .services-icon img,
    .contact-qrcode-item .qrcode-thumb img {
        transition-duration: 1ms;
    }
}

/* ------------------------------------------- 18. 动态数字与版权行的专业排版 */
/* 「1800+ 个落地项目」：等宽数字 + 香槟铜，不与品牌青柠抢视觉权重 */
.project-count {
    color: var(--sku-gold);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
    white-space: nowrap;
}

/* SplitText 会把标题拆成字符节点，颜色需要逐层继承 */
.project-count > span,
.project-count .char {
    color: inherit;
}

/* 版权行：小字号、宽字距、© / 年份 / 主体 / 权利声明层级分明 */
.rs-copyright-one .footer-copyright p.copyright-text {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0 .55em;
    margin: 0;
    font-size: 12.5px;
    line-height: 1.8;
    letter-spacing: .055em;
    color: var(--sku-on-dark-2);
    font-variant-numeric: tabular-nums;
}

.rs-copyright-one .footer-copyright p.copyright-text .copyright-mark {
    color: var(--sku-gold);
    font-size: 13px;
    letter-spacing: 0;
}

.rs-copyright-one .footer-copyright p.copyright-text .copyright-holder {
    color: var(--sku-on-dark);
    letter-spacing: .09em;
}

.rs-copyright-one .footer-copyright p.copyright-text .copyright-sep {
    color: var(--sku-on-dark-3);
}

.rs-copyright-one .footer-copyright-record a {
    font-size: 12.5px;
    letter-spacing: .04em;
    color: var(--sku-on-dark-2);
    text-decoration: none;
    transition: color var(--dur-2) var(--ease-out-quart);
}

.rs-copyright-one .footer-copyright-record a:hover {
    color: var(--sku-accent);
}

@media (max-width: 767px) {
    .rs-copyright-one .footer-copyright p.copyright-text {
        font-size: 11.5px;
        gap: 0 .4em;
    }

    /* 页脚大标题：窄屏收一档字号，避免标点被挤到行首、文字贴边 */
    .rs-footer-one .footer-title {
        font-size: clamp(28px, 8vw, 34px) !important;
        line-height: 1.4 !important;
        line-break: strict;
        text-wrap: pretty;
    }

    /* 版权栏三项竖排居中：备案号不再紧贴 logo */
    .rs-copyright-one .footer-copyright-wrapper {
        flex-direction: column;
        gap: 10px;
    }

    .rs-copyright-one .footer-copyright-logo,
    .rs-copyright-one .footer-copyright-record {
        margin-inline-start: 0;
    }
}

/* ==========================================================================
   19. 走查修订（2026-11-09 晚）：按 6 张截图逐条收紧
   --------------------------------------------------------------------------
   全部为覆盖层追加，不改动模板与前 18 节，便于单独回退。
   ========================================================================== */

/* 19.1 顶部导航：青柠短横紧跟文字，顶栏压缩，logo 收小 -------------------- */
/* 原链接盒 37px 上下内边距 → 90px 高，短横只能贴在盒子底部，离文字约 40px。
   收窄到 26px 后顶栏约 70px，再把短横锚定在文字中线下方 15px。 */
.rs-header-one .main-menu .onepage-menu > li > a {
    padding-top: 26px;
    padding-bottom: 26px;
}

.onepage-menu > li > a::after {
    top: calc(50% + 15px);
    bottom: auto;
}

/* 页头 logo 176 → 148px（约 46px 高）；页脚版权栏 logo 110 → 88px */
.header-logo {
    max-width: 148px;
}

.rs-copyright-one .footer-copyright-logo {
    max-width: 88px;
}

/* 19.2 统计区 / 服务流程：给出明确分界 ---------------------------------- */
/* 原来两段同为骨白且无边框、中间 122px 空白，看起来像一整块糊在一起。
   统计区改为略深的暖灰并收一条细线，流程区从纸白起、加顶部呼吸位。 */
.rs-counter-one {
    padding-bottom: clamp(56px, 6vw, 84px);
    border-bottom: 1px solid var(--sku-line-strong);
    background-color: var(--sku-canvas-2);
}

/* 底色加深后，模板自带的数字胶囊会显形；索性做成明确的纸白统计块 */
.rs-counter-one .counter-number-wrapper {
    background: var(--sku-paper);
    box-shadow: var(--sku-shadow-sm);
}

#process.rs-work-process-one {
    padding-top: clamp(64px, 7vw, 100px);
    background-color: var(--sku-paper);
}

/* 19.3 深色跑马灯：浅色实字，保证可读；香槟铜星形分隔符保留 -------------- */
.rs-text-slide-two .text-slide-title,
.rs-text-slide-two.has-stroke-text .text-slide-title {
    color: rgba(245, 243, 237, .9) !important;
    -webkit-text-stroke: 0 !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .38);
}

/* 19.4 合作伙伴 logo：始终显示品牌原色，不再灰度压暗 ---------------------- */
.brand-thumb img,
.brand-item:hover .brand-thumb img {
    filter: none;
    opacity: 1;
}

/* 19.5 六大系统补全后：同一行卡片等高 ------------------------------------ */
.rs-services-one .services-item {
    height: 100%;
}

/* 20. 联系表单反馈：成功/失败提示改用品牌色 + 图标，深底上也能一眼看清 ------ */
.contact-form .ajax-response {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-height: 24px;
    margin-top: 14px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: .01em;
}

.contact-form .ajax-response:empty::before {
    content: none;
}

.contact-form .ajax-response::before {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.contact-form .ajax-response.success {
    color: var(--sku-accent);
}

.contact-form .ajax-response.success::before {
    content: "\2713";
    color: var(--sku-ink);
    background-color: var(--sku-accent);
}

.contact-form .ajax-response.error {
    color: #FFA08C;
}

.contact-form .ajax-response.error::before {
    content: "!";
    color: var(--sku-ink);
    background-color: #FFA08C;
}

/* 21. 扫码关注模块：微信好友二维码为主，公众号 / 视频号占位待开放 ---------- */
.contact-qrcode .contact-qrcode-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.contact-qrcode .contact-qrcode-item {
    width: auto;
    padding: 10px 10px 12px;
    gap: 8px;
}

.contact-qrcode .contact-qrcode-item .qrcode-thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    padding: 6px;
    margin: 0;
    background: var(--sku-paper);
    border: 1px solid var(--sku-line);
    border-radius: 10px;
}

/* 二维码必须保持纯黑白，不套灰阶，保证扫码识别率 */
.contact-qrcode .contact-qrcode-item .qrcode-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 4px;
    filter: none;
    image-rendering: crisp-edges;
}

.contact-qrcode .contact-qrcode-item:hover .qrcode-thumb img {
    filter: none;
}

.contact-qrcode .contact-qrcode-item .qrcode-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--sku-ink);
    letter-spacing: 0;
}

.contact-qrcode .qrcode-hint {
    display: block;
    margin-top: -2px;
    font-size: 12px;
    line-height: 1.55;
    color: var(--sku-ink-3);
}

/* 待开放位：虚线框 + 弱化文字，不与可用二维码抢视觉权重 */
.contact-qrcode .contact-qrcode-item .qrcode-thumb.is-pending {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sku-canvas-2);
    border: 1px dashed var(--sku-line-strong);
}

.contact-qrcode .qrcode-pending {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .12em;
    color: var(--sku-ink-3);
}

.contact-qrcode .contact-qrcode-item.is-pending {
    background: var(--sku-canvas);
}

.contact-qrcode .contact-qrcode-item.is-pending:hover {
    transform: none;
    border-color: var(--sku-line);
    box-shadow: var(--sku-shadow-sm);
}

@media (max-width: 575px) {
    /* 手机上让二维码占满一整行，长按识别更好点，两个待开放位并排收在下方 */
    .contact-qrcode .contact-qrcode-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .contact-qrcode .contact-qrcode-item:first-child {
        grid-column: 1 / -1;
    }

    .contact-qrcode .contact-qrcode-item:first-child .qrcode-thumb {
        max-width: 210px;
        margin: 0 auto;
    }
}


/* ---------- AI 友好化：主视觉品牌眉标 ----------
   h1 内承载「品牌 + 业务 + 地域」；眉标独占一行小字，不改变主标题文案。
   banner 原为 align-items: baseline，h1 多一行后会让「智慧生活」与小字基线对齐，
   此处改为 flex-end，使胶囊仍与主标题同一水平线。字号用 clamp 独立控制，
   避免随 h1 的响应式缩放而变得过小。 */
.rs-banner-one .banner-content-top { align-items: flex-end; }
.rs-banner-one .banner-title .banner-eyebrow {
    display: block;
    margin: 0 0 14px;
    font-size: clamp(11px, 1.1vw, 16px);
    font-weight: 500;
    letter-spacing: 0.2em;
    line-height: 1.5;
    text-align: center;
    white-space: normal;
    color: var(--sku-accent, #C9F31D);
}
@media only screen and (max-width: 767px) {
    .rs-banner-one .banner-title .banner-eyebrow { margin-bottom: 10px; letter-spacing: 0.12em; }
}