/* ========================================
   HERO TEXT BEAUTIFICATION (NO GRADIENT)
   大气字体 + 图标 + 无渐变
======================================== */

/* 确保 Hero 文本容器居中 - 只应用于 page-header，不影响首页 hero section */
.page-header .hero-text,
.page-header-content {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* 恢复首页 hero section 的原始布局 */
.hero .hero-text {
    text-align: left !important;
    display: block !important;
    align-items: unset !important;
}

/* 确保 Page Header 内容居中 */
.page-header-content {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* ========== 首页 Hero 标题美化 - 只应用于 page-header ========== */
.page-header .hero-title,
.page-title {
    font-size: clamp(2.2rem, 4.5vw, 3.5rem) !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.03em !important;
    margin-bottom: 2rem !important;
    color: #ffffff !important;
    text-shadow: 0 6px 30px rgba(0, 0, 0, 0.25),
                 0 3px 12px rgba(0, 0, 0, 0.15),
                 0 1px 4px rgba(0, 0, 0, 0.1) !important;
    animation: fadeInUp 0.8s ease-out !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1.25rem !important;
    flex-wrap: wrap !important;
    text-align: center !important;
}

/* 恢复首页 hero section 的原始标题样式 */
.hero .hero-title {
    display: block !important;
    text-align: left !important;
    justify-content: unset !important;
    align-items: unset !important;
    gap: unset !important;
    flex-wrap: unset !important;
}

/* 移除渐变效果，改为纯白色 - 只应用于 page-header */
.page-header .hero-title .gradient-text,
.page-title .gradient-text {
    color: #ffffff !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: #ffffff !important;
    background-clip: unset !important;
    text-shadow: 0 6px 30px rgba(0, 0, 0, 0.25),
                 0 3px 12px rgba(0, 0, 0, 0.15) !important;
    filter: none !important;
}

.page-header .hero-title .gradient-text::after,
.page-title .gradient-text::after {
    display: none !important;
}

/* Hero 标题前的图标 - 只应用于 page-header */
.page-header .hero-title::before,
.page-title::before {
    content: '\f521'; /* fa-crown */
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 900 !important;
    font-size: clamp(1.8rem, 4vw, 2.8rem) !important;
    filter: drop-shadow(0 4px 12px rgba(255, 255, 255, 0.3));
    animation: fadeInUp 0.8s ease-out 0.2s both !important;
    color: rgba(255, 255, 255, 0.95) !important;
    display: inline-block !important;
}

/* 移除首页 hero section 标题前的图标 */
.hero .hero-title::before {
    display: none !important;
}

/* Hero 描述文字美化 - 只应用于 page-header */
.page-header .hero-description,
.page-subtitle {
    font-size: clamp(1.2rem, 1.8vw, 1.5rem) !important;
    line-height: 1.9 !important;
    color: rgba(255, 255, 255, 0.98) !important;
    max-width: 70ch !important;
    margin: 0 auto 2.5rem auto !important;
    letter-spacing: 0.02em !important;
    text-shadow: 0 3px 15px rgba(0, 0, 0, 0.2),
                 0 1px 6px rgba(0, 0, 0, 0.15) !important;
    font-weight: 400 !important;
    animation: fadeInUp 1s ease-out 0.2s both !important;
    text-align: center !important;
}

/* 恢复首页 hero section 的描述文字样式 */
.hero .hero-description {
    text-align: left !important;
    margin: 0 0 2rem 0 !important;
}

/* Hero Badge 美化 - 只应用于 page-header */
.page-header .hero-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    background: rgba(255, 255, 255, 0.18) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    padding: 0.85rem 1.75rem !important;
    border-radius: 50px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: white !important;
    margin: 0 auto 2.25rem auto !important;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

/* 恢复首页 hero section 的 badge 样式 */
.hero .hero-badge {
    margin: 0 0 1rem 0 !important;
}

/* ========== 子页面 Page Hero 标题美化 ========== */
.page-title {
    font-size: clamp(2.2rem, 4.5vw, 3.5rem) !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.03em !important;
    margin: 0 auto 1.75rem auto !important;
    color: #ffffff !important;
    text-shadow: 0 6px 30px rgba(0, 0, 0, 0.25),
                 0 3px 12px rgba(0, 0, 0, 0.15),
                 0 1px 4px rgba(0, 0, 0, 0.1) !important;
    animation: fadeInUp 0.8s ease-out !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1.25rem !important;
    flex-wrap: wrap !important;
    text-align: center !important;
}

/* 移除渐变效果 */
.page-title .gradient-text {
    color: #ffffff !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: #ffffff !important;
    background-clip: unset !important;
    text-shadow: 0 6px 30px rgba(0, 0, 0, 0.25),
                 0 3px 12px rgba(0, 0, 0, 0.15) !important;
    filter: none !important;
}

/* 为不同页面添加不同图标（使用 Font Awesome） */
/* 所有 page-title 图标的统一样式 */
.page-title::before {
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 900 !important;
    font-size: clamp(1.8rem, 4vw, 2.8rem) !important;
    filter: drop-shadow(0 4px 12px rgba(255, 255, 255, 0.3)) !important;
    animation: fadeInUp 0.8s ease-out 0.2s both !important;
    color: rgba(255, 255, 255, 0.95) !important;
    display: inline-block !important;
    margin-right: 0.5rem !important;
}

/* Pricing 页面 */
.pricing-page .page-title::before {
    content: '\f155'; /* fa-dollar-sign */
}

/* About 页面 */
.about-page .page-title::before {
    content: '\f1ad'; /* fa-building */
}

/* Services 页面 */
.services-page .page-title::before {
    content: '\f0e7'; /* fa-bolt */
}

/* Contact 页面 */
.contact-page .page-title::before {
    content: '\f095'; /* fa-phone */
}

/* Case Studies 页面 */
.case-studies-page .page-title::before {
    content: '\f200'; /* fa-chart-line */
}

/* FAQ 页面 */
.faq-page .page-title::before {
    content: '\f059'; /* fa-question-circle */
}

/* Testimonials 页面 */
.testimonials-page .page-title::before {
    content: '\f005'; /* fa-star */
}

.page-subtitle {
    font-size: clamp(1.2rem, 1.8vw, 1.5rem) !important;
    line-height: 1.9 !important;
    color: rgba(255, 255, 255, 0.98) !important;
    max-width: 75ch !important;
    margin: 0 auto !important;
    letter-spacing: 0.02em !important;
    text-shadow: 0 3px 15px rgba(0, 0, 0, 0.2),
                 0 1px 6px rgba(0, 0, 0, 0.15) !important;
    font-weight: 400 !important;
    opacity: 0.98 !important;
    animation: fadeInUp 1s ease-out 0.2s both !important;
    text-align: center !important;
}

/* ========== Breadcrumb 美化 ========== */
.breadcrumb {
    font-size: 1rem !important;
    margin-bottom: 2.25rem !important;
    animation: fadeInDown 0.6s ease-out !important;
}

.breadcrumb a {
    color: rgba(255, 255, 255, 0.92) !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    font-weight: 500 !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) !important;
}

.breadcrumb a:hover {
    color: white !important;
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.6) !important;
}

.breadcrumb span {
    color: rgba(255, 255, 255, 0.65) !important;
    margin: 0 0.6rem !important;
}

/* ========== Hero Features 美化 ========== */
.hero-features {
    gap: 1.5rem !important;
    margin-bottom: 2.75rem !important;
}

.hero-features .feature {
    font-size: 1.1rem !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.98) !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    padding: 0.6rem 0 !important;
}

.hero-features .feature i {
    font-size: 1.4rem !important;
    color: #f093fb !important;
    filter: drop-shadow(0 3px 8px rgba(240, 147, 251, 0.5)) !important;
    width: 32px !important;
    text-align: center !important;
}

/* ========== Hero CTA 按钮美化 ========== */
.hero-cta-group .btn {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    padding: 1.2rem 2.5rem !important;
    letter-spacing: 0.4px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2),
                0 3px 12px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

.hero-cta-group .btn:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25),
                0 5px 16px rgba(0, 0, 0, 0.2) !important;
}

.hero-cta-group .btn-outline-white {
    background: rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(12px) !important;
    border: 2px solid rgba(255, 255, 255, 0.95) !important;
}

.hero-cta-group .btn-outline-white:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: white !important;
}

/* ========== Hero Guarantees 美化 ========== */
.hero-guarantees {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1.75rem !important;
    margin-top: 2.5rem !important;
}

.hero-guarantees span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.98) !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.hero-guarantees span i {
    color: #10b981 !important;
    filter: drop-shadow(0 3px 6px rgba(16, 185, 129, 0.4)) !important;
    font-size: 1.1rem !important;
}

/* ========== 动画效果 ========== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========== 响应式调整 ========== */
@media (max-width: 1024px) {
    .hero-title {
        font-size: clamp(2rem, 5vw, 3rem) !important;
    }
    
    .page-title {
        font-size: clamp(2rem, 5vw, 3rem) !important;
    }
    
    .hero-description {
        font-size: 1.2rem !important;
    }
    
    .page-subtitle {
        font-size: 1.2rem !important;
    }
    
    .hero-title::before,
    .page-title::before {
        font-size: clamp(1.6rem, 4.5vw, 2.5rem) !important;
    }
}

@media (max-width: 768px) {
    .hero-title {
        font-size: clamp(1.8rem, 7vw, 2.5rem) !important;
        margin-bottom: 1.5rem !important;
        gap: 1rem !important;
    }
    
    .page-title {
        font-size: clamp(1.8rem, 7vw, 2.5rem) !important;
        margin-bottom: 1.5rem !important;
        gap: 1rem !important;
    }
    
    .hero-description {
        font-size: 1.1rem !important;
        line-height: 1.8 !important;
        margin-bottom: 2rem !important;
    }
    
    .page-subtitle {
        font-size: 1.1rem !important;
        line-height: 1.8 !important;
    }
    
    .hero-badge {
        font-size: 0.9rem !important;
        padding: 0.7rem 1.4rem !important;
    }
    
    .hero-cta-group .btn {
        font-size: 1.05rem !important;
        padding: 1.1rem 2rem !important;
    }
    
    .hero-title::before,
    .page-title::before {
        font-size: clamp(1.5rem, 6vw, 2.2rem) !important;
    }
}

/* ========== Footer 调亮 ========== */
.footer {
    background: #1e293b !important; /* 与其他页面保持一致 */
    color: white !important;
}

.footer-description {
    color: #cbd5e1 !important; /* 从 #94a3b8 调亮到 #cbd5e1 */
}

.footer-column a {
    color: #cbd5e1 !important; /* 从 #94a3b8 调亮到 #cbd5e1 */
}

.footer-column a:hover {
    color: white !important;
}

.footer-bottom {
    border-top-color: #475569 !important; /* 从 #334155 调亮到 #475569 */
}

.footer-copyright p {
    color: #cbd5e1 !important; /* 调亮版权文字 */
}
