/* ===================== 全局颜色变量【在此统一修改全部主题色】 ===================== */
        :root {
            --primary-color: #4f9dff;
            --secondary-color: #2fdf98;
            --dark-color: #1a2b42;
            --dark-bg: #243b55;
            --text-color: #333333;
            --text-gray: #555555;
            --bg-light: #f7f9fc;
            --white: #ffffff;
            --shadow-base: 0 6px 24px rgba(0, 0, 0, 0.08);
            --shadow-hover: 0 14px 36px rgba(79, 157, 255, 0.14);
            --transition-speed: 0.3s ease;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft Yahei", "PingFang SC", sans-serif;
        }

        body {
            color: var(--text-color);
            line-height: 1.7;
            background: var(--white);
            overflow-x: hidden;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
            width: 100%;
        }

        /* 首屏 Banner */
        .hero {
            min-height: 70vh;
            display: flex;
            align-items: center;
            background:
                linear-gradient(135deg, rgba(26, 43, 66, 0.96), rgba(35, 60, 90, 0.96)),
                url("wp_hero_banner_01") center center / cover no-repeat;
            color: var(--white);
            position: relative;
            overflow: hidden;
        }

        .hero::before {
            content: "";
            position: absolute;
            width: 200%;
            height: 200%;
            top: -50%;
            left: -50%;
            background: radial-gradient(circle, rgba(79, 157, 255, 0.12) 0%, transparent 60%);
            animation: floatBg 20s infinite linear;
        }

        @keyframes floatBg {
            0% { transform: translate(0, 0); }
            50% { transform: translate(10%, 10%); }
            100% { transform: translate(0, 0); }
        }

        .hero-content {
            position: relative;
            z-index: 1;
            max-width: 700px;
            margin:0 auto;
            text-align:center;
        }

        .hero h1 {
            font-size: clamp(26px,5vw,42px);
            line-height: 1.3;
            margin-bottom: 20px;
            animation: fadeUp 1s ease-out;
        }

        .hero p {
            font-size: clamp(16px,2vw,18px);
            opacity: 0.9;
            margin-bottom: 30px;
            animation: fadeUp 1.2s ease-out;
        }

        .hero-buttons {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
            justify-content:center;
            animation: fadeUp 1.4s ease-out;
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: var(--dark-color);
            padding: 14px 32px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 700;
            transition: transform var(--transition-speed), box-shadow var(--transition-speed);
        }

        .btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 30px rgba(79, 157, 255, 0.45);
        }

        .btn-secondary {
            border: 2px solid rgba(255, 255, 255, 0.35);
            color: var(--white);
            padding: 14px 32px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            transition: border-color var(--transition-speed), background var(--transition-speed);
        }

        .btn-secondary:hover {
            border-color: var(--primary-color);
            background: rgba(79, 157, 255, 0.1);
        }

        @keyframes fadeUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* 滚动动画 */
        .scroll-section {
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }

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

        /* ===== WordPress优势区块｜全部居中｜圆形FontAwesome图标｜图标上半部分溢出卡片 ===== */
        .advantage-section {
            padding: 100px 0 80px;
            background: var(--bg-light);
        }

        .section-title {
            font-size: clamp(24px,3vw,32px);
            text-align: center;
            margin-bottom: 70px;
            color: var(--dark-color);
        }

        .advantage-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 40px 24px;
        }

        .advantage-item {
            background: var(--white);
            padding: 45px 24px 28px;
            border-radius:12px;
            box-shadow: var(--shadow-base);
            border:none;
            text-align:center;
            position:relative;
            transition: transform var(--transition-speed), box-shadow var(--transition-speed);
        }
        .advantage-item:hover {
            transform: translateY(-8px);
            box-shadow: var(--shadow-hover);
        }

        /* 圆形图标，上半部分超出卡片 */
        .fa-icon-wrap {
            width:72px;
            height:72px;
            border-radius:50%;
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            display:flex;
            align-items:center;
            justify-content:center;
            position:absolute;
            left:50%;
            top:-36px;
            transform:translateX(-50%);
            color:var(--white);
            font-size:30px;
            box-shadow:0 4px 12px rgba(79,157,255,0.25);
        }

        .advantage-item h3 {
            font-size:20px;
            color: var(--dark-color);
            margin-bottom:12px;
			font-weight:bold;
        }
        .advantage-item p {
            color: var(--text-gray);
            font-size:15px;
        }

        /* 服务介绍带配图 */
        .service-intro {
            padding: 80px 0;
        }

        .service-intro-row {
            display: flex;
            align-items: center;
            gap: 40px;
            margin-bottom: 60px;
            flex-wrap: wrap;
        }

        .service-intro-row:nth-child(even) {
            flex-direction: row-reverse;
        }

        .service-intro-text {
            flex: 1 1 420px;
        }

        .service-intro-image {
            flex: 1 1 420px;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: var(--shadow-base);
        }

        .service-intro-image img {
            width: 100%;
            height: auto;
            display: block;
            transition: transform 0.5s ease;
        }

        .service-intro-image:hover img {
            transform: scale(1.05);
        }

        .service-intro-text h2 {
            font-size: clamp(22px,3vw,30px);
            color: var(--dark-color);
            margin-bottom: 16px;
        }

        .service-intro-text p {
            color: var(--text-gray);
            margin-bottom: 20px;
			font-size:16px;
        }

        .service-list {
            list-style: none;
            padding: 0;
        }

        .service-list li {
            padding: 8px 0;
            color: var(--text-gray);
            position: relative;
            padding-left: 28px;
			font-size:16px;
        }

        .service-list li::before {
            content: "✓";
            position: absolute;
            left: 0;
            color: var(--primary-color);
            font-weight: 700;
        }

        /* ===== 我们的WordPress建站服务｜一行4个｜左侧图标｜特色卡片 ===== */
        .service-section {
            padding:80px 0;
            background: var(--bg-light);
        }
        .service-card-wrap {
            display:grid;
            grid-template-columns: repeat(4,1fr);
            gap:24px;
        }
        .service-card {
            background:var(--white);
            padding:28px 24px;
            border-radius:14px;
            box-shadow: var(--shadow-base);
            border:none;
            transition: var(--transition-speed);
            position:relative;
            overflow:hidden;
        }
        .service-card::before{
            content:"";
            position:absolute;
            left:0;
            top:0;
            width:4px;
            height:100%;
            background:linear-gradient(180deg,var(--primary-color),var(--secondary-color));
            opacity:0;
            transition:var(--transition-speed);
        }
        .service-card:hover::before{
            opacity:1;
        }
        .service-card:hover{
            transform:translateY(-6px);
            box-shadow: var(--shadow-hover);
        }
        .service-card-header{
            display:flex;
            align-items:center;
            gap:12px;
            margin-bottom:10px;
        }
        .service-card-header i{
            font-size:22px;
            color:var(--primary-color);
        }
        .service-card h4{
            font-size:18px;
            color:var(--dark-color);
            margin:0;
        }
        .service-card p{
            font-size:14px;
            color:var(--text-gray);
        }

        /* CTA区块 */
        .cta-section {
            padding: 80px 0;
            background:
                linear-gradient(135deg, rgba(26, 43, 66, 0.96), rgba(35, 60, 90, 0.96)),
                url("wp_hero_banner_01") center center / cover no-repeat;
            color: var(--white);
            text-align: center;
        }

        .cta-section h2 {
            font-size: clamp(24px,3vw,32px);
            margin-bottom: 16px;
        }

        .cta-section p {
            font-size: clamp(16px,2vw,17px);
            opacity: 0.9;
            margin-bottom: 30px;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
        }

        /* ========== 全适配响应式断点 ========== */
        @media(max-width:1200px){
            .container{
                padding:0 24px;
            }
        }
        @media(max-width:1024px){
            .service-card-wrap{
                grid-template-columns: repeat(2,1fr);
            }
        }
        @media(max-width:768px){
            .service-intro-row,.service-intro-row:nth-child(even){
                flex-direction:column;
            }
        }
        @media(max-width:576px){
            .service-card-wrap{
                grid-template-columns: 1fr;
            }
            .hero-buttons{
                flex-direction:column;
            }
            .btn-primary,.btn-secondary{
                width:100%;
            }
            .advantage-section{
                padding:80px 0 60px;
                padding:40px 0 30px;
            }
			.service-intro{ padding:40px 0 0;}
			.service-intro-text{flex: 1 1 auto;}
			.service-intro-image{flex: 1 1 auto;}
			.scroll-section.visible{ padding:40px 0;}
        }