/*
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Roboto, sans-serif;
        }
*/

        /* 根元素响应式字体基准 */
/*
        html {
            font-size: 16px;
        }
        @media (min-width: 640px)  { html { font-size: 17px; } }
        @media (min-width: 1024px) { html { font-size: 18px; } }
        @media (min-width: 1440px) { html { font-size: 19px; } }
        @media (min-width: 1920px) { html { font-size: 20px; } }
*/

        /* 主容器：渐变背景 + 超丝滑过渡动画 */
        .wja_services_section {
            min-height: 100vh;
            background: linear-gradient(135deg, #ef4444, #dc2626);
            position: relative;
            transition: background 1.2s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .wja_services_section::before {
            content: '';
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.1);
            z-index: 1;
        }

        .wja_container {
            max-width:1300px;
            margin: 0 auto;
            padding: clamp(2rem, 5vw, 4rem) 1rem;
            position: relative;
            z-index: 2;
            display: grid;
            grid-template-columns: 1.2fr 1.5fr;
            gap: clamp(2rem, 5vw, 4rem);
            align-items: start; margin-top: 60px;
        }

        /* 左侧标题区 */
        .wja_services_left {
            color: #fff; padding-top: 7rem;
        }
        .wja_services_label {
            font-size: clamp(1rem, 1.2vw, 1.2rem);
            text-transform: uppercase;
            letter-spacing: 2px;
            color: #fff;
            margin-bottom: clamp(1rem, 2vw, 1.5rem);
            display: flex;
            align-items: center;
            gap: 8px; font-weight: 700;
        }
        .wja_services_label::before {
            content: '//';
            color: #fff;
        }
        .wja_services_title {
            font-size: clamp(3rem, 4vw, 4rem);
            line-height: 1.2;
            margin-bottom: clamp(2rem, 2vw, 2.5rem);
            /* 新增文字过渡动画 */
            transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); color: #fff; font-weight: 700;
        }
        .wja_services_title .wja_highlight {
            color: #fff;
        }
        .wja_services_desc {
            font-size: clamp(1.2rem, 1.5vw, 1.5rem);
            line-height: 1.6;
            color: #fff;
            margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
            /* 新增文字过渡动画 */
            transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);  font-size: 18px;
        }
        .wja_view_all_btn {
            padding: clamp(0.6rem, 1.2vw, 0.8rem) clamp(1rem, 2vw, 1.5rem);
            background: linear-gradient(90deg, #126fbf, #278ff0);
            border: none;
            border-radius: 8px;
            color: #fff;
            font-size: clamp(1.2rem, 1.5vw, 1.5rem);
            font-weight: 500;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: transform 0.3s, box-shadow 0.3s;
        }
.wja_view_all_btn svg path { fill:#fff;}
        .wja_view_all_btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(74, 222, 128, 0.25);
        }

        /* 右侧服务卡片网格 */
        .wja_services_grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: clamp(1.5rem, 3vw, 2.5rem);
        }
        .wja_service_card {
            color: #fff;
            cursor: pointer;
            padding: clamp(1.8rem, 2vw, 2.5rem);
            border-radius: 12px;
            transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
            background: rgba(255, 255, 255, 0.13);
            transform-origin: left center;
        }
        .wja_service_card:hover {
            background: rgba(255, 255, 255, 0.1);
            transform: translateX(6px) scale(1.03);
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
        }
        .wja_service_card.wja_active {
            background: rgba(10, 98, 172, 0.2);
            box-shadow: 0 0 0 1px rgba(38, 142, 239, 0.4), 0 8px 16px rgba(38, 142, 239, 0.15);
        }
        .wja_service_icon {
            width: clamp(40px, 6vw, 56px);
            height: clamp(40px, 6vw, 56px);
            background: linear-gradient(135deg, #126fbf, #278ff0);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: clamp(0.8rem, 1.5vw, 1.2rem);
            transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
        }

.wja_service_icon svg path { fill:#fff;}



        .wja_service_card:hover .wja_service_icon {
            transform: scale(1.12) rotate(5deg);
        }
        .wja_service_icon svg {
            width: clamp(20px, 3vw, 28px);
            height: clamp(20px, 3vw, 28px);
            stroke: #fff;
            stroke-width: 2;
            fill: none;
            stroke-linecap: round;
            stroke-linejoin: round;
            transition: stroke 0.3s;
        }
        .wja_service_card:hover .wja_service_icon svg {
            stroke: #f0fdf4;
        }
        .wja_service_title {
            font-size: clamp(1.5rem, 2vw, 2rem);
            font-weight: 600;
            margin-bottom: clamp(0.4rem, 1vw, 0.6rem); color: #fff;
            transition: color 0.3s;
        }
        .wja_service_card:hover .wja_service_title {
            color: #268eef;
        }
        .wja_service_desc {
            font-size: clamp(1rem, 1.2vw, 1.2rem);
            line-height: 1.5;
            color: #fff;
            transition: color 0.3s; opacity: .7; font-size: 14px;
        }
        .wja_service_card:hover .wja_service_desc {
            color: #fff;
        }

#wja_services_bg { background: url("../img/bbb.jpg") no-repeat center top; background-size: 100% 100%;}
        /* 响应式布局断点 */
        @media (max-width: 1024px) {
            .wja_container {
                grid-template-columns: 1fr;
                gap: 2rem;
            }
            .wja_services_grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        @media (max-width: 640px) {
            .wja_services_grid {
                grid-template-columns: 1fr;
            }
        }