/* Tailwind CSS CDN */
@import url('https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css');

/* Custom color variables */
:root {
    --primary-blue: #0078FF;
    --primary-dark: #003CF1;
    --secondary-blue: #0A82FF;
    --background-dark: #000000;
    --background-alt: #0A0E27;
    --text-white: #FFFFFF;
    --text-gray: rgba(255, 255, 255, 0.92);
    --text-light: rgba(255, 255, 255, 0.65);
    --gradient-start: #0A82FF;
    --gradient-end: #003CF1;
}

/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    background: #000;
    font-family: 'PingFang SC Regular';
    color: var(--text-white);
    line-height: 1.6;
    overflow-x: hidden;
}

.robot4s-page {
    min-height: 100vh;
    position: relative;
}

/* 顶部装饰图片 - 相对于1414主容器定位 */
.header-bg-image {
    position: absolute;
    top: 93px;
    left: 0;
    width: min(1317px, calc(1317 / 1414 * 100vw));
    height: min(452px, calc(452 / 1414 * 100vw));
    z-index: 9999;
    pointer-events: none;
}

.header-bg-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 主容器 - 限制最大宽度并居中 */
.main-container {
    position: relative;
    max-width: 1414px;
    margin: 0 auto;
    width: 100%;
}

/* 页面缩放容器 */
.page-scale {
    width: 100%;
}

/* 背景视觉效果容器 - 纯黑星空 */
.background-visuals {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
    background: #000000;
}

/* 星星容器 */
.stars-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* 星星样式 - 增强闪烁效果 */
.star {
    position: absolute;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 4px 1px rgba(255, 255, 255, 0.8),
                0 0 8px 2px rgba(255, 255, 255, 0.4);
    animation: twinkle 3s ease-in-out infinite;
}

/* 星星大小 */
.star.small { 
    width: 1px; 
    height: 1px; 
    box-shadow: 0 0 2px 1px rgba(255, 255, 255, 0.6);
}
.star.medium { 
    width: 2px; 
    height: 2px; 
    box-shadow: 0 0 4px 1px rgba(255, 255, 255, 0.8),
                0 0 6px 2px rgba(255, 255, 255, 0.4);
}
.star.large { 
    width: 3px; 
    height: 3px; 
    box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.9),
                0 0 10px 4px rgba(255, 255, 255, 0.5);
}

/* 闪烁动画 - 更明显的闪烁 */
@keyframes twinkle {
    0%, 100% { 
        opacity: 0.2; 
        transform: scale(0.8);
    }
    50% { 
        opacity: 1; 
        transform: scale(1.2);
    }
}

/* 星星样式 */
.star {
    position: absolute;
    width: min(2px, calc(2 / 1414 * 100vw));
    height: min(2px, calc(2 / 1414 * 100vw));
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 min(4px, calc(4 / 1414 * 100vw)) min(1px, calc(1 / 1414 * 100vw)) rgba(255, 255, 255, 0.6);
    animation: twinkle 4s ease-in-out infinite;
}

@keyframes twinkle {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 1; }
}

/* 星星的不同大小 */
.star.small { width: min(1px, calc(1 / 1414 * 100vw)); height: min(1px, calc(1 / 1414 * 100vw)); }
.star.medium { width: min(2px, calc(2 / 1414 * 100vw)); height: min(2px, calc(2 / 1414 * 100vw)); }
.star.large { width: min(3px, calc(3 / 1414 * 100vw)); height: min(3px, calc(3 / 1414 * 100vw)); }

/* 星星的不同动画延迟 */
.star:nth-child(1) { animation-delay: 0s; }
.star:nth-child(2) { animation-delay: 0.5s; }
.star:nth-child(3) { animation-delay: 1s; }
.star:nth-child(4) { animation-delay: 1.5s; }
.star:nth-child(5) { animation-delay: 2s; }
.star:nth-child(6) { animation-delay: 2.5s; }
.star:nth-child(7) { animation-delay: 3s; }
.star:nth-child(8) { animation-delay: 3.5s; }
.star:nth-child(9) { animation-delay: 4s; }
.star:nth-child(10) { animation-delay: 4.5s; }
.star:nth-child(11) { animation-delay: 5s; }
.star:nth-child(12) { animation-delay: 5.5s; }
.star:nth-child(13) { animation-delay: 6s; }
.star:nth-child(14) { animation-delay: 6.5s; }
.star:nth-child(15) { animation-delay: 7s; }
.star:nth-child(16) { animation-delay: 7.5s; }
.star:nth-child(17) { animation-delay: 8s; }
.star:nth-child(18) { animation-delay: 8.5s; }
.star:nth-child(19) { animation-delay: 9s; }
.star:nth-child(20) { animation-delay: 9.5s; }

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

/* 确保所有内容在背景之上 */
section {
    position: relative;
    z-index: 1;
}

button {
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
}

/* =========================
   Robot4S Banner Section
   ========================= */
.robot4s-banner-section {
    position: relative;
    width: 100%;
    height: min(650px, calc(650 / 1414 * 100vw));
    overflow: visible;
    z-index: 1;
}

/* 背景图片 */
.banner-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

.banner-bg-image {
    width: min(1005px, calc(1005 / 1414 * 100vw));
    height: min(426px, calc(426 / 1414 * 100vw));
    object-fit: cover;
    margin-top: min(224px, calc(224 / 1414 * 100vw));
    margin-left: auto;
    margin-right: auto;
    display: block;
}

/* 光晕装饰图片 - 位于视频上方 */
.banner-guangyun {
    position: absolute;
    top: min(490px, calc(490 / 1414 * 100vw));
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    width: min(863px, calc(863 / 1414 * 100vw));
    height: min(367px, calc(367 / 1414 * 100vw));
}

.banner-guangyun img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 标题容器 */
.banner-title-container {
    position: absolute;
    top: min(176px, calc(176 / 1414 * 100vw));
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 2;
    width: 100%;
    max-width: min(1200px, calc(1200 / 1414 * 100vw));
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 主标题 - 参考重点业务页面样式 */
.banner-title-main {
    font-size: min(45px, calc(45 / 1414 * 100vw));
    font-weight: 700;
    letter-spacing: min(2.75px, calc(2.75 / 1414 * 100vw));
    background: linear-gradient(90deg, #0085FF 0%, #FFFFFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    margin: 0;
    line-height: 1;
    display: inline-block;
    font-family: "PingFang SC Semibold";
    margin-bottom: min(15px, calc(15 / 1414 * 100vw));
}

/* 副标题 - 参考重点业务页面样式 */
.banner-title-sub {
    font-size: min(25px, calc(25 / 1414 * 100vw));
    font-weight: 700;
    background: linear-gradient(90deg, #1F80FF 10%, #FFFFFF 75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    margin: 0;
    display: inline-block;
    line-height: 1.4;
    font-family: "PingFang SC Semibold";
}

/* =========================
   联系信息面板 - 位置样式
   ========================= */
/* 注意: 基础样式已在 contact-panel.css 中定义，此处只保留位置相关样式 */

/* 联系面板位置 - robot4s页面 */
.robot4s-page .contact-panel {
    position: absolute;
    top: min(738px, calc(738 / 1414 * 100vw));
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    z-index: 3;
}

.robot4s-page .contact-panel.active {
    transform: translateX(-50%) translateY(0);
}

/* 机器人图标触发器位置 */
.robot4s-page .robot-icon-trigger {
    position: absolute;
    top: min(672px, calc(672 / 1414 * 100vw));
    right: min(159px, calc(159 / 1414 * 100vw));
    z-index: 4;
}

/* =========================
   展示区域 Section
   ========================= */
.showcase-section {
    position: relative;
    width: 100%;
    min-height: min(800px, calc(800 / 1414 * 100vw));
    overflow: hidden;
    margin-top: min(244px, calc(244 / 1414 * 100vw));
    /* background: #000000; */
}

/* Tab 导航 - 在图片上方 */
.showcase-tabs {
    position: relative;
    width: 100%;
    max-width: min(1400px, calc(1400 / 1414 * 100vw));
    margin: 0 auto min(20px, calc(20 / 1414 * 100vw)) auto;
    padding: 0 min(40px, calc(40 / 1414 * 100vw));
    display: flex;
    justify-content: flex-start;
    gap: min(12px, calc(12 / 1414 * 100vw));
    z-index: 10;
    background: transparent;
}

.tab-item {
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0 min(20px, calc(20 / 1414 * 100vw));
    height: min(35px, calc(35 / 1414 * 100vw));
    border-radius: min(5px, calc(5 / 1414 * 100vw));
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    white-space: nowrap;
}

/* 渐变边框效果 */
.tab-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: min(5px, calc(5 / 1414 * 100vw));
    padding: min(1px, calc(1 / 1414 * 100vw));
    background: linear-gradient(180deg, #0A82FF 0%, #064E99 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}

.tab-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0;
    transition: opacity 0.3s ease;
    object-fit: cover;
    border-radius: min(5px, calc(5 / 1414 * 100vw));
}

.tab-text {
    position: relative;
    font-size: min(16px, calc(16 / 1414 * 100vw));
    font-weight: 500;
    color: #FFFFFF;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
    z-index: 2;
}

.tab-item.active .tab-bg {
    opacity: 1;
}

.tab-item.active .tab-text {
    font-weight: 600;
    text-shadow: 0 min(2px, calc(2 / 1414 * 100vw)) min(8px, calc(8 / 1414 * 100vw)) rgba(0, 0, 0, 0.5);
}

.tab-item:hover .tab-bg {
    opacity: 0.6;
}

/* Swiper 容器 */
.swiper-container {
    position: relative;
    width: 100%;
    height: min(600px, calc(600 / 1414 * 100vw));
    overflow: hidden;
}

/* 视频播放覆盖层 */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.video-overlay.active {
    display: flex;
}

.video-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.video-player {
    width: 100%;
    height: 100%;
    background: #000;
}

.close-video-btn {
    position: absolute;
    top: min(20px, calc(20 / 1414 * 100vw));
    right: min(20px, calc(20 / 1414 * 100vw));
    width: min(50px, calc(50 / 1414 * 100vw));
    height: min(50px, calc(50 / 1414 * 100vw));
    background: rgba(255, 255, 255, 0.2);
    border: min(2px, calc(2 / 1414 * 100vw)) solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: min(24px, calc(24 / 1414 * 100vw));
    color: #fff;
    z-index: 10;
}

.close-video-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.8);
}

.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: content-box;
    display: flex;
    transition-property: transform;
    box-sizing: border-box;
}

.swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
}

/* 展示滑块 */
.showcase-slide {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* 展示图片 */
.showcase-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* 覆盖层 */
.showcase-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.5) 100%);
}

/* 展示描述 */
.showcase-description {
    text-align: center;
    margin-bottom: min(30px, calc(30 / 1414 * 100vw));
}

.showcase-title {
    font-size: min(36px, calc(36 / 1414 * 100vw));
    font-weight: 600;
    color: #FFFFFF;
    margin: 0 0 min(15px, calc(15 / 1414 * 100vw)) 0;
    text-shadow: 0 min(2px, calc(2 / 1414 * 100vw)) min(8px, calc(8 / 1414 * 100vw)) rgba(0, 0, 0, 0.5);
}

.showcase-desc {
    font-size: min(18px, calc(18 / 1414 * 100vw));
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    line-height: 1.6;
    text-shadow: 0 min(1px, calc(1 / 1414 * 100vw)) min(4px, calc(4 / 1414 * 100vw)) rgba(0, 0, 0, 0.5);
}

/* 播放按钮区域 */
.showcase-play {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.showcase-play:hover {
    transform: scale(1.1);
}

.play-icon {
    width: min(80px, calc(80 / 1414 * 100vw));
    height: min(80px, calc(80 / 1414 * 100vw));
    display: block;
    margin-bottom: min(10px, calc(10 / 1414 * 100vw));
}

.play-text {
    font-size: min(16px, calc(16 / 1414 * 100vw));
    font-weight: 500;
    color: #FFFFFF;
    text-shadow: 0 min(2px, calc(2 / 1414 * 100vw)) min(8px, calc(8 / 1414 * 100vw)) rgba(0, 0, 0, 0.5);
}



/* Swiper 分页器 - 隐藏 */
.swiper-pagination {
    display: none !important;
}

.swiper-pagination-bullet {
    width: min(12px, calc(12 / 1414 * 100vw));
    height: min(12px, calc(12 / 1414 * 100vw));
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    margin: 0 min(8px, calc(8 / 1414 * 100vw));
    transition: all 0.3s ease;
}

.swiper-pagination-bullet-active {
    background: #0A82FF;
    transform: scale(1.2);
}
.showcase-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* 覆盖层 */
.showcase-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.5) 100%);
}

/* 展示描述 */
.showcase-description {
    position: absolute;
    top: min(37px, calc(37 / 1414 * 100vw));
    left: 0;
    width: min(1025px, calc(1025 / 1414 * 100vw));
    text-align: left;
    padding-left: min(40px, calc(40 / 1414 * 100vw));
    z-index: 10;
}

.showcase-title {
    font-size: min(36px, calc(36 / 1414 * 100vw));
    font-weight: 600;
    color: #FFFFFF;
    margin: 0 0 min(15px, calc(15 / 1414 * 100vw)) 0;
    text-shadow: 0 min(2px, calc(2 / 1414 * 100vw)) min(8px, calc(8 / 1414 * 100vw)) rgba(0, 0, 0, 0.5);
}

.showcase-desc {
    font-size: min(18px, calc(18 / 1414 * 100vw));
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    line-height: 1.6;
    text-shadow: 0 min(1px, calc(1 / 1414 * 100vw)) min(4px, calc(4 / 1414 * 100vw)) rgba(0, 0, 0, 0.5);
}

/* 播放按钮区域 */
.showcase-play {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.showcase-play:hover {
    transform: scale(1.1);
}

.play-icon {
    width: min(80px, calc(80 / 1414 * 100vw));
    height: min(80px, calc(80 / 1414 * 100vw));
    display: block;
    margin-bottom: min(10px, calc(10 / 1414 * 100vw));
}

.play-text {
    font-size: min(16px, calc(16 / 1414 * 100vw));
    font-weight: 500;
    color: #FFFFFF;
    text-shadow: 0 min(2px, calc(2 / 1414 * 100vw)) min(8px, calc(8 / 1414 * 100vw)) rgba(0, 0, 0, 0.5);
}

/* =========================
   响应式设计
   ========================= */
@media (max-width: 1024px) {
    .showcase-section {
        min-height: min(600px, calc(600 / 1414 * 100vw));
    }

    .swiper-container {
        height: min(450px, calc(450 / 1414 * 100vw));
    }

    .showcase-tabs {
        padding: 0 min(30px, calc(30 / 1414 * 100vw));
        gap: min(12px, calc(12 / 1414 * 100vw));
    }

    .tab-text {
        font-size: min(16px, calc(16 / 1414 * 100vw));
    }

    .showcase-title {
        font-size: min(28px, calc(28 / 1414 * 100vw));
    }

    .showcase-desc {
        font-size: min(16px, calc(16 / 1414 * 100vw));
    }

    .play-icon {
        width: min(60px, calc(60 / 1414 * 100vw));
        height: min(60px, calc(60 / 1414 * 100vw));
    }

    .play-text {
        font-size: min(14px, calc(14 / 1414 * 100vw));
    }

    .swiper-pagination {
        bottom: min(100px, calc(100 / 1414 * 100vw));
    }

    .robot4s-banner-section {
        min-height: min(700px, calc(700 / 1414 * 100vw));
    }

    .banner-title-main {
        font-size: min(45px, calc(45 / 1414 * 100vw));
        letter-spacing: min(2.25px, calc(2.25 / 1414 * 100vw));
    }

    .banner-title-sub {
        font-size: min(22px, calc(22 / 1414 * 100vw));
    }

    /* robot4s页面响应式位置调整 */
    .robot4s-page .robot-icon-trigger {
        position: absolute;
        right: 5%;
        bottom: min(40px, calc(40 / 1414 * 100vw));
    }
}

@media (max-width: 768px) {
    .robot4s-banner-section {
        min-height: min(600px, calc(600 / 1414 * 100vw));
    }

    .banner-title-main {
        font-size: min(36px, calc(36 / 1414 * 100vw));
        letter-spacing: min(1.8px, calc(1.8 / 1414 * 100vw));
    }

    .banner-title-sub {
        font-size: min(18px, calc(18 / 1414 * 100vw));
    }

    .banner-title-container {
        top: 12%;
        padding: 0 min(20px, calc(20 / 1414 * 100vw));
    }

    /* robot4s页面移动端位置调整 */
    .robot4s-page .contact-panel {
        position: absolute;
        bottom: min(60px, calc(60 / 1414 * 100vw));
    }

    .robot4s-page .robot-icon-trigger {
        position: absolute;
        right: 3%;
        bottom: min(30px, calc(30 / 1414 * 100vw));
    }
}

@media (max-width: 480px) {
    .robot4s-banner-section {
        min-height: min(500px, calc(500 / 1414 * 100vw));
    }

    .banner-title-main {
        font-size: min(28px, calc(28 / 1414 * 100vw));
        letter-spacing: min(1.4px, calc(1.4 / 1414 * 100vw));
    }

    .banner-title-sub {
        font-size: min(16px, calc(16 / 1414 * 100vw));
    }

    /* robot4s页面小屏幕位置调整保持不变 */

    .showcase-section {
        min-height: min(500px, calc(500 / 1414 * 100vw));
    }

    .swiper-container {
        height: min(350px, calc(350 / 1414 * 100vw));
    }

    .showcase-tabs {
        padding: 0 min(25px, calc(25 / 1414 * 100vw));
        gap: min(10px, calc(10 / 1414 * 100vw));
        flex-wrap: wrap;
    }

    .tab-text {
        font-size: min(14px, calc(14 / 1414 * 100vw));
    }

    .showcase-title {
        font-size: min(24px, calc(24 / 1414 * 100vw));
        margin-bottom: min(10px, calc(10 / 1414 * 100vw));
    }

    .showcase-desc {
        font-size: min(14px, calc(14 / 1414 * 100vw));
    }

    .play-icon {
        width: min(50px, calc(50 / 1414 * 100vw));
        height: min(50px, calc(50 / 1414 * 100vw));
    }

    .play-text {
        font-size: min(13px, calc(13 / 1414 * 100vw));
    }

    .showcase-section {
        min-height: min(450px, calc(450 / 1414 * 100vw));
    }

    .swiper-container {
        height: min(300px, calc(300 / 1414 * 100vw));
    }

    .showcase-tabs {
        padding: 0 min(20px, calc(20 / 1414 * 100vw));
        gap: min(8px, calc(8 / 1414 * 100vw));
    }

    .tab-item {
        flex: 1 0 calc(50% - min(12px, calc(12 / 1414 * 100vw)));
    }

    .tab-text {
        font-size: min(13px, calc(13 / 1414 * 100vw));
    }

    .showcase-title {
        font-size: min(20px, calc(20 / 1414 * 100vw));
        margin-bottom: min(8px, calc(8 / 1414 * 100vw));
    }

    .showcase-desc {
        font-size: min(13px, calc(13 / 1414 * 100vw));
    }

    .play-icon {
        width: min(45px, calc(45 / 1414 * 100vw));
        height: min(45px, calc(45 / 1414 * 100vw));
    }

    .play-text {
        font-size: min(12px, calc(12 / 1414 * 100vw));
    }

    .swiper-pagination {
        bottom: min(60px, calc(60 / 1414 * 100vw));
    }
}

/* =========================
   公共头尾注入后的修复
   ========================= */
#header-container { 
    position: relative; 
    z-index: 1000; 
}
#footer-container { 
    position: relative; 
    z-index: 1; 
}

/* =========================
   Hero Section
   ========================= */
.hero-section {
    position: relative;
    padding: min(100px, calc(100 / 1414 * 100vw)) 0 min(80px, calc(80 / 1414 * 100vw));
    overflow: hidden;
}

.hero-container {
    max-width: min(1400px, calc(1400 / 1414 * 100vw));
    margin: 0 auto;
    padding: 0 min(20px, calc(20 / 1414 * 100vw));
}

.hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: min(60px, calc(60 / 1414 * 100vw));
    align-items: center;
}

.hero-left {
    display: flex;
    flex-direction: column;
    gap: min(24px, calc(24 / 1414 * 100vw));
}

.hero-kicker {
    display: inline-block;
    padding: min(10px, calc(10 / 1414 * 100vw)) min(16px, calc(16 / 1414 * 100vw));
    border-radius: 999px;
    background: rgba(10, 130, 255, 0.16);
    border: min(1px, calc(1 / 1414 * 100vw)) solid rgba(10, 130, 255, 0.35);
    font-size: min(14px, calc(14 / 1414 * 100vw));
    letter-spacing: min(1px, calc(1 / 1414 * 100vw));
    color: var(--text-white);
    width: fit-content;
}

.hero-title {
    font-size: min(56px, calc(56 / 1414 * 100vw));
    font-weight: 700;
    line-height: 1.1;
    background: linear-gradient(180deg, #0A82FF 0%, #FFFFFF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin: 0;
}

.hero-description {
    font-size: min(18px, calc(18 / 1414 * 100vw));
    line-height: 1.8;
    color: var(--text-gray);
    max-width: min(580px, calc(580 / 1414 * 100vw));
}

.hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: min(12px, calc(12 / 1414 * 100vw));
}

.hero-tag {
    padding: min(10px, calc(10 / 1414 * 100vw)) min(16px, calc(16 / 1414 * 100vw));
    border-radius: min(10px, calc(10 / 1414 * 100vw));
    background: rgba(255, 255, 255, 0.08);
    border: min(1px, calc(1 / 1414 * 100vw)) solid rgba(255, 255, 255, 0.14);
    font-size: min(14px, calc(14 / 1414 * 100vw));
    color: var(--text-gray);
    transition: all 0.3s ease;
}

.hero-tag:hover {
    background: rgba(10, 130, 255, 0.2);
    border-color: rgba(10, 130, 255, 0.5);
    transform: translateY(min(-2px, calc(-2 / 1414 * 100vw)));
}

.hero-actions {
    display: flex;
    gap: min(16px, calc(16 / 1414 * 100vw));
    flex-wrap: wrap;
}

.btn-primary {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: min(14px, calc(14 / 1414 * 100vw)) min(32px, calc(32 / 1414 * 100vw));
    border-radius: min(12px, calc(12 / 1414 * 100vw));
    background: radial-gradient(ellipse 202.21% 953.83% at 116.99% -22.22%, #0A82FF 0%, #003CF1 100%);
    color: #fff;
    font-weight: 600;
    font-size: min(16px, calc(16 / 1414 * 100vw));
    border: min(1px, calc(1 / 1414 * 100vw)) solid rgba(255, 255, 255, 0.18);
    text-decoration: none;
    transition: all 0.3s ease;
    will-change: transform;
}

.btn-primary:hover {
    transform: translateY(min(-2px, calc(-2 / 1414 * 100vw)));
    box-shadow: 0 min(8px, calc(8 / 1414 * 100vw)) min(24px, calc(24 / 1414 * 100vw)) rgba(10, 130, 255, 0.4);
}

.btn-secondary {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: min(14px, calc(14 / 1414 * 100vw)) min(32px, calc(32 / 1414 * 100vw));
    border-radius: min(12px, calc(12 / 1414 * 100vw));
    background: rgba(255, 255, 255, 0.10);
    border: min(1px, calc(1 / 1414 * 100vw)) solid rgba(255, 255, 255, 0.18);
    color: var(--text-white);
    font-weight: 600;
    font-size: min(16px, calc(16 / 1414 * 100vw));
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(min(-2px, calc(-2 / 1414 * 100vw)));
}

.btn-ghost {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: min(10px, calc(10 / 1414 * 100vw));
    padding: min(14px, calc(14 / 1414 * 100vw)) min(32px, calc(32 / 1414 * 100vw));
    border-radius: min(12px, calc(12 / 1414 * 100vw));
    background: rgba(255, 255, 255, 0.10);
    border: min(1px, calc(1 / 1414 * 100vw)) solid rgba(255, 255, 255, 0.18);
    color: var(--text-gray);
    font-weight: 600;
    font-size: min(16px, calc(16 / 1414 * 100vw));
    transition: all 0.3s ease;
}

.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(min(-2px, calc(-2 / 1414 * 100vw)));
}

.btn-ghost img {
    width: min(24px, calc(24 / 1414 * 100vw));
    height: min(24px, calc(24 / 1414 * 100vw));
}

.btn-large {
    padding: min(16px, calc(16 / 1414 * 100vw)) min(48px, calc(48 / 1414 * 100vw));
    font-size: min(18px, calc(18 / 1414 * 100vw));
}

.hero-right {
    position: relative;
}

.hero-images {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-main-image {
    width: 100%;
    max-width: min(600px, calc(600 / 1414 * 100vw));
    height: auto;
    position: relative;
    z-index: 2;
}

.hero-deco-image {
    position: absolute;
    right: min(-50px, calc(-50 / 1414 * 100vw));
    top: min(-50px, calc(-50 / 1414 * 100vw));
    width: min(400px, calc(400 / 1414 * 100vw));
    opacity: 0.5;
    z-index: 1;
    transform: rotate(-90deg);
}

/* =========================
   Solutions Section
   ========================= */
.solutions-section {
    padding: min(100px, calc(100 / 1414 * 100vw)) 0;
    position: relative;
}

.solutions-section::before {
    content: '';
    position: absolute;
    left: 0;
    top: min(-133px, calc(-133 / 1414 * 100vw));
    width: min(823px, calc(823 / 1414 * 100vw));
    height: min(707px, calc(707 / 1414 * 100vw));
    background: url('/assets/design/robot4s/service-bg-right.png') no-repeat;
    background-size: contain;
    pointer-events: none;
    z-index: 0;
}

.solutions-container {
    max-width: min(1400px, calc(1400 / 1414 * 100vw));
    margin: 0 auto;
    padding: 0 min(20px, calc(20 / 1414 * 100vw));
}

.section-header {
    text-align: center;
    margin-bottom: min(60px, calc(60 / 1414 * 100vw));
}

.section-title {
    font-size: min(48px, calc(48 / 1414 * 100vw));
    /* font-weight: 700; */
    background: linear-gradient(180deg, #1f80ff 0%, #ffffff 66%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1;
     margin-bottom: min(11px, calc(11 / 1414 * 100vw));
}

.section-subtitle {
    font-size: min(20px, calc(20 / 1414 * 100vw));
    color: var(--text-light);
    margin: 0;
    font-family: "PingFang SC Semibold";
}

/* 指定区块标题改为20px白色 */
.solutions-section .section-title,
.service-network-section .section-title,
.spare-parts-section .section-title,
.financial-shield-section .section-title,
.after-sales-bottom-section .section-title 
{
    font-size: min(30px, calc(30 / 1414 * 100vw));
    color: #fff;
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
}

.solutions-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: min(24px, calc(24 / 1414 * 100vw));
    margin-bottom: min(50px, calc(50 / 1414 * 100vw));
}

.solution-card {
    position: relative;
    border-radius: min(16px, calc(16 / 1414 * 100vw));
    overflow: hidden;
    border: min(1px, calc(1 / 1414 * 100vw)) solid rgba(255, 255, 255, 0.14);
    background: rgba(0, 0, 0, 0.3);
    transition: all 0.4s ease;
    will-change: transform;
    aspect-ratio: 2.6 / 3.8;
}

.solution-card:hover {
    transform: translateY(min(-8px, calc(-8 / 1414 * 100vw)));
    border-color: rgba(10, 130, 255, 0.5);
    box-shadow: 0 min(12px, calc(12 / 1414 * 100vw)) min(32px, calc(32 / 1414 * 100vw)) rgba(10, 130, 255, 0.2);
}

.solution-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.solution-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: min(30px, calc(30 / 1414 * 100vw)) min(20px, calc(20 / 1414 * 100vw));
    background: linear-gradient(180deg, rgba(17, 17, 17, 0) 0%, rgba(17, 17, 17, 0.85) 100%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.solution-title {
    font-size: min(16px, calc(16 / 1414 * 100vw));
    font-weight: 600;
    color: #fff;
    margin: 0;
    text-align: center;
}

.solutions-description {
    text-align: center;
    font-size: min(16px, calc(16 / 1414 * 100vw));
    color: var(--text-light);
    line-height: 1.8;
    max-width: min(950px, calc(950 / 1414 * 100vw));
    margin: 0 auto min(40px, calc(40 / 1414 * 100vw));
    /* padding: 0 min(20px, calc(20 / 1414 * 100vw)); */

}

.solutions-cta {
    text-align: center;
}

.btn-custom {
    display: inline-block;
    padding: min(14px, calc(14 / 1414 * 100vw)) min(50px, calc(50 / 1414 * 100vw));
    background-image: url('/assets/design/robot4s/button.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    color: #fff;
    font-size: min(16px, calc(16 / 1414 * 100vw));
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
}

.btn-custom:hover {
    transform: translateY(min(-2px, calc(-2 / 1414 * 100vw)));
    filter: brightness(1.1);
}

/* =========================
   Service Network Section
   ========================= */
.service-network-section {
    /* padding: min(100px, calc(100 / 1414 * 100vw)) 0 0; */
    position: relative;
}

.service-network-section::before {
    content: '';
    position: absolute;
    left: 50%;
    top: min(-150px, calc(-150 / 1414 * 100vw));
    transform: translateX(-50%);
    width: min(1414px, calc(1414 / 1414 * 100vw));
    height: min(1026px, calc(1026 / 1414 * 100vw));
    background: url('/assets/design/robot4s/Light-Network.png') no-repeat center top;
    background-size: contain;
    pointer-events: none;
    z-index: -1;
}

.service-network-container {
    max-width: min(1400px, calc(1400 / 1414 * 100vw));
    margin: 0 auto;
    padding: 0 min(20px, calc(20 / 1414 * 100vw));
    font-family: "PingFang SC Medium";
}

.service-network-header {
    text-align: center;
    margin-bottom: min(30px, calc(30 / 1414 * 100vw));
}

.service-network-slogan {
    font-size: min(50px, calc(50 / 1414 * 100vw));
    font-weight: 500;
    color: #fff;
    margin: min(16px, calc(16 / 1414 * 100vw)) 0;
    letter-spacing: min(2px, calc(2 / 1414 * 100vw));
}

.service-network-image-wrapper {
    position: relative;
    max-width: min(1400px, calc(1400 / 1414 * 100vw));
    margin: 0 auto min(18px, calc(18 / 1414 * 100vw));
    border-radius: min(16px, calc(16 / 1414 * 100vw));
    overflow: hidden;
    box-shadow: 0 min(20px, calc(20 / 1414 * 100vw)) min(50px, calc(50 / 1414 * 100vw)) rgba(0, 0, 0, 0.5);
    font-family: "PingFang SC Medium";
}

.service-network-image {
    width: 100%;
    height: auto;
    display: block;
}

.service-network-buttons {
    position: absolute;
    top: min(30px, calc(30 / 1414 * 100vw));
    left: min(30px, calc(30 / 1414 * 100vw));
    display: flex;
    flex-direction: column;
    gap: min(15px, calc(15 / 1414 * 100vw));
}

.service-network-btn {
    padding: min(12px, calc(12 / 1414 * 100vw)) min(30px, calc(30 / 1414 * 100vw));
    background: #fff;
    color: #333;
    border-radius: min(10px, calc(10 / 1414 * 100vw));
    text-decoration: none;
    font-size: min(16px, calc(16 / 1414 * 100vw));
    font-weight: 500;
    box-shadow: 0 min(4px, calc(4 / 1414 * 100vw)) min(15px, calc(15 / 1414 * 100vw)) rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.service-network-btn:hover {
    background: #1f80ff;
    color: #fff;
    transform: translateY(min(-2px, calc(-2 / 1414 * 100vw)));
    box-shadow: 0 min(6px, calc(6 / 1414 * 100vw)) min(20px, calc(20 / 1414 * 100vw)) rgba(31, 128, 255, 0.4);
}

.service-network-description {
    text-align: center;
    font-size: min(16px, calc(16 / 1414 * 100vw));
    color: #ffffff;
    line-height: 1.8;
    max-width: min(1000px, calc(1000 / 1414 * 100vw));
    margin: 0 auto;
    padding: 0 min(20px, calc(20 / 1414 * 100vw));
}

/* =========================
   Spare Parts Section
   ========================= */
.spare-parts-section {
    position: relative;
    padding: min(100px, calc(100 / 1414 * 100vw)) 0;
}

.spare-parts-header {
    text-align: center;
    margin-bottom: min(60px, calc(60 / 1414 * 100vw));
}

.spare-parts-background {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.spare-parts-bg {
    width: min(957px, calc(957 / 1414 * 100vw));
    margin: 0 auto;
    height: auto;
    display: block;
    min-height: min(400px, calc(400 / 1414 * 100vw));
    object-fit: cover;
    /* opacity: 0.8; */
}

.spare-parts-icons {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    gap: min(146px, calc(146 / 1414 * 100vw));
    width: 100%;
    max-width: min(1400px, calc(1400 / 1414 * 100vw));
    padding: 0 min(20px, calc(20 / 1414 * 100vw));
    box-sizing: border-box;
}

.spare-parts-icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: min(20px, calc(20 / 1414 * 100vw));
}

.spare-parts-icon {
    width: min(110px, calc(110 / 1414 * 100vw));
    height: min(110px, calc(110 / 1414 * 100vw));
    object-fit: contain;
    transition: transform 0.3s ease;
}

.spare-parts-icon:hover {
    transform: translateY(min(-8px, calc(-8 / 1414 * 100vw)));
}

.spare-parts-icon-text {
    font-size: min(18px, calc(18 / 1414 * 100vw));
    font-weight: 500;
    color: #fff;
    text-align: center;
    max-width: min(200px, calc(200 / 1414 * 100vw));
    line-height: 1.5;
    font-family: "PingFang SC Semibold";
}



/* =========================
   Financial & Shield Section
   ========================= */
.financial-shield-section {
    /* padding: 0 0 min(50px, calc(50 / 1414 * 100vw)); */
    position: relative;
}

.financial-shield-container {
    max-width: min(1400px, calc(1400 / 1414 * 100vw));
    margin: 0 auto;
    padding: 0 min(20px, calc(20 / 1414 * 100vw));
}

.financial-shield-header {
    text-align: center;
    margin-bottom: min(40px, calc(40 / 1414 * 100vw));
}

.financial-shield-content {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    /*gap: min(60px, calc(60 / 1414 * 100vw));*/
    position: relative;
}

/* 盾牌中间 */
.shield-wrapper-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.shield-wrapper {
    position: relative;
    animation: floatAnimation 3s ease-in-out infinite;
}

.shield-image {
    width: min(450px, calc(450 / 1414 * 100vw));
    height: auto;
    display: block;
}

.base-image {
    width: min(650px, calc(650 / 1414 * 100vw));
    height: auto;
    display: block;
    margin-top: min(-20px, calc(-20 / 1414 * 100vw));
}

@keyframes floatAnimation {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(min(-20px, calc(-20 / 1414 * 100vw)));
    }
}

/* 服务卡片 */
.service-card-item {
    position: relative;
    width: min(240px, calc(240 / 1414 * 100vw));
    height: min(240px, calc(240 / 1414 * 100vw));
    overflow: hidden;
    border-radius: min(12px, calc(12 / 1414 * 100vw));
    flex-shrink: 0;
}

.service-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.service-card-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.service-card-content {
    position: relative;
    z-index: 1;
    padding: min(20px, calc(20 / 1414 * 100vw));
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* 左右卡片不同上边距 */
.service-card-left {
    margin-top: min(66px, calc(66 / 1414 * 100vw));
}

.service-card-right {
    margin-top: min(234px, calc(234 / 1414 * 100vw));
}

.service-card-title {
    font-size: min(20px, calc(20 / 1414 * 100vw));
    font-weight: 600;
    color: #fff;
    text-align: center;
    margin: 0 0 min(10px, calc(10 / 1414 * 100vw)) 0;
    padding-top: min(8px, calc(8 / 1414 * 100vw));
    font-family: "PingFang SC Semibold";
}

.service-card-desc {
    font-size: min(16px, calc(16 / 1414 * 100vw));
    line-height: 1.6;
    color: #fff;
    text-align: left;
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    font-family: "PingFang SC Medium";
}

/* =========================
   After Sales Bottom Section
   ========================= */
.after-sales-bottom-section {
    padding: min(100px, calc(100 / 1414 * 100vw)) 0 min(50px, calc(50 / 1414 * 100vw));
}

.after-sales-bottom-container {
    max-width: min(1182px, calc(1182 / 1414 * 100vw));
    margin: 0 auto;
    /* padding: 0 min(20px, calc(20 / 1414 * 100vw)); */
}

.after-sales-bottom-section .section-header {
    text-align: center;
    margin-bottom: min(31px, calc(31 / 1414 * 100vw));
}

.contact-boxes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: min(40px, calc(40 / 1414 * 100vw));
}

.contact-box {
    position: relative;
    border: min(2px, calc(2 / 1414 * 100vw)) solid rgba(31, 128, 255, 0.7);
    border-radius: min(10px, calc(10 / 1414 * 100vw));
    padding: min(3px, calc(3 / 1414 * 100vw));
    background: linear-gradient(135deg, rgba(31, 128, 255, 0.05), rgba(31, 128, 255, 0.1));
    transition: all 0.3s ease;
}

.contact-box:hover {
    background-image: url('/assets/design/robot4s/active-bg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-color: transparent;
    border-radius:0;
}

.contact-box-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: min(40px, calc(40 / 1414 * 100vw));
    border-radius: min(18px, calc(18 / 1414 * 100vw));
    height: min(200px, calc(200 / 1414 * 100vw));
}

.contact-info {
    flex: 1;
}

.contact-title {
    font-size: min(20px, calc(20 / 1414 * 100vw));
    font-weight: 600;
    color: #fff;
    margin-bottom: min(12px, calc(12 / 1414 * 100vw));
}

.contact-desc {
    font-size: min(16px, calc(16 / 1414 * 100vw));
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.contact-action {
    flex-shrink: 0;
}

.contact-btn {
    display: inline-block;
    padding: min(12px, calc(12 / 1414 * 100vw)) min(40px, calc(40 / 1414 * 100vw));
    background: #0A82FF;
    color: #fff;
    border-radius: min(10px, calc(10 / 1414 * 100vw));
    text-decoration: none;
    font-size: min(16px, calc(16 / 1414 * 100vw));
    font-weight: 500;
    transition: all 0.3s ease;
    margin-right: min(80px, calc(80 / 1414 * 100vw));
}

.contact-btn:hover {
    /* background: rgba(31, 128, 255, 0.5); */
    /* transform: translateY(min(-2px, calc(-2 / 1414 * 100vw))); */
}

.qrcode-image {
    width: min(120px, calc(120 / 1414 * 100vw));
    height: min(120px, calc(120 / 1414 * 100vw));
    object-fit: contain;
    border-radius: min(10px, calc(10 / 1414 * 100vw));
}

/* =========================
   Showroom Section
   ========================= */
.showroom-section {
    padding: min(100px, calc(100 / 1414 * 100vw)) 0;
    position: relative;
}

.showroom-container {
    max-width: min(1400px, calc(1400 / 1414 * 100vw));
    margin: 0 auto;
    padding: 0 min(20px, calc(20 / 1414 * 100vw));
}

.showroom-image-wrapper {
    position: relative;
    border-radius: min(20px, calc(20 / 1414 * 100vw));
    overflow: hidden;
    margin-bottom: min(40px, calc(40 / 1414 * 100vw));
    box-shadow: 0 min(20px, calc(20 / 1414 * 100vw)) min(50px, calc(50 / 1414 * 100vw)) rgba(0, 0, 0, 0.5);
}

.showroom-image {
    width: 100%;
    height: auto;
    display: block;
}

.showroom-cta {
    text-align: center;
}

/* =========================
   Service Section
   ========================= */
.service-section {
    padding: min(100px, calc(100 / 1414 * 100vw)) 0;
    position: relative;
    background: linear-gradient(180deg, rgba(5, 95, 248, 0.15) 0%, rgba(0, 60, 241, 0.05) 100%);
}

.service-container {
    max-width: min(1400px, calc(1400 / 1414 * 100vw));
    margin: 0 auto;
    padding: 0 min(20px, calc(20 / 1414 * 100vw));
}

.service-content {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: min(60px, calc(60 / 1414 * 100vw));
    align-items: start;
}

.service-left {
    display: flex;
    flex-direction: column;
    gap: min(24px, calc(24 / 1414 * 100vw));
}

.service-intro {
    padding: min(32px, calc(32 / 1414 * 100vw));
    background: rgba(255, 255, 255, 0.05);
    border-radius: min(20px, calc(20 / 1414 * 100vw));
    border: min(1px, calc(1 / 1414 * 100vw)) solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(min(10px, calc(10 / 1414 * 100vw)));
}

.service-intro p {
    font-size: min(16px, calc(16 / 1414 * 100vw));
    line-height: 1.8;
    color: var(--text-gray);
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: min(24px, calc(24 / 1414 * 100vw));
}

.service-card {
    padding: min(32px, calc(32 / 1414 * 100vw));
    background: rgba(255, 255, 255, 0.03);
    border-radius: min(20px, calc(20 / 1414 * 100vw));
    border: min(1px, calc(1 / 1414 * 100vw)) solid rgba(255, 255, 255, 0.08);
    transition: all 0.4s ease;
    will-change: transform;
}

.service-card:hover {
    transform: translateY(min(-4px, calc(-4 / 1414 * 100vw)));
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(10, 130, 255, 0.3);
    box-shadow: 0 min(8px, calc(8 / 1414 * 100vw)) min(24px, calc(24 / 1414 * 100vw)) rgba(10, 130, 255, 0.15);
}

.service-card-header {
    margin-bottom: min(16px, calc(16 / 1414 * 100vw));
    padding-bottom: min(16px, calc(16 / 1414 * 100vw));
    border-bottom: min(1px, calc(1 / 1414 * 100vw)) solid rgba(255, 255, 255, 0.1);
}

.service-card-title {
    font-size: min(20px, calc(20 / 1414 * 100vw));
    font-weight: 600;
    color: var(--text-white);
    margin: 0 0 min(4px, calc(4 / 1414 * 100vw));
}

.service-card-subtitle {
    font-size: min(14px, calc(14 / 1414 * 100vw));
    color: var(--text-light);
    margin: 0;
}

.service-card-desc {
    font-size: min(15px, calc(15 / 1414 * 100vw));
    line-height: 1.7;
    color: var(--text-gray);
    margin: 0;
}

/* =========================
   Appointment Section
   ========================= */
.appointment-section {
    padding: min(100px, calc(100 / 1414 * 100vw)) 0;
    position: relative;
}

.appointment-container {
    max-width: min(1400px, calc(1400 / 1414 * 100vw));
    margin: 0 auto;
    padding: 0 min(20px, calc(20 / 1414 * 100vw));
}

.appointment-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: min(60px, calc(60 / 1414 * 100vw));
    align-items: center;
    padding: min(60px, calc(60 / 1414 * 100vw));
    background: linear-gradient(135deg, rgba(10, 130, 255, 0.1) 0%, rgba(0, 60, 241, 0.1) 100%);
    border-radius: min(24px, calc(24 / 1414 * 100vw));
    border: min(1px, calc(1 / 1414 * 100vw)) solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(min(20px, calc(20 / 1414 * 100vw)));
}

.appointment-info {
    display: flex;
    flex-direction: column;
    gap: min(24px, calc(24 / 1414 * 100vw));
}

.appointment-title {
    font-size: min(32px, calc(32 / 1414 * 100vw));
    font-weight: 700;
    background: linear-gradient(180deg, #0A82FF 0%, #FFFFFF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin: 0;
}

.appointment-desc {
    font-size: min(16px, calc(16 / 1414 * 100vw));
    line-height: 1.7;
    color: var(--text-gray);
    margin: 0;
}

.appointment-details {
    display: flex;
    flex-direction: column;
    gap: min(16px, calc(16 / 1414 * 100vw));
}

.appointment-item {
    display: grid;
    grid-template-columns: min(100px, calc(100 / 1414 * 100vw)) 1fr;
    gap: min(16px, calc(16 / 1414 * 100vw));
    padding: min(16px, calc(16 / 1414 * 100vw));
    background: rgba(0, 0, 0, 0.2);
    border-radius: min(12px, calc(12 / 1414 * 100vw));
    border: min(1px, calc(1 / 1414 * 100vw)) solid rgba(255, 255, 255, 0.08);
}

.appointment-label {
    font-size: min(14px, calc(14 / 1414 * 100vw));
    font-weight: 600;
    color: var(--text-light);
}

.appointment-value {
    font-size: min(15px, calc(15 / 1414 * 100vw));
    color: var(--text-gray);
}

.appointment-actions {
    display: flex;
    gap: min(16px, calc(16 / 1414 * 100vw));
    flex-wrap: wrap;
}

.appointment-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.appointment-image img {
    max-width: min(400px, calc(400 / 1414 * 100vw));
    width: 100%;
    filter: drop-shadow(0 min(20px, calc(20 / 1414 * 100vw)) min(40px, calc(40 / 1414 * 100vw)) rgba(0, 0, 0, 0.4));
}

/* =========================
   滚动动画
   ========================= */
.scroll-animate-up {
    opacity: 0;
    transform: translateY(min(40px, calc(40 / 1414 * 100vw)));
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: opacity, transform;
}

.scroll-animate-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* =========================
   响应式设计
   ========================= */
@media (max-width: 1200px) {
    .hero-content {
        grid-template-columns: 1fr;
        gap: min(40px, calc(40 / 1414 * 100vw));
    }

    .hero-left {
        text-align: center;
    }

    .hero-actions {
        justify-content: center;
    }

    .hero-tags {
        justify-content: center;
    }

    .solutions-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .service-content {
        grid-template-columns: 1fr;
    }

    .appointment-card {
        grid-template-columns: 1fr;
    }

    .appointment-image {
        display: none;
    }
}

@media (max-width: 768px) {
    .hero-section {
        padding: min(60px, calc(60 / 1414 * 100vw)) 0;
    }

    .hero-title {
        font-size: min(36px, calc(36 / 1414 * 100vw));
    }

    .hero-description {
        font-size: min(16px, calc(16 / 1414 * 100vw));
    }

    .section-title {
        font-size: min(32px, calc(32 / 1414 * 100vw));
    }

    /* 指定区块标题改为20px白色 */
    .solutions-section .section-title,
    .service-network-section .section-title,
    .spare-parts-section .section-title,
    .financial-shield-section .section-title {
        font-size: min(20px, calc(20 / 1414 * 100vw));
    }

    .section-subtitle {
        font-size: min(14px, calc(14 / 1414 * 100vw));
    }

    .solutions-section,
    .showroom-section,
    .service-section,
    .appointment-section,
    .service-network-section {
        padding: min(60px, calc(60 / 1414 * 100vw)) 0 0;
    }

    .solutions-grid {
        grid-template-columns: 1fr;
        gap: min(16px, calc(16 / 1414 * 100vw));
    }

    .solution-title {
        font-size: min(18px, calc(18 / 1414 * 100vw));
    }

    .solutions-description {
        font-size: min(14px, calc(14 / 1414 * 100vw));
        margin-bottom: min(30px, calc(30 / 1414 * 100vw));
    }

    .btn-custom {
        padding: min(12px, calc(12 / 1414 * 100vw)) min(40px, calc(40 / 1414 * 100vw));
        font-size: min(14px, calc(14 / 1414 * 100vw));
    }

    .service-network-highlight {
        font-size: min(32px, calc(32 / 1414 * 100vw));
        margin-bottom: min(30px, calc(30 / 1414 * 100vw));
    }

    .service-network-buttons {
        top: min(20px, calc(20 / 1414 * 100vw));
        left: min(20px, calc(20 / 1414 * 100vw));
        gap: min(12px, calc(12 / 1414 * 100vw));
    }

    .service-network-btn {
        padding: min(10px, calc(10 / 1414 * 100vw)) min(20px, calc(20 / 1414 * 100vw));
        font-size: min(14px, calc(14 / 1414 * 100vw));
    }

    .service-network-description {
        font-size: min(14px, calc(14 / 1414 * 100vw));
    }

    .spare-parts-section {
        padding: min(60px, calc(60 / 1414 * 100vw)) 0;
    }

    .spare-parts-icons {
        gap: min(40px, calc(40 / 1414 * 100vw));
        top: 12%;
    }

    .spare-parts-icon {
        width: min(100px, calc(100 / 1414 * 100vw));
        height: min(100px, calc(100 / 1414 * 100vw));
    }

    .spare-parts-icon-text {
        font-size: min(16px, calc(16 / 1414 * 100vw));
        max-width: min(150px, calc(150 / 1414 * 100vw));
    }

    .service-grid {
        grid-template-columns: 1fr;
        gap: min(16px, calc(16 / 1414 * 100vw));
    }

    .spare-parts-icons {
        gap: min(40px, calc(40 / 1414 * 100vw));
        top: 12%;
    }

    .spare-parts-icon {
        width: min(100px, calc(100 / 1414 * 100vw));
        height: min(100px, calc(100 / 1414 * 100vw));
    }

    .spare-parts-icon-text {
        font-size: min(16px, calc(16 / 1414 * 100vw));
        max-width: min(150px, calc(150 / 1414 * 100vw));
    }

    .financial-shield-section {
        padding: min(60px, calc(60 / 1414 * 100vw)) 0;
    }

    .financial-shield-content {
        flex-direction: column;
        gap: min(30px, calc(30 / 1414 * 100vw));
    }

    .shield-image {
        width: min(350px, calc(350 / 1414 * 100vw));
    }

    .base-image {
        width: min(500px, calc(500 / 1414 * 100vw));
    }

    .service-card-left {
        order: 2;
    }

    .shield-wrapper-center {
        order: 1;
    }

    .service-card-right {
        order: 3;
    }

    .service-card-item {
        width: min(240px, calc(240 / 1414 * 100vw));
        height: min(240px, calc(240 / 1414 * 100vw));
    }

    .service-card-title {
        font-size: min(18px, calc(18 / 1414 * 100vw));
        padding-top: min(8px, calc(8 / 1414 * 100vw));
    }

    .service-card-desc {
        font-size: min(14px, calc(14 / 1414 * 100vw));
        -webkit-line-clamp: 6;
    }

    .service-card-left,
    .service-card-right {
        margin-top: 0;
    }

    .after-sales-bottom-section {
        padding: min(60px, calc(60 / 1414 * 100vw)) 0;
    }

    .contact-boxes {
        grid-template-columns: 1fr;
        gap: min(30px, calc(30 / 1414 * 100vw));
    }

    .contact-box-content {
        flex-direction: column;
        text-align: center;
        gap: min(20px, calc(20 / 1414 * 100vw));
        padding: min(35px, calc(35 / 1414 * 100vw));
    }

    .contact-btn {
        padding: min(11px, calc(11 / 1414 * 100vw)) min(35px, calc(35 / 1414 * 100vw));
        font-size: min(15px, calc(15 / 1414 * 100vw));
    }

    .service-card {
        padding: min(20px, calc(20 / 1414 * 100vw));
    }

    .appointment-card {
        padding: min(30px, calc(30 / 1414 * 100vw));
    }

    .appointment-title {
        font-size: min(24px, calc(24 / 1414 * 100vw));
    }

    .appointment-actions {
        flex-direction: column;
    }

    .btn-primary,
    .btn-secondary,
    .btn-ghost {
        width: 100%;
    }
}

@media (max-width: 480px) {
    /* 指定区块标题改为20px白色 */
    .solutions-section .section-title,
    .service-network-section .section-title,
    .spare-parts-section .section-title,
    .financial-shield-section .section-title {
        font-size: min(20px, calc(20 / 1414 * 100vw));
    }

    .hero-kicker {
        font-size: min(12px, calc(12 / 1414 * 100vw));
        padding: min(8px, calc(8 / 1414 * 100vw)) min(12px, calc(12 / 1414 * 100vw));
    }

    .hero-tag {
        font-size: min(12px, calc(12 / 1414 * 100vw));
        padding: min(8px, calc(8 / 1414 * 100vw)) min(12px, calc(12 / 1414 * 100vw));
    }

    .hero-images {
        flex-direction: column;
    }

    .hero-deco-image {
        position: relative;
        right: 0;
        top: 0;
        width: 100%;
        transform: none;
        margin-top: min(-20px, calc(-20 / 1414 * 100vw));
    }

    .service-network-highlight {
        font-size: min(28px, calc(28 / 1414 * 100vw));
    }

    .service-network-buttons {
        position: static;
        flex-direction: column;
        width: 100%;
        padding: 0 min(20px, calc(20 / 1414 * 100vw));
        box-sizing: border-box;
    }

    .service-network-btn {
        width: 100%;
        text-align: center;
    }

    .spare-parts-icons {
        flex-direction: column;
        gap: min(30px, calc(30 / 1414 * 100vw));
        top: 50%;
        transform: translate(-50%, -50%);
        align-items: center;
    }

    .spare-parts-icon {
        width: min(80px, calc(80 / 1414 * 100vw));
        height: min(80px, calc(80 / 1414 * 100vw));
    }

    .spare-parts-icon-text {
        font-size: min(14px, calc(14 / 1414 * 100vw));
        max-width: min(120px, calc(120 / 1414 * 100vw));
    }

    .financial-shield-section {
        padding: min(40px, calc(40 / 1414 * 100vw)) 0;
    }

    .financial-shield-header {
        margin-bottom: min(30px, calc(30 / 1414 * 100vw));
    }

    .financial-shield-content {
        flex-direction: column;
        gap: min(20px, calc(20 / 1414 * 100vw));
    }

    .shield-image {
        width: min(280px, calc(280 / 1414 * 100vw));
    }

    .base-image {
        width: min(400px, calc(400 / 1414 * 100vw));
    }

    .service-card-left {
        order: 2;
    }

    .shield-wrapper-center {
        order: 1;
    }

    .service-card-right {
        order: 3;
    }

    .service-card-item {
        width: min(280px, calc(280 / 1414 * 100vw));
        height: min(200px, calc(200 / 1414 * 100vw));
    }

    .service-card-title {
        font-size: min(18px, calc(18 / 1414 * 100vw));
        padding-top: min(8px, calc(8 / 1414 * 100vw));
    }

    .service-card-desc {
        font-size: min(14px, calc(14 / 1414 * 100vw));
    }

    .after-sales-bottom-section {
        padding: min(60px, calc(60 / 1414 * 100vw)) 0;
    }

    .contact-boxes {
        gap: min(24px, calc(24 / 1414 * 100vw));
    }

    .contact-box-content {
        padding: min(30px, calc(30 / 1414 * 100vw));
    }

    .contact-title {
        font-size: min(24px, calc(24 / 1414 * 100vw));
    }

    .contact-desc {
        font-size: min(14px, calc(14 / 1414 * 100vw));
    }

    .contact-btn {
        padding: min(10px, calc(10 / 1414 * 100vw)) min(30px, calc(30 / 1414 * 100vw));
        font-size: min(14px, calc(14 / 1414 * 100vw));
    }

    .qrcode-image {
        width: min(100px, calc(100 / 1414 * 100vw));
        height: min(100px, calc(100 / 1414 * 100vw));
    }
}