/* ===== Reset & Base ===== */
        *, *::before, *::after {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
            color: #ffffff;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
        }

        /* ===== Header / Navbar ===== */
        .header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            padding: 20px 60px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            transition: background-color 0.3s ease, box-shadow 0.3s ease;
        }

        .header-logo {
            display: flex;
            align-items: center;
            flex-shrink: 0;
        }

        .header-logo img {
            height: 40px;
            width: auto;
        }

        .nav-links {
            display: flex;
            align-items: center;
            gap: 36px;
            list-style: none;
        }

        .nav-links li a {
            color: rgba(255, 255, 255, 0.6);
            text-decoration: none;
            font-size: clamp(12px, 0.781vw, 18px);
            font-weight: 400;
            transition: color 0.3s ease;
            letter-spacing: 0.5px;
        }

        .nav-links li a:hover,
        .nav-links li a.active {
            color: #ffffff;
        }

        .btn-contact {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 24px;
            border-radius: 24px;
            background: linear-gradient(135deg, #EFB14D 0%, #891C31 100%);
            color: #ffffff;
            font-size: clamp(12px, 0.729vw, 16px);
            font-weight: 500;
            text-decoration: none;
            border: none;
            cursor: pointer;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            white-space: nowrap;
        }

        .btn-contact:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 20px rgba(196, 69, 54, 0.4);
        }

        .btn-contact .arrow {
            font-size: clamp(10px, 0.625vw, 14px);
            transition: transform 0.3s ease;
        }

        .btn-contact:hover .arrow {
            transform: translateX(3px);
        }

        /* Mobile menu toggle */
        .menu-toggle {
            display: none;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 40px;
            height: 40px;
            cursor: pointer;
            background: none;
            border: none;
            padding: 0;
            z-index: 1001;
        }

        .menu-toggle span {
            display: block;
            width: 24px;
            height: 2px;
            background-color: #ffffff;
            border-radius: 2px;
            transition: all 0.3s ease;
        }

        .menu-toggle span:nth-child(1) {
            margin-bottom: 6px;
        }

        .menu-toggle span:nth-child(2) {
            margin-bottom: 6px;
        }

        .menu-toggle.active span:nth-child(1) {
            transform: rotate(45deg) translate(5px, 6px);
        }

        .menu-toggle.active span:nth-child(2) {
            opacity: 0;
        }

        .menu-toggle.active span:nth-child(3) {
            transform: rotate(-45deg) translate(5px, -6px);
        }

        /* Mobile nav overlay */
        .mobile-nav {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(26, 10, 10, 0.97);
            z-index: 999;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
            padding: 80px 30px 30px;
            gap: 0;
            opacity: 0;
            transition: opacity 0.3s ease;
            overflow-y: auto;
        }

        .mobile-nav.show {
            display: flex;
            opacity: 1;
        }

        /* 一级菜单：直接子级 a（首页/关于我们等无二级的） */
        .mobile-nav > a {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            padding: 18px 0;
            color: #c8b8b0;
            text-decoration: none;
            font-size: 20px;
            font-weight: 400;
            transition: color 0.3s ease;
            border-bottom: 1px solid rgba(200, 184, 176, 0.1);
        }

        .mobile-nav > a:hover,
        .mobile-nav > a.active {
            color: #ffffff;
        }

        /* 一级菜单：带二级的（产品服务等），下划线在整行 toggle 上 */
        .mobile-dropdown-toggle {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            padding: 18px 0;
            color: #c8b8b0;
            font-size: 20px;
            font-weight: 400;
            border-bottom: 1px solid rgba(200, 184, 176, 0.1);
            cursor: pointer;
            transition: color 0.3s ease;
        }

        /* toggle 内的一级链接文字：占满剩余空间、无下划线、可点击跳转 */
        .mobile-dropdown-toggle > a {
            flex: 1;
            color: inherit;
            text-decoration: none;
            border-bottom: none;
            padding: 0;
        }

        .mobile-dropdown-toggle:hover,
        .mobile-dropdown-toggle > a:hover {
            color: #ffffff;
        }

        /* 箭头：固定右侧、扩大点击区 */
        .mobile-dropdown-toggle .iconfont25 {
            font-size: 14px !important;
            color: rgba(200, 184, 176, 0.5);
            transition: transform 0.3s ease;
            padding: 6px 0 6px 16px;
            margin: -6px 0;
        }

        .mobile-dropdown-toggle.active .iconfont25 {
            transform: rotate(180deg);
        }

        /* 二级菜单：无下划线 */
        .mobile-nav-sub {
            display: none;
            flex-direction: column;
            padding-left: 20px;
            gap: 0;
        }

        .mobile-nav-sub.show {
            display: flex;
        }

        .mobile-nav-sub a {
            font-size: 16px !important;
            color: rgba(200, 184, 176, 0.7) !important;
            padding: 14px 0;
            border-bottom: none;
            text-decoration: none;
        }

        .mobile-nav-sub a:hover,
        .mobile-nav-sub a.active {
            color: #ffffff !important;
        }


        /* ===== Banner Section ===== */
        .banner {
            position: relative;
            width: 100%;
            aspect-ratio: 1920 / 960;
            min-height: 520px;
            max-height: 960px;
            height: 100%;
            background: url('../images/about/about-banner.jpg') center center / cover no-repeat;
            display: flex;
            align-items: center;
            padding: 120px 0 60px;
            overflow: hidden;
        }

        .banner::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 120px;
            pointer-events: none;
        }

        .banner-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            max-width: calc(100% - 120px);
            margin: 0 auto;
            gap: 40px;
        }

        .banner-text {
            flex: 0 0 auto;
            z-index: 2;
        }

        .banner-title {
            font-size: clamp(32px, 3.125vw, 80px);
            font-weight: 700;
            line-height: 1.3;
            margin-bottom: 20px;
            background: linear-gradient(135deg, #EFB14D 0%,  #891C31 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .banner-subtitle {
            font-size: clamp(16px, 1vw, 20px);
            max-width: 720px;
            font-weight: 400;
            color: #fff;
            line-height: 1.6;
            letter-spacing: 1px;
        }
        /* ===== Responsive: Tablet (768px - 1024px) ===== */
        @media (max-width: 1024px) {
            .header {
                padding: 14px 24px;
            }

            .nav-links {
                gap: 24px;
            }

            .banner {
                padding: 100px 40px 60px;
            }
        }

        /* ===== Responsive: Mobile (<= 767px) ===== */
        @media (max-width: 767px) {
            .header {
                padding: 12px 20px;
            }
            .nav-links,
            .btn-contact {
                display: none;
            }

            .menu-toggle {
                display: flex;
            }

            .header-logo img {
                height: 32px;
            }

            .banner {
                min-height: 100vh;
                min-height: 100dvh;
                padding: 80px 0 40px;
                flex-direction: column;
                align-items: flex-start;
                background: url('../images/about/mabout-banner.jpg') center center / cover no-repeat;
            }

            .banner-content {
                flex-direction: column;
                align-items: flex-start;
                max-width: calc(100% - 40px);
                gap: 24px;
            }

            .banner-text {
                max-width: 100%;
                padding-top: 20px;
            }

            .banner-title {
                font-size: 28px;
            }

            .banner-subtitle {
                font-size: 16px;
            }

            .banner-image {
                width: 100%;
                justify-content: center;
            }

            .banner-image img {
                max-height: 320px;
            }
        }

        /* ===== Responsive: Small mobile (<= 480px) ===== */
        @media (max-width: 480px) {
            .banner-title {
                font-size: 24px;
            }

            .banner-subtitle {
                font-size: 14px;
            }

            .banner-image img {
                max-height: 260px;
            }
        }

        /* ===== Large screens (>= 1920px) ===== */
        @media (min-width: 1920px) {
            .nav-links {
                gap: 48px;
            }
        }

        /* ===== About Section ===== */
        .about {
            position: relative;
            width: 100%;
            padding: clamp(40px, 3vw, 60px) 0 0;
            margin: 0;
            overflow: hidden;
        }

        .about-inner {
            margin: 0 auto;
        }

        .classbreadcrumb {
            width: 100%;
            padding: clamp(40px, 3vw, 60px) 60px;
        }
        .breadcrumb-position {
            position: absolute;
            width: 100%;
            padding: clamp(40px, 3vw, 60px) 60px 0;
            bottom: 0;
            left: 0;
        }

        .breadcrumb {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: clamp(40px, 3vw, 60px);
            font-size: clamp(12px, 0.729vw, 16px);
            color: #1E281A;
        }

        .breadcrumb a {
            color: #1E281A;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .breadcrumb a:hover {
            color: #891C31;
        }

        .breadcrumb .separator i {
            color: #1E281A;
            font-size: 12px;
        }

        .breadcrumb .current {
            color: #1E281A;
        }

        .bannerbreadcrumb a {
            color: #fff;
        }

        .bannerbreadcrumb a:hover {
            color: #fff;
        }

        .bannerbreadcrumb .separator i {
            color: #fff;
        }

        .bannerbreadcrumb .current {
            color: #fff;
        }

        .about-content {
            display: flex;
            align-items: center;
            gap: 60px;
        }

        .about-text {
            flex: 1;
        }

        .about-title {
            font-size: clamp(28px, 2.5vw, 48px);
            font-weight: 700;
            color: #000;
            line-height: 1.3;
            margin-bottom: 24px;
        }

        .about-desc {
            font-size: clamp(13px, 0.833vw, 16px);
            color: #333;
            line-height: 1.8;
            text-align: justify;
        }

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

        .about-image img {
            width: 100%;
            max-width: clamp(400px, 46.615vw, 895px);
            height: auto;
            border-radius: 16px;
            object-fit: cover;
            box-shadow: 0 8px 40px rgba(0, 0, 0, 0.1);
        }

        /* ===== About Responsive: Tablet ===== */
        @media (max-width: 1024px) {
            .about {
                padding: 60px 20px 80px;
            }

            .about-content {
                gap: 40px;
            }

            .breadcrumb {
                margin-bottom: 40px;
            }
            .breadcrumb-position {
              padding: 30px 20px 0;
            }
        }

        /* ===== About Responsive: Mobile ===== */
        @media (max-width: 767px) {
            .about {
                padding: 30px 0 0;
                margin: 0;
            }
            .breadcrumb .separator i {
                font-size: 12px;
            }
            .about-content {
                flex-direction: column;
                gap: 32px;
            }

            .about-text {
                max-width: 100%;
            }

            .about-image {
                width: 100%;
            }

            .about-image img {
                max-width: 100%;
                border-radius: 12px;
            }
            .classbreadcrumb {
              width: 100%;
              padding: 30px 20px 0;
            }
            .breadcrumb {
                margin-bottom: 32px;
            }
        }

        /* ===== Stats Section ===== */
        .stats {
            width: 100%;
            padding: clamp(40px, 3vw, 60px) clamp(20px, 3.125vw, 60px) clamp(30px, 3vw, 60px);
            background: #ffffff;
            text-align: center;
        }

        .stats-inner {
            margin: 0 auto;
        }

        .stats-title {
            font-size: clamp(24px, 2.5vw, 48px);
            font-weight: 700;
            color: #1a1a1a;
            margin-bottom: 60px;
            line-height: 1.4;
        }

        .stats-grid {
            display: flex;
            justify-content: center;
            align-items: flex-start;
            gap: clamp(60px, 6.25vw, 160px);
            flex-wrap: wrap;
        }

        .stat-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            min-width: 140px;
        }

        .stat-label {
            font-size: clamp(12px, 0.938vw, 18px);
            color: #999;
            margin-bottom: 12px;
            white-space: nowrap;
        }

        .stat-number {
            font-size: clamp(42px, 4.479vw, 86px);
            background: linear-gradient(135deg, #bf1d30 0%, #FFC238 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            line-height: 1.1;
            font-weight: 700;
        }

        .stat-number .counter,
        .stat-number .stat-suffix {
            background: inherit;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* ===== Stats Responsive: Tablet ===== */
        @media (max-width: 1024px) {
            .stats {
                padding: 40px 40px 80px;
            }

            .stats-title {
                margin-bottom: 40px;
            }

            .stats-grid {
                gap: 24px;
            }
        }

        /* ===== Stats Responsive: Mobile ===== */
        @media (max-width: 767px) {
            .stats {
                padding: 0 15px 60px;
            }

            .stats-title {
                margin-bottom: 32px;
            }

            .stats-grid {
                width: 100%;
                justify-content: space-around;
                gap: 20px;
            }

            .stat-item {
                min-width: 100px;
            }

            .stat-label {
                font-size: 11px;
                margin-bottom: 8px;
            }
        }

        @media (max-width: 480px) {
            .stats-grid {
                gap: 16px;
            }

            .stat-item {
                min-width: 80px;
            }

            .stat-label {
                font-size: 10px;
            }
        }

        /* ===== Culture Section ===== */
        .culture {
            position: relative;
            width: 100%;
            padding: clamp(100px, 8.4vw, 160px) clamp(20px, 3.125vw, 80px) clamp(100px, 8.4vw, 160px);
            background: url('../images/about/culturebg.png') no-repeat center center;
            background-size: 100% auto;
            overflow: hidden;
        }

        .culture-inner {
            margin: 0 auto;
        }

        .culture-title {
            font-size: clamp(28px, 2.5vw, 48px);
            font-weight: 700;
            color: #000000;
            text-align: center;
            margin-bottom: 60px;
            letter-spacing: 4px;
        }

        .culture-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: clamp(20px, 2.083vw, 40px);
        }

        .culture-card {
            padding: clamp(24px, 2.5vw, 48px) clamp(20px, 2.083vw, 40px);
            min-height: clamp(140px, 10.417vw, 200px);
            transition: all 0.3s ease;
        }

        .culture-card-icon {
            width: clamp(60px, 5vw, 94px);
            height: clamp(60px, 5vw, 94px);
            border-radius: clamp(10px, 0.625vw, 12px);
            background: linear-gradient(135deg, #FEBE36 0%, #BC1132 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: clamp(16px, 1.25vw, 24px);
            box-shadow: 0 4px 12px rgba(190, 60, 50, 0.2);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .culture-card:hover .culture-card-icon {
            transform: translateY(-4px);
            box-shadow: 0 8px 20px rgba(190, 60, 50, 0.3);
        }

        .culture-card-icon img {
            width: 50%;
            height: 50%;
            object-fit: contain;
            filter: brightness(0) invert(1);
        }



        .culture-card-title {
            font-size: clamp(20px, 1.875vw, 36px);
            font-weight: 700;
            color: #121212;
            margin-bottom: clamp(12px, 0.833vw, 16px);
        }

        .culture-card-desc {
            font-size: clamp(14px, 1.042vw, 20px);
            color: #666666;
            line-height: 1.8;
        }

        /* ===== Culture Responsive: Tablet ===== */
        @media (max-width: 1024px) {
            .culture {
                padding: 60px 40px 80px;
            }

            .culture-title {
                margin-bottom: 40px;
            }

            .culture-grid {
                gap: 20px;
            }
        }

        /* ===== Culture Responsive: Mobile ===== */
        @media (max-width: 767px) {
            .culture {
                padding: 40px 20px 60px;
                background: url('../images/about/mculturebg.png') no-repeat center center;
                background-size: 100% auto;
            }

            .culture-grid {
                grid-template-columns: 1fr;
                gap: 16px;
            }

            .culture-card {
                min-height: auto;
                padding: 20px;
            }

            .culture-title {
                margin-bottom: 32px;
            }
        }

        /* ===== 发展历程板块 ===== */

        /* 发展历程板块容器 */
        .timeline-section {
            width: 100%;
            padding: clamp(60px, 6.25vw, 120px) 0 clamp(80px, 6.25vw, 120px);
            background: #ffffff;
            overflow: hidden;
        }

        .timeline-inner {
            max-width: 100%;
            margin: 0 auto;
        }

        .timeline-title {
            font-size: clamp(28px, 2.5vw, 48px);
            font-weight: 700;
            color: #1a1a1a;
            text-align: center;
            margin-bottom: clamp(40px, 4.167vw, 80px);
            letter-spacing: 2px;
            padding: 0 clamp(20px, 3.125vw, 60px);
        }

        /* ===== Timeline Scroll ===== */
        .timeline-scroll {
            width: 100%;
            overflow-x: auto;
            overflow-y: visible;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

        .timeline-scroll::-webkit-scrollbar {
            display: none;
        }

        .timeline-track {
            display: flex;
            align-items: stretch;
            position: relative;
            min-width: 1200px;
            padding: 0 40px;
            gap: 0;
            height: 380px;
        }

        /* Wave SVG */
        .timeline-wave {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            pointer-events: none;
        }

        /* ===== Node Card ===== */
        .timeline-node-card {
            flex: 1;
            position: relative;
            min-width: 280px;
            padding: 0 20px;
            z-index: 1;
            height: 100%;
        }

        /* Node dot on the curve - positioned absolutely to align with wave */
        .timeline-node-dot {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: #ffffff;
            border: 2px solid #b33b4c;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
        }

        .timeline-node-dot::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #b33b4c;
        }

        /* Nodes 1,3 - dot at top of wave */
        .timeline-node-card:nth-of-type(1) .timeline-node-dot
        {
            top: 13.66%;
        }
        .timeline-node-card:nth-of-type(3) .timeline-node-dot 
        {
            top: 13.66%;
        }

        /* Nodes 2,4 - dot at bottom of wave */
        .timeline-node-card:nth-of-type(2) .timeline-node-dot
        {
            top: 76.66%;
        }
        .timeline-node-card:nth-of-type(4) .timeline-node-dot 
        {
            top: 76.66%;
        }

        /* Node content */
        .timeline-node-content {
            width: 100%;
            max-width: 260px;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }

        /* Content below the dot (for nodes 1,3 where dot is at top) */
        .timeline-node-top {
            top: calc(22% + 24px);
            left: 60%;
            text-align: left;
        }
        .timeline-node-top3 {
            top: calc(22% + 24px);
            left: 55%;
            text-align: left;
        }

        /* Content above the dot (for nodes 2,4 where dot is at bottom) */
        .timeline-node-bottom {
            bottom: calc(27% + 24px);
            left: 55%;
            text-align: left;
        }
        .timeline-node-bottom4 {
            bottom: calc(30% + 24px);
            text-align: left;
        }
        .timeline-node-title {
            font-size: clamp(20px, 1.667vw, 32px);
            font-weight: 700;
            background: linear-gradient(135deg, #EFB14D 0%, #891C31 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 4px;
            line-height: 1.3;
        }

        .timeline-node-year {
            font-size: clamp(13px, 1.042vw, 20px);
            color: #891C31;
            font-weight: 600;
            margin-bottom: 12px;
        }

        .timeline-node-year-sub {
            font-size: clamp(13px, 1.042vw, 20px);
            color: #891C31;
            font-weight: 600;
            margin-bottom: 12px;
        }

        .timeline-node-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .timeline-node-list li {
            position: relative;
            font-size: clamp(12px, 0.729vw, 14px);
            color: #666;
            line-height: 1.6;
            padding-left: 14px;
            margin-bottom: 2px;
        }

        .timeline-node-list li::before {
            content: '';
            position: absolute;
            left: 0;
            top: 9px;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #bbb;
        }

        /* ===== Timeline Responsive: Tablet & Mobile (保持PC视觉，仅允许横向滚动) ===== */
        @media (max-width: 1199px) {
            .timeline-section {
                padding: 60px 0 80px;
            }

            .timeline-title {
                margin-bottom: 40px;
            }

            /* 保持PC的视觉效果，强制 min-width 1200px，触发横向滚动 */
            .timeline-track {
                min-width: 1200px;
            }
        }

        /* ===== Timeline Responsive: Mobile Small (同样保持PC视觉) ===== */
        @media (max-width: 767px) {
            .timeline-section {
                padding: 40px 0 60px;
            }

            .timeline-title {
                margin-bottom: 32px;
            }

            /* 保持 min-width 1200px 以维持PC视觉比例 */
            .timeline-track {
                min-width: 1200px;
                padding: 0 20px;
            }
        }

        /* ===== 移动端时间线（独立版本，PC端隐藏） ===== */
        .timeline-mobile {
            display: none;
        }

        /* ===== 在移动端显示移动端时间线，隐藏PC端 ===== */
        @media (max-width: 1199px) {
            .timeline-scroll {
                display: none;
            }

            .timeline-mobile {
                display: block;
            }
        }

        /* ===== Mobile Timeline Styles ===== */
        .timeline-mobile {
            width: 100%;
            position: relative;
        }

        .timeline-mobile-scroll {
            width: 100%;
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

        .timeline-mobile-scroll::-webkit-scrollbar {
            display: none;
        }

        .timeline-mobile-track {
            display: flex;
            align-items: stretch;
            position: relative;
            padding: 40px;
            gap: 0;
            height: 240px;
        }

        /* Mobile Wave SVG */
        .timeline-mobile-wave {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            pointer-events: none;
        }

        /* ===== Mobile Node Card ===== */
        .timeline-mobile-card {
            flex: 1;
            position: relative;
            min-width: 240px;
            padding: 0 16px;
            z-index: 1;
            height: 100%;
        }

        /* Mobile dot */
        .timeline-mobile-dot {
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: #ffffff;
            border: 2px solid #d0d0d0;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
        }

        .timeline-mobile-dot::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: #b33b4c;
        }

        /* Mobile - Nodes 1,3 at top (y=40 of 240 = 16.67%) */
        .timeline-mobile-card:nth-of-type(1) .timeline-mobile-dot
        {
            top: -4px;
            left: 38%;
        }
        .timeline-mobile-card:nth-of-type(3) .timeline-mobile-dot {
            top: -6px;
            left: 34%;
        }
        /* Mobile - Nodes 2,4 at bottom (y=200 of 240 = 83.33%) */
        .timeline-mobile-card:nth-of-type(2) .timeline-mobile-dot
        {
            top: 94.66%;
            left: 38%;
        }
        .timeline-mobile-card:nth-of-type(4) .timeline-mobile-dot {
            top: 94.66%;
            left: 30%;
        }
        .timeline-mobile-top {
            top: calc(16.67% + 24px);
            left: 60%;
        }
        .timeline-mobile-top3 {
            top: calc(16.67% + 24px);
            left: 43%;
        }

        .timeline-mobile-bottom {
            bottom: calc(16.67% + 24px);
            left: 45%;
        }
        .timeline-mobile-bottom4 {
            bottom: calc(16.67% + 24px);
            left: 30%;
        }

        /* Mobile content */
        .timeline-mobile-content {
            width: 100%;
            max-width: 220px;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            text-align: left;
        }

        

        .timeline-mobile-title {
            font-size: 18px;
            font-weight: 700;
            background: linear-gradient(135deg, #EFB14D 0%, #891C31 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 4px;
            line-height: 1.3;
        }

        .timeline-mobile-year {
            font-size: 13px;
            color: #891C31;
            font-weight: 600;
            margin-bottom: 8px;
        }

        .timeline-mobile-year-sub {
            font-size: 13px;
            color: #891C31;
            font-weight: 600;
            margin-bottom: 8px;
        }

        .timeline-mobile-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .timeline-mobile-list li {
            position: relative;
            font-size: 12px;
            color: #666;
            line-height: 1.6;
            padding-left: 12px;
            margin-bottom: 2px;
        }

        .timeline-mobile-list li::before {
            content: '';
            position: absolute;
            left: 0;
            top: 8px;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: #bbb;
        }

        /* ===== Tablet (768-1199px) - 默认显示2个节点 ===== */
        @media (max-width: 1199px) and (min-width: 768px) {
            .timeline-mobile-track {
                /* 4张卡片 × 320px = 1280px，默认显示2张 */
                min-width: 1280px;
            }

            .timeline-mobile-card {
                min-width: 320px;
            }
        }

        /* ===== Smaller Mobile (≤767px) - 默认显示1个节点 ===== */
        @media (max-width: 767px) {
            .timeline-mobile-track {
                /* 4张卡片 × 320px = 1280px，默认显示1张 */
                min-width: 1280px;
                height: 240px;
                padding: 0;
            }

            .timeline-mobile-card {
                min-width: 320px;
                padding: 0 12px;
            }

            .timeline-mobile-content {
                max-width: 280px;
            }

            .timeline-mobile-title {
                font-size: 16px;
            }

            .timeline-mobile-year,
            .timeline-mobile-year-sub {
                font-size: 12px;
            }

            .timeline-mobile-list li {
                font-size: 11px;
            }
            .timeline-mobile-card:nth-of-type(1) .timeline-mobile-dot
            {
                top: 13%;
                left: 56%;
            }
            .timeline-mobile-card:nth-of-type(3) .timeline-mobile-dot {
                top: 13%;
                left: 46%;
            }
            /* Mobile - Nodes 2,4 at bottom (y=200 of 240 = 83.33%) */
            .timeline-mobile-card:nth-of-type(2) .timeline-mobile-dot
            {
                top: 80%;
                left: 52%;
            }
            .timeline-mobile-card:nth-of-type(4) .timeline-mobile-dot {
                top: 80%;
                left: 40%;
            }
            .timeline-mobile-top {
                top: calc(18.67% + 24px);
                left: 83%;
            }
            .timeline-mobile-top3 {
                top: calc(18.67% + 24px);
                left: 65%;
            }

            .timeline-mobile-bottom {
                bottom: calc(18.67% + 24px);
                left: 65%;
            }
            .timeline-mobile-bottom4 {
                bottom: calc(18.67% + 24px);
                left: 55%;
            }
        }

        /* ===== Smallest Mobile (≤480px) ===== */
        @media (max-width: 480px) {
            .timeline-mobile-track {
                /* 4张卡片 × 300px = 1200px */
                min-width: 1200px;
                height: 200px;
            }

            .timeline-mobile-card {
                min-width: 300px;
            }

            .timeline-mobile-content {
                max-width: 260px;
            }
        }

        /* ===== History Section ===== */
        .history {
            width: 100%;
            padding: 80px 60px 100px;
            /* margin-bottom: clamp(40px, 3.125vw, 60px); */
            background: #f8f8f8;
            overflow: hidden;
        }

        .history-inner {
            margin: 0 auto;
        }

        .history-title {
            font-size: clamp(28px, 2.5vw, 48px);
            font-weight: 700;
            color: #1a1a1a;
            text-align: center;
            margin-bottom: clamp(40px, 3.125vw, 60px);
            letter-spacing: 2px;
        }

        .history-swiper-wrapper {
            position: relative;
            padding: 0;
        }

        .history-swiper {
            width: 100%;
            padding-bottom: 20px;
        }

        .history-card {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .history-card-img {
            padding: clamp(30px, 3.125vw, 60px) clamp(40px, 4.167vw, 80px);
            width: 100%;
            border-radius: 12px;
            overflow: hidden;
            background: #ffffff;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .history-card-img:hover {
            transform: translateY(-4px);
        }

        .history-card-img img {
            width: 100%;
        }

        .history-card-label {
            font-size: clamp(14px, 1.042vw, 20px);
            font-weight: 700;
            color: #1a1a1a;
            margin-top: clamp(12px, 1.042vw, 20px);
            width: 100%;
            text-align: left;
        }

        /* Navigation buttons */
        .history-nav {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 16px;
            margin-top: clamp(24px, 2.083vw, 50px);
        }

        .history-nav-btn {
            width: clamp(32px, 3.125vw, 60px);
            height: clamp(32px, 3.125vw, 60px);
            border-radius: 50%;
            border: 1.5px solid #dedede;
            background: #ffffff;
            color: #ccc;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .history-nav-btn i {
            font-size: clamp(14px, 3.125vw, 24px);
            font-weight: 700;
    
        }

        .history-nav-btn:hover {
            background: linear-gradient(135deg, #FFC238 0%, #bf1d30 100%);
            border-color: transparent;
            border-width: 0;
            color: #ffffff;
        }

        .history-nav-btn:active {
            transform: scale(0.95);
        }

        /* ===== History Responsive: Tablet ===== */
        @media (max-width: 1024px) {
            .history {
                padding: 60px 40px 80px;
            }

            .history-swiper-wrapper {
                padding: 0 40px;
            }
        }

        /* ===== History Responsive: Mobile ===== */
        @media (max-width: 767px) {
            .history {
                padding: 40px 20px 60px;
            }

            .history-swiper-wrapper {
                padding: 0 20px;
            }

            .history-card-img {
                border-radius: 8px;
            }

            .history-nav-btn {
                width: 36px;
                height: 36px;
            }

            .history-nav-btn svg {
                width: 16px;
                height: 16px;
            }
        }

        /* ===== News Detail Page ===== */
        .news-detail {
            width: 100%;
            padding: clamp(120px, 8vw, 160px) clamp(20px, 3.125vw, 60px) clamp(60px, 4vw, 100px);
            background: #ffffff;
        }

        .news-detail-inner {
            margin: 0 auto;
        }

        /* Article Content */
        .article-content {
            max-width: 1400px;
            margin: 0 auto;
            padding: clamp(20px, 3.125vw, 30px);
        }

        .article-title {
            text-align: center;
            font-weight: 500;
            font-size: clamp(24px, 1.875vw, 36px);
            color: #000000;
            line-height: 1.4;
            margin-bottom: clamp(20px, 2.083vw, 30px);
        }

        .article-meta {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: clamp(6px, 0.521vw, 10px);
            margin-bottom: clamp(20px, 2.083vw, 40px);
        }

        .meta-dot {
            width: clamp(4px, 0.313vw, 6px);
            height: clamp(4px, 0.313vw, 6px);
            border-radius: 50%;
            background: linear-gradient(90deg, #FEC031 0%, #FC7A1F 37%, #FC4833 80%, #BC122F 100%);
        }

        .meta-text {
            font-family: 'PingFang SC', sans-serif;
            font-size: clamp(10px, 0.749vw, 14px);
            color: #000000;
        }

        .article-divider {
            width: 100%;
            height: 1px;
            background: rgba(0, 0, 0, 0.5);
            margin-bottom: clamp(24px, 1.563vw, 40px);
        }

        .newtags {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: clamp(12px, 1.042vw, 20px);
            margin-bottom: clamp(24px, 1.563vw, 40px);
        }
        .newtags span {
            font-size: clamp(12px, 1.25vw, 16px);
            line-height: clamp(24px, 1.563vw, 36px);
            color: #1E281A;
        }
        .newtags a {
            font-size: clamp(12px, 1.25vw, 16px);
            line-height: clamp(24px, 1.563vw, 36px);
            color: #1E281A;
            text-decoration: none;
        }
        .newtags a:hover {
            color: #891C31;
        }

        .article-content img {
            width: 100%;
            height: auto;
            display: block;
            margin-bottom: clamp(30px, 2.083vw, 50px);
        }

        .article-content p {
            font-size: clamp(12px, 1.25vw, 16px);
            line-height: clamp(24px, 1.563vw, 36px);
            color: #1E281A;
            margin-bottom: clamp(30px, 2.083vw, 50px);
        }

        .article-body p:last-child {
            margin-bottom: 0;
        }

        /* Article Navigation */
        .article-nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: clamp(16px, 1.042vw, 20px);
        }

        .article-nav-prev,
        .article-nav-next {
            font-family: 'PingFang SC', sans-serif;
            font-size: clamp(11px, 0.833vw, 16px);
            line-height: clamp(18px, 1.458vw, 28px);
            text-decoration: none;
            transition: color 0.3s ease;
            max-width: 45%;
        }

        .article-nav-prev {
            color: #6B6B6B;
        }

        .article-nav-prev:hover {
            color: #FEBE36;
        }

        .article-nav-next {
            color: #1E281A;
            text-align: right;
        }

        .article-nav-next:hover {
            color: #FEBE36;
        }

        /* Related Articles */
        .related-articles {
            max-width: 1400px;
            margin: clamp(60px, 4.167vw, 100px) auto 0;
            padding: clamp(20px, 3.125vw, 30px);
        }

        .related-title {
            font-family: 'PingFang SC', sans-serif;
            font-weight: 500;
            font-size: clamp(24px, 1.875vw, 36px);
            color: #000000;
            margin-bottom: clamp(30px, 2.083vw, 50px);
        }

        .related-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: clamp(20px, 1.563vw, 40px);
        }

        .related-card {
            text-decoration: none;
            transition: transform 0.3s ease;
        }

        .related-card:hover {
            transform: translateY(-4px);
        }

        .related-card-img {
            width: 100%;
            aspect-ratio: 16/10;
            border-radius: clamp(6px, 0.521vw, 10px);
            overflow: hidden;
            margin-bottom: clamp(12px, 0.781vw, 15px);
            background: #D9D9D9;
        }

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

        .related-card-date {
            display: block;
            font-size: clamp(10px, 0.749vw, 14px);
            color: #000000;
            margin-bottom: clamp(6px, 0.521vw, 10px);
        }

        .related-card-title {
            font-weight: 500;
            font-size: clamp(14px, 1.07vw, 20px);
            color: #000000;
            line-height: 1.4;
            margin: 0;
        }

        /* Responsive: Tablet */
        @media (max-width: 1024px) {
            .related-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        /* Responsive: Mobile */
        @media (max-width: 767px) {
            .news-detail {
                padding: clamp(16px, 2vw, 24px) clamp(16px, 2vw, 24px) clamp(40px, 4vw, 60px);
            }

            .article-content {
                padding: 0;
            }

            .article-nav {
                flex-direction: column;
                gap: clamp(12px, 1.563vw, 20px);
            }

            .article-nav-prev,
            .article-nav-next {
                max-width: 100%;
                text-align: left !important;
            }

            .related-grid {
                grid-template-columns: 1fr;
            }
        }

        /* ===== News List Page ===== */
        .news {
            position: relative;
            width: 100%;
            padding: clamp(120px, 8vw, 160px) clamp(20px, 3.125vw, 60px) clamp(60px, 4vw, 100px);
            background: #ffffff;
            overflow: hidden;
        }

        .news-bg {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 100%;
            height: 60%;
            pointer-events: none;
            z-index: 0;
        }

        .news-bg img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .news-inner {
            position: relative;
            z-index: 1;
            max-width: 1920px;
            margin: 0 auto;
        }

        /* Featured Section */
        .news-featured {
            margin-bottom: clamp(40px, 3.125vw, 80px);
        }

        .featured-header {
            margin-bottom: clamp(24px, 2.083vw, 40px);
        }

        .featured-title {
     
            font-weight: 700;
            font-size: clamp(24px, 1.875vw, 36px);
            color: #000000;
            margin-bottom: clamp(12px, 1.042vw, 20px);
            line-height: 1.3;
        }

        .featured-desc {
            font-size: clamp(14px, 0.729vw, 16px);
            color: rgba(0, 0, 0, 0.9);
            line-height: 1.8;
            max-width: clamp(800px, 4.167vw, 1000px);
        }

        /* Featured Swiper */
        .featured-swiper-wrapper {
            position: relative;
        }

        .featured-swiper {
            overflow: hidden;
        }

        .featured-swiper .swiper-slide {
            height: clamp(280px, 18.75vw, 360px);
        }

        .featured-card {
            display: flex;
            background: #f8f8f8;
            border-radius: clamp(8px, 0.521vw, 10px);
            overflow: hidden;
            text-decoration: none;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            height: 100%;
        }

        .featured-card-img {
            flex: 0 0 50%;
            overflow: hidden;
        }

        .featured-card-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 0.3s ease;
        }

        .featured-card:hover {
             .featured-card-img img {
                transform: scale(1.1);
             }
        }

        .featured-card-info {
            flex: 1;
            padding: clamp(20px, 2.083vw, 40px) clamp(25px, 2.5vw, 50px);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
        }

        .featured-card-date {
            font-size: clamp(12px, 0.729vw, 16px);
            color: rgba(0, 0, 0, 0.9);
            margin-bottom: clamp(10px, 0.833vw, 15px);
        }

        .featured-card-divider {
            width: clamp(20px, 1.563vw, 30px);
            height: 2px;
            background: linear-gradient(90deg, #FEC031 0%, #FC7A1F 37%, #FC4833 80%, #BC122F 100%);
            margin-bottom: clamp(10px, 0.833vw, 16px);
        }

        .featured-card-title {

            font-weight: 500;
            font-size: clamp(16px, 1.07vw, 20px);
            color: #000000;
            line-height: 1.4;
            margin: 0;
        }

        /* Featured Controls */
        .featured-controls {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: clamp(20px, 1.563vw, 30px);
            gap: clamp(16px, 1.042vw, 20px);
        }

        .featured-progress {
            width: 36%;
            max-width: 36%;
            height: clamp(3px, 0.208vw, 4px);
            background: #f0f0f0;
            border-radius: 2px;
            overflow: hidden;
            flex-shrink: 0;
        }

        .featured-progress-bar {
            height: 100%;
            background: linear-gradient(90deg, #FEC031 0%, #FC7A1F 37%, #FC4833 80%, #BC122F 100%);
            border-radius: 2px;
            transition: width 0.4s ease;
        }

        .featured-pagination {
            display: flex;
            align-items: center;
            gap: clamp(8px, 0.625vw, 12px);
            flex-shrink: 0;
        }

        .featured-nav-btn {
            width: clamp(32px, 2.083vw, 40px);
            height: clamp(32px, 2.083vw, 40px);
            border-radius: 50%;
            border: 1.5px solid #dedede;
            background: #e8e8e8;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999999;
            transition: all 0.3s ease;
            padding: 0;
        }

        .featured-nav-btn.featured-nav-active {
            background: linear-gradient(135deg, #FFC238 0%, #bf1d30 100%);
            border-color: transparent;
            color: #ffffff;
        }

        .featured-nav-btn:hover {
            background: linear-gradient(135deg, #FFC238 0%, #bf1d30 100%);
            border-color: transparent;
            color: #ffffff;
        }

        .featured-nav-btn:active {
            transform: scale(0.95);
        }

        .featured-page-info {
            font-family: 'PingFang SC', sans-serif;
            font-size: clamp(12px, 0.729vw, 14px);
            color: #666666;
            min-width: clamp(32px, 2.083vw, 40px);
            text-align: center;
        }

        /* Category Tabs */
        .news-categories {
            margin-bottom: clamp(30px, 2.083vw, 50px);
        }
        .faq-categories {
            margin: clamp(40px, 4.2vw, 80px);
        }
        .category-tabs {
            display: flex;
            justify-content: center;
            gap: 0;
        }

        .category-tab {
            font-family: 'PingFang SC', sans-serif;
            font-size: clamp(14px, 0.833vw, 16px);
            font-weight: 400;
            color: #000000;
            background: #F1F1F1;
            border: none;
            padding: clamp(12px, 0.833vw, 16px) clamp(32px, 3.1vw, 60px);
            cursor: pointer;
            transition: all 0.3s ease;
            border-radius: clamp(6px, 0.417vw, 8px);
            text-decoration: none;
            display: inline-block;
            border-radius: 0;
        }
        .category-tab:first-child {
            border-top-left-radius: 8px;
            border-bottom-left-radius: 8px;
        }
        .category-tab:last-child {
            border-top-right-radius: 8px;
            border-bottom-right-radius: 8px;
        }

        .category-tab:hover {
            color: #BC122F;
            text-decoration: none;
        }

        .category-tab.active {
            background: linear-gradient(90deg, #FEC031 0%, #BC122F 100%);
            color: #ffffff;
            font-weight: 500;
        }

        .category-tab.active:hover {
            color: #ffffff;
        }

        /* News Grid */
        .news-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: clamp(20px, 1.563vw, 40px);
            margin-bottom: clamp(40px, 3.125vw, 60px);
        }

        .news-item {
            text-decoration: none;
            transition: transform 0.3s ease;
            padding: 10px 0;
        }

        .news-item:hover {
            transform: translateY(-4px);
        }

        .news-item-img {
            width: 100%;
            aspect-ratio: 16/10;
            border-radius: clamp(6px, 0.521vw, 10px);
            overflow: hidden;
            margin-bottom: clamp(15px, 1.042vw, 20px);
            background: #D9D9D9;
        }

        .news-item-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .news-item-date {
            display: block;
            font-size: clamp(10px, 0.749vw, 14px);
            color: #000000;
            margin-bottom: clamp(10px, 0.781vw, 15px);
        }

        .news-item-title {
            font-weight: 500;
            font-size: clamp(14px, 1.07vw, 22px);
            color: #000000;
            line-height: 1.4;
            margin: clamp(10px, 0.781vw, 15px) 0;
        }
        .news-item-desc {
            font-size: clamp(12px, 0.729vw, 14px);
            color: #333333;
            line-height: 1.4;
        }

        /* News Pagination */
        .news-pagination {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: clamp(8px, 0.625vw, 12px);
        }

        .pagination-btn {
            width: clamp(32px, 2.083vw, 40px);
            height: clamp(32px, 2.083vw, 40px);
            border-radius: 50%;
            border: none;
            background: transparent;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #666666;
            transition: all 0.3s ease;
            padding: 0;
        }

        .pagination-btn:hover {
            color: #BC122F;
        }

        .pagination-btn:active {
            transform: scale(0.95);
        }

        .pagination-btn.disabled {
            opacity: 0.4;
            cursor: default;
        }

        .pagination-btn.disabled:hover {
            color: #666666;
        }

        .pagination-pages {
            display: flex;
            align-items: center;
            gap: clamp(20px, 1.563vw, 30px);
        }

        .pagination-page {
            min-width: clamp(32px, 2.083vw, 40px);
            height: clamp(32px, 2.083vw, 40px);
            border-radius: 50%;
            border: none;
            background: transparent;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'PingFang SC', sans-serif;
            font-size: clamp(14px, 0.938vw, 18px);
            color: #666666;
            transition: all 0.3s ease;
            padding: 0;
        }

        .pagination-page:hover {
            color: #BC122F;
        }

        .pagination-page.active {
            background: radial-gradient(circle at 6% 79%, #E90044 0%, #FFBF3A 100%);
            color: #ffffff;
            font-weight: 500;
            min-width: clamp(32px, 2.083vw, 40px);
        }

        /* Responsive: Tablet */
        @media (max-width: 1024px) {
            .news-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .featured-card {
                flex-direction: column;
            }

            .featured-card-img {
                flex: none;
                height: clamp(160px, 15vw, 220px);
            }
        }

        /* Responsive: Mobile */
        @media (max-width: 767px) {
            .news {
                padding: clamp(80px, 10vw, 120px) clamp(16px, 2vw, 24px) clamp(40px, 5vw, 60px);
            }

            .news-bg {
                width: 80%;
                height: 40%;
            }

            .news-grid {
                grid-template-columns: 1fr;
            }

            .featured-card {
                flex-direction: column;
            }

            .featured-card-img {
                flex: none;
                height: clamp(140px, 40vw, 200px);
            }

            .featured-card-info {
                padding: clamp(12px, 3vw, 20px);
            }

            .category-tabs {
                flex-wrap: wrap;
            }

            .category-tab {
                padding: clamp(12px, 1vw, 18px) clamp(32px, 2.1vw, 40px);
            }
        }

        /* ===== Contact Page ===== */
        .contact-page {
            position: relative;
            width: 100%;
            min-height: 100vh;
            padding: clamp(120px, 8vw, 160px) clamp(20px, 3.125vw, 60px) clamp(60px, 4vw, 100px);
            background: #ffffff;
            overflow: hidden;
        }

        .contact-bg-gradient {
            position: absolute;
            top: -185px;
            left: -46px;
            width: 3386px;
            height: 771px;
            background: linear-gradient(39deg, rgba(254, 189, 50, 0.24) 11%, rgba(187, 17, 49, 0.24) 72%);
            filter: blur(300px);
            pointer-events: none;
            z-index: 0;
        }

        .contact-container {
            position: relative;
            z-index: 1;
            margin: 0 auto;
        }

        .contact-content {
            display: flex;
            gap: clamp(20px, 5.208vw, 100px);
            max-width: clamp(1024px, 83.333vw, 1880px);
            background: #ffffff;
            border-radius: clamp(10px, 1.042vw, 20px);
            padding: clamp(20px, 3.125vw, 60px) clamp(20px, 4.167vw, 80px);
            margin: clamp(20px, 3.125vw, 60px) auto 0;
            box-shadow: 8px 8px 36px 4px rgba(0, 0, 0, 0.06);
        }

        .contact-info {
            flex: 1;
        }

        .contact-main-title {
            font-size: clamp(24px, 2.5vw, 38px);
            font-weight: 500;
            color: #000000;
            line-height: 1.4;
        }

        .contact-divider {
            width: 100%;
            height: 1px;
            background: #D9D9D9;
            margin: clamp(20px, 3.125vw, 32px) 0;
        }

        .contact-section {
            margin-bottom: 30px;
        }

        .contact-section-title {
            font-size: clamp(14px, 1vw, 16px);
            font-weight: 500;
            color: #666666;
            margin-bottom: 10px;
            line-height: 20px;
        }

        .contact-section-content {
            font-size: clamp(16px, 1.125vw, 18px);
            font-weight: 400;
            color: #000000;
            line-height: 20px;
        }

        .social-icons {
            display: flex;
            gap: 12px;
            margin-top: 16px;
        }

        .social-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: #F2F2F2;
            text-decoration: none;
        }
        .social-icon i {
            font-size: clamp(20px, 3.125vw, 30px);
            color: #000000;
        }
        .social-icon:hover {
            background: linear-gradient(135deg, #FEBE36 0%, #BC1132 100%);
        }
        .social-icon:hover i {
            color: #ffffff; 
        }

        .contact-form-wrapper {
            flex: 1;
           
        }

        .contact-form-title {
            font-size: clamp(24px, 2.5vw, 38px);
            min-height: clamp(60px, 6.5vw, 99px);
            font-weight: 500;
            color: #000000;
            margin-bottom: 40px;
            line-height: 1.4;
        }

        .contact-form {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .form-row {
            display: flex;
            gap: 20px;
        }

        .form-group {
            flex: 1;
            position: relative;
        }

        .form-group.full-width {
            width: 100%;
        }

        .form-group input,
        .form-group textarea {
            width: 100%;
            padding: 20px 0;
            font-size: 16px;
            font-weight: 400;
            color: #000000;
            background: transparent;
            border: none;
            border-bottom: 1px solid #D9D9D9;
            outline: none;
            transition: border-color 0.3s ease;
            font-family: inherit;
        }

        .form-group input::placeholder,
        .form-group textarea::placeholder {
            color: #000000;
            opacity: 1;
        }

        .form-group input:focus,
        .form-group textarea:focus {
            border-bottom-color: #BC1132;
        }

        .form-group textarea {
            resize: vertical;
            min-height: 120px;
            line-height: 1.6;
        }

        .form-buttons {
            display: flex;
            gap: 20px;
            margin-top: 20px;
        }

        .btn-submit,
        .btn-reset {
            flex: 0 0 162px;
            height: 48px;
            border-radius: 38px;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            border: none;
        }

        .btn-submit {
            background: linear-gradient(90deg, rgba(254, 190, 54, 1) 0%, rgba(188, 17, 50, 1) 100%);
            color: #F9F9F9;
        }

        .btn-submit:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(188, 17, 50, 0.3);
        }

        .btn-reset {
            background: #EBEBEB;
            color: #666666;
        }

        .btn-reset:hover {
            background: #D9D9D9;
        }

        /* ===== Contact 二维码 ===== */
        .contact-qrcodes {
            display: flex;
            gap: clamp(16px, 2vw, 32px);
            margin-top: 16px;
        }

        .qrcode-item {
            text-align: center;
        }

        .qrcode-item img {
            width: clamp(90px, 8vw, 130px);
            height: clamp(90px, 8vw, 130px);
            object-fit: contain;
            display: block;
        }

        .qrcode-label {
            margin-top: 10px;
            font-size: clamp(12px, 0.9vw, 14px);
            font-weight: 400;
            color: #666666;
            line-height: 1.4;
        }

        /* ===== Contact 表单复选框（业务需求 / 联动子项） ===== */
        .form-checkbox-group {
            padding: 20px 0;
            border-bottom: 1px solid #D9D9D9;
        }

        .checkbox-row {
            display: flex;
            align-items: flex-start;
            gap: clamp(20px, 3vw, 48px);
        }

        .checkbox-row + .checkbox-row {
            margin-top: 20px;
        }

        .checkbox-label {
            flex: 0 0 auto;
            min-width: 72px;
            font-size: 16px;
            font-weight: 400;
            color: #000000;
            line-height: 20px;
        }

        .checkbox-options {
            flex: 1;
            display: flex;
            flex-wrap: wrap;
            gap: 12px clamp(20px, 2.5vw, 40px);
        }

        .checkbox-item {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            font-size: 16px;
            color: #000000;
            line-height: 20px;
        }

        .checkbox-item input[type="checkbox"] {
            width: 16px;
            height: 16px;
            accent-color: #BC1132;
            cursor: pointer;
        }

        /* 子项默认隐藏，勾选主项后显示 */
        .sub-options {
            display: none;
        }

        .sub-options.show {
            display: block;
        }

        /* ===== Contact 表单提示信息 ===== */
        .form-msg {
            font-size: clamp(13px, 1vw, 15px);
            line-height: 1.5;
            min-height: 20px;
        }

        .form-msg.is-error {
            color: #BC1132;
        }

        .form-msg.is-success {
            color: #1a9e4b;
        }

        /* ===== Contact Page Responsive: Tablet ===== */
        @media (max-width: 1024px) {
            .contact-page {
                padding: 120px 40px 60px;
            }

            .contact-content {
                gap: 40px;
            }

            .contact-info {
                padding-right: 20px;
            }

            .contact-form-wrapper {
                padding: 40px;
            }
        }

        /* ===== Contact Page Responsive: Mobile ===== */
        @media (max-width: 767px) {
            .contact-page {
                padding: 100px 20px 40px;
                min-height: auto;
            }

            .contact-bg-gradient {
                width: 100%;
                height: 400px;
                top: -100px;
                left: 0;
            }

            .contact-content {
                flex-direction: column;
                gap: 40px;
                margin-top: 40px;
            }

            .contact-info {
                padding-right: 0;
            }

            .contact-main-title {
                font-size: 24px;
                margin-bottom: 30px;
            }

            .contact-divider {
                margin: 30px 0;
            }

            .contact-form-wrapper {
                padding: 30px 20px;
                border-radius: 16px;
            }

            .contact-form-title {
                font-size: 22px;
                margin-bottom: 30px;
            }

            .form-row {
                flex-direction: column;
                gap: 20px;
            }

            .form-buttons {
                flex-direction: column;
                gap: 16px;
            }

            .btn-submit,
            .btn-reset {
                flex: 1;
                width: 100%;
            }
        }

        /* ===== CTA Section ===== */
        .cta-section {
            position: relative;
            width: 100%;
            padding: clamp(40px, 15.63vw, 60px) 0 clamp(80px, 8.333vw, 200px);
            overflow: hidden;
        }

        .cta-content {
            position: relative;
            z-index: 1;
            margin: 0 auto;
        }

        .cta-title {
            font-size: clamp(24px, 2.5vw, 48px);
            display: inline-block;
            font-weight: 700;
            background: linear-gradient(90deg, #FEBE36 0%, #BC1132 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: clamp(12px, 1.042vw, 20px);
            line-height: 1.3;
        }

        .cta-subtitle {
            font-size: clamp(14px, 0.833vw, 16px);
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: clamp(24px, 2.083vw, 40px);
            line-height: 1.6;
        }

        .cta-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: clamp(10px, 0.833vw, 16px) clamp(24px, 1.667vw, 32px);
            background: linear-gradient(90deg, #FEBE36 0%, #BC1132 100%);
            color: #ffffff;
            font-size: clamp(14px, 0.833vw, 16px);
            font-weight: 500;
            text-decoration: none;
            border-radius: 8px;
            transition: all 0.3s ease;
        }

        .cta-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(188, 17, 50, 0.4);
        }

        .cta-btn .arrow {
            transition: transform 0.3s ease;
        }

        .cta-btn:hover .arrow {
            transform: translateX(4px);
        }

        
        

        /* ===== Process Section (服务流程) ===== */
        .proc-section {
            padding: clamp(80px, 6vw, 120px) clamp(20px, 3.125vw, 60px) 0;
        }

        .proc-section-header {
            text-align: center;
            margin-bottom: clamp(40px, 4vw, 80px);
        }

        .proc-section-title {
            font-size: clamp(28px, 2vw, 40px);
            font-weight: 700;
            color: #1a1a1a;
            margin: 0 0 12px;
            line-height: 1.3;
        }

        .proc-section-subtitle {
            font-size: clamp(14px, 0.9vw, 18px);
            color: #999;
            margin: 0;
        }

        .proc-curve-flow {
            position: relative;
            width: 100%;
            margin: 0 auto;
            aspect-ratio: 1200 / 600;
            overflow: visible;
        }

        .proc-curve-svg {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            display: block;
            overflow: visible;
            pointer-events: none;
        }

        .proc-arc-glow {
            fill: none;
            stroke: url(#procArcGrad);
            stroke-width: 16;
            stroke-linecap: round;
            opacity: 0.12;
            vector-effect: non-scaling-stroke;
        }

        .proc-arc-line {
            fill: none;
            stroke: url(#procArcGrad);
            stroke-width: 6;
            stroke-linecap: round;
            vector-effect: non-scaling-stroke;
        }

        .proc-curve-arrowhead {
            position: absolute;
            left: 96.5%;
            top: 19.6%;
            transform: translate(0, -50%) rotate(-50deg);
            width: 0;
            height: 0;
            border-top: 12px solid transparent;
            border-bottom: 12px solid transparent;
            border-left: 16px solid #f77f00;
            filter: drop-shadow(0 2px 4px rgba(247,127,0,0.3));
        }

        .proc-curve-step {
            position: absolute;
        }

        .proc-curve-dot {
            position: absolute;
            left: 0;
            top: 0;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: linear-gradient(135deg, #e63946, #f77f00);
            transform: translate(-50%, -50%);
            box-shadow: 0 0 0 4px #ffffff, 0 2px 8px rgba(230,57,70,0.35);
            z-index: 3;
        }

        .proc-curve-content {
            position: absolute;
            left: 0;
            transform: translateX(-50%);
            width: 220px;
            display: flex;
            align-items: center;
            z-index: 2;
        }

        .proc-curve-content-wide {
            width: 260px;
        }

        .proc-curve-content-offset {
            margin-left: -50px;
        }

        .proc-curve-step.proc-content-above .proc-curve-content {
            bottom: 0;
            flex-direction: column-reverse;
            padding-bottom: 40px;
        }

        .proc-curve-step.proc-content-below .proc-curve-content {
            top: 0;
            flex-direction: column;
            padding-top: 40px;
        }

        .proc-curve-node {
            display: inline-flex;
            flex-direction: column;
            justify-content: center;
            line-height: 1.2;
            align-items: center;
            gap: 8px;
            padding: 12px 18px;
            border-radius: 50px;
            background: linear-gradient(135deg, #e63946, #f77f00);
            color: #ffffff;
            box-shadow: 0 6px 16px rgba(230,57,70,0.28);
            white-space: nowrap;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            max-width: 100%;
        }

        .proc-curve-node:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 22px rgba(230,57,70,0.35);
        }

        .proc-num {
            font-family: 'Helvetica Neue', Arial, sans-serif;
            font-weight: 700;
            font-size: 16px;
            line-height: 1;
            opacity: 0.95;
        }

        .proc-ttl {
            font-size: 16px;
            font-weight: 600;
            line-height: 1.2;
            word-break: keep-all;
        }

        .proc-curve-desc {
            font-size: 14px;
            color: #555;
            line-height: 1.65;
            text-align: center;
            word-break: break-word;
            overflow-wrap: anywhere;
            margin: 0;
        }

        .proc-curve-step.proc-content-above .proc-curve-desc {
            margin-bottom: 10px;
        }

        .proc-curve-step.proc-content-below .proc-curve-desc {
            margin-top: 10px;
        }

        /* Process Section Responsive: Tablet */
        @media (max-width: 1024px) {
            .proc-curve-content {
                width: 172px;
            }
            .proc-curve-node {
                padding: 8px 14px;
                gap: 6px;
            }
            .proc-num {
                font-size: 13px;
            }
            .proc-ttl {
                font-size: 13px;
            }
            .proc-curve-desc {
                font-size: 12px;
                line-height: 1.55;
            }
            .proc-curve-step.proc-content-above .proc-curve-content {
                padding-bottom: 20px;
            }
            .proc-curve-step.proc-content-below .proc-curve-content {
                padding-top: 20px;
            }
            .proc-curve-step.proc-content-above .proc-curve-desc {
                margin-bottom: 8px;
            }
            .proc-curve-step.proc-content-below .proc-curve-desc {
                margin-top: 8px;
            }
        }

        /* Process Section Responsive: Mobile - horizontal scroll */
        @media (max-width: 767px) {
            .proc-scroll-wrap {
                overflow-x: auto;
                overflow-y: visible;
                -webkit-overflow-scrolling: touch;
                padding-bottom: 20px;
                scrollbar-width: none;
                -ms-overflow-style: none;
            }
            .proc-scroll-wrap::-webkit-scrollbar {
                display: none;
            }
            .proc-curve-flow {
                aspect-ratio: auto;
                width: 1200px;
                min-width: 1200px;
                height: 500px;
                margin: 0;
                overflow: visible;
            }
        }

        /* ===== Back to Top Button ===== */
        .back-to-top {
            position: fixed;
            bottom: clamp(120px, 15.63vw, 200px);
            right: clamp(20px, 1.563vw, 40px);
            width: clamp(40px, 2.292vw, 59px);
            height: clamp(40px, 2.292vw, 59px);
            border-radius: 50%;
            border: none;
            background: transparent;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 999;
            opacity: 0;
            visibility: hidden;
            padding: 0;
        }

        .back-to-top.visible {
            opacity: 1;
            visibility: visible;
        }

        .back-to-top:hover {
            border: none;
            background: linear-gradient(90deg, rgba(254, 190, 54, 1) 0%, rgba(188, 17, 50, 1) 100%);
        }

        .back-to-top i {
            font-size: clamp(18px, 1.042vw, 26px);
            color: #ffffff;
        }

        /* ===== Site Footer ===== */
        .pcfootvisible {
            display: block;
        }
        .mfootvisible {
            display: none;
        }
        .mfooter {
            display: none;
        }
        .site-footer {
            position: relative;
            width: 100%;
            background: #000000;
            overflow: hidden;
        }

        .footer-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

        .footer-bg img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: top right;
        }

        .footer-content {
            position: relative;
            z-index: 1;
            max-width: clamp(1024px, 83.333vw, 1880px);
            margin: 0 auto;
            padding: clamp(40px, 3.125vw, 80px) 0;
        }

        .footer-top {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 40px;
        }

        .footer-left {
            flex: 0 0 auto;
            width: clamp(229px, 17.917vw, 459px);
        }

        .footer-logo {
            margin-bottom: clamp(20px, 1.563vw, 40px);
        }

        .footer-logo img {
            height: clamp(32px, 2.5vw, 64px);
            width: auto;
        }

        .footer-left .social-icons {
            display: flex;
            gap: clamp(20px, 2vw, 40px);
            margin-bottom: clamp(20px, 1.563vw, 40px);
        }

        .footer-left .social-icon-link {
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
        }

        .footer-left .social-icon-link span {
            font-size: 36px;
            color: #fff;
        }
        .footer-left .social-icon-link span {
            font-size: 36px;
            color: #fff;
        }
        .footer-left .social-icon-link:nth-child(n+3) span {
            font-size: 24px;
        }

        .footer-contact-info {
            display: flex;
            flex-direction: column;
            gap: clamp(3px, 0.208vw, 5px);
        }

        .footer-contact-info p {
            font-size: clamp(11px, 0.833vw, 21px);
            line-height: clamp(20px, 1.563vw, 40px);
            color: #ffffff;
        }

        .footer-contact-info .label {
            font-weight: 400;
            opacity: 0.8;
        }

        .footer-contact-info .value {
            font-weight: 400;
        }

        .footer-nav {
            display: flex;
            gap: clamp(60px, 4.2vw, 80px);
            flex: 1;
            justify-content: flex-end;
        }

        .footer-nav-col {
            min-width: 80px;
            margin-right: 0;
        }

        .footer-nav-title {
            font-size: clamp(12px, 0.833vw, 22px);
            font-weight: 700;
            color: #ffffff;
            margin-bottom: clamp(19px, 1.458vw, 37px);
            line-height: 1.4;
        }
        .footer-nav-title a {
            color: #ffffff;
            text-decoration: none;
        }

        .footer-nav-title-center {
            text-align: center;
        }

        .footer-nav-list {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: clamp(10px, 0.781vw, 20px);
        }

        .footer-nav-list li a {
            font-size: clamp(11px, 0.833vw, 21px);
            color: rgba(255, 255, 255, 0.6);
            text-decoration: none;
            transition: color 0.3s ease;
            line-height: 1.4;
        }

        .footer-nav-list li a:hover {
            color: #ffffff;
        }

        .footer-divider {
            width: 100%;
            height: 1px;
            background: rgba(255, 255, 255, 0.2);
            margin: clamp(40px, 2.5vw, 60px) 0;
        }

        .footer-bottom {
            display: flex;
            flex-direction: column;
            gap: clamp(10px, 0.781vw, 20px);
        }

        .footer-links {
            font-size: clamp(9px, 0.729vw, 18px);
            color: rgba(255, 255, 255, 0.5);
            line-height: 1.4;
        }

        .footer-copyright {
            font-size: clamp(9px, 0.729vw, 18px);
            color: rgba(255, 255, 255, 0.5);
            line-height: 1.4;
        }

        /* ===== Footer Responsive: Tablet ===== */
        @media (max-width: 1024px) {
            .footer-content {
                padding: 60px 40px;
            }

            .footer-top {
                flex-direction: column;
                gap: 40px;
            }

            .footer-left {
                width: 100%;
            }

            .footer-nav {
                flex-wrap: wrap;
                gap: 30px 40px;
                justify-content: flex-start;
            }
            .footer-nav-title {
                margin-bottom: 10px;
            }
        }

        /* ===== Footer Responsive: Mobile ===== */
        @media (max-width: 767px) {
            .footer-content {
                padding: 40px 20px;
                margin-top: 260px;
            }
            .pcfootvisible {
                display: none;
            }
            .mfootvisible {
                display: block;
            }
            .footer-bg img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: top center;
            }
            .footer-top {
                flex-direction: column;
                gap: 32px;
            }

            .footer-left {
                width: 100%;
            }

            .footer-nav {
                flex-wrap: wrap;
                width: 100%;
                gap: 0;
                justify-content: space-around;
            }

            .footer-nav-col {
                min-width: 33%;
                text-align: left;
                margin:0;
            }

            .footer-divider {
                margin: 24px 0;
            }
        }

        /* ===== AOS Animation Enhancements ===== */
        [data-aos] {
            transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
        }

        [data-aos].aos-animate {
            filter: blur(0);
        }

        /* ===== Banner ===== */
  .hero-banner, 
  .services-banner {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    background: url('../images/main.jpg') center center / cover no-repeat;
    overflow: hidden;
  }

  .seogeo-banner {
      position: relative;
      width: 100%;
      aspect-ratio: 1920 / 960;
      min-height: 520px;
      max-height: 960px;
      height: 100%;
      background: url('../images/main.jpg') center center / cover no-repeat;
      display: flex;
      align-items: center;
      padding: 120px 0 60px;
      overflow: hidden;
  }

  .casesbanner {
      background: url('../images/cases/casebanner.jpg') center center / cover no-repeat;
  }
  .faqbanner {
      background: url('../images/faq/faqbanner.jpg') center center / cover no-repeat;
  }
  .luminabanner {
      background: url('../images/lumina/luminabg.jpg') center center / cover no-repeat;
  }
  .faqlist-label-wrap { text-align: center; margin-bottom: 20px; }
  .faqlist-label-wrap span { display: inline-block; position: relative; padding: 6px 24px; font-size: 13px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; background: linear-gradient(135deg, #e63946, #f77f00); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; border-radius: 100px; z-index: 0; }
  .faqlist-label-wrap span::before { content: ''; position: absolute; inset: 0; border-radius: 100px; padding: 1px; background: linear-gradient(135deg, #e63946, #f77f00); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
  .faqlist-title { text-align: center; font-size: 36px; font-weight: 700; color: #1a1a1a; margin-bottom: 10px; font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif; }
  .faqlist-subtitle { 
      text-align: center; 
      font-size: 16px; 
      color: #999999;
      font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif; 
  }
  .casesbanner .services-banner-content {
      position: relative;
  }

  .casesbanner .services-main-title {
      position: relative;
      width: 100%;
      z-index: 2;
  }

  .industry-bubbles {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
  }

  @keyframes bubbleFloat {
      0%, 100% {
          transform: translate(-50%, -50%);
      }
      50% {
          transform: translate(-50%, calc(-50% - 6px));
      }
  }

  .industry-bubbles .bubble {
      position: absolute;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 18px;
      background: rgba(255, 255, 255, 0.12);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: 50px;
      font-size: clamp(12px, 0.833vw, 16px);
      white-space: nowrap;
      transform: translate(-50%, -50%);
      animation: bubbleFloat 3.5s ease-in-out infinite;
  }

  .industry-bubbles .bubble span {
      background: linear-gradient(90deg, #BD1230, #FEBE36);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
  }

  .industry-bubbles .bubble:nth-child(1) { animation-delay: 0s; }
  .industry-bubbles .bubble:nth-child(2) { animation-delay: 0.3s; }
  .industry-bubbles .bubble:nth-child(3) { animation-delay: 0.6s; }
  .industry-bubbles .bubble:nth-child(4) { animation-delay: 0.9s; }
  .industry-bubbles .bubble:nth-child(5) { animation-delay: 1.2s; }
  .industry-bubbles .bubble:nth-child(6) { animation-delay: 1.5s; }
  .industry-bubbles .bubble:nth-child(7) { animation-delay: 1.8s; }
  .industry-bubbles .bubble:nth-child(8) { animation-delay: 2.1s; }
  .industry-bubbles .bubble:nth-child(9) { animation-delay: 2.4s; }
  .industry-bubbles .bubble:nth-child(10) { animation-delay: 2.7s; }
  .industry-bubbles .bubble:nth-child(11) { animation-delay: 3s; }

  /* PC positions */
  .industry-bubbles .bubble-1 { top: 12%; left: 28%; }
  .industry-bubbles .bubble-2 { top: 15%; right: 32%; }
  .industry-bubbles .bubble-3 { top: 20%; left: 42%; }
  .industry-bubbles .bubble-4 { top: 20%; right: 15%; }
  .industry-bubbles .bubble-5 { top: 35%; left: 18%; }
  .industry-bubbles .bubble-6 { top: 43%; right: 12%; }
  .industry-bubbles .bubble-7 { top: 55%; left: 19%; }
  .industry-bubbles .bubble-8 { top: 65%; left: 38%; }
  .industry-bubbles .bubble-9 { top: 66%; right: 20%; }
  .industry-bubbles .bubble-10 { top: 75%; left: 21%; }
  .industry-bubbles .bubble-11 { top: 72%; right: 38%; }

  /* Mobile: split into above and below title, avoid overlap */
  @media (max-width: 767px) {
      .industry-bubbles .bubble {
          padding: 5px 12px;
          font-size: 11px;
      }
      /* Above title (top area) */
      .industry-bubbles .bubble-1 { top: 0; left: 15%; }
      .industry-bubbles .bubble-2 { top: 1%; right: 32%; }
      .industry-bubbles .bubble-3 { top: 12%; left: 70%; }
      .industry-bubbles .bubble-4 { top: 0; right: 0; }
      .industry-bubbles .bubble-5 { top: 12%; left: 32%; }
      /* Below title (bottom area) */
      .industry-bubbles .bubble-6 { top: 68%; right: 12%; }
      .industry-bubbles .bubble-7 { top: 60%; left: 15%; }
      .industry-bubbles .bubble-8 { top: 68%; left: 38%; }
      .industry-bubbles .bubble-9 { top: 62%; right: 0; }
      .industry-bubbles .bubble-10 { top: 82%; left: 21%; }
      .industry-bubbles .bubble-11 { top: 85%; right: 20%; }
  }

  .industry-bubbles .bubble::before {
      content: '';
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #e63946;
      flex-shrink: 0;
  }

  /* Mobile: hide some bubbles, adjust positions */
  @media (max-width: 767px) {
      .industry-bubbles .bubble {
          padding: 5px 12px;
          font-size: 11px;
      }
       
  }

  .hero-banner-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0 60px;
  }

  .hero-text {
    flex: 0 0 auto;
    max-width: 50%;
    text-align: left;
  }

  .hero-text .hero-label {
    font-size: clamp(24px, 2vw, 32px);
    color: rgba(255, 255, 255, 1);
    font-weight: 400;
    margin-bottom: 16px;
    letter-spacing: 1px;
  }

  .hero-text .hero-title {
    font-size: clamp(32px, 3.5vw, 68px);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 16px;
    background: linear-gradient(135deg, #EFB14D 0%, #891C31 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .hero-text .hero-subtitle {
    font-size: clamp(24px, 2vw, 32px);
    color: rgba(255, 255, 255, 1);
    font-weight: 400;
    letter-spacing: 1px;
  }

  /* Canvas container on right */
  .hero-canvas-wrap {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }

  .hero-canvas-wrap canvas {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* Scroll indicator */
  .scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
  }

  .scroll-indicator span {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 2px;
  }

  .scroll-indicator .scroll-arrow {
    font-size: 24px;
    background: linear-gradient(180deg, rgba(254, 190, 54, 1) 0%, rgba(188, 17, 50, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    animation: scrollBounce 2s ease-in-out infinite;
  }

  @keyframes scrollBounce {
    0%, 100% { transform: translateY(0); opacity: 0.7; }
    50% { transform: translateY(8px); opacity: 1; }
  }

  /* ===== Services Banner ===== */
  .services-banner-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0 60px;
  }

  .services-main-title {
    text-align: center;
    margin-bottom: clamp(80px, 6.3vw, 120px);
  }

  .faq-main-title {
    margin-bottom: clamp(32px, 3.1vw, 60px);
  }

  .services-title-line1 {
    font-size: clamp(60px, 5vw, 96px);
    font-weight: 700;
    color: #ffffff;
    line-height: 1.3;
    margin-bottom: 12px;
    text-align: center;
  }

  .services-title-line1 .gradient-text {
    background: linear-gradient(135deg, #EFB14D 0%, #891C31 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .services-title-line2 {
    font-size: clamp(60px, 5vw, 96px);
    font-weight: 700;
    color: #ffffff;
    line-height: 1.3;
  }
  .cases-banner-desc {
    font-size: clamp(24px, 1.5vw, 30px);
    font-weight: 400;
    color: #ffffff;
    line-height: 2;
  }
  .lumina-banner-desc {
     max-width: 800px;
     margin: 0 auto;
     text-align: center;
     font-size: clamp(24px, 1.5vw, 30px);
  }
  .lumina-bannertop-desc {
     font-size: clamp(30px, 2.1vw, 40px);
     line-height: 2.4;
  }
  .services-icons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(100px, 10vw, 200px);
    margin-bottom: clamp(80px, 6.3vw, 120px);
  }

  .service-icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .service-icon-item .icon-wrap {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .service-icon-item img {
    width: clamp(60px, 4.2vw, 80px);
    height: auto;
  }

  .service-icon-item span {
    font-size: clamp(14px, 1vw, 18px);
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
    letter-spacing: 1px;
  }

  .services-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: clamp(50px, 4.2vw, 80px);
    width: 100%;
  }

  .services-desc {
    flex: 1 1 auto;
    max-width: 600px;
  }

  .services-desc p {
    font-size: clamp(16px, 1vw, 24px);
    color: rgba(255, 255, 255, 1);
    line-height: 1.8;
  }

  .services-stats {
    display: flex;
    align-items: flex-end;
    gap: clamp(60px, 4.2vw, 80px);
  }

  .services-stats .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .services-stats .stat-label {
    font-size: clamp(11px, 0.729vw, 14px);
    color: rgba(255, 255, 255, 0.99);
    white-space: nowrap;
  }

  .services-stats .stat-value {
    font-size: clamp(36px, 3.5vw, 68px);
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
  }

  .services-stats .stat-value .counter,
  .services-stats .stat-value .stat-suffix {
    color: #ffffff;
  }

  /* ===== Services Banner Responsive: Tablet ===== */
  @media (max-width: 1024px) {
    .services-banner-content {
      padding: 0 40px;
    }

    .services-icons {
      gap: 40px;
    }

    .services-bottom {
      flex-direction: column;
      align-items: center;
      gap: 30px;
    }

    .services-desc {
      max-width: 100%;
      text-align: center;
    }
  }

  /* ===== Services Banner Responsive: Mobile ===== */
  @media (max-width: 767px) {
    .services-banner {
      height: 100vh;
      min-height: 100vh;
    }

    .services-banner-content {
      padding: 0 20px;
      justify-content: center;
    }

    .cases-banner-desc {
      font-size: clamp(18px, 1vw, 20px);
      line-height: 1.6;
    }
    .lumina-banner-desc {
      font-size: clamp(18px, 1vw, 20px);
      line-height: 1.6;
    }
    .lumina-bannertop-desc {
      font-size: clamp(24px, 1.5vw, 30px);
      line-height: 2.4;
    }

    .services-title-line1 {
      font-size: clamp(32px, 3.2vw, 64px);
    }

    .services-title-line2 {
      font-size: clamp(32px, 3.2vw, 64px);
    }

    .services-icons {
      flex-direction: row;
      flex-wrap: nowrap;
      gap: 0;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      margin-bottom: 16px;
    }

    .service-icon-item .icon-wrap {
      height: 48px;
    }

    .service-icon-item img {
      width: 32px;
    }

    .service-icon-item span {
      font-size: 10px;
    }

    .services-bottom {
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }

    .services-desc {
      text-align: center;
      max-width: 86%;
      font-size: clamp(16px, 1.2vw, 24px);
      margin-bottom: clamp(30px, 2.4vw, 48px);
    }

    .services-desc p {
      font-size: clamp(16px, 1.2vw, 24px);
      line-height: 1.6;
    }

    .services-stats {
      justify-content: space-around;
      width: 100%;
      gap: 0;
    }

    .services-stats .stat-value {
      font-size: clamp(30px, 2.4vw, 48px);
    }

    .services-stats .stat-label {
      font-size: clamp(12px, 0.729vw, 16px);
    }
  }


  /* ===== About Section ===== */
  .about-section {
    position: relative;
    padding: clamp(80px, 10vw, 160px) 0 0;
    background: url('../images/index/aboutbg.png') center top / cover no-repeat;
    min-height: 500px;
    overflow: hidden;
  }

  .about-inner {
    margin: 0 60px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: clamp(60px, 5.2vw, 100px);
  }

  .about-left {
    flex: 1 1 clamp(32%, 2vw, 40%);
    min-width: 280px;
  }

  .about-label {
    display: inline-block;
    font-size: clamp(24px, 2vw, 32px);
    font-family: 'PingFang SC', sans-serif;
    font-weight: 500;
    margin-bottom: 16px;
    letter-spacing: 1px;
    background: linear-gradient(90deg, #FEBE36 12%, #BC1132 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .about-title {
    font-size: clamp(32px, 2.4vw, 48px);
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 20px;
    line-height: 1.3;
  }

  .about-desc {
    font-size: clamp(14px, 1vw, 16px);
    color: rgba(0, 0, 0, 0.6);
    line-height: 1.8;
  }

  .about-right {
    flex: 1 1 50%;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: clamp(26px, 2.4vw, 46px);
    padding-top: clamp(60px, 5vw, 80px);
    align-content: flex-end;
  }

  .about-feature {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    min-width: 0;
  }

  .about-feature-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .about-feature-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .about-feature-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 100px;
  }

  .about-feature-name {
    font-size: clamp(16px, 1.2vw, 20px);
    font-weight: 600;
    color: #1a1a1a;
  }

  .about-feature-en {
    font-size: 10px;
    color: rgba(0, 0, 0, 0.4);
    letter-spacing: 0.5px;
    word-break: break-word;
    white-space: normal;
  }

  @media (max-width: 1360px) {
    .about-feature {
      flex: 0 0 calc(50% - 16px);
    }
  }

  /* City skyline */
  .city-skyline {
    width: 100%;
    margin: 0 auto;
    padding: clamp(40px, 10vw, 80px) 0;
  }

  .city-skyline img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* ===== Responsive ===== */
  @media (max-width: 1024px) {
    .hero-banner-content {
      padding: 0 40px;
    }
    .hero-canvas-wrap {
      width: 50%;
    }
    .about-section {
      padding: 60px 40px 0;
    }
    .about-inner {
      flex-direction: column;
      gap: 30px;
    }
    .about-left {
      max-width: 100%;
    }
    .about-right {
      flex: 1 1 100%;
      gap: 20px 24px;
    }
    .about-feature {
      flex: 0 0 calc(50% - 12px);
    }
    .about-feature-en {
      white-space: normal;
      word-break: break-all;
    }
  }

  @media (max-width: 767px) {
    .hero-banner {
      min-height: 100vh;
    }
    .hero-banner-content {
      flex-direction: column;
      justify-content: flex-start;
      padding: 20vh 20px 0;
      text-align: center;
    }
    .hero-text {
      max-width: 100%;
      margin-bottom: 0;
    }
    .hero-canvas-wrap {
      position: absolute;
      width: 100%;
      height: 100%;
      right: auto;
      top: 0;
    }
    .scroll-indicator {
      bottom: 20px;
    }
    .about-section {
      padding: 40px 0 0;
    }
    .about-inner {
      margin: 0 30px;
      flex-direction: column;
      gap: 30px;
    }
    .about-left {
      max-width: 100%;
    }
    .about-right {
      flex-wrap: wrap;
      justify-content: center;
      gap: 24px;
      padding-top: 0;
    }
  }

  /* ===== Brand Section ===== */
  .brand-section {
    position: relative;
    padding: 80px 60px clamp(80px, 6.4vw, 120px);
    overflow: hidden;
    background: #fff;
  }

  .brand-bg {
    position: absolute;
    right: 0;
    top: 20%;
    width: 40%;
    max-width: 500px;
    pointer-events: none;
    z-index: 0;
  }

  .brand-bg img {
    width: 100%;
    height: auto;
  }

  .brand-inner {
    position: relative;
    z-index: 1;
  }

  .brand-cards {
    display: flex;
    align-items: stretch;
    gap: 40px;
    margin-bottom: 140px;
  }

  .brand-card {
    flex: 1;
    position: relative;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    padding: clamp(32px, 2.4vw, 48px) 0 clamp(60px, 4vw, 120px);
    text-align: center;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    cursor: default;
  }

  .brand-card:hover {
    border-color: transparent;
  }

  .brand-card-hover {
    position: absolute;
    z-index: -1;
    top: clamp(220px, 13vw, 250px);
    left: 0;
    width: 100%;
    height: 160px;
    background: url('../images/index/hover.png') center top / contain no-repeat;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
  }

  .brand-card:hover .brand-card-hover {
    opacity: 1;
  }

  .brand-card-title {
    font-size: clamp(32px, 2.1vw, 40px);
    font-weight: 300;
    color: #1a1a1a;
    margin-bottom: 80px;
  }

  .brand-card-icon {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    overflow: hidden;
    padding: 40px;
    background: #E6E6E6;
    margin: 0 auto clamp(80px, 8vw, 150px);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .brand-card:hover .brand-card-icon {
        background: linear-gradient(180deg, #EFB14D 28%, #891C31 100%);
  }

  .brand-card-icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  .brand-card-subtitle {
    font-size: clamp(16px, 1.2vw, 24px);
    font-weight: 400;
    color: #333;
    margin-bottom: 20px;
  }

  .brand-card-desc {
    font-size: clamp(14px, 1.2vw, 18px);
    padding: 0 clamp(20px, 4.2vw, 80px);
    color: #888;
    line-height: 1.6;
  }

  .brand-bottom {
    position: relative;
    z-index: 1;
    text-align: center;
  }

  .brand-bottom-title {
    font-size: clamp(32px, 3.3vw, 64px);
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 50px;
  }

  .brand-stats {
    display: flex;
    justify-content: center;
    gap: clamp(60px, 6.4vw, 120px);
    flex-wrap: wrap;
  }

  .brand-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .brand-stat-label {
    font-size: clamp(14px, 1.2vw, 18px);
    color: #999;
  }

  .brand-stat-num {
    font-size: clamp(48px, 4.2vw, 80px);
    font-weight: 700;
    background: linear-gradient(90deg, rgba(254,190,54,1) 0%, rgba(188,17,50,1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    line-height: 1.2;
  }

  /* 计数动画将数字拆入 .counter / .stat-suffix 子元素，需让其继承同款渐变文字 */
  .brand-stat-num .counter,
  .brand-stat-num .stat-suffix {
    background: linear-gradient(90deg, rgba(254,190,54,1) 0%, rgba(188,17,50,1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
  }

  /* Brand Section Responsive */
  @media (max-width: 1024px) {
    .brand-section {
      padding: 60px 40px 40px;
    }
    .brand-cards {
      gap: 20px;
      margin-bottom: 60px;
    }
    .brand-card {
      padding: 30px 20px 24px;
    }
    .brand-card-title {
      font-size: 18px;
    }
    .brand-bottom-title {
      font-size: 24px;
      margin-bottom: 40px;
    }
    .brand-stats {
      gap: 30px;
    }
    .brand-stat-num {
      font-size: 36px;
    }
  }

  @media (max-width: 767px) {
    .brand-section {
      padding: 40px 20px 30px;
    }
    .brand-bg {
      width: 70%;
      right: -15%;
      top: auto;
      bottom: 20%;
      opacity: 0.5;
    }
    .brand-card-hover {
        top: clamp(130px, 8.4vw, 160px);
    }
    .brand-cards {
      flex-direction: column;
      gap: 16px;
      margin-bottom: 60px;
    }
    .brand-card {
      padding: 24px 20px 50px;
    }
    .brand-card-title {
      font-size: 32px;
      margin-bottom: 30px;
    }
    .brand-card-icon {
      width: 80px;
      height: 80px;
      padding: 20px;
      margin: 0 auto 80px;
    }
    .brand-bottom-title {
      font-size: 20px;
      margin-bottom: 30px;
    }
    .brand-stats {
      justify-content: space-around;
      gap: clamp(30px, 3.2vw, 60px);
    }
    .brand-stat-num {
      font-size: 28px;
    }
    .brand-stat-label {
      font-size: 12px;
    }
  }

  /* ===== System Section (Lumina 灵眸系统) ===== */
  .system-section {
    position: relative;
    background: #F8F8F8;
    border-radius: 15px;
    margin: 50px 60px;
    padding: clamp(53px, 4.167vw, 80px) 60px clamp(80px, 6.25vw, 120px);
    overflow: hidden;
  }

  .system-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: clamp(400px, 33.333vw, 640px);
    max-width: 60%;
    pointer-events: none;
    z-index: 0;
  }

  .system-bg img {
    width: 100%;
    height: auto;
    display: block;
  }

  .system-inner {
    position: relative;
    z-index: 1;
    max-width: 1800px;
    margin: 0 auto;
  }

  .system-title {
    text-align: center;
    font-size: clamp(43px, 3.333vw, 64px);
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: clamp(60px, 4.2vw, 80px);
  }

  .system-body {
    display: flex;
    align-items: flex-start;
    gap: clamp(40px, 4.167vw, 80px);
  }

  /* --- Left column --- */
  .system-visual {
    flex: 0 0 54%;
    max-width: 54%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .system-visual-frame {
    position: relative;
    width: 100%;
    border-radius: clamp(8px, 0.625vw, 12px);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
    line-height: 0;
  }

  .system-pic {
    width: 100%;
    height: auto;
    display: none;
  }

  .system-pic.active {
    display: block;
  }

  .system-caption {
    display: none;
    text-align: center;
    font-size: clamp(13px, 1.042vw, 20px);
    color: #666;
    margin-top: clamp(20px, 1.667vw, 32px);
  }

  .system-caption.active {
    display: block;
  }

  .system-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: clamp(24px, 2.083vw, 40px) auto 0;
    padding: clamp(12px, 0.833vw, 16px) clamp(28px, 1.875vw, 36px);
    font-size: clamp(13px, 0.833vw, 16px);
    color: #fff;
    background: linear-gradient(90deg, #FEBE36 0%, #BD1230 100%);
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(245, 130, 32, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* center the button under the image */
    width: fit-content;
    text-decoration: none;
  }

  .system-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(245, 130, 32, 0.42);
  }

  .system-btn span {
    font-size: 12px;
  }

  /* --- Right column --- */
  .system-content {
    flex: 1;
    min-width: 0;
    padding-top: clamp(8px, 1.042vw, 20px);
    display: flex;
    align-items: first baseline;
    gap: clamp(24px, 2.5vw, 48px);
  }

  .system-index {
    flex-shrink: 0;
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding-top: 20px;
  }

  .system-index-current {
    font-size: clamp(28px, 2.5vw, 48px);
    display: inline-block;
    width: clamp(28px, 2.5vw, 48px);
    font-weight: 300;
    color: #1a1a1a;
    line-height: 1;
    letter-spacing: 1px;
  }

  .system-index-total {
    font-size: clamp(13px, 0.833vw, 16px);
    color: #999;
  }

  .system-features {
    flex: 1;
    min-width: 0;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .system-feature {
    cursor: pointer;
    padding: clamp(12px, 2.1vw, 40px) 0;
  }

  .system-feature:first-child {
    padding:0 0 clamp(12px, 2.1vw, 40px);
  }

  .system-feature-title {
    font-size: clamp(16px, 1.25vw, 24px);
    font-weight: 700;
    color: #999;
    margin-bottom: clamp(8px, 0.625vw, 12px);
  }

  .system-feature.active .system-feature-title,
  .system-feature:hover .system-feature-title {
    color: #000;
  }

  .system-feature-desc {
    font-size: clamp(11px, 0.833vw, 16px);
    color: #666;
    line-height: 1.7;
  }

  .system-feature.active .system-feature-desc {
    max-height: 200px;
  }

  /* System Section Responsive */
  @media (max-width: 1024px) {
    .system-section {
      padding: 50px 40px 60px;
    }
    .system-title {
      font-size: 32px;
      margin-bottom: 32px;
    }
    .system-body {
      gap: 32px;
    }
    .system-feature {
        cursor: pointer;
        padding: 8px 0;
    }
    .system-feature-title {
      font-size: 20px;
    }
    .system-feature-desc {
      font-size: 14px;
    }
    .system-caption {
      font-size: 16px;
    }
    .system-index-current {
      font-size: 32px;
    }
  }

  @media (max-width: 767px) {
    .system-section {
      padding: 40px 15px 40px;
      margin: 50px 15px;
    }
    .system-bg {
      width: 100%;
      max-width: 100%;
    }
    .system-title {
      font-size: 24px;
      margin-bottom: 24px;
    }
    .system-body {
      flex-direction: column;
      gap: 24px;
    }
    .system-visual {
      flex: 1 1 100%;
      max-width: 100%;
      width: 100%;
    }
    .system-content {
      width: 100%;
      padding-top: 0;
    }
    .system-index {
        padding-top: 20px;
    }
    .system-index-current {
      font-size: 28px;
    }
    .system-feature-title {
      font-size: 18px;
    }
    .system-caption {
      font-size: 14px;
      margin-top: 16px;
    }
  }


  /* ===== Case Section (客户案例) ===== */
  .case-section {
    position: relative;
    margin: clamp(32px, 2.604vw, 60px) 0 0;
    padding: clamp(40px, 4.1vw, 80px) clamp(40px, 3.1vw, 60px) 100px;
    overflow: hidden;
  }
  .serviceCase {
      margin: -60px 0 0;
      background: #f9f9f9;
  }

  .Casemargin {
      margin:0;
  }

  .case-bg {
    position: absolute;
    right: 0;
    bottom: 0;
    width: clamp(420px, 40.625vw, 780px);
    max-width: 65%;
    pointer-events: none;
    z-index: 0;
    line-height: 0;
  }

  .case-bg img {
    width: 100%;
    height: auto;
    display: block;
  }

  .case-inner {
    position: relative;
    z-index: 1;
    margin: 0 auto;
  }

  .case-title {
    font-size: clamp(27px, 2.083vw, 53px);
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: clamp(40px, 3.333vw, 80px);
  }

  .case-body {
    display: flex;
    align-items: flex-start;
    gap: clamp(30px, 2.6vw, 60px);
  }

  /* --- Left: 分类导航 --- */
  .case-nav {
    flex: 0 0 clamp(180px, 16.66vw, 320px);
    max-width: clamp(180px, 16.66vw, 320px);
  }

  .case-cat {
    margin-bottom: clamp(20px, 1.667vw, 40px);
  }

  .case-cat:last-child {
    margin-bottom: 0;
  }

  .case-cat-title {
    position: relative;
    display: inline-block;
    padding-left: clamp(16px, 1.146vw, 28px);
    font-size: clamp(24px, 1.8vw, 36px);
    color: #1a1a1a;
    line-height: 1.2;
    margin-bottom: clamp(12px, 0.833vw, 20px);
  }

  .case-cat-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: clamp(8px, 0.625vw, 14px);
    height: clamp(4px, 0.208vw, 6px);
    border-radius: 4px;
    background: linear-gradient(90deg, #FEBE36 0%, #BD1230 100%);
  }

  .case-sub {
    list-style: none;
    margin: 0;
    padding: 0 0 0 clamp(16px, 1.146vw, 28px);
  }

  .case-sub-item {
    position: relative;
    padding-left: clamp(16px, 1.042vw, 24px);
    font-size: clamp(12px, 0.8vw, 20px);
    line-height: 1.4;
    color: #666;
    cursor: pointer;
    margin-bottom: clamp(12px, 0.938vw, 24px);
    transition: color 0.3s ease;
  }

  .case-sub-item:last-child {
    margin-bottom: 0;
  }

  .case-sub-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: clamp(5px, 0.365vw, 9px);
    height: clamp(5px, 0.365vw, 9px);
    border: 1px solid #c9c9c9;
    border-radius: 50%;
    background: transparent;
    transition: all 0.3s ease;
  }

  .case-sub-item:hover {
    color: #333;
  }

  .case-sub-item.active {
    font-weight: 600;
    background: linear-gradient(90deg, #BD1230 0%, #FEBE36 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }

  .case-sub-item.active::before {
    background: #BD1230;
    border-color: #BD1230;
  }

  /* --- Middle: 案例详情 --- */
  .case-detail {
    flex: 1;
    min-width: 0;
    padding-top: clamp(20px, 1.667vw, 40px);
  }

  .case-brand {
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.042vw, 24px);
  }

  .case-brand-logo img {
    width: 160px;
    border-radius: 4px;
  }

  .case-brand-name {
    font-size: clamp(18px, 1.458vw, 37px);
    font-weight: 700;
    color: #1a1a1a;
  }

  .case-desc {
    font-size: clamp(12px, 0.833vw, 21px);
    line-height: 1.7;
    color: #666;
    margin: clamp(16px, 1.25vw, 30px) 0 0;
    max-width: clamp(320px, 33.33vw, 640px);
  }

  .case-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: clamp(20px, 1.458vw, 37px);
    padding: clamp(8px, 0.625vw, 16px) clamp(18px, 1.25vw, 32px);
    font-size: clamp(12px, 0.833vw, 21px);
    color: #fff;
    background: linear-gradient(90deg, #FEBE36 0%, #BD1230 100%);
    border-radius: clamp(6px, 0.417vw, 10px);
    box-shadow: 0 10px 24px rgba(245, 130, 32, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
  }

  .case-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(245, 130, 32, 0.42);
  }

  .case-btn span {
    font-size: 0.7em;
  }

  /* --- 图表区域 --- */
  .case-chart {
    margin-top: clamp(60px, 6.3vw, 120px);
    /* 图表填满中间栏，让曲线与柱状铺开，避免右侧留白 */
    width: 90%;
  }

  .case-chart-head {
    display: flex;
    align-items: baseline;
    gap: clamp(10px, 0.833vw, 20px);
    margin-bottom: clamp(16px, 1.25vw, 30px);
  }

  .case-chart-title {
    font-size: clamp(16px, 1.25vw, 32px);
    font-weight: 600;
    color: #1a1a1a;
  }

  .case-chart-sub {
    font-size: clamp(12px, 0.833vw, 21px);
    color: #333;
  }

  .case-chart-body {
    display: flex;
    align-items: stretch;
    gap: clamp(24px, 2.083vw, 53px);
    height: clamp(180px, 15vw, 350px);
  }

  /* 曲线图 */
  .case-curve {
    position: relative;
    /* 限制曲线区宽度，避免拉伸后比例失调 */
    flex: 0 1 auto;
    width: 62%;
    max-width: 520px;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .case-curve-svg {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  /* 曲线下方标签：在文档流中位于曲线下方 */
  .case-chart-label-curve {
    flex: 0 0 auto;
    margin-top: -10px;
    display: flex;
    text-align: left;
  }

  /* 参考线（垂直 + 水平坐标轴） */
  .case-axis {
    stroke: #E5E5E5;
    stroke-width: 1.5;
    stroke-linecap: round;
  }

  /* 起点圆点 */
  .case-curve-dot {
    opacity: 0;
    animation: caseDotShow 0.4s ease-out 0.1s forwards;
  }

  @keyframes caseDotShow {
    to {
      opacity: 1;
    }
  }

  /* 灰色趋势线（较短，先画） */
  .case-curve-grey {
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: caseCurveDraw 1.2s ease-out 0.15s forwards;
  }

  /* 彩色主曲线（较长，随后画） */
  .case-curve-color {
    stroke-dasharray: 700;
    stroke-dashoffset: 700;
    animation: caseCurveDraw 1.8s ease-out 0.35s forwards;
  }

  @keyframes caseCurveDraw {
    to {
      stroke-dashoffset: 0;
    }
  }

  .case-curve-start {
    position: absolute;
    left: 8%;
    top: 50%;
    font-size: clamp(20px, 1.771vw, 45px);
    font-weight: 700;
    color: #9b9b9b;
    line-height: 1;
  }

  .case-curve-end {
    position: absolute;
    left: 55%;
    top: 5%;
    font-size: clamp(30px, 3.021vw, 77px);
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(90deg, #D0021B 0%, #F5A623 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* 柱状图 */
  .case-bars {
    position: relative;
    flex: 0 0 auto;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: calc(100% + 12px);
  }

  .case-bars-row {
    display: flex;
    align-items: flex-end;
    gap: clamp(40px, 3.1vw, 60px);
    flex: 1 1 auto;
    padding-bottom: 22px;
  }

  .case-bar-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    gap: clamp(6px, 0.417vw, 10px);
  }

  .case-bar-val {
    font-size: clamp(14px, 1.042vw, 27px);
    font-weight: 700;
    line-height: 1;
  }

  .case-bar-val-grey {
    color: #9b9b9b;
  }

  .case-bar-val-red {
    color: #D0021B;
  }

  .case-bar {
    position: relative;
    width: clamp(24px, 1.875vw, 48px);
    height: 100%;
    border-radius: clamp(4px, 0.313vw, 8px);
    background: #F1F1F1;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
  }

  .case-bar-fill {
    display: block;
    width: 100%;
    border-bottom-left-radius: clamp(4px, 0.313vw, 8px);
    border-bottom-right-radius: clamp(4px, 0.313vw, 8px);
    animation: caseBarRise 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transform-origin: bottom;
  }

  .case-bar-grey {
    background: #F5F5F5;
  }

  .case-bar-grey .case-bar-fill {
    background: #E2E2E2;
  }

  /* 红色柱：顶部留白（4% 空缺），描红边框，填充红→橙渐变 */
  .case-bar-red {
    background: #FFFFFF;
    box-shadow: inset 0 0 0 1.5px #D0021B;
  }

  .case-bar-red .case-bar-fill {
    background: linear-gradient(180deg, #D0021B 0%, #F5A623 100%);
  }

  @keyframes caseBarRise {
    from {
      transform: scaleY(0);
    }
    to {
      transform: scaleY(1);
    }
  }

  .case-chart-label {
    font-size: clamp(11px, 0.833vw, 21px);
    color: #999;
    line-height: 1.4;
    text-align: center;
    white-space: nowrap;
  }

  /* --- Right: 产品图 --- */
  .case-product {
    flex: 0 0 clamp(220px, 26vw, 500px);
    max-width: clamp(220px, 26vw, 500px);
    border-radius: clamp(12px, 0.833vw, 20px);
    overflow: hidden;
    line-height: 0;
  }

  .case-product img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* Case Section Responsive */
  @media (max-width: 1024px) {
    .case-section {
      margin: 40px;
      padding: 40px;
    }
    .case-title {
      font-size: 32px;
      margin-bottom: 32px;
    }
    .case-body {
      flex-wrap: wrap;
      gap: 30px;
    }
    .case-cat-title {
      font-size: 26px;
    }
    .case-sub-item {
      font-size: 15px;
    }
    .case-brand-logo {
      font-size: 30px;
    }
    .case-brand-name {
      font-size: 22px;
    }
    .case-desc,
    .case-chart-sub,
    .case-chart-label {
      font-size: 14px;
    }
    .case-product {
      flex: 0 0 320px;
      max-width: 320px;
    }
    .serviceCase {
        margin: -60px 0 0;
        background: #fff;
    }
    
  }

  @media (max-width: 767px) {
    .case-section {
      margin: 0 15px 0;
      padding: 0 0 30px;
    }
    .serviceCase {
        margin-top: -40px;
    }
    .Casemargin {
      margin: 30px 15px 0;
    }
    .case-bg {
      width: 100%;
      max-width: 100%;
      display: none;
    }
    .case-title {
      font-size: 24px;
      margin-bottom: 24px;
    }
    .case-body {
      flex-direction: column;
      gap: 24px;
    }

    /* 移动端：三个一级分类一行显示 */
    .case-nav {
      position: relative;
      flex: 1 1 100%;
      max-width: 100%;
      width: 100%;
      display: flex;
      flex-wrap: nowrap;
      gap: 10px;
      /* 底部预留空间容纳绝对定位的二级列表（由 JS 动态设置） */
      padding-bottom: var(--case-sub-h, 0px);
    }
    .case-cat {
      /* 三个一级分类平分一行 */
      flex: 1 1 0;
      min-width: 0;
      margin-bottom: 0;
      text-align: center;
      cursor: pointer;
    }
    .case-cat-title {
      display: block;
      padding: 10px 4px;
      font-size: 16px;
      margin-bottom: 0;
      color: #666;
      border-radius: 8px;
      background: rgba(0, 0, 0, 0.03);
      transition: all 0.3s ease;
    }
    .case-cat-title::before {
      display: none;
    }
    .case-cat.active .case-cat-title {
      color: #fff;
      background: linear-gradient(90deg, #FEBE36 0%, #BD1230 100%);
    }
    /* 移动端默认隐藏二级；仅激活的一级分类将其二级列表占满整行显示在下方 */
    .case-sub {
      display: none;
      padding: 0;
    }
    .case-cat.active .case-sub {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      /* 脱离一行布局，占满整行显示在三个分类标题下方 */
      position: absolute;
      left: 0;
      right: 0;
      top: calc(100% - var(--case-sub-h, 0px));
      padding: 16px 0 0;
    }
    .case-sub-item {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 40px;
      font-size: 12px;
      margin-bottom: 0;
      padding: 8px 6px;
      text-align: center;
      background: rgba(0, 0, 0, 0.03);
      border-radius: 6px;
      color: #666;
      line-height: 1.3;
    }
    .case-sub-item::before {
      display: none;
    }
    .case-sub-item:last-child {
      margin-bottom: 0;
    }
    .case-sub-item.active {
      background: rgba(217, 18, 48, 0.08);
      /* 重置 PC 端的渐变文字效果，否则 text-fill-color:transparent 会让文字不可见 */
      -webkit-text-fill-color: #BD1230;
      background-clip: border-box;
      -webkit-background-clip: border-box;
      color: #BD1230;
      font-weight: 600;
    }

    .case-detail {
      width: 100%;
      padding-top: 0;
      order: 3;
    }
    .case-desc {
      max-width: 100%;
    }
    .case-chart,
    .case-chart-body {
      width: 100%;
      max-width: 100%;
    }
    /* 移动端：曲线与柱状上下堆叠 */
    .case-chart-body {
      flex-direction: column;
      align-items: stretch;
      gap: 30px;
      height: auto;
      padding-bottom: 30px;
    }
    .case-curve {
      width: 100%;
      max-width: 100%;
      height: 180px;
      margin: 0 auto 22px;
    }
    .case-bars {
      position: relative;
      width: 100%;
      margin-left: 0;
      align-items: stretch;
      height: 180px;
    }
    .case-chart-label-curve {
        margin-top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .case-bars-row {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 0;
      bottom: 30px;
      width: fit-content;
      max-width: 100%;
      display: flex;
      align-items: flex-end;
      gap: clamp(30px, 8vw, 50px);
      padding-bottom: 10px;
    }
    .case-chart-label-bars {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      text-align: center;
      padding-top: 0;
    }
    .case-curve-end {
      font-size: 44px;
    }
    .case-curve-start {
      font-size: 24px;
    }
    /* 移动端：案例图片铺满宽度，去掉左右大空白 */
    .case-product {
      flex: 1 1 100%;
      max-width: 100%;
      width: 100%;
      margin: 0;
      order: 2;
    }
  }

  /* ===== 产品服务系列板块 ===== */
  .product-section {
    position: relative;
    width: 100%;
    padding: clamp(60px, 5.208vw, 100px) clamp(20px, 3.125vw, 60px) clamp(40px, 4.167vw, 80px);
    background: #F8F8F8;
    overflow: hidden;
  }

  .product-bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: clamp(300px, 31.25vw, 600px);
    pointer-events: none;
    z-index: 0;
  }

  .product-bg img {
    width: 100%;
    height: auto;
    display: block;
  }

  .product-inner {
    position: relative;
    z-index: 1;
    margin: 0 auto;
  }

  .product-title {
    font-size: clamp(42px, 3.333vw, 64px);
    font-weight: 700;
    color: #1a1a1a;
    text-align: center;
    margin-bottom: clamp(40px, 4.167vw, 80px);
    letter-spacing: 2px;
  }

  .product-body {
    display: flex;
    align-items: center;
    gap: clamp(50px, 5.2vw, 100px);
    margin-bottom: clamp(40px, 4.167vw, 80px);
  }

  .product-cards {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 1.563vw, 30px);
    min-width: 0;
  }

  .product-card {
    background: #ffffff;
    border-radius: clamp(8px, 0.625vw, 12px);
    padding: clamp(24px, 2.083vw, 40px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  }

  .product-card-title {
    font-size: clamp(18px, 1.25vw, 24px);
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: clamp(10px, 0.833vw, 16px);
    line-height: 1.4;
  }

  .product-card strong {
    color: #000000;
  }

  .product-card-desc {
    font-size: clamp(12px, 0.833vw, 16px);
    color: #666;
    line-height: 1.8;
  }

  .product-card-desc:last-of-type {
    margin-bottom: clamp(12px, 1.042vw, 20px);
  }

  .product-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: clamp(12px, 0.833vw, 16px);
    color: #1a1a1a;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
  }

  .product-card-link:hover {
    color: #BA1133;
  }

  .product-card-link .icon25-i-right {
    font-size: clamp(12px, 0.833vw, 16px);
    transition: transform 0.3s ease;
  }

  .product-card-link:hover .icon25-i-right {
    transform: translateX(4px);
  }

  .product-image {
    flex: 0 0 auto;
    width: clamp(600px, 48vw, 920px);
    display: flex;
    align-items: center;
    justify-content: center;
  }

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

  /* ===== Product Responsive: Tablet ===== */
  @media (max-width: 1024px) {
    .product-section {
      padding: 50px 30px 60px;
    }

    .product-bg {
      width: 350px;
    }

    .product-body {
      gap: 30px;
    }

    .product-image {
      width: 350px;
    }

  }

  /* ===== Product Responsive: Mobile ===== */
  @media (max-width: 767px) {
    .product-section {
      padding: 40px 20px 50px;
    }

    .product-bg {
      width: 250px;
    }

    .product-title {
      margin-bottom: 30px;
    }

    .product-body {
      flex-direction: column;
      gap: 30px;
    }

    .product-image {
      width: 100%;
      max-width: 400px;
      margin: 0 auto;
    }

    .product-card {
      padding: 20px;
    }

     
  }
 

  .news-section {
    width: 100%;
    padding: clamp(60px, 5.208vw, 100px) clamp(20px, 3.125vw, 60px) clamp(40px, 4.167vw, 80px);
    overflow: hidden;
  }

  .news-inner {
    margin: 0 auto;
    margin-bottom: clamp(30px, 3.125vw, 60px);
  }

  .news-title {
    font-size: clamp(36px, 3.333vw, 64px);
    font-weight: 400;
    color: #1a1a1a;
    text-align: left;
    letter-spacing: 2px;
  }

  .more-news {
    display: flex;
    justify-content: center;
    margin-top: clamp(30px, 3.125vw, 60px);
  }

  .more-news-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: clamp(12px, 1.042vw, 16px) clamp(32px, 2.604vw, 48px);
    background: linear-gradient(135deg, #FEBE36 0%, #BC1132 100%);
    color: #ffffff;
    font-size: clamp(14px, 1.042vw, 18px);
    font-weight: 500;
    border-radius: 10px;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .more-news-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(188, 17, 50, 0.3);
  }

  .more-news-link::after {
    content: '›';
    font-size: clamp(18px, 1.25vw, 24px);
    font-weight: 400;
    line-height: 1;
  }

  /* ===== Common Logos Section ===== */
  .common-logos {
    padding: 20px 0 clamp(40px, 4.167vw, 80px);
    overflow: hidden;
  }

  .logos-title {
    font-size: clamp(32px, 3.333vw, 64px);
    margin: clamp(30px, 3vw, 60px) 0;
    font-weight: 400;
    color: #1a1a1a;
    text-align: center;
    letter-spacing: 2px;
  }

  .logos-wrapper {
    width: 100%;
    overflow: hidden;
  }

  .logos-row {
    display: flex;
    align-items: center;
    gap: clamp(20px, 2.1vw, 40px);
    animation: logosScroll 20s linear infinite;
    width: max-content;
  }

  .logo-item {
    flex: 0 0 auto;
    width: clamp(120px, 10.417vw, 200px);
    height: clamp(60px, 5.208vw, 100px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    padding: clamp(10px, 1.042vw, 20px);
  }

  .logo-item img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
  }

  @keyframes logosScroll {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  }

  /* Logos Responsive */
  @media (max-width: 768px) {
    .logos-row {
      gap: clamp(12px, 2.5vw, 20px);
    }

    .logo-item {
      width: clamp(80px, 20vw, 120px);
      height: clamp(50px, 12vw, 70px);
      padding: clamp(6px, 1.5vw, 12px);
    }
  }

  /* ===== SEO Services Section ===== */
  .seo-services {
    padding: 0;
    background: #F6F7FB;
    overflow: hidden;
  }
  .seo-padding {
      padding-top: clamp(60px, 5.208vw, 100px);
  }

  .services-content {
    padding: 0 clamp(20px, 3.125vw, 60px) clamp(80px, 8.4vw, 160px);
    margin: 0 auto;
  }

  .services-header {
    text-align: center;
    margin-bottom: clamp(60px, 5.2vw, 100px);
  }

  .services-label {
    display: inline-block;
    font-size: clamp(20px, 1.4vw, 28px);
    background: linear-gradient(135deg, #EFB14D 0%,  #891C31 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 400;
    margin-bottom: 16px;
  }

  .services-heading {
    font-size: clamp(36px, 2.5vw, 48px);
    font-weight: 400;
    color: #1a1a1a;
    margin-bottom: clamp(24px, 1.8vw, 32px);
    line-height: 1.4;
  }

  .services-desc-text {
    font-size: clamp(14px, 0.833vw, 18px);
    color: #666;
    line-height: 1.8;
    max-width: 900px;
    margin: 0 auto;
  }

  .services-cards-wrap {
    position: relative;
    margin-bottom: clamp(30px, 3vw, 50px);
  }

  .services-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(30px, 2.4vw, 48px);
  }

  .services-card {
    background: #ffffff;
    border-radius: 12px;
    padding: clamp(24px, 2.5vw, 40px) clamp(16px, 1.5vw, 24px) clamp(40px, 3.2vw, 60px);
    text-align: center;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .services-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  }

  .card-icon {
    width: clamp(72px, 5.3vw, 96px);
    height: clamp(72px, 5.3vw, 96px);
    margin: 0 auto clamp(24px, 2.2vw, 42px);
    border-radius: 50%;
    border: 1.5px solid #d0d0d0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
  }

  .services-card:hover .card-icon {
    border-color: transparent;
    background-clip: padding-box, border-box;
    background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #EFB14D 0%, #C44536 20%, #d0d0d0 100%) border-box;
  }

  .card-icon img {
    width: 50%;
    height: 50%;
    object-fit: contain;
  }

  .card-title {
    font-size: clamp(16px, 1.042vw, 20px);
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 12px;
  }

  .card-desc {
    font-size: clamp(12px, 0.781vw, 14px);
    max-width: 300px;
    margin: 0 auto;
    color: #888;
    line-height: 1.7;
  }

  .services-progress {
    position: relative;
    margin-top: clamp(32px, 2.3vw, 48px);
  }

  .progress-line {
    position: relative;
    height: 2px;
    background: #e0e0e0;
  }

  .progress-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #C44536, #EFB14D);
    transition: width 0.3s ease;
  }

  .progress-dots {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(16px, 1.563vw, 30px);
    justify-items: center;
  }

  .progress-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #d0d0d0;
    cursor: pointer;
    transition: background 0.3s ease;
  }

  .progress-dot:hover,
  .progress-dot.active {
    background: #C44536;
  }

  .services-logos {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: clamp(20px, 2vw, 40px);
    max-width: 1280px;
    margin: clamp(60px, 6.3vw, 120px) auto 0;
    justify-items: center;
  }

  .seologo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(60px, 5vw, 80px);
    height: clamp(60px, 5vw, 80px);
  }

  .seologo-item img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  /* ===== China GEO Services Section ===== */
  .chinageo-services {
    position: relative;
    padding: clamp(60px, 5vw, 100px) 60px clamp(48px, 3.2vw, 60px);
    overflow: hidden;
  }

  .chinageo-bg {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 50%;
    max-width: 800px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.6;
  }

  .chinageo-bg img {
    width: 100%;
    height: auto;
  }

  .chinageo-content {
    position: relative;
    z-index: 1;
    padding: 0 clamp(20px, 3.125vw, 60px) clamp(60px, 5vw, 100px);
    margin: 0 auto;
  }

  .chinageo-header {
    text-align: center;
    margin-bottom: clamp(60px, 5.2vw, 100px);
  }

  .chinageo-label {
    display: inline-block;
    font-size: clamp(20px, 1.4vw, 28px);
    background: linear-gradient(135deg, #EFB14D 0%, #891C31 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 400;
    margin-bottom: 16px;
  }

  .chinageo-heading {
    font-size: clamp(36px, 2.5vw, 48px);
    font-weight: 400;
    color: #1a1a1a;
    margin-bottom: clamp(24px, 1.8vw, 32px);
    line-height: 1.4;
  }

  .chinageo-desc-text {
    font-size: clamp(14px, 0.833vw, 18px);
    color: #666;
    line-height: 1.8;
    max-width: 900px;
    margin: 0 auto;
  }

  .chinageo-features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(30px, 2.4vw, 48px) clamp(40px, 3vw, 60px);
    margin-bottom: clamp(50px, 4.2vw, 80px);
  }

  .chinageo-feature {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 0 0 calc(25% - 45px);
    min-width: 220px;
  }

  .chinageo-feature:nth-child(n+5) {
    margin-top: clamp(40px, 4.1vw, 80px);
  }

  .chinageo-feature .feature-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    object-fit: contain;
    margin-top: 2px;
  }

  .chinageo-feature .feature-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .chinageo-feature .feature-title {
    font-size: clamp(16px, 1.042vw, 20px);
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
  }

  .chinageo-feature .feature-desc {
    font-size: clamp(12px, 0.781vw, 14px);
    color: #888;
    line-height: 1.7;
    margin: 0;
  }

  /* ===== Global Services Section ===== */
        .global-services {
          position: relative;
          background: #F6F7FB;
          padding: clamp(80px, 6vw, 120px) clamp(20px, 3.125vw, 60px);
          overflow: hidden;
        }

        .global-bg {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 50%;
          height: 60%;
          background: url('../images/index/probg.png') no-repeat bottom left;
          background-size: contain;
          opacity: 0.6;
          pointer-events: none;
        }

        .global-content {
          position: relative;
          z-index: 1;
          margin: 0 auto;
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: clamp(80px, 10.5vw, 200px);
          align-items: start;
        }

        .global-left {
          display: flex;
          flex-direction: column;
          gap: clamp(40px, 3vw, 60px);
        }

        .global-desc {
          font-size: clamp(12px, 0.93vw, 18px);
          margin-top: clamp(20px, 3vw, 60px);
          line-height: 1.8;
          color: #333;
        }

        .global-accordion-card {
          background: #fff;
          padding: clamp(10px, 4vw, 80px) clamp(32px, 6.2vw, 120px) clamp(24px, 4.16vw, 80px) clamp(24px, 4.16vw, 80px);
        }

        .global-accordion-item {
          border-bottom: 1px solid #eee;
        }

        .global-accordion-item:last-child {
          border-bottom: none;
        }

        .global-accordion-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: clamp(16px, 2.4vw, 48px) 0;
          cursor: pointer;
          transition: all 0.3s ease;
        }

        .global-accordion-header:hover {
          opacity: 0.8;
        }

        .global-accordion-title {
          display: flex;
          align-items: center;
          gap: clamp(10px, 1vw, 20px);
          font-size: clamp(16px, 1vw, 20px);
          font-weight: 600;
          color: #1a1a1a;
        }

        .global-eye-icon {
          width: clamp(20px, 1.5vw, 28px);
          height: auto;
          display: none;
        }

        .global-accordion-item.active .global-eye-icon {
          display: block;
        }

        .global-accordion-toggle {
          font-size: clamp(20px, 1.5vw, 28px);
          color: #666;
          font-weight: 300;
        }

        .global-accordion-body {
          max-height: 0;
          overflow: hidden;
          transition: max-height 0.3s ease, padding 0.3s ease;
          padding: 0 0 0 clamp(24px, 4.1vw, 80px);
        }

        .global-accordion-item.active .global-accordion-body {
          max-height: 200px;
          padding: 0 0 clamp(12px, 3.2vw, 60px) clamp(24px, 2.4vw, 48px);
        }

        .global-accordion-body p {
          font-size: clamp(14px, 0.833vw, 18px);
          line-height: 1.6;
          color: #666;
        }

        .global-right {
          display: flex;
          flex-direction: column;
          gap: clamp(20px, 1.6vw, 32px);
        }

        .global-label {
          font-size: clamp(20px, 1.4vw, 28px);
          display: inline-block;
          font-weight: 600;
          background: linear-gradient(90deg, #FDC03A 0%, #BC1230 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }

        .global-title {
          font-size: clamp(32px, 2.5vw, 48px);
          margin-bottom: clamp(20px, 1.86vw, 36px);
          font-weight: 700;
          line-height: 1.3;
          color: #1a1a1a;
        }

        .global-map-wrapper {
          position: relative;
          width: 100%;
          border-radius: 20px;
          box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
        }

        .global-map-img {
          width: 100%;
          height: auto;
          display: block;
        }

        .global-map-float-card {
          position: absolute;
          top: 20px;
          left: clamp(-40px, 3vw, -80px);
          background: rgba(255, 255, 255, 0.95);
          backdrop-filter: blur(10px);
          border-radius: 12px;
          padding: clamp(24px, 1.7vw, 32px);
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
          min-width: clamp(140px, 12vw, 200px);
        }

        .global-float-label {
          display: block;
          font-size: clamp(12px, 0.833vw, 16px);
          color: #666;
          margin-bottom: clamp(12px, 1vw, 20px);
        }

        .global-float-logos {
          display: flex;
          flex-direction: column;
          gap: clamp(12px, 1vw, 20px);
        }

        .global-float-logo-item {
          display: flex;
          align-items: center;
          gap: clamp(8px, 0.6vw, 12px);
          font-size: clamp(12px, 0.833vw, 16px);
          color: #333;
        }

        .global-float-logo-item img {
          width: clamp(20px, 1.5vw, 28px);
          height: clamp(20px, 1.5vw, 28px);
          object-fit: contain;
        }

        /* Global Services Responsive: Tablet */
        @media (max-width: 1024px) {
          .global-content {
            grid-template-columns: 1fr;
            gap: clamp(30px, 3vw, 50px);
          }

          .global-bg {
            width: 70%;
            height: 50%;
          }
          .global-map-float-card {
            top: 30px;
            left: 30px;
            padding: 12px;
            min-width: 120px;
          }
        }

        /* Global Services Responsive: Mobile */
        @media (max-width: 767px) {
          .global-services {
            padding: clamp(60px, 5vw, 80px) 0;
          }

          .global-content {
            padding: 0 20px;
          }

          .global-bg {
            width: 100%;
            height: 40%;
          }
          .global-map-float-card {
            top: 10px;
            left: 10px;
            padding: 12px;
            min-width: 120px;
          }
          .chinageo-feature:nth-child(n+5) {
            margin-top: 0;
          }

          .global-float-logo-item img {
            width: 18px;
            height: 18px;
          }
        }

  /* ===== Services Content Responsive: Tablet ===== */
  @media (max-width: 1024px) {
    .services-cards {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  /* ===== Services Content Responsive: Mobile ===== */
  @media (max-width: 767px) {
    .services-content {
      padding: 30px 16px;
    }
    .services-logos {
      margin: clamp(32px, 2.3vw, 48px) 0;
    }
    .services-heading {
      font-size: 32px;
    }
    .services-progress {
       display: none;
    }
    .services-cards {
      grid-template-columns: 1fr;
      gap: 16px;
    }
    .chinageo-services {
      padding: clamp(60px, 5vw, 100px) 0;
      overflow: hidden;
    }
    .chinageo-content {
      padding: 0 20px;
      max-width: 100%;
    }
    .chinageo-features {
      gap: clamp(30px, 2.4vw, 48px);
    }
    .chinageo-feature {
      flex: 0 0 100%;
      min-width: auto;
    }
    .services-logos {
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
    }
    .seologo-item {
      width: 40px;
      height: 40px;
      margin: 10px 0;
    }
    .chinageo-bg {
      display: none;
    }
  }

  /* ===== Case Detail Section ===== */
  .case-detail {
    padding: clamp(60px, 5vw, 100px) clamp(20px, 3.125vw, 60px);
  }

  .case-detail-inner {
    display: flex;
    max-width: 1400px;
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
  }

  .case-detail-image {
    flex: 0 0 40%;
    position: relative;
    overflow: hidden;
    max-width: 560px;
  }

  .case-detail-image img {
    width: 100%;
  }

  .case-detail-info {
    flex: 1;
    background: #F6F5F5;
    padding: clamp(30px, 2.5vw, 50px) clamp(30px, 2.5vw, 50px);
    display: flex;
    flex-direction: column;
  }

  .case-detail-title {
    font-size: clamp(24px, 2vw, 36px);
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.4;
    margin: 0 0 clamp(16px, 1.2vw, 24px);
  }

  .case-detail-tags {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: clamp(13px, 0.833vw, 16px);
    color: #888;
    margin-bottom: clamp(20px, 1.5vw, 30px);
  }

  .case-detail-tags span + span::before {
    content: '|';
    margin-right: 8px;
    color: #ccc;
  }

  .case-detail-metrics {
    display: flex;
    gap: clamp(20px, 2vw, 40px);
    margin-bottom: clamp(24px, 1.8vw, 36px);
    flex-wrap: wrap;
  }

  .case-detail-metrics .metric {
    font-size: clamp(14px, 0.9vw, 16px);
    color: #333;
  }

  .case-detail-metrics .metric em {
    font-style: normal;
    color: #BD1230;
    font-weight: 600;
  }

  .case-detail-divider {
    width: 100%;
    height: 1px;
    background: #e0e0e0;
    margin-bottom: clamp(24px, 1.8vw, 36px);
  }

  .case-detail-content {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 1.5vw, 30px);
  }

  .case-detail-content h3 {
    font-size: clamp(15px, 0.95vw, 18px);
    font-weight: 600;
    color: #000;
    margin: 0 0 6px !important;
  }

  .case-detail-content p {
    font-size: clamp(12px, 0.833vw, 16px);
    color: #666;
    line-height: 1.7;
    margin: 0 !important;
  }

  .case-back-btn {
    text-align: center;
    margin-top: clamp(40px, 3vw, 60px);
  }

  .case-back-btn a {
    display: inline-block;
    padding: 12px 40px;
    background: linear-gradient(90deg, #BD1230, #FEBE36);
    color: #fff;
    font-size: clamp(14px, 0.9vw, 16px);
    border-radius: 50px;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .case-back-btn a:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(189, 18, 48, 0.3);
  }

  /* ===== FAQ Bubbles ===== */
  .faq-bubbles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 1.5vw, 30px) clamp(60px, 6.3vw, 120px);
    max-width: 1080px;
    margin: 0 auto clamp(30px, 2.5vw, 50px);
  }

  .faq-bubble {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(90deg, #BD1230, #FEBE36);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    border-radius: 50px;
    font-size: clamp(14px, 1vw, 16px);
    justify-content: center;
    animation: faqBubbleFloat 3.5s ease-in-out infinite;
    position: relative;
    z-index: 1;
  }

  .faq-bubble::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #e63946;
    flex-shrink: 0;
  }

  .faq-bubble::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    z-index: -1;
    transition: background 0.3s ease;
  }

  .faq-bubble:nth-child(1) { animation-delay: 0s; }
  .faq-bubble:nth-child(2) { animation-delay: 0.3s; }
  .faq-bubble:nth-child(3) { animation-delay: 0.6s; }
  .faq-bubble:nth-child(4) { animation-delay: 0.9s; }
  .faq-bubble:nth-child(5) { animation-delay: 1.2s; }
  .faq-bubble:nth-child(6) { animation-delay: 1.5s; }

  @keyframes faqBubbleFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
  }

  .faq-bubble:hover::before {
    background: rgba(255, 255, 255, 0.25);
  }

  @media (max-width: 767px) {
    .faq-bubbles {
      grid-template-columns: repeat(2, 1fr);
      gap: 20px clamp(24px, 2.1vw, 40px);
      margin-bottom: 24px;
    }

    .faq-bubble {
      padding: 8px 14px;
      font-size: 13px;
    }
  }

  /* PC: left image rounded corners only on left side */
  @media (min-width: 768px) {
    .case-detail-image {
      border-radius: 16px 0 0 16px;
    }
  }

  /* Mobile: stack layout */
  @media (max-width: 767px) {
    .case-detail {
      padding: 30px 16px;
    }

    .case-detail-inner {
      flex-direction: column;
      border-radius: 16px;
    }

    .case-detail-image {
      border-radius: 16px 16px 0 0;
      flex: none;
      height: 280px;
    }

    .case-detail-info {
      padding: 24px 20px;
    }

    .case-detail-metrics {
      flex-direction: column;
      gap: 12px;
    }

    .case-detail-tags {
      flex-wrap: wrap;
    }
  }

  /* ===== FAQ List Accordion ===== */
  .faqlist-list {
    max-width: 1080px;
    margin: 0 auto;
    padding: clamp(40px, 4.2vw, 80px) clamp(20px, 3.125vw, 40px) clamp(60px, 6.3vw, 120px);
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  .faqlist-item {
    background: #fafafa;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
  }

  .faqlist-item.active {
    box-shadow: 0 2px 12px rgba(230, 57, 70, 0.04);
  }

  .faqlist-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: clamp(16px, 1.5vw, 24px);
    cursor: pointer;
    user-select: none;
    gap: 16px;
    transition: background 0.25s ease;
  }

  .faqlist-question:hover {
    background: #f5f5f5;
  }

  .faqlist-question-text {
    font-size: clamp(15px, 1vw, 18px);
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.6;
    flex: 1;
    font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
  }

  .faqlist-toggle {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #e63946, #f77f00);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .faqlist-toggle svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .faqlist-item.active .faqlist-toggle svg {
    transform: rotate(90deg);
  }

  .faqlist-answer-wrap {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease;
    opacity: 0;
  }

  .faqlist-item.active .faqlist-answer-wrap {
    opacity: 1;
  }

  .faqlist-answer {
    padding: 0 clamp(16px, 1.5vw, 24px) clamp(16px, 1.5vw, 24px);
    font-size: clamp(14px, 0.9vw, 16px);
    color: #555555;
    line-height: 1.8;
    border-top: 1px solid #f0f0f0;
    font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
  }

  .faqlist-item.active .faqlist-answer {
    padding-top: clamp(16px, 1.5vw, 24px);
  }

  /* ===== Lumina Accordion Tabs ===== */
  .lumina-content {
    background-color: #F6F7FB;
    padding: 0 0 clamp(40px, 4vw, 80px);
  }

  .lumina-logos-bg {
     background: url('../images/lumina/caselogobg.png') center center / cover no-repeat;
  }

  .lumina-tabs-container {
    width: 100%;
    max-width: 1680px;
    margin: 0 auto;
    padding: 0 clamp(20px, 3vw, 60px);
    display: flex;
    flex-direction: column;
    --tab-peek-h: 100px;
    --tab-expanded-h: 520px;
    --tab-step: 16px;
    /* 卡片之间负外边距，形成盖住重叠效果 */
    --tab-overlap: 24px;
  }

  .lumina-tab-item {
    position: relative;
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    padding-right: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
    /* 未激活：收缩为标题条高度，形成手风琴效果 */
    height: var(--tab-peek-h);
    margin-bottom: calc(var(--tab-overlap) * -1);
    transition: height 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.4s ease;
  }

  .lumina-tab-item:last-child {
    margin-bottom: 0;
  }

  /* 每层从上到下逐渐变宽：L1 缩进最多、L4 最宽；后面的盖住前面的 */
  .lumina-tab-item:nth-child(1) {
    margin-left: calc(var(--tab-step) * 3);
    margin-right: calc(var(--tab-step) * 3);
    z-index: 1;
  }
  .lumina-tab-item:nth-child(2) {
    margin-left: calc(var(--tab-step) * 2);
    margin-right: calc(var(--tab-step) * 2);
    z-index: 2;
  }
  .lumina-tab-item:nth-child(3) {
    margin-left: var(--tab-step);
    margin-right: var(--tab-step);
    z-index: 3;
  }
  .lumina-tab-item:nth-child(4) {
    margin-left: 0;
    margin-right: 0;
    z-index: 4;
  }

  /* 激活：只展开高度，层级保持固定不变（下面的卡始终盖住上面的卡） */
  .lumina-tab-item.active {
    height: var(--tab-expanded-h);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
  }

  .lumina-tab-item .tab-inner {
    display: flex;
    align-items: center;
    /* 内容始终按展开高度渲染，未激活时因卡片高度不足被裁剪，只露出顶部 */
    height: var(--tab-expanded-h);
    padding: 0 clamp(30px, 3.5vw, 50px) clamp(28px, 2.5vw, 40px);
  }

  .lumina-tab-item .tab-title {
    flex: 0 0 40%;
    font-size: clamp(18px, 1.6vw, 26px);
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.4;
    padding-right: 30px;
    /* 标题固定在卡片顶部标题条区域内垂直居中 */
    align-self: flex-start;
    display: flex;
    align-items: center;
    height: var(--tab-peek-h);
    box-sizing: border-box;
  }

  .lumina-tab-item .tab-image-wrapper {
    flex: 1;
    position: static;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-top: clamp(32px, 2.1vw, 40px);
    padding-bottom: clamp(24px, 2.4vw, 40px);
    /* 抵消卡片缩进，让系统图片始终贴齐最外层右边缘、不跟随缩进 */
    margin-right: calc(var(--own-indent) * -1);
  }

  /* 各层记录自身缩进量，供图片抵消使用 */
  .lumina-tab-item:nth-child(1) { --own-indent: calc(var(--tab-step) * 3); }
  .lumina-tab-item:nth-child(2) { --own-indent: calc(var(--tab-step) * 2); }
  .lumina-tab-item:nth-child(3) { --own-indent: var(--tab-step); }
  .lumina-tab-item:nth-child(4) { --own-indent: 0px; }

  /* 3D 彩色渐变背景：相对整张卡片定位，铺到卡片最底部，随 tab 高度裁剪显示 */
  .lumina-tab-item .tab-3d-bg {
    position: absolute;
    top: 0;
    left: 38%;
    right: 0;
    bottom: 0;
    background: url('../images/lumina/3dbg.png') center center / cover no-repeat;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 0;
  }

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

  .lumina-tab-item .tab-system-img {
    position: relative;
    z-index: 2;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 10px;
  }

  /* ===== Mobile: vertical accordion ===== */
  @media (max-width: 767px) {
    .lumina-tabs-container {
      --tab-peek-h: 60px;
      --tab-expanded-h: 400px;
      --tab-step: 10px;
      --tab-overlap: 14px;
      padding: 0 16px;
    }

    .lumina-tab-item {
      border-radius: 14px;
    }

    .lumina-tab-item:nth-child(1) { margin-left: calc(var(--tab-step) * 3); margin-right: calc(var(--tab-step) * 3); }
    .lumina-tab-item:nth-child(2) { margin-left: calc(var(--tab-step) * 2); margin-right: calc(var(--tab-step) * 2); }
    .lumina-tab-item:nth-child(3) { margin-left: var(--tab-step); margin-right: var(--tab-step); }
    .lumina-tab-item:nth-child(4) { margin-left: 0; margin-right: 0; }

    .lumina-tab-item .tab-inner {
      flex-direction: column;
      padding: 0;
      align-items: stretch;
    }

    .lumina-tab-item .tab-title {
      flex: none;
      width: 100%;
      height: var(--tab-peek-h);
      padding: 0 20px;
      font-size: 16px;
      justify-content: center;
      text-align: center;
    }

    .lumina-tab-item .tab-image-wrapper {
      flex: 1;
      width: 100%;
      padding: 8px 14px 20px;
      justify-content: center;
      /* 移动端图片全宽、不做右缩进抵消 */
      margin-right: 0;
    }

    .lumina-tab-item .tab-3d-bg {
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
  }

  /* ===== Lumina AI 可见度监测平台 ===== */
  .lumina-ai {
    padding: clamp(40px, 4.2vw, 80px) 60px clamp(60px, 6vw, 120px);
  }

  .lumina-ai-head {
    text-align: center;
    margin: 0 auto;
    padding: 0 20px;
  }

  .lumina-ai-title {
    font-size: clamp(28px, 2.5vw, 48px);
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.3;
  }

  .lumina-ai-desc {
    margin-top: clamp(12px, 1vw, 20px);
    font-size: clamp(14px, 1vw, 18px);
    font-weight: 400;
    color: #666;
    line-height: 1.8;
  }

  .lumina-ai-subtitle {
    text-align: center;
    font-size: clamp(22px, 2vw, 36px);
    font-weight: 700;
    color: #1a1a1a;
    margin-top: clamp(40px, 4vw, 80px);
  }

  .lumina-ai-cards {
    margin: clamp(24px, 2.5vw, 48px) auto 0;
    padding: 0 clamp(20px, 3vw, 60px);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 1.6vw, 30px);
  }

  .lumina-ai-card {
    position: relative;
    border-radius: 10px;
    padding: clamp(32px, 3.1vw, 60px) clamp(32px, 3.1vw, 60px) clamp(40px, 4.2vw, 80px);
    text-align: center;
    /* 渐变边框：内层背景色 + 外层渐变，默认边框用灰色，hover 显现渐变 */
    border: 1px solid transparent;
    background-image: linear-gradient(#fdfdfd, #fdfdfd),
                      linear-gradient(#dedede, #dedede);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    color: rgba(0, 0, 0, 0.5);
    transition: box-shadow 0.35s ease, transform 0.35s ease, background-image 0.35s ease;
  }

  .lumina-ai-card:hover {
    color: #000000;
    border-width: 3px;
    background-image: linear-gradient(#ffffff, #ffffff),
                      linear-gradient(180deg, #BB1231 0%, #EFB14D 100%);
    box-shadow: 0 16px 40px rgba(137, 28, 49, 0.12);
    transform: translateY(-4px);
  }

  .lumina-ai-card-title {
    font-size: clamp(18px, 1.4vw, 26px);
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.4;
    transition: color 0.35s ease;
  }

  /* hover 时标题变为渐变文字 */
  .lumina-ai-card:hover .lumina-ai-card-title {
    background: linear-gradient(180deg, #BB1231 0%, #EFB14D 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .lumina-ai-card-text {
    margin-top: clamp(14px, 1.2vw, 24px);
    font-size: clamp(13px, 0.9vw, 16px);
    font-weight: 400;
    color: #666;
    line-height: 1.9;
    text-align: left;
  }

  /* ===== Mobile: AI 可见度监测平台 ===== */
  @media (max-width: 767px) {
    .lumina-ai-cards {
      grid-template-columns: 1fr;
      padding: 0 16px;
    }
    .lumina-ai {
      padding: clamp(40px, 4.2vw, 80px) 0;
    }
  }