:root {
    /* 主色调 */
    --primary-color: #1e3a5f;
    --primary-dark: #0d1f33;
    --primary-light: #2c4f7c;

    /* 辅助色 */
    --secondary-color: #f5a623;
    --accent-color: #ff8c42;
    --success-color: #27ae60;

    /* 中性色 */
    --text-dark: #2c3e50;
    --text-gray: #7f8c8d;
    --text-light: #bdc3c7;
    --bg-light: #f5f7fa;
    --bg-white: #ffffff;
    --border-color: #dfe6e9;

    /* 字体 */
    --font-primary: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', 'Segoe UI', Arial, sans-serif;

    /* 间距 */
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 40px;
    --spacing-xl: 60px;
    --spacing-xxl: 80px;

    /* 阴影 */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.16);

    /* 圆角 */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    /* 过渡 */
    --transition: all 0.3s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-primary);
    color: var(--text-dark);
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
}

body::before {
    content: '';
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background:
        radial-gradient(circle at 20% 50%, rgba(26, 58, 92, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(212, 165, 116, 0.03) 0%, transparent 50%);
    animation: backgroundMove 20s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}

@keyframes backgroundMove {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(-50px, -50px);
    }
}

/* 导航栏 */
.navBar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(26, 58, 92, 0.95);
    backdrop-filter: blur(10px);
    padding: 15px 0;
    z-index: 1000;
    box-shadow: var(--shadow-sm);
}

.navBar.scrolled {
    background: var(--primary-color);
    box-shadow: var(--shadow-md);
}

.navContainer {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--bg-white);
    font-size: 20px;
    font-weight: 600;
    text-decoration: none;
}

.logoIcon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
}

.navMenu {
    display: flex;
    list-style: none;
    gap: var(--spacing-lg);
}

.navMenu a {
    color: var(--bg-white);
    text-decoration: none;
    font-size: 15px;
    transition: var(--transition);
    position: relative;
}

.navMenu a:hover {
    color: var(--secondary-color);
}

.navMenu a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--secondary-color);
    transition: var(--transition);
}

.navMenu a:hover::after {
    width: 100%;
}

.navCta {
    background: var(--secondary-color);
    color: var(--bg-white);
    padding: 10px 24px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
    border: none;
    cursor: pointer;
    font-size: 15px;
    font-family: var(--font-primary);
}

.navCta:hover {
    background: var(--accent-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* 轮播图 Hero */
.heroSlider {
    margin-top: 70px;
    position: relative;
    height: 600px;
    overflow: hidden;
}

.sliderContainer {
    display: flex;
    transition: transform 0.5s ease-in-out;
    height: 100%;
}

.slide {
    min-width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slideOverlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(26, 58, 92, 0.85) 0%, rgba(15, 36, 56, 0.75) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.slideContent {
    max-width: 1200px;
    padding: 0 var(--spacing-md);
    color: var(--bg-white);
    text-align: center;
}

.slideTitle {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    line-height: 1.2;
}

.slideSubtitle {
    font-size: 20px;
    margin-bottom: var(--spacing-lg);
    opacity: 0.95;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.slideCta {
    display: inline-block;
    background: var(--secondary-color);
    color: var(--bg-white);
    padding: 15px 40px;
    border-radius: 30px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    transition: var(--transition);
    margin-top: var(--spacing-md);
    border: none;
    cursor: pointer;
    font-family: var(--font-primary);
}

.slideCta:hover {
    background: var(--accent-color);
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

/* 轮播控制 */
.sliderControls {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 10;
}

.sliderDot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: var(--transition);
}

.sliderDot.active {
    background: var(--secondary-color);
    width: 30px;
    border-radius: 6px;
}

.sliderArrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.3);
    color: var(--bg-white);
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    transition: var(--transition);
    z-index: 10;
}

.sliderArrow:hover {
    background: rgba(255, 255, 255, 0.5);
}

.sliderArrow.prev {
    left: 30px;
}

.sliderArrow.next {
    right: 30px;
}

/* 通用区块样式 */
.section {
    padding: var(--spacing-xxl) var(--spacing-md);
    position: relative;
    overflow: hidden;
}

.section::before {
    content: '';
    position: absolute;
    top: 0;
    right: -200px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(212, 165, 116, 0.05) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.sectionAlt {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.sectionAlt::before {
    background: radial-gradient(circle, rgba(26, 58, 92, 0.03) 0%, transparent 70%);
    left: -200px;
    right: auto;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

.sectionHeader {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.sectionTitle {
    font-size: 36px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: var(--spacing-sm);
    position: relative;
    display: inline-block;
}

.sectionTitle::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: var(--secondary-color);
    border-radius: 2px;
}

.sectionSubtitle {
    font-size: 16px;
    color: var(--text-gray);
    margin-top: var(--spacing-md);
}

/* 服务标题区域 */
.servicesHeader {
    text-align: center;
    margin-bottom: var(--spacing-xxl);
    padding: var(--spacing-lg) var(--spacing-md);
    position: relative;
}

.servicesHeader h2 {
    font-size: 42px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
    position: relative;
    display: inline-block;
}

.servicesHeader h2::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, var(--secondary-color), var(--accent-color));
    border-radius: 2px;
}

.servicesHeader p {
    font-size: 17px;
    color: var(--text-gray);
    line-height: 1.8;
    max-width: 900px;
    margin: var(--spacing-lg) auto 0;
    padding: 0 var(--spacing-md);
}

/* 服务内容区域 */
.servicesContent {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.serviceItem {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
    position: relative;
}

.serviceItem:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

.serviceItem .serviceIcon {
    width: 100%;
    height: 200px;
    overflow: hidden;
    margin: 0;
    border-radius: 0;
    background: none;
}

.serviceItem .serviceIcon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.serviceItem:hover .serviceIcon img {
    transform: scale(1.1);
}

.serviceItem h4 {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-color);
    margin: var(--spacing-md) var(--spacing-md) var(--spacing-sm);
}

.serviceItem>p {
    font-size: 14px;
    color: var(--text-gray);
    line-height: 1.7;
    margin: 0 var(--spacing-md) var(--spacing-md);
}

.serviceFeatures {
    list-style: none;
    padding: 0 var(--spacing-md) var(--spacing-md);
    margin: 0;
}

.serviceFeatures li {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: var(--text-dark);
    margin-bottom: var(--spacing-xs);
    padding: var(--spacing-xs) 0;
}

.serviceFeatures li svg {
    margin-right: var(--spacing-xs);
    color: var(--secondary-color);
    flex-shrink: 0;
}

/* 服务页脚 */
.servicesFooter {
    text-align: center;
    padding: var(--spacing-xxl) var(--spacing-md) var(--spacing-lg);
    background: linear-gradient(135deg, var(--bg-white) 0%, #f8f9fa 100%);
    border-radius: var(--radius-lg);
    margin-top: var(--spacing-xl);
    box-shadow: var(--shadow-sm);
}

.servicesFooter h3 {
    font-size: 32px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: var(--spacing-sm);
}

.servicesFooter p {
    font-size: 16px;
    color: var(--text-gray);
    margin-bottom: var(--spacing-lg);
}

.servicesFooter .btn {
    display: inline-block;
    padding: 15px 40px;
    border-radius: 30px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    transition: var(--transition);
    cursor: pointer;
    border: none;
}

.servicesFooter .btn-primary {
    background: var(--secondary-color);
    color: var(--bg-white);
}

.servicesFooter .btn-primary:hover {
    background: var(--accent-color);
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

/* 关于我们 */
.aboutContent {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    align-items: center;
}

.about-text h3 {
    font-size: 28px;
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
}

.about-text p {
    font-size: 16px;
    color: var(--text-gray);
    margin-bottom: var(--spacing-sm);
    line-height: 1.8;
}

.aboutFeatures {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.featureItem {
    display: flex;
    align-items: center;
    gap: 12px;
}

.featureIcon {
    width: 24px;
    height: 24px;
    background: var(--secondary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bg-white);
    font-size: 14px;
    flex-shrink: 0;
}

.aboutStats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}

.statCard {
    background: linear-gradient(135deg, var(--bg-white) 0%, #fafbfc 100%);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    text-align: center;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(212, 165, 116, 0.1);
}

.statCard::before {
    content: '';
    position: absolute;
    top: 0;
    left: -50%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(212, 165, 116, 0.1), transparent);
    transform: skewX(-25deg);
    transition: var(--transition);
}

.statCard:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--secondary-color);
}

.statCard:hover::before {
    left: 150%;
}

.statNumber {
    font-size: 40px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: var(--spacing-xs);
}

.statLabel {
    font-size: 14px;
    color: var(--text-gray);
}

/* 业务领域 */
.servicesGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
}

.serviceCard {
    background: var(--bg-white);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    text-align: center;
    transition: var(--transition);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.serviceCard::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(212, 165, 116, 0.1), transparent);
    transition: var(--transition);
}

.serviceCard:hover::before {
    left: 100%;
}

.serviceCard:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
    border-top: 3px solid var(--secondary-color);
}

.serviceIcon {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--spacing-md);
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: var(--bg-white);
    position: relative;
    box-shadow: 0 4px 15px rgba(26, 58, 92, 0.2);
}

.serviceIcon::before {
    content: '';
    position: absolute;
    inset: -5px;
    background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));
    border-radius: 50%;
    opacity: 0;
    transition: var(--transition);
    z-index: -1;
}

.serviceCard:hover .serviceIcon::before {
    opacity: 0.3;
    inset: -8px;
}

.serviceIcon svg {
    width: 40px;
    height: 40px;
    fill: currentColor;
}

.serviceCard h3 {
    font-size: 18px;
    color: var(--primary-color);
    margin-bottom: var(--spacing-sm);
}

.serviceCard p {
    font-size: 14px;
    color: var(--text-gray);
    line-height: 1.6;
}

/* 律师团队 */
.teamWrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xxl);
    align-items: flex-start;
    width: 100%;
}

.teamSliderSection {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    min-width: 0;
    padding: 0 12px;
}

.teamSwiper {
    width: 100%;
    overflow: visible;
    padding: var(--spacing-md) 0;
}

.teamSwiper .swiper-wrapper {
    display: flex;
    align-items: stretch;
}

.teamSwiper .swiper-slide {
    width: auto;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: stretch;
    box-sizing: border-box;
    height: auto;
}

.teamSwiper .swiper-slide .lawyer-card {
    width: 100%;
    height: 100%;
}

.lawyerCard {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.lawyerCard:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
}

.lawyerPhoto {
    width: 100%;
    padding: var(--spacing-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.lawyerPhoto img {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--bg-white);
    box-shadow: var(--shadow-md);
    transition: var(--transition);
}

.lawyerCard:hover .lawyerPhoto img {
    transform: scale(1.05);
    box-shadow: var(--shadow-lg);
}

.lawyerInfo {
    padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
    text-align: center;
}

.lawyerName {
    font-size: 19px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: var(--spacing-xs);
}

.lawyerTitle {
    font-size: 13px;
    color: var(--text-gray);
    margin-bottom: var(--spacing-sm);
}

.lawyerDesc {
    font-size: 13px;
    color: var(--text-gray);
    line-height: 1.7;
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* Swiper 分页器 */
.teamSwiper-pagination {
    position: relative;
    margin-top: var(--spacing-md);
}

.teamSwiper-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: var(--border-color);
    opacity: 1;
    transition: var(--transition);
}

.teamSwiper-pagination .swiper-pagination-bullet-active {
    background: var(--secondary-color);
    width: 28px;
    border-radius: 5px;
}

/* 团队介绍内容 */
.teamContent {
    padding: var(--spacing-xl) var(--spacing-lg);
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.teamContent h3 {
    font-size: 32px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
    line-height: 1.3;
}

.teamContent p {
    font-size: 15px;
    color: var(--text-gray);
    line-height: 1.9;
    margin-bottom: var(--spacing-md);
}

.teamFeatures {
    display: grid;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
}

.teamFeatureItem {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    color: var(--text-dark);
}

.teamFeatureItem::before {
    content: '✓';
    width: 28px;
    height: 28px;
    background: var(--secondary-color);
    color: var(--bg-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-weight: 700;
    font-size: 14px;
}

/* 律师团队外部导航按钮 */
.teamNavigation {
    position: relative;
}

.teamNavButton {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 55px;
    height: 55px;
    background: var(--bg-white);
    border: 2px solid var(--secondary-color);
    border-radius: 50%;
    color: var(--secondary-color);
    font-size: 22px;
    cursor: pointer;
    z-index: 10;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
}

.teamNavButton:hover {
    background: var(--secondary-color);
    color: var(--bg-white);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.4);
}

.teamNavButton.swiper-button-disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.teamNavPrev {
    left: -30px;
}

.teamNavNext {
    right: -30px;
}

/* 服务流程 */
.processTimeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-lg);
    max-width: 1400px;
    margin: 0 auto;
}

.processStep {
    background: var(--bg-white);
    padding: var(--spacing-xl) var(--spacing-lg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    transition: var(--transition);
    position: relative;
    text-align: left;
}

.processStep:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

.processIcon {
    width: 80px;
    height: 80px;
    margin: 0 0 var(--spacing-md) 0;
    background: linear-gradient(135deg, #ff9800, #f57c00);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: var(--bg-white);
    box-shadow: 0 4px 15px rgba(255, 152, 0, 0.3);
    transition: var(--transition);
    position: relative;
}

.processStep:hover .processIcon {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(255, 152, 0, 0.4);
}

.processIcon svg {
    width: 40px;
    height: 40px;
    fill: currentColor;
}

.processNumber {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    background: var(--text-dark);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bg-white);
    font-weight: 700;
    font-size: 18px;
}

.processStep h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: var(--spacing-xs);
}

.processSubtitle {
    font-size: 16px;
    font-weight: 600;
    color: #ff9800;
    margin-bottom: var(--spacing-md);
}

.processStep>p {
    font-size: 14px;
    color: var(--text-gray);
    line-height: 1.7;
    margin-bottom: var(--spacing-md);
}

.processFeatures {
    list-style: none;
    padding: 0;
    margin: 0;
}

.processFeatures li {
    display: flex;
    align-items: flex-start;
    font-size: 14px;
    color: var(--text-dark);
    margin-bottom: var(--spacing-sm);
    padding-left: var(--spacing-md);
    position: relative;
}

.processFeatures li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #ff9800;
    font-weight: 700;
    font-size: 16px;
}

/* 成功案例 */
.casesGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
}

.caseCard {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
    position: relative;
}

.caseCard::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
    padding: 2px;
    background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: var(--transition);
}

.caseCard:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.caseCard:hover::after {
    opacity: 1;
}

.caseImage {
    width: 100%;
    height: 200px;
    overflow: hidden;
    position: relative;
}

.caseImage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.caseBadge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: var(--secondary-color);
    color: var(--bg-white);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.caseContent {
    padding: var(--spacing-md);
}

.caseTitle {
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: var(--spacing-sm);
}

.caseMeta {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    font-size: 13px;
    color: var(--text-light);
}

.caseDesc {
    font-size: 14px;
    color: var(--text-gray);
    line-height: 1.6;
    margin-bottom: var(--spacing-sm);
}

.caseResult {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 14px;
    color: var(--success-color);
    font-weight: 600;
}

/* 视频展示 */
.videoShowcase {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
    max-width: 1400px;
    margin: 0 auto;
}

.videoItem {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
    cursor: pointer;
    background: #000;
}

.videoItem:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.videoItem video {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 9/16;
    object-fit: cover;
}

.videoPlayOverlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: var(--transition);
}

.videoItem:hover .videoPlayOverlay {
    opacity: 1;
}

.videoPlayIcon {
    width: 80px;
    height: 80px;
    background: rgba(212, 165, 116, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bg-white);
    font-size: 32px;
    transition: var(--transition);
}

.videoItem:hover .videoPlayIcon {
    transform: scale(1.1);
    background: var(--secondary-color);
}

/* 视频弹窗 */
.videoModal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
}

.videoModal.active {
    display: flex;
}

.videoModal-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    background: #000;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 0 50px rgba(212, 165, 116, 0.3);
}

.videoModal video {
    width: 100%;
    height: auto;
    max-height: 90vh;
    display: block;
}

.videoModal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: rgba(212, 165, 116, 0.9);
    border: none;
    border-radius: 50%;
    color: var(--bg-white);
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    z-index: 10;
}

.videoModal-close:hover {
    background: var(--secondary-color);
    transform: rotate(90deg);
}

/* 联系我们 */
.contactWrapper {

    margin: 0 auto;
}

.contactForm {
    background: var(--bg-white);
    padding: var(--spacing-xxl) var(--spacing-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

/* 服务保障 */
.serviceGuarantees {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xxl);
}

.guaranteeItem {
    background: var(--bg-white);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    text-align: center;
    transition: var(--transition);
}

.guaranteeItem:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.guaranteeIcon {
    width: 60px;
    height: 60px;
    margin: 0 auto var(--spacing-md);
    background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--bg-white);
}

.guaranteeIcon svg {
    width: 32px;
    height: 32px;
    fill: currentColor;
}

.guaranteeItem h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: var(--spacing-xs);
}

.guaranteeItem p {
    font-size: 13px;
    color: var(--text-gray);
    line-height: 1.6;
}

/* CTA区域 */
.ctaSection {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    padding: var(--spacing-xxl) var(--spacing-lg);
    border-radius: var(--radius-lg);
    text-align: center;
    margin-bottom: var(--spacing-xxl);
    position: relative;
    overflow: hidden;
}

.ctaSection::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(212, 165, 116, 0.1) 0%, transparent 70%);
    animation: pulse 3s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.5;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

.ctaSection h2 {
    font-size: 36px;
    font-weight: 700;
    color: var(--bg-white);
    margin-bottom: var(--spacing-md);
    position: relative;
    z-index: 1;
}

.ctaSection p {
    font-size: 18px;
    color: var(--bg-white);
    opacity: 0.9;
    margin-bottom: var(--spacing-lg);
    line-height: 1.8;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1;
}

.ctaButtons {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.ctaButton {
    display: inline-block;
    padding: 16px 40px;
    border-radius: 30px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    transition: var(--transition);
    border: 2px solid transparent;
    cursor: pointer;
    font-family: var(--font-primary);
}

.ctaButton-primary {
    background: var(--secondary-color);
    color: var(--bg-white);
}

.ctaButton-primary:hover {
    background: var(--accent-color);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(212, 165, 116, 0.4);
}

.ctaButton-secondary {
    background: transparent;
    color: var(--bg-white);
    border-color: var(--bg-white);
}

.ctaButton-secondary:hover {
    background: var(--bg-white);
    color: var(--primary-color);
    transform: translateY(-3px);
}

.formGroup {
    margin-bottom: var(--spacing-md);
}

.formGroup label {
    display: block;
    font-size: 14px;
    color: var(--text-dark);
    margin-bottom: var(--spacing-xs);
    font-weight: 500;
}

.formGroup input,
.formGroup textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: var(--font-primary);
    transition: var(--transition);
}

.formGroup input:focus,
.formGroup textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(26, 58, 92, 0.1);
}

.formGroup textarea {
    resize: vertical;
    min-height: 120px;
}

.formSubmit {
    width: 100%;
    background: var(--secondary-color);
    color: var(--bg-white);
    padding: 14px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.formSubmit:hover {
    background: var(--accent-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.formSubmit:disabled {
    background: var(--text-light);
    cursor: not-allowed;
    transform: none;
    opacity: 0.6;
}

/* 页脚 */
.footer {
    background: var(--primary-dark);
    color: var(--bg-white);
    padding: var(--spacing-xl) var(--spacing-md) var(--spacing-md);
}

.footerContent {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
}

.footer-section h3 {
    font-size: 18px;
    margin-bottom: var(--spacing-md);
}

.footer-section p {
    opacity: 0.8;
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: var(--spacing-sm);
}

.footerLinks {
    list-style: none;
}

.footerLinks li {
    margin-bottom: var(--spacing-xs);
}

.footerLinks a {
    color: var(--bg-white);
    text-decoration: none;
    opacity: 0.8;
    font-size: 14px;
    transition: var(--transition);
}

.footerLinks a:hover {
    opacity: 1;
    color: var(--secondary-color);
}

.footerBottom {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: var(--spacing-md);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    opacity: 0.7;
    font-size: 13px;
}

/* Cookie 通知 */
.cookieNotice {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(26, 58, 92, 0.95);
    backdrop-filter: blur(10px);
    color: var(--bg-white);
    padding: var(--spacing-md);
    z-index: 999;
    transform: translateY(100%);
    transition: var(--transition);
}

.cookieNotice.show {
    transform: translateY(0);
}

.cookieContent {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
}

.cookieNotice p {
    font-size: 14px;
    opacity: 0.9;
    margin: 0;
}

.cookieButtons {
    display: flex;
    gap: var(--spacing-sm);
}

.cookieBtn {
    padding: 8px 20px;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: var(--transition);
}

.cookieBtn-accept {
    background: var(--secondary-color);
    color: var(--bg-white);
}

.cookieBtn-accept:hover {
    background: var(--accent-color);
}

.cookieBtn-decline {
    background: transparent;
    color: var(--bg-white);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* 回到顶部按钮 */
.backToTop {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: var(--secondary-color);
    color: var(--bg-white);
    border: none;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    z-index: 998;
}

.backToTop.show {
    opacity: 1;
    visibility: visible;
}

.backToTop:hover {
    background: var(--accent-color);
    transform: translateY(-5px);
}

/* 咨询律师按钮 */
.consultLawyer {
    position: fixed;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));
    color: var(--bg-white);
    padding: 16px 32px;
    border: none;
    border-radius: 30px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(212, 165, 116, 0.4);
    transition: var(--transition);
    z-index: 999;
    letter-spacing: 2px;
    font-family: var(--font-primary);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
    animation: float 3s ease-in-out infinite;
}

.consultLawyer::before {
    content: '';
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 0 1 .213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.326.326 0 0 0 .167-.054l1.903-1.114a.864.864 0 0 1 .717-.098 10.16 10.16 0 0 0 2.837.403c.276 0 .543-.027.811-.05-.857-2.578.157-4.972 1.932-6.446-1.277-1.137-2.24-2.126-2.24-3.237 0-1.392 1.488-2.426 3.334-2.763.44-.079.905-.118 1.392-.118 3.048 0 5.503 2.176 5.503 4.853 0 1.925-1.399 3.678-3.537 4.653-.542.25-1.127.442-1.743.573.061.267.134.529.214.787.305.979.691 1.852 1.309 2.654 1.172 1.515 2.917 2.303 4.848 2.303 1.215 0 2.368-.317 3.318-.863a.732.732 0 0 1 .76-.028l2.014 1.178a.304.304 0 0 0 .14.049c.162 0 .293-.132.293-.295a.883.883 0 0 0-.056-.29l-.488-1.345a.699.699 0 0 1 .252-.81c1.956-1.293 3.218-3.323 3.218-5.61 0-3.422-2.872-6.207-6.416-6.207-.863 0-1.694.156-2.471.428-.276-.686-1.088-1.16-1.996-1.16-.313 0-.613.062-.893.168C11.557 2.602 10.089 2.188 8.691 2.188zm-4.95 7.003a1.34 1.34 0 0 1-1.328 1.348 1.34 1.34 0 0 1-1.327-1.348c0-.744.595-1.348 1.327-1.348.732 0 1.328.604 1.328 1.348zm4.623 0a1.34 1.34 0 0 1-1.327 1.348 1.34 1.34 0 0 1-1.328-1.348c0-.744.596-1.348 1.328-1.348a1.34 1.34 0 0 1 1.327 1.348zm8.446 4.846c-1.476 0-2.845-.49-3.921-1.297l-.347-.27-.402.117a10.97 10.97 0 0 1-2.87.379c.307-.948.481-1.957.497-3.004-.637-.826-1.38-2.004-1.38-3.485 0-2.486 2.153-4.5 4.808-4.5 2.654 0 4.807 2.014 4.807 4.5 0 2.485-2.153 4.5-4.807 4.5zm-1.91-5.848a.99.99 0 0 1-.986.996.99.99 0 0 1-.986-.996c0-.55.442-.996.986-.996a.99.99 0 0 1 .986.996zm3.838 0a.99.99 0 0 1-.986.996.99.99 0 0 1-.986-.996c0-.55.442-.996.986-.996a.99.99 0 0 1 .986.996z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    flex-shrink: 0;
}

.consultLawyer:hover {
    animation: none;
    transform: translateY(-50%) translateX(-5px) scale(1.05);
    box-shadow: 0 6px 30px rgba(212, 165, 116, 0.6);
}

.consultLawyer:active {
    transform: translateY(-50%) translateX(-5px) scale(0.98);
}

/* 咨询律师按钮悬浮动画 */
@keyframes float {

    0%,
    100% {
        transform: translateY(-50%);
    }

    50% {
        transform: translateY(calc(-50% - 10px));
    }
}

/* 响应式设计 */
@media (max-width: 968px) {
    .navMenu {
        display: none;
    }

    .aboutContent,
    .teamWrapper {
        grid-template-columns: 1fr;
    }

    .servicesGrid {
        grid-template-columns: repeat(2, 1fr);
    }

    .servicesContent {
        grid-template-columns: repeat(2, 1fr);
    }

    .serviceGuarantees {
        grid-template-columns: repeat(2, 1fr);
    }

    .videoShowcase {
        grid-template-columns: repeat(2, 1fr);
    }

    .casesGrid {
        grid-template-columns: 1fr;
    }

    .teamSliderSection {
        padding: 0 var(--spacing-md);
    }

    .teamContent {
        padding: var(--spacing-md);
    }

    .teamNavButton {
        width: 45px;
        height: 45px;
        font-size: 18px;
    }

    .teamNavPrev {
        left: -20px;
    }

    .teamNavNext {
        right: -20px;
    }

    .footerContent {
        grid-template-columns: 1fr;
    }

    .slideTitle {
        font-size: 32px;
    }

    .slideSubtitle {
        font-size: 16px;
    }

    .servicesHeader h2 {
        font-size: 32px;
    }

    .servicesHeader p {
        font-size: 15px;
    }

    .servicesFooter h3 {
        font-size: 26px;
    }

    .ctaSection h2 {
        font-size: 28px;
    }

    .ctaSection p {
        font-size: 16px;
    }

    .consultLawyer {
        right: 20px;
        padding: 14px 24px;
        font-size: 16px;
    }

    .consultLawyer::before {
        width: 18px;
        height: 18px;
    }
}

@media (max-width: 968px) {
    .processTimeline {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .servicesGrid {
        grid-template-columns: 1fr;
    }

    .servicesContent {
        grid-template-columns: 1fr;
    }

    .serviceGuarantees {
        grid-template-columns: 1fr;
    }

    .videoShowcase {
        grid-template-columns: 1fr;
    }

    .processTimeline {
        grid-template-columns: 1fr;
    }

    .cookieContent {
        flex-direction: column;
        text-align: center;
    }

    .teamContent h3 {
        font-size: 24px;
    }

    .teamSliderSection {
        padding: 0 var(--spacing-sm);
    }

    .teamSwiper {
        padding: var(--spacing-sm) 0;
    }

    .teamNavButton {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .teamNavPrev {
        left: -15px;
    }

    .teamNavNext {
        right: -15px;
    }

    .servicesHeader h2 {
        font-size: 28px;
    }

    .servicesHeader p {
        font-size: 14px;
    }

    .servicesFooter h3 {
        font-size: 22px;
    }

    .servicesFooter p {
        font-size: 14px;
    }

    .ctaSection h2 {
        font-size: 24px;
    }

    .ctaSection p {
        font-size: 14px;
    }

    .ctaButtons {
        flex-direction: column;
        align-items: stretch;
    }

    .ctaButton {
        width: 100%;
    }

    .consultLawyer {
        right: 15px;
        padding: 12px 20px;
        font-size: 15px;
        letter-spacing: 1px;
    }

    .consultLawyer::before {
        width: 18px;
        height: 18px;
    }

    .backToTop {
        width: 45px;
        height: 45px;
        bottom: 20px;
        right: 15px;
        font-size: 18px;
    }
}

/* 动画 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fadeInUp {
    animation: fadeInUp 0.6s ease-out;
}

.logoIcon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}