/* 基础样式补充（覆盖/补充Bootstrap默认样式） */
body {
    font-family:pingfang SC,helvetica neue,arial,hiragino sans gb,microsoft yahei ui,microsoft yahei,simsun,sans-serif!important;
}
a{text-decoration: none !important}

/* Banner主体样式 */
.bestclaw-banner {
    width: 100%;
    padding: 120px 0 120px;
    background: linear-gradient(120deg, rgba(0, 178, 119, 0.08), rgba(255, 122, 47, 0.08));
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.bestclaw-banner::before, .bestclaw-banner::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(22,93,255,0.1), transparent 70%);
    z-index: 0;
}
.bestclaw-banner::before {
    width: 600px;
    height: 600px;
    top: -200px;
    right: -200px;
}
.bestclaw-banner::after {
    width: 500px;
    height: 500px;
    bottom: -200px;
    left: -200px;
    background: radial-gradient(circle, rgba(255,122,47,0.1), transparent 70%);
}

/* 标签样式 */
.bestclaw-banner-tag {
    font-size: 14px;
    color: #666;
    padding: 6px 18px;
    border-radius: 20px;
    border: 1px solid #c7c4c4;
    display: inline-block;
    margin-bottom: 30px;
}
.bestclaw-banner-tag:hover{
    border: 1px solid #f97316;
}

/* 主标题样式 */
.bestclaw-title-main {
    font-size: 40px;
    color: #000;
    font-weight: 600;
    margin: 20px 0;
}

/* 副标题第一行 */
.bestclaw-title-sub-first {
    font-size: 22px;
    color: #222;
    margin-bottom: 12px;
    line-height: 1.6;
}

/* 卖点项样式 */
.bestclaw-feature-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #000;
}

/* 对号图标 */
.bestclaw-check-icon {
    color: #4096ff;
    font-size: 14px;
    font-weight: bold;
}

/* 龙虾图片容器 */
.bestclaw-lobster-img {
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg, var(--lobster-orange), #FF9E68);
    border-radius: 50%;
    margin: 0 auto 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    box-shadow: 0 8px 24px rgba(255, 122, 47, 0.3);
    animation: breathe 3s infinite ease-in-out, rotateSlow 15s infinite linear;
    position: relative;
    z-index: 1;
}
.bestclaw-lobster-img>img{width: 100%}

/* 主按钮样式（覆盖Bootstrap默认） */
.bestclaw-btn-primary {
    background-color: #00b277!important;
    padding: 23px 35px !important;
    border-radius: 100px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    position: relative;
    padding-right: 44px !important;
    color: #fff;
    width: 264px;
    text-align: center;
}

/* 次要按钮样式（覆盖Bootstrap默认） */
.bestclaw-btn-secondary {
    background: none !important;
    border:1px solid #f97316 !important;
    color: #f97316 !important;
    padding: 23px 36px !important;
    border-radius: 100px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    width: 264px;
    text-align: center;
}

.bestclaw-btn-secondary:hover {
    background-color: #fff5ee !important;
}

/* 响应式适配补充 */
@media (max-width: 768px) {
    .bestclaw-title-main {
        font-size: 28px;
    }
    .bestclaw-banner{padding: 50px 0;}
    .bestclaw-title-sub-first{font-size: 18px;}
}


/*第一部分*/

.bestclaw-container {
    max-width: 1350px;
    margin: 0 auto;
    padding: 90px 20px;
}
.bestclaw-header {
    text-align: center;
    margin-bottom: 50px;
}
.bestclaw-main-title {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 12px;
}
.bestclaw-sub-title {
    font-size: 14px;
    color: #666;
}

.bestclaw-content-row {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    align-items: stretch;
}

/* 左侧卡片：样式完全保留 */
.bestclaw-card-left {
    flex: 1;
    min-width: 320px;
    background: linear-gradient(to right, #f8fbff, #fff5f0);
    border-radius: 8px;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 216px;
    border: 1px solid #d9e7fc;
    transition: all 0.4s ease;
    text-align: center;
}
.bestclaw-card-left:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-6px) scale(1.02);
}
.bestclaw-lobster-icon1 {
    font-size: 40px;
    color: #ed8c46;
    margin-bottom: 20px;
}
.bestclaw-lobster-icon1>img{width: 30%}
.bestclaw-left-text-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    white-space: nowrap;
}
.bestclaw-num {
    font-size: 30px;
    font-weight: 700;
    color: #00b277;
    margin-bottom: 4px;
    line-height: 1;
}
.bestclaw-num.orange {
    color: #ed8c46;
}
.bestclaw-text {
    font-size: 14px;
    color: #666;
}
.bestclaw-operator {
    font-size: 18px;
    color: #666;
}

/* 右侧双卡片容器：核心适配逻辑 */
.bestclaw-right-group {
    flex: 2;
    min-width: 500px;
    display: flex;
    gap: 15px;
    position: relative;
}

/* 加赠标签：PC端横向居中，移动端纵向居中 */
.bestclaw-gift-tag {
    position: absolute;
    top: 50%;
    left: 59%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    background: linear-gradient(to right, #00b277, #fb9d6e);
    border-radius: 50%;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #fff;
    z-index: 9;
}

/* PC端（769px+）：横向排列，宽窄差异 + 固定高度216px */
@media (min-width: 769px) {
    /* 核心修改：养一只龙虾卡片固定高度216px */
    .bestclaw-card-middle {
        flex: 0 0 58%;
        border: 1px solid #eee;
        border-radius: 8px;
        padding: 36px 30px;
        height: 216px; /* 固定高度 */
        box-sizing: border-box; /* 确保内边距不影响高度 */
    }
    .bestclaw-card-right {
        flex: 0 0 37%;
        border: 1px solid #eee;
        border-radius: 8px;
        padding: 36px 30px;
        height: 216px; /* 同步固定高度，视觉统一 */
    }
}

/* 移动端（768px及以下）：纵向排列，各占一行，宽度100% + 固定高度216px */
@media (max-width: 768px) {
    .bestclaw-right-group {
        flex: 1 1 100%; /* 占满宽度 */
        min-width: 0; /* 解除最小宽度限制 */
        flex-direction: column; /* 纵向排列 */
        gap: 0; /* 取消纵向缝隙，让标签卡在中间 */
        padding-top: 12px; /* 预留标签空间 */
    }
    /* 两个卡片都占100%宽度，单独一行 + 固定高度216px */
    .bestclaw-card-middle, .bestclaw-card-right {
        width: 100%;
        border: 1px solid #eee;
        border-radius: 8px;
        padding: 36px 30px;
        height: 216px; /* 移动端也固定高度216px */
        box-sizing: border-box;
    }
    /* 给第一个卡片加底部间距，第二个加顶部间距，留出标签位置 */
    .bestclaw-card-middle {
        margin-bottom: 32px;
    }
    /* 移动端标签：卡在两个纵向卡片的中间位置 */
    .bestclaw-gift-tag {
        width: 64px;
        height: 64px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    .bestclaw-container{padding: 60px 10px;}
}

.bestclaw-card-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
}
/* 核心修改：列表圆点颜色改为#00b277*/
.bestclaw-card-list {
    padding-left: 0px;
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    list-style: none; /* 隐藏默认圆点 */
}
.bestclaw-card-list li {
    margin-bottom: 10px;
    position: relative; /* 用于自定义圆点定位 */
    padding-left: 12px; /* 给自定义圆点留出空间 */
}
/* 自定义圆点样式：颜色#00b277*/
.bestclaw-card-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px; /* 垂直居中对齐 */
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #00b277; /* 目标颜色 */
}

/*第二部分*/
.bestclaw-container-bg{background: #f8f9fa}
/* 坑点卡片行：class以bestclaw开头 */
.bestclaw-pit-card-row {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 50px;
}

/* 坑点卡片样式：class以bestclaw开头 */
.bestclaw-pit-card {
    flex: 0 0 250px; /* 固定宽度，保证5个卡片横向排列 */
    background: #fff;
    border-radius: 8px;
    padding: 30px 20px;
    text-align: center;
    box-shadow: 0 2px 30px rgba(228,230,241,1); /* 轻微阴影，匹配原图 */
}

/* 卡片内X图标容器：class以bestclaw开头 */
.bestclaw-pit-icon-wrap {
    width: 24px;
    height: 24px;
    margin: 0 auto 16px;
    position: relative;
}
/* 自定义X图标（匹配原图浅红底色+红叉） */
.bestclaw-pit-icon-wrap::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    background-color: #fef0f0;
    border-radius: 50%;
    opacity: 0.8;
}
.bestclaw-pit-icon-wrap::after {
    content: "×";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    color: #e14e2e;
    font-weight: bold;
}

/* 卡片标题：class以bestclaw开头 */
.bestclaw-pit-card-title {
    font-size: 18px;
    font-weight: 600;
    color: #000;
    margin-bottom: 8px;
}

/* 卡片描述：class以bestclaw开头 */
.bestclaw-pit-card-desc {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    margin-top: 15px;
}

/* BestClaw 核心卖点行：class以bestclaw开头 */
.bestclaw-pit-slogan-row {
    text-align: center;
    margin-bottom: 40px;
}
.bestclaw-pit-slogan {
    font-size: 18px;
    color: #000;
    font-weight: 700;
}
/* 龙虾图标：class以bestclaw开头 */
.bestclaw-lobster-icon {
    font-size: 18px;
    margin-right: 8px;
}
.bestclaw-lobster-icon img{width: 3%}
/* 高亮文字：class以bestclaw开头 */
.bestclaw-highlight-text {
    color: #f97316;
}

/* 按钮行：class以bestclaw开头 */
.bestclaw-pit-btn-row {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* 立即咨询按钮：class以bestclaw开头 */
.bestclaw-btn-consult {
    background-color: #1677ff;
    color: #fff;
    border: none;
    border-radius: 24px;
    padding: 12px 32px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}
.bestclaw-btn-consult:hover {
    background-color: #0958d9;
}

/* 购买按钮：class以bestclaw开头 */
.bestclaw-btn-buy {
    background-color: transparent;
    color: #f59e0b;
    border: 1px solid #f59e0b;
    border-radius: 24px;
    padding: 12px 32px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}
.bestclaw-btn-buy:hover {
    background-color: #fffbe6;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .bestclaw-main-title {
        font-size: 24px;
    }
    .bestclaw-pit-card {
        flex: 1 1 140px; /* 移动端自适应宽度 */
        margin-bottom: 15px;
    }
    .bestclaw-pit-btn-row {
        flex-direction: column;
        align-items: center;
    }
    .bestclaw-btn-consult, .bestclaw-btn-buy {
        width: 80%;
        max-width: 300px;
    }
    .bestclaw-pit-slogan{font-size: 16px}
}



/*第三部分*/


/* 表格模块标题（为什么选择...） */
.bestclaw-table-title {
    font-size: 24px;
    font-weight: 600;
    color: #000;
    text-align: center;
    margin-bottom: 12px;
}
.bestclaw-table-desc {
    font-size: 12px;
    color: #999;
    text-align: center;
    margin-bottom: 40px;
    line-height: 1.5;
}

/* 对比表格样式 */
.bestclaw-compare-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 30px rgba(228,230,241,1);
    margin-bottom: 50px;
}

/* 表格头部 */
.bestclaw-table-header {
    background-color: #f5f8ff;
}
.bestclaw-table-header th {
    padding: 16px 12px;
    font-size: 16px;
    font-weight: 600;
    color: #000;
    text-align: center;
    border: none;
    height: 70px;
}
/* 最后一列头部特殊样式 */
.bestclaw-table-header th:last-child {
    background-color: #e8f3ff;
}

/* 表格内容行 */
.bestclaw-table-body tr {
    border-bottom: 1px solid #f0f2f5;
}
.bestclaw-table-body td {
    padding: 20px 12px;
    font-size: 14px;
    color: #666;
    text-align: center;
    border: none;
    height: 70px;
}
/* 第一列（项目列）样式 */
.bestclaw-table-body td:first-child {
    font-weight: 500;
    color: #333;
    text-align: center;
}
/* 最后一列（BestClaw列）样式 */
.bestclaw-table-body td:last-child {
    background-color: #f9fcff;
    color: #00b277;
    font-weight: 600;
}

/* 对勾图标样式 */
.bestclaw-check-icon {
    color: #00b277;
    margin-right: 4px;
}

/* 按钮行样式 */
.bestclaw-btn-row {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* 免费部署咨询按钮 */
.bestclaw-btn-deploy {
    background-color: #1677ff;
    color: #fff;
    border: none;
    border-radius: 24px;
    padding: 12px 32px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}
.bestclaw-btn-deploy:hover {
    background-color: #0958d9;
}

/* API购买咨询按钮 */
.bestclaw-btn-api {
    background-color: transparent;
    color: #f59e0b;
    border: 1px solid #f59e0b;
    border-radius: 24px;
    padding: 12px 32px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}
.bestclaw-btn-api:hover {
    background-color: #fffbe6;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .bestclaw-main-title {
        font-size: 24px;
    }
    .bestclaw-table-title {
        font-size: 20px;
    }
    /* 移动端表格横向滚动 */
    .bestclaw-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 50px;
    }
    .bestclaw-compare-table {
        min-width: 600px;
    }
    .bestclaw-btn-row {
        flex-direction: column;
        align-items: center;
    }
    .bestclaw-btn-deploy, .bestclaw-btn-api {
        width: 80%;
        max-width: 300px;
    }
}

/*第四部分*/
.bestclaw-sub-title span {
    color: #00b277;
}

/* 套餐卡片行 - 确保卡片间独立，hover互不影响 */
.bestclaw-package-row {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 50px;
    /* 防止父容器影响子元素过渡 */
    will-change: transform;
}

/* 套餐卡片样式 + 流畅hover效果（仅当前卡片变化） */
.bestclaw-package-card {
    flex: 1;
    min-width: 420px;
    max-width: 350px;
    background-color: #fff;
    border-radius: 8px;
    padding: 30px 24px;
    box-shadow: 0 2px 30px rgba(228,230,241,1);
    position: relative;
    /* 流畅过渡：所有属性+更长时长+缓动曲线 */
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    /* 硬件加速，提升流畅度 */
    transform: translateZ(0);
    will-change: transform, box-shadow, border-color;
}
/* 套餐卡片hover效果：仅当前卡片变化，其他卡片静止 */
.bestclaw-package-card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-6px) scale(1.02);
}

/* 套餐标签（尝鲜版/进阶版/高配版）- 独立不随卡片过渡 */
.bestclaw-package-tag {
    position: absolute;
    top: 24px;
    right: 24px;
    background: linear-gradient(to right, #00b277, #fb9d6e);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 25px;
    border-radius: 100px;
    /* 标签不参与过渡，保持静止 */
    transition: none;
}

/* 套餐名称 - 静止不过渡 */
.bestclaw-package-name {
    font-size: 24px;
    font-weight: 600;
    color: #000;
    margin-bottom: 8px;
    transition: none;
}

/* 套餐描述 - 静止不过渡 */
.bestclaw-package-subdesc {
    font-size: 14px;
    color: #333;
    margin-bottom: 24px;
    transition: none;
}

/* 套餐权益列表 - 静止不过渡 */
.bestclaw-package-list {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
    transition: none;
}
.bestclaw-package-list li {
    font-size: 14px;
    color: #666;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    transition: none; /* 列表项完全静止 */
}
/* 对勾图标 - 静止不过渡 */
.bestclaw-package-check {
    color: #00b277;
    margin-right: 8px;
    transition: none;
    font-weight: bold;
}

/* 套餐价格/联系销售 - 静止不过渡 */
.bestclaw-package-price {
    font-size: 30px;
    font-weight: 600;
    color: #f97316;
    text-align: center;
    margin-bottom: 20px;
    transition: none;
}

/* 立即购买按钮 + 独立流畅hover效果 */
.bestclaw-package-btn {
    display: block;
    width: 100%;
    background-color: #00b277;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 20px 0;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    /* 按钮独立过渡，不影响卡片其他内容 */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    will-change: background-color, box-shadow;
    text-align: center;
}
.bestclaw-package-btn:hover {
    background-color: #0958d9;
    box-shadow: 0 6px 16px rgba(22, 119, 255, 0.18); /* 柔和阴影 */
    /* 仅按钮变化，卡片其他元素不动 */
    transform: none;
}

/* AI模型矩阵+API稳定模块容器 - 独立hover */
.bestclaw-model-container {
    display: flex;
    flex-wrap: wrap;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 30px rgba(228,230,241,1);
    /* 容器独立过渡，内部元素不继承 */
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    will-change: box-shadow, border-color;
    margin-bottom: 60px;
}

/* AI模型矩阵左侧 - 静止不过渡 */
.bestclaw-model-left {
    flex: 2;
    min-width: 320px;
    padding: 30px 24px;
    border-right: 1px solid #f0f2f5;
    transition: none;
}
.bestclaw-model-title {
    font-size: 18px;
    font-weight: 600;
    color: #000;
    margin-bottom: 20px;
    transition: none;
}
.bestclaw-model-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    transition: none;
}
/* AI模型标签 + 独立流畅hover效果 */
.bestclaw-model-tag {
    padding: 8px 16px;
    background: linear-gradient(to right, #f9fafc, #ffffff);
    border-radius: 20px;
    font-size: 14px;
    color: #000;
    display: flex;
    align-items: center;
    /* 标签独立过渡，不影响父容器 */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    will-change: background-color, color, transform;
    border: 1px solid #e8e8e8;
}
.bestclaw-model-tag:hover {
    background-color: #e8f3ff;
    color: #1677ff;
    transform: scale(1.03); /* 小幅放大，更自然 */
    /* 仅当前标签变化，其他标签静止 */
    box-shadow: none;
}
.bestclaw-model-icon {
    margin-right: 6px;
    font-size: 12px;
    transition: none;
}

/* API稳定右侧 - 列表宽度115px + 独立hover */
.bestclaw-api-right {
    flex: 1;
    min-width: 280px;
    padding: 30px 24px;
    background: linear-gradient(to right, #f9fcff, #fff7ed);
    position: relative;
    min-height: 220px;
    transition: none; /* 右侧容器静止 */
}
.bestclaw-api-title {
    font-size: 18px;
    font-weight: 600;
    color: #000;
    margin-bottom: 20px;
    text-align: left;
    transition: none;
}
/* API标签容器：网格列宽115px - 静止 */
.bestclaw-api-tags {
    display: grid;
    grid-template-columns: repeat(2, 115px); /* 固定列宽115px */
    gap: 12px;
    text-align: left;
    padding-left: 0;
    transition: none;
}
/* API标签：宽度115px + 独立流畅hover */
.bestclaw-api-tag {
    width: 115px; /* 固定宽度115px */
    padding: 4px 12px;
    background-color: #fff;
    border-radius: 8px;
    font-size: 14px;
    color: #000;
    text-align: center;
    display: block;
    /* 标签独立过渡，不影响其他标签 */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    will-change: background-color, color, transform, box-shadow;
    border: 1px solid #e8e8e8;
}
.bestclaw-api-tag:hover {
    background-color: #e8f3ff;
    color: #1677ff;
    transform: scale(1.04); /* 小幅放大 */
    box-shadow: 0 4px 12px rgba(22, 119, 255, 0.12); /* 柔和阴影 */
    /* 仅当前标签变化，其他标签静止 */
}
/* 龙虾图标 - 独立流畅hover */
.bestclaw-lobster-img1 {
    position: absolute;
    bottom: 0px;
    right: -20px;
    margin: 0;
    /* 龙虾独立过渡 */
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    will-change: transform;
}
.bestclaw-lobster-img1:hover {
    transform: rotate(15deg) scale(1.08); /* 更柔和的旋转+放大 */
    /* 仅龙虾变化，其他内容不动 */
}
.bestclaw-lobster-img1 span {
    font-size: 60px;
    display: block;
    transition: none;
}

/* 移动端适配 */
/* 移动端适配 - 仅修改API标签网格布局部分 */
@media (max-width: 768px) {
    .bestclaw-main-title {
        font-size: 24px;
    }
    .bestclaw-package-title {
        font-size: 20px;
    }
    .bestclaw-package-card {
        max-width: 100%;
    }
    .bestclaw-model-left {
        border-right: none;
        border-bottom: 1px solid #f0f2f5;
    }
    /* 核心修改：移动端仍保持2列，每列115px */
    .bestclaw-api-tags {
        grid-template-columns: repeat(2, 115px); /* 从115px改为repeat(2, 115px) */
    }
    .bestclaw-lobster-img {
        bottom: 10px;
        right: 10px;
    }
    .bestclaw-lobster-img span {
        font-size: 40px;
    }
}

/*第五部分*/
/* 应用场景模块样式（和之前排版逻辑一致） */
.bestclaw-scene-row {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 0;
    margin-bottom: 60px
}
.bestclaw-scene-card {
    flex: 1;
    min-width: 310px;
    max-width: 310px;
    background-color: #fff;
    border-radius: 8px;
    padding: 30px 24px;
    box-shadow: 0 2px 30px rgba(228,230,241,1);
    /* 和之前统一的hover过渡效果 */
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform: translateZ(0);
    will-change: transform, box-shadow;
}
.bestclaw-scene-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 20px rgba(64, 150, 255, 0.12);
}
.bestclaw-scene-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    height: 70px;
}
.bestclaw-scene-title {
    font-size: 18px;
    font-weight: 600;
    color: #000;
    margin: 0;
    transition: none;
}
.bestclaw-scene-icon {
    font-size: 24px;
    line-height: 1;
    transition: none;
}
.bestclaw-scene-list {
    list-style: none;
    padding: 0;
    margin: 0;
    transition: none;
}
.bestclaw-scene-list li {
    font-size: 14px;
    color: #666;
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
    transition: none;
}
.bestclaw-scene-check {
    color: #00b277;
    margin-right: 8px;
    margin-top: 2px;
    transition: none;
    font-weight: bold;
}

/* 移动端适配：和之前统一的逻辑 */
@media (max-width: 768px) {
    .bestclaw-main-title {
        font-size: 24px;
    }
    .bestclaw-scene-card {
        max-width: 100%;
    }
}

/*第六部分*/
/* 四步流程核心容器 - 结合Bootstrap flex布局 */
.bestclaw-step-wrapper {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

/* 四步流程横向布局 - 大屏下均匀分布，间距适配 */
.bestclaw-step-process {
    display: flex;
    justify-content: space-around; /* 均匀分布，间距更合理 */
    align-items: flex-start;
    position: relative;
    padding: 0 20px 60px; /* 底部留空放图片，调整padding适配箭头 */
    max-width: 1350px; /* 限制流程宽度，让步骤间距更合理 */
    margin: 0 auto; /* 流程整体居中 */
}

/* 核心修改：精准定位bestclaw-jiantou.png图片，箭头对准步骤1/4 */
.bestclaw-step-process::after {
    content: "";
    position: absolute;
    bottom: -10px; /* 调整图片垂直位置，让箭头对准步骤1/4底部 */
    left: 50%;
    transform: translateX(-50%);
    background: url("images/bestclaw-yw-jiantou.png") no-repeat center center;
    background-size: contain;
    z-index: 1;
    width: 100%;
    max-width: 900px; /* 调整图片宽度，适配步骤间距 */
    height: 61px;
}

/* 单个步骤项 - 大屏下固定宽度，保证对齐 */
.bestclaw-step-item {
    text-align: center;
    flex: 0 0 280px; /* 固定宽度，避免拉伸，保证步骤1/4箭头对准 */
    position: relative;
    z-index: 2;
}

/* 步骤数字圆形 - 严格匹配蓝色、尺寸 */
.bestclaw-step-num {
    width: 46px;
    height: 46px;
    line-height: 46px;
    border-radius: 50%;
    background-color: #00b277;
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 步骤名称 */
.bestclaw-step-name {
    font-size: 18px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 6px;
}

/* 步骤描述 */
.bestclaw-step-desc {
    font-size: 14px;
    color: #666666;
    line-height: 1.4;
}

/* 售后支持提示框 - 放在图片上方，前置龙虾图标 */
.bestclaw-step-support {
    position: absolute;
    bottom: -25px; /* 适配图片位置，精准悬浮 */
    left: 50%;
    transform: translateX(-50%);
    background:#fff linear-gradient(120deg, rgba(22, 93, 255, 0.08), rgba(255, 122, 47, 0.08));
    padding: 10px 84px;
    border-radius: 100px;
    font-size: 16px;
    color: #000;
    z-index: 3;
    text-align: center;
    align-items: center;
    gap: 6px;
    border: 1px solid #d9e7fc;
    font-weight: 700;
}


/* 售后提示框下方箭头 - 颜色改为#00b277*/
.bestclaw-step-support::after {
    content: "";
    position: absolute;
    bottom: -98px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    background: url("images/bestclaw-jiantou1.png") no-repeat top center;
    width: 36px;
    height: 85px;
}

/* 交付内容清单标题 */
.bestclaw-deliver-header {
    text-align: center;
    margin: 140px 0 20px;
}
.bestclaw-deliver-title {
    font-size: 18px;
    font-weight: 600;
    color: #000000;
    margin: 0;
}

/* 交付内容清单 - 大屏单行显示，间距合理 */
.bestclaw-deliver-list {
    display: flex;
    flex-wrap: nowrap; /* 大屏强制单行 */
    justify-content: center;
    align-items: center;
    gap: 15px; /* 大屏项间距 */
    max-width: 100%;
    margin: 0 auto 50px;
    padding: 0 20px;
    overflow-x: auto; /* 极端大屏也可滚动（备用） */
    scrollbar-width: none;
}
.bestclaw-deliver-list::-webkit-scrollbar {
    display: none;
}

/* 交付内容项样式 - 基础样式 */
.bestclaw-deliver-item {
    padding: 10px 22px;
    background-color: #ffffff;
    border: 1px solid #f0f0f0;
    border-radius: 20px;
    font-size: 14px;
    color: #333333;
    transition: all 0.3s ease;
    cursor: pointer;
    white-space: nowrap; /* 强制文字不换行 */
    flex: 0 0 auto; /* 不伸缩 */
    text-align: center; /* 文字居中 */
    box-shadow: 0 2px 10px rgba(228, 230, 241, 1);
}
/* hover效果 */
.bestclaw-deliver-item:hover {
    background-color: #00b277;
    color: #ffffff;
    border-color: #00b277;
}

/* 按钮区域 */
.bestclaw-step-btns {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 40px;
}

/* 主按钮 */
.bestclaw-btn-primary {
    padding: 12px 30px;
    background-color: #00b277;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}
.bestclaw-btn-primary:hover {
    background-color: #0052cc;
}

/* 次要按钮 */
.bestclaw-btn-secondary {
    padding: 12px 30px;
    background-color: #ffffff;
    color: #ff8800;
    border: 1px solid #ff8800;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}
.bestclaw-btn-secondary:hover {
    background-color: #fff8f0;
}

/* 移动端适配：流程每项占一行、交付项两列一行（文字不换行） */
@media (max-width: 768px) {
    .bestclaw-main-title {
        font-size: 24px;
    }

    /* 核心：移动端流程每项单独占一行 */
    .bestclaw-step-process {
        display: flex;
        flex-direction: column; /* 竖向排列，每项一行 */
        justify-content: center;
        align-items: center; /* 内容居中 */
        gap: 40px; /* 步骤间垂直间距 */
        padding: 0 10px 40px;
        max-width: 100%;
        overflow-x: visible; /* 关闭横向滚动 */
    }
    /* 移动端步骤项：宽度自适应，居中显示 */
    .bestclaw-step-item {
        flex: 0 0 100%; /* 占满一行宽度 */
        max-width: 280px; /* 限制最大宽度，避免太宽 */
        padding: 0 10px;
    }
    .bestclaw-step-num {
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-size: 17px;
    }
    .bestclaw-step-name {
        font-size: 18px;
    }
    .bestclaw-step-desc {
        font-size: 14px;
    }
    /* 移动端隐藏背景图 */
    .bestclaw-step-process::after {
        display: none;
    }
    /* 移动端售后提示框 */
    .bestclaw-step-support {
        position: static;
        transform: none;
        margin: 10px auto 30px;
        font-size: 14px;
        padding: 10px 86px;
        width: fit-content;
    }

    /* 核心：移动端交付项两列一行显示（文字不换行） */
    .bestclaw-deliver-list {
        flex-wrap: wrap; /* 允许换行 */
        justify-content: center;
        gap: 10px; /* 项间距 */
        padding: 0 15px;
        overflow-x: visible; /* 关闭横向滚动 */
    }
    /* 移动端交付项：两列均分，文字不换行 */
    .bestclaw-deliver-item {
        flex: 0 0 calc(50% - 5px); /* 两列，减去间距 */
        max-width: calc(50% - 5px); /* 限制最大宽度 */
        padding: 8px 10px; /* 缩小内边距适配 */
        font-size: 13px; /* 缩小字号避免溢出 */
        white-space: nowrap; /* 强制文字不换行 */
        overflow: hidden; /* 极端情况隐藏溢出（可选） */
        text-overflow: ellipsis; /* 溢出显示省略号（可选） */
    }

    /* 移动端按钮适配 */
    .bestclaw-step-btns {
        gap: 15px;
        flex-direction: column; /* 按钮竖向排列，适配小屏 */
        align-items: center;
    }
    .bestclaw-btn-primary, .bestclaw-btn-secondary {
        padding: 15px 20px !important;
        font-size: 14px !important;
        width: 100%;
        max-width: 220px !important;
    }
}


/*第六部分*/

/* FAQ样式 - 还原圆角+渐变边框核心样式 */
.bestclaw-accordion-claw {
    max-width: 1350px;
    margin: 0 auto 60px;
}

/* 折叠项样式 - 还原原有视觉效果 */
.bestclaw-accordion-item {
    border: 1px solid #E8E8E8;
    border-radius: 10px !important;
    margin-bottom: 20px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.bestclaw-accordion-item:hover {
    border-color: #00b277;
}

/* 折叠按钮样式 - 完全还原原有效果 */
.bestclaw-accordion-button {
    background-color: #fff !important;
    border: none !important;
    font-weight: 500 !important;
    color: #000 !important;
    padding: 20px 25px !important;
    font-size: 18px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: 100%;
    text-align: left;
    cursor: pointer;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 展开状态按钮样式 - 渐变背景+白色文字 */
.bestclaw-accordion-button.active {
    background: linear-gradient(135deg, #00b277, #0fd895) !important;
    color: #fff !important;
    box-shadow: none !important;
}

/* 箭头图标样式 */
.bestclaw-accordion-button::after {
    content: "";
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: 1.25rem;
    transition: transform 0.3s ease;
}

/* 展开状态箭头旋转 */
.bestclaw-accordion-button.active::after {
    filter: invert(1);
    transform: rotate(-180deg);
}

/* 折叠内容区域样式 - 还原原有padding和字体样式 */
.bestclaw-accordion-body {
    padding: 25px !important;
    line-height: 1.8 !important;
    background-color: #fff !important;
    font-size: 14px !important;
    color: #666 !important;
    border-top: none !important;
}

/* 折叠面板动画 - 保证展开/收起平滑 */
.bestclaw-accordion-collapse {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

/* 展开状态 */
.bestclaw-accordion-collapse.show {
    max-height: 1000px; /* 足够大的值容纳内容 */
}

/* 间距样式 */
.bestclaw-mt-2 {
    margin-top: 0.5rem !important;
}

/*第七部分*/
.bestclaw-container-bg1{background:#f0f6fc url("images/bestclaw-bg1.png") no-repeat bottom center}
/* 优势卡片容器：适配Bootstrap网格，均匀分布 */
.advantage-card-wrapper {
    display: flex;
    justify-content: center;
    align-items: stretch; /* 卡片高度一致 */
    gap: 20px; /* 卡片间距 */
    margin-bottom: 160px;
    flex-wrap: wrap; /* 移动端换行 */
}

/* 优势卡片样式：匹配图片设计 */
.advantage-card {
    flex: 0 0 calc(25% - 15px); /* 大屏4列均分 */
    background-color: #ffffff;
    border-radius: 8px;
    padding: 25px 20px;
    position: relative;
    transition: all 0.3s ease; /* hover过渡 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* 轻微阴影 */
    min-height: 150px; /* 保证卡片高度足够容纳图标 */
    /* 移除默认边框（关键修改） */
    border: none;
}
/* 卡片hover效果：上浮+阴影加深 */
.advantage-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
/* 移除第三个卡片的默认蓝色边框（关键修改） */
.advantage-card.active {
    border: none;
}

/* 卡片标题 */
.advantage-card-title {
    font-size: 20px;
    font-weight: 600;
    color: #000;
    margin-bottom: 10px;
}

/* 卡片描述 */
.advantage-card-desc {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    margin-bottom: 20px;
}

/* 立即咨询按钮：添加渐变背景（关键修改） */
.advantage-card-btn {
    padding: 6px 26px;
    /* 渐变背景：浅蓝到白，匹配设计风格 */
    background: #fff linear-gradient(120deg, rgba(22, 93, 255, 0.08), rgba(255, 122, 47, 0.08));
    color: #000;
    border: 1px solid #e0e0e0; /* 轻微边框增强质感 */
    border-radius: 16px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease; /* hover过渡 */
    margin-bottom: 10px;
}
/* 按钮hover效果：背景变蓝，文字变白 */
.advantage-card-btn:hover {
    background: linear-gradient(to right, #00b277, #0088ff); /* hover渐变 */
    color: #ffffff;
    border-color: #00b277;
}

/* 卡片小龙虾图标 - 精准定位右下角 */
.advantage-card-icon {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 36px;
    height: 36px;
    /* 替换为实际小龙虾图片路径，这里用emoji兜底 */
    background: url("images/lobster-small.png") no-repeat center center;
    background-size: 100% 100%;
    /* 兜底样式（无图片时显示） */
    font-size: 36px;
    line-height: 36px;
    text-align: center;
}

/* 底部横幅：匹配图片设计，修复龙虾遮挡（关键修改） */
.bottom-banner {
    background: linear-gradient(to right, #ffffff, #fff8f0);
    border-radius: 8px;
    padding: 30px 40px 30px 40px; /* 右侧留足够空间给龙虾 */
    display: flex;
    justify-content: flex-start; /* 文字+按钮靠左 */
    align-items: center;
    margin-bottom: 40px;
    position: relative;
    overflow: visible; /* 关键：改为visible，允许龙虾超出横幅显示 */
    min-height: 140px; /* 保证龙虾图标显示空间 */
}

/* 横幅文字 */
.bottom-banner-text {
    font-size: 30px;
    font-weight: 700;
    color: #000;
    flex: 0 0 auto; /* 不拉伸 */
    margin-right: 20px; /* 和按钮保持间距 */
}

/* 横幅按钮：匹配图片样式 */
.bottom-banner-btn {
    padding: 13px 44px;
    background-color: #ffffff;
    color: #ff6600;
    border: 1px solid #ff6600;
    border-radius: 100px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    flex: 0 0 auto; /* 不拉伸 */
    margin-right: 100px; /* 给龙虾留出宽度空间 */
    box-shadow: 0 2px 10px rgba(228, 230, 241, 1);
    margin-left: 100px;
}
/* 横幅按钮hover效果 */
.bottom-banner-btn:hover {
    background-color: #ff6600;
    color: #ffffff;
}

/* 横幅大龙虾图标 - 修复遮挡 + 动态效果（关键修改） */
.bottom-banner-lobster {
    width: 266px;
    height: 265px;
    /* 替换为实际大龙虾图片路径，这里用emoji兜底 */
    background: url("images/bestclaw-icon5.png") no-repeat center center;
    background-size: 100% 100%;
    position: absolute;
    right: 20px;
    top: -120px; /* 定位在上边，部分超出横幅 */
    z-index: 3; /* 提高层级，避免被遮挡 */
    /* 动态效果：缓慢上下浮动 + 轻微旋转 */
    animation: lobsterFloat 3s ease-in-out infinite;
}

/* 龙虾浮动动画 */
@keyframes lobsterFloat {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-10px) rotate(2deg);
    }
    100% {
        transform: translateY(0) rotate(0deg);
    }
}

/* 移动端适配 */
@media (max-width: 768px) {
    .bestclaw-main-title {
        font-size: 24px;
    }
    /* 移动端卡片2列排列 */
    .advantage-card {
        flex: 0 0 calc(50% - 10px);
        margin-bottom: 20px;
        min-height: 180px;
    }
    /* 移动端横幅竖向排列 */
    .bottom-banner {
        flex-direction: column;
        text-align: center;
        padding: 40px 15px 20px; /* 顶部留空给龙虾 */
        gap: 15px;
        min-height: 200px;
        overflow: visible; /* 移动端也允许超出 */
    }
    .bottom-banner-text {
        font-size: 20px;
        margin-right: 0;
    }
    .bottom-banner-btn {
        margin-right: 0;
        width: 100%;
        max-width: 260px;
        margin-left: 0;
    }
    /* 移动端大龙虾调整位置和大小 */
    .bottom-banner-lobster {
        width: 100px;
        height: 100px;
        right: 0%;
        transform: translateX(50%);
        top: 100px;
        z-index: 3;
    }
    .advantage-card-wrapper{margin-bottom: 30px}
}

@media (max-width: 576px) {
    /* 超小屏卡片1列排列 */
    .advantage-card {
        flex: 0 0 100%;
    }
}