
/* 场景导航样式 */
.scene-nav {
    display: inline-flex;
    background: #f8f9fa;
    border-radius: 30px;
    padding: 5px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.scene-nav-item {
    border: none;
    background: transparent;
    padding: 10px 25px;
    border-radius: 25px;
    font-size: 15px;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    transition: all 0.3s;
    outline: none !important;
}
.scene-nav-item:hover { color: #333; background: rgba(0,0,0,0.03); }
.scene-nav-item.active {
    background: #333;
    color: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* 场景面板切换 */
.scene-panel { display: none; animation: fadeIn 0.5s ease; }
.scene-panel.active { display: block; }

/* 场景文字卡片通用 */
.scene-card {
    padding: 40px;
    border-radius: 15px;
    color: #333;
    margin-left: -30px; /* 让卡片稍微覆盖图片 */
    position: relative;
    z-index: 2;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* 移动端适配：取消覆盖 */
@media (max-width: 991px) {
    .scene-card { margin-left: 0; margin-top: -30px; padding: 30px; }
}

.scene-card h3 { font-weight: bold; margin-bottom: 20px; font-size: 24px; color: #fff;}
.scene-card p { line-height: 1.8; margin-bottom: 30px; font-size: 15px; color: rgba(255,255,255,0.9); }

/* 按钮样式 */
.scene-btn-group { display: flex; gap: 15px; }
.btn-scene-primary {
    background: #333; color: #fff; padding: 10px 25px; border-radius: 5px; text-decoration: none; transition: 0.3s; font-weight: 600;
}
.btn-scene-primary:hover { background: #000; color: #fff; transform: translateY(-2px); }

.btn-scene-outline {
    background: transparent; border: 1px solid #333; color: #333; padding: 10px 25px; border-radius: 5px; text-decoration: none; transition: 0.3s;
}
.btn-scene-outline:hover { background: #333; color: #fff; transform: translateY(-2px); }

/* 不同场景的背景色 (对应图片) */
.card-yellow { background-color: #ffca28; }
.card-yellow h3, .card-yellow p { color: #333; } /* 黄色背景用深色文字 */
.card-yellow .btn-scene-outline { border-color: #333; color: #333; }
.card-yellow .btn-scene-outline:hover { background: #333; color: #fff; }

.card-blue { background-color: #448aff; color: #fff !important; }
.card-blue .btn-scene-primary { background: #fff; color: #448aff; }
.card-blue .btn-scene-primary:hover { background: #f0f0f0; }

.card-purple { background-color: #ab47bc; color: #fff !important; }
.card-purple .btn-scene-primary { background: #fff; color: #ab47bc; }

.card-blue-purple { background: linear-gradient(135deg, #5c6bc0, #7e57c2); color: #fff !important; }
.card-blue-purple .btn-scene-primary { background: #fff; color: #5c6bc0; }

.card-purple-blue { background: linear-gradient(135deg, #7e57c2, #5c6bc0); color: #fff !important; }
.card-purple-blue .btn-scene-primary { background: #fff; color: #7e57c2; }

/* 价格导航卡片 */
.pricing-nav-card {
    background: #fff; border-radius: 8px; padding: 20px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); position: sticky; top: 20px;
}
.pricing-nav-item {
    display: block; width: 100%; text-align: left; padding: 12px 15px; margin-bottom: 10px; border-radius: 6px;
    color: #666; background: #f9f9f9; cursor: pointer; font-weight: 500; transition: all 0.2s; border: none; outline: none;
}
.pricing-nav-item:hover { background: #eef4ff; color: #3589f0; }
.pricing-nav-item.active { background: #3589f0; color: #fff; box-shadow: 0 4px 10px rgba(53, 137, 240, 0.3); font-weight: bold; }

/* 价格内容面板 */
.pricing-panel { display: none; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 5px 20px rgba(0,0,0,0.05); animation: fadeIn 0.4s ease; }
.pricing-panel.active { display: block; }

/* 4列网格 */
.pricing-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
@media (max-width: 991px) { .pricing-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .pricing-grid-4 { grid-template-columns: 1fr; } }

/* 价格卡片细节 */
.price-card {
    border: 1px solid #eee; border-radius: 8px; padding: 20px 10px; text-align: center; position: relative;
    transition: transform 0.2s, box-shadow 0.2s; background: #fff;
}
.price-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.08); border-color: #b3d7ff; }
.price-amount { font-size: 24px; font-weight: bold; color: #3589f0; margin-bottom: 10px; }
.price-sub { font-size: 18px; color: #3589f0; font-weight: bold; margin-bottom: 15px; }

/* 包机卡片特殊边框 */
.price-card.special-border { border: 1px solid #3589f0; }
.badge-hot {
    position: absolute; top: -10px; right: -5px; background: #ff4757; color: #fff; font-size: 12px; padding: 2px 8px; border-radius: 10px; z-index: 2;
}

/* 淡入动画（用于场景和价格面板） */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}