/* 
 * 服务支持页面专用样式 (service-support)
 * 遵循 tsingoal.css 的 rem 布局规范 (1rem = 16px)
 */

.service-support-view {
    background-color: #ffffff;
    overflow-x: hidden;
}

/* 1. Banner 区块 */
.ss-banner {
    position: relative;
    width: 100%;
    height: 43.75rem; /* 700px */
    display: flex;
    background-color: #f5f7fa;
}

.ss-banner-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.ss-banner-content {
    position: relative;
    z-index: 1;
    margin-top: 11.25rem;
}
.font-banner-main {margin-bottom: .75rem!important;}
.font-banner-subtitle {color: #5A5F62!important;line-height: 2.375rem!important;}
a.banner-btn {
    text-decoration: none;
}
.banner-btn {
    margin-top: 1.75rem;
    cursor: pointer;
    display: inline-flex;
    background: transparent;
    border: 1px solid #5A5F62;
    border-radius: 1.375rem;
    padding: .5rem 1.3125rem;
    font-size: 1.375rem;
    color: #5A5F62;
    line-height: 1.8125rem;
    transition: all 0.3s ease;
}
.banner-btn:hover {
    color: #FFFFFF;
    background: #2664F5;
    box-shadow: 0px .125rem .25rem 0px rgba(55,76,117,0.5);
    border: 1px solid transparent;
}
/* 2. 全周期服务闭环 */
.ss-section {
    padding: 3.75rem 0 5.9375rem;
}

.ss-heading {
    text-align: center;
    margin-bottom: 2.6875rem;
}

.ss-loop-grid {
    display: flex;
    gap: 1.75rem; /* 28px */
}

.ss-loop-card {
    flex: 1;
    background: #FFFFFF;
    box-shadow: 0.5rem 0.5rem 1.25rem 0 #E7EBF1; /* 8px 8px 20px */
    border-radius: 0.875rem; /* 14px */
    transition: transform 0.6s ease, box-shadow 0.6s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ss-loop-card:hover {
    transform: translateY(-0.5rem);
    box-shadow: 0.5rem 1rem 2rem 0 #D1D9E6;
}

.ss-loop-card-header {
    height: 8.75rem; /* 140px */
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 1.75rem;
}

.ss-loop-card-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.ss-loop-card-info {
    position: relative;
    z-index: 2;
    flex: 1;
}

.ss-loop-card-title {
    font-family: s-demibold, sans-serif;
    font-size: 1.5rem!important; /* 24px */
    line-height: 2rem!important; /* 32px */
    color: #333333;
    margin-top: 0!important;
    margin-bottom: 0.375rem!important; /* 6px */
}

.ss-loop-card-subtitle {
    font-family: s-regular, sans-serif;
    font-size: 1rem; /* 16px */
    line-height: 1.375rem; /* 22px */
    color: #8B909A;
}
.ss-loop-list {
    list-style: none;
    padding: 1.75rem 1.75rem 2.75rem 1.75rem;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}

.ss-loop-item {
    display: flex;
    flex-direction: column;
}

.ss-loop-item-title {
    font-family: s-demibold, sans-serif;
    font-size: 1.25rem; /* 20px */
    color: #333333;
    line-height: 1.4;
}
.ss-loop-item {margin-bottom: 1.625rem;}
.ss-loop-item:last-child {margin-bottom: 0;}
.ss-loop-item-desc {
    font-family: s-regular, sans-serif;
    font-size: 1rem; /* 16px */
    color: #333333;
    line-height: 1.375rem;
    opacity: 0.7;
}
.ss-loop-item-label {
    display: flex;
    align-items: center;
    position: relative;
    font-size: 1.25rem; /* 20px */
    color: #333333;
    line-height: 1.4;
    font-family: s-demibold, sans-serif;
    margin-bottom: .3125rem;
}
.ss-loop-item-label:before {
    content: '';
    display: block;
    width: .5rem;
    height: .5rem;
    background: #2664F5;
    border-radius: 50%;
    margin-right: .375rem;
}
.ss-loop-item-desc {
    font-size: 1rem;
    color: #333333;
    line-height: 1.6;
}
/* 3. 客户赋能体系 */
.ss-empowerment {
    background: #F9FAFC;
}

.ss-empower-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 1.75rem;
    align-items: stretch;
}

.ss-empower-card {
    flex: 1;
    min-width: 0;
    position: relative;
    box-sizing: border-box;
    height: 22.5rem;
    min-height: 22.5rem;
    max-height: 22.5rem;
    background: linear-gradient(180deg, #DFF2FF 0%, #D8EEFF 15.91%, #F5F9FF 36.44%, #FBFEFF 100%);
    /* box-shadow: 0.5rem 0.5rem 1.25rem 0 #E7EBF1; */
    border-radius: 0.875rem;
    padding: 0 1.5rem;
    overflow: visible;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.5s ease;
}

.ss-empower-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 0.875rem;
    background: linear-gradient(180deg, #0081FF 0%, #3587FF 15.91%, #E1EEFF 34.2%, #FFFFFF 100%);
    opacity: 0;
    transition: opacity 0.55s ease;
    pointer-events: none;
    z-index: 0;
}

.ss-empower-card:hover::before {
    opacity: 1;
}


.ss-empower-card-title {
    flex-shrink: 0;
    margin-top: 2.375rem!important;
    margin-bottom: 1.8125rem!important;
    font-family: s-demibold, sans-serif;
    font-size: 1.5rem;
    color: #333333;
    position: relative;
    z-index: 2;
    transition: color 0.45s ease, margin 0.5s cubic-bezier(0.33, 1, 0.68, 1);
}

.ss-empower-card:hover .ss-empower-card-title {
    margin-top: 1.6875rem!important;
    margin-bottom: 1.3125rem!important;
    color: #FFFFFF;
}

.ss-empower-content {
    box-sizing: border-box;
    flex: 0 0 auto;
    align-self: stretch;
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    height: 16.25rem;
    background: #FFFFFF;
    border-radius: 0.875rem;
    padding: 2.5rem 1.875rem;
    position: relative;
    z-index: 2;
    overflow: hidden;
    min-height: 0;
    transition: height 0.45s cubic-bezier(0.33, 1, 0.68, 1),
        gap 0.45s cubic-bezier(0.33, 1, 0.68, 1),
        padding 0.45s cubic-bezier(0.33, 1, 0.68, 1);
}

.ss-empower-card:hover .ss-empower-content {
    height: 17.5rem;
    gap: 1.25rem;
    padding: 1.625rem 1.875rem;
}

.ss-empower-item {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ss-empower-item-title {
    display: flex;
    align-items: center;
    font-family: s-demibold, sans-serif!important;
    font-size: 1.25rem!important;
    color: #333333!important;
    line-height: 1.4!important;
    margin: 0 0 .3125rem 0!important;
}
.ss-empower-item-title:before {
    content: '';
    display: block;
    width: .5rem;
    height: .5rem;
    background: #2664F5;
    border-radius: 50%;
    margin-right: .375rem;
}
.ss-empower-item-desc {
    font-family: s-regular, sans-serif!important;
    font-size: 1rem!important;
    color: #333333!important;
    line-height: 1.6!important;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 1.6rem;
    flex-shrink: 0;
    opacity: .7;
}

.ss-empower-card:hover .ss-empower-item-desc {
    -webkit-line-clamp: 3;
    line-clamp: 3;
    height: 4.8rem;
    min-height: 4.8rem;
}

/* 4. 服务保障 */
.ss-guarantee-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.ss-guarantee-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #FFFFFF;
    box-shadow: .5rem .5rem 1.25rem 0px #E7EBF1;
    border-radius: .875rem;
    padding: 2rem 2.1875rem;
    transition: all 0.6s;
}

.ss-guarantee-card:hover {
    border-color: #2664F5;
    background: #f9faff;
}
.ss-guarantee-icon-box {
    display: flex;
    align-items: center;
    height: 6rem;
    margin-bottom: 2rem;
}
.ss-guarantee-icon {
    display: grid;
    width: 3.5rem;
    height: 3.5rem;
}

.ss-guarantee-title {
    font-family: s-demibold, sans-serif!important;
    font-size: 1.5rem!important;
    margin-top: 0!important;
    margin-bottom: 0.5rem!important;
    line-height: 2rem!important;
    color: #252B3A;
}

.ss-guarantee-desc {
    font-size: 1rem;
    color: #607293;
    line-height: 1.375rem;
    margin-bottom: .375rem;
    text-align: center;
}
.ss-guarantee-desc:last-of-type {margin-bottom: 0;}

/* 5. 联系我们 */
.ss-contact {
    padding-bottom: 6rem;
}

.ss-contact-banner {
    width: 100%;
    height: 27.5rem;
    position: relative;
    border-radius: 1.5rem;
    overflow: hidden;
    margin-bottom: 2.5rem;
}

.ss-contact-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ss-contact-overlay {
    position: absolute;
    left: 8.125rem;
    top: 50%;
    transform: translateY(-50%);
}

.ss-contact-label {
    font-size: 1.75rem;
    color: #252B3A;
    line-height: 2.25rem;
    margin-bottom: 0.5rem;
}

.ss-contact-hotline {
    font-family: s-demibold, sans-serif;
    font-size: 2.5rem;
    /* color: #2664F5; */
    color: #333333;
    line-height: 3.3125rem;
}

.ss-contact-actions {
    display: flex;
    gap: 1.5rem;
}

.ss-contact-card {
    flex: 1;
    background: #FFFFFF;
    border-radius: 1rem;
    padding: 3rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ss-contact-card-icon {
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
}

.ss-contact-card-title {
    font-family: s-demibold, sans-serif!important;
    font-size: 1.5rem!important;
    margin-bottom: 0!important;
    margin-top: 0!important;
    line-height: 2rem!important;
}

.ss-contact-card-desc {
    font-size: 1rem;
    color: #607293;
    line-height: 1.375rem;
    margin-bottom: 1.125rem;
}

.ss-btn-primary {
    background: #2664F5;
    color: #fff;
    padding: 0.625rem 1rem;
    border-radius: .5rem;
    text-decoration: none;
    font-family: s-medium, sans-serif;
    font-size: 1rem;
    transition: background 0.6s;
    border: none;
    cursor: pointer;
}

.ss-btn-primary:hover {
    background: #1a51d4;
}

/* 响应式调整 */
@media (max-width: 1200px) {
    .ss-loop-grid {
        flex-wrap: wrap;
    }
    .ss-loop-card {
        flex: 0 0 calc(50% - 1rem);
    }
}

@media (max-width: 900px) {
    .ss-empower-grid {
        flex-wrap: wrap;
    }
    .ss-empower-card {
        flex: 0 0 calc(50% - 0.875rem);
    }
}

@media (max-width: 768px) {
    .ss-empower-grid {
        flex-wrap: wrap;
    }
    .ss-loop-card, .ss-empower-card, .ss-guarantee-card, .ss-contact-card {
        flex: 0 0 100%;
    }
    .ss-guarantee-grid {
        grid-template-columns: 1fr 1fr;
    }
    .ss-contact-actions {
        flex-direction: column;
    }
}