/* 全局样式重置与基础设置 */
body {
    font-family: 'PingFang SC', 'Helvetica Neue', Arial, 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', 'SimSun', sans-serif !important;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background: #fff;
}
a {
    text-decoration: none !important;
}
/* 容器最大宽度控制 */
.vps-container {
    max-width: 1350px;
    margin: 0 auto;
    padding: 0 15px;
}
/* 背景分区控制 */
.vps-bg-blue-light {
    background-color: #f7f9ff;
}
.vps-bg-white {
    background-color: #ffffff;
}
/* 通用上下内边距 */
.vps-section-padding {
    padding-top: 90px;
    padding-bottom: 90px;
}
/* 大标题样式 */
.vps-main-title {
    font-size: 30px;
    text-align: center;
    color: #111;
    margin-bottom: 50px;
    font-weight: 600;
}
/* ---------------- 顶部Banner区域 ---------------- */
.vps-banner-wrap {
    padding: 114px 0;
    position: relative;
    overflow: hidden;
    background: url("images/vps-banner.png") top center no-repeat;
    height: 451px;
    background-size: cover;
    margin-top: 60px;
}
.vps-banner-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}
.vps-banner-text {
    flex: 1;
    min-width: 300px;
}
.vps-banner-title {
    font-size: 40px;
    color: #000;
    font-weight: 600;
    margin-bottom: 15px;
}
.vps-banner-desc {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 25px;
    max-width: 650px;
}
.vps-btn-primary {
    display: inline-block;
    padding: 12px 60px;
    background-color: #0066ff;
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s ease;
}
.vps-btn-primary:hover {
    background-color: #0052cc;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 102, 255, 0.2);
}

/* ---------------- 地区标签栏 ---------------- */
.vps-region-tabs {
    background-color: #fff;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}
.vps-region-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 20px 0;
}
.vps-region-item {
    font-size: 14px;
    color: #666;
    text-decoration: none;
    transition: all 0.3s ease;
}
.vps-region-item:hover {
    color: #0066ff;
}
/* ---------------- 配置方案区域 ---------------- */
.vps-plan-card-wrap {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}
.vps-plan-card {
    background-color: #fff;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 8px 40px rgba(0,102,255,0.1);
    transition: all 0.3s ease;
}
.vps-plan-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(0, 102, 255, 0.2);
}
.vps-plan-title {
    font-size: 18px;
    color: #000;
    font-weight: 600;
    margin-bottom: 10px;
}
.vps-plan-tag {
    font-size: 13px;
    color: #0066ff;
    background-color: #f0f5ff;
    padding: 3px 12px;
    border-radius: 50px;
    display: inline-block;
    margin-bottom: 15px;
}
.vps-plan-info {
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
}
.vps-plan-info strong {
    margin-right: 10px;
}
.vps-plan-price-wrap {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 20px 0;
    gap: 40px;
}
.vps-plan-price {
    font-size: 24px;
    color: #ff4400;
    font-weight: 600;
}
.vps-plan-price span {
    font-size: 14px;
    color: #666;
    font-weight: normal;
}
.vps-btn-card {
    display: block;
    width: 100%;
    text-align: center;
    padding: 12px 0;
    background-color: #0066ff;
    color: #fff;
    border-radius: 10px;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s ease;
    font-weight: 600;
}
.vps-btn-card:hover {
    background-color: #0052cc;
    color: #fff;
}

/* ========= FAQ 终极完美版：永不闪动 + 移动端一行一个 + 左对齐+悬停蓝色 ========= */
.vps-faq-section {
    padding: 90px 0;
    background: #f7f9ff url("images/vps-bg1.png") top center no-repeat;
    position: relative;
}
.vps-faq-split-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    align-items: flex-start;
}
.vps-faq-left-nav {
    flex: 1;
    min-width: 240px;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.vps-faq-nav-card {
    background: rgba(255, 255, 255, 0.88);
    border-radius: 15px;
    padding: 18px 22px;
    cursor: pointer;
    transition: all 0.25s ease;
    border: 1px solid rgba(0, 102, 255, 0.2);
    /* 内部内容左对齐 */
    text-align: left;
}
/* 主要修改：悬停时标题文字变蓝色，且其他样式保持原状 (同时desc文字不变色) */
.vps-faq-nav-card:hover .vps-faq-nav-title,
.vps-faq-nav-card.active .vps-faq-nav-title {
    color: #0066ff !important;
    transition: color 0.2s ease;
}
/* 保证原本标题颜色继承，且内部图标颜色不被覆盖（但原有图标是img, 不影响） */
.vps-faq-nav-title {
    font-weight: 700;
    font-size: 16px;
    color: #1e3a5f;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: color 0.2s ease;
}
/* 描述样式不必改动，保持原视觉，左对齐一致 */
.vps-faq-nav-desc {
    font-size: 14px;
    color: #5b6f8c;
    margin-left: 26px;
    text-align: left;    /* 强制左对齐 */
}
/* 卡片hover及active时背景和边框依旧保留原有风格，但不改动其他 */
.vps-faq-nav-card:hover,
.vps-faq-nav-card.active {
    background: #ffffff;
    border-color: #0066ff;
    transform: translateX(8px);
    box-shadow: 0 16px 28px -12px rgba(0, 102, 255, 0.22);
}
/* 右侧内容区域样式保持不变 */
.vps-faq-right-content {
    flex: 3;
    min-width: 260px;
    background: rgba(255, 255, 255, 0.96);
    border-radius: 20px;
    padding: 32px 36px;
    border: 1px solid rgba(0, 102, 255, 0.28);
    position: relative;
}
.vps-faq-content-panel {
    display: none;
    width: 100%;
}
.vps-faq-content-panel.active {
    display: block;
}
.vps-faq-subheading {
    font-size: 16px !important;
    font-weight: 700;
    color: #0066ff;
    margin-bottom: 12px;
}
.vps-faq-subheading-sm {
    font-size: 15px;
    font-weight: 600;
    margin: 1rem 0 0.5rem 0;
    color: #0066ff;
    display: inline-block;
    padding-bottom: 4px;
}
.vps-faq-paragraph, .vps-faq-list-styled li {
    font-size: 14px;
    line-height: 1.6;
    color: #2c3f5c;
    margin-bottom: 8px;
}
.vps-faq-list-styled {
    padding-left: 1.2rem;
}
.vps-faq-warning {
    color: #d43f1d;
    font-weight: 600;
}

/* ========= 新增移动端专用样式 ========= */
/* 仅针对移动端添加响应式样式，不改变任何原有PC端视觉效果 */
@media (max-width: 991.98px) {
    /* FAQ区域：左侧导航在移动端竖向排列，占满宽度 */
    .vps-faq-split-layout {
        flex-direction: column;
        gap: 24px;
    }
    .vps-faq-left-nav {
        max-width: 100%;
        width: 100%;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
    }
    .vps-faq-nav-card {
        width: 100% !important;
        min-width: unset !important;
    }
    /* 移动端悬停效果改为点击效果，保持体验 */
    .vps-faq-nav-card:hover {
        transform: translateX(4px);
    }
    /* 右侧内容区适当缩小内边距，更适配移动端 */
    .vps-faq-right-content {
        padding: 24px 22px;
    }
    /* 字体在移动端略微调整，保持可读性但不大幅改变原设计 */
    .vps-faq-subheading {
        font-size: 15px !important;
    }
    .vps-faq-paragraph, .vps-faq-list-styled li {
        font-size: 13.5px;
        line-height: 1.65;
    }
    .vps-faq-nav-title {
        font-size: 15px;
    }
    .vps-faq-nav-desc {
        font-size: 13px;
        margin-left: 26px;
    }
}

/* 小屏幕手机进一步精细调整间距和字体 */
@media (max-width: 768px) {
    /* 容器内边距减小，充分利用屏幕宽度 */
    .vps-container {
        padding: 0 16px;
    }

    /* 区块上下内边距适当缩小，避免移动端过于拥挤 */
    .vps-section-padding ,.vps-faq-section{
        padding-top: 60px;
        padding-bottom: 60px;
    }

    /* 主标题字体略微缩小，保持视觉平衡 */
    .vps-main-title {
        font-size: 24px;
        margin-bottom: 32px;
    }

    /* Banner区域移动端高度自适应，去除固定高度 */
    .vps-banner-wrap {
        padding: 50px 0;
        height: auto;
        min-height: auto;
    }

    /* Banner内容改为竖向排列 */
    .vps-banner-content {
        flex-direction: column;
        text-align: center;
    }

    /* Banner文字区域居中 */
    .vps-banner-text {
        min-width: auto;
        text-align: left;
    }

    /* Banner标题移动端缩小 */
    .vps-banner-title {
        font-size: 28px;
    }

    /* Banner描述文字居中 */
    .vps-banner-desc {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    /* 按钮移动端宽度适配 */
    .vps-btn-primary {
        padding: 10px 40px;
    }

    /* 地区标签移动端间距调整 */
    .vps-region-list {
        gap: 12px 16px;
        padding: 15px 0;
    }
    .vps-region-item {
        font-size: 13px;
    }

    /* 配置卡片网格移动端改为单列 */
    .vps-plan-card-wrap {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* 卡片内边距略微缩小 */
    .vps-plan-card {
        padding: 20px;
    }

    /* 价格区域移动端改为竖向排列，更易阅读 */
    .vps-plan-price-wrap {
        gap: 12px;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    /* 价格字体适当调整 */
    .vps-plan-price {
        font-size: 26px;
    }

    /* FAQ右侧内容区进一步减小内边距 */
    .vps-faq-right-content {
        padding: 20px 18px;
    }

    /* FAQ问题标题移动端字号 */
    .vps-faq-subheading {
        font-size: 14px !important;
    }
    .vps-faq-subheading-sm {
        font-size: 14px;
    }

    /* 列表项移动端更舒适的行距 */
    .vps-faq-paragraph, .vps-faq-list-styled li {
        font-size: 13px;
        line-height: 1.7;
    }

    /* FAQ卡片内边距微调 */
    .vps-faq-nav-card {
        padding: 14px 18px;
    }
}

/* 超小屏幕（iPhone SE / 折叠屏等）进一步优化 */
@media (max-width: 480px) {
    .vps-container {
        padding: 0 14px;
    }

    .vps-main-title {
        font-size: 24px;
        margin-bottom: 28px;
    }

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

    .vps-banner-desc {
        font-size: 13px;
    }

    .vps-btn-primary {
        padding: 10px 32px;
        font-size: 13px;
    }

    .vps-plan-title {
        font-size: 17px;
    }

    .vps-plan-info {
        font-size: 13px;
    }

    .vps-plan-price {
        font-size: 24px;
    }

    .vps-plan-price span {
        font-size: 13px;
    }

    .vps-btn-card {
        padding: 12px 0;
        font-size: 13px;
    }

    .vps-faq-right-content {
        padding: 16px 14px;
    }

    .vps-faq-nav-card {
        padding: 12px 16px;
    }

    .vps-faq-nav-title {
        font-size: 14px;
        gap: 8px;
    }

    .vps-faq-nav-desc {
        font-size: 12px;
        margin-left: 24px;
    }

    .vps-faq-subheading {
        font-size: 13px !important;
    }

    .vps-faq-paragraph, .vps-faq-list-styled li {
        font-size: 12.5px;
    }
}