/*
Theme Name: topgus
Theme URI: https://99jimu.com
Description: Jimu Child Theme
Author: 99jimu
Author URI: https://99jimu.com
Template: jimutheme
Version: 1.0.0
*/

/* ============================================
   Lazy Loading Styles
   ============================================ */
img.lazy-img {
    filter: blur(5px);
    transition: filter 0.3s ease-out;
}

img.lazy-img.loaded {
    filter: blur(0);
}

/* 占位符样式 */
img[data-src] {
    background: #f0f0f0;
    background-image: linear-gradient(90deg, #f0f0f0 0%, #f8f8f8 50%, #f0f0f0 100%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* 懒加载背景图片 */
[data-bg] {
    background-color: #f0f0f0 !important;
    transition: background-image 0.3s ease-out;
}

[data-bg].bg-loaded {
    background-color: transparent !important;
}

/* Desktop Header */


/* ============================================
   Case Page Styles
   ============================================ */

/* Case Hero Section */
.case-hero-section {
    background: #000000;
    background-image: 
        url('/assets/images/2025/08/Customer-Cases.jpg'),
        radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 175, 73, 0.15) 0%, transparent 50%),
        linear-gradient(135deg, rgba(120, 119, 198, 0.1) 0%, rgba(255, 175, 73, 0.1) 100%);
    background-size: cover, auto, auto, auto;
    background-position: center, center, center, center;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    position: relative;
    overflow: hidden;
}

.case-hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3e%3cpath d='M100 200 L200 100 L300 200 L200 300 Z' stroke='%23ffffff10' stroke-width='1' fill='none'/%3e%3cpath d='M50 150 L150 50 L250 150 L150 250 Z' stroke='%23ffffff08' stroke-width='1' fill='none'/%3e%3cpath d='M150 250 L250 150 L350 250 L250 350 Z' stroke='%23ffffff08' stroke-width='1' fill='none'/%3e%3c/svg%3e");
    background-size: 200px 200px;
    animation: geometricFloat 20s ease-in-out infinite;
}

@keyframes geometricFloat {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(2deg); }
}

.case-hero-section .hero-content {
    position: relative;
    z-index: 2;
}

.case-hero-section .hero-title,.about-hero-section .hero-title {
    color: #CDCDCD;
    font-family: Inter;
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 20px;
}

.case-hero-section .hero-stats-title,.about-hero-section .hero-stats-title {
    text-align: center;
    font-family: Inter;
    font-size: 38px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    background: linear-gradient(90deg, #F8C786 0.01%, #DCD4FA 48%, #95D6F6 99.99%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 16px;
}

.case-hero-section .hero-subtitle,.about-hero-section .hero-subtitle .hero-text {
    color: #FFF;
    text-align: center;
    font-family: Inter;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px; /* 150% */
    margin-bottom: 40px;
}

.case-hero-section .hero-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

/* 拓谷思按钮基础样式 */
.tp-button {
    display: inline-flex;
    align-items: center;
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s ease;
    color: #ffffff;
    position: relative;
    cursor: pointer;
}

/* 为按钮文字添加右边距，避免与箭头重叠 */
.tp-button {
    padding-right: 48px;
}

/* 箭头图标 */
.tp-button::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 23px;
    height: 11px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='11' viewBox='0 0 23 11' fill='none'%3E%3Cpath d='M0 5.5H22M22 5.5L17.448 0.5M22 5.5L17.448 10.5' stroke='white'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    transition: transform 0.3s ease;
}

/* hover效果 */
.tp-button:hover {
    transform: translateY(-2px);
}

.tp-button:hover::after {
    transform: translateY(-50%) translateX(4px);
}

/* 渐变按钮样式 */
.tp-button-gradient {
    background: transparent;
    border: 2px solid transparent;
    position: relative;
}

/* 渐变边框效果 */
.tp-button-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 8px;
    padding: 2px;
    background: linear-gradient(90deg, #F8C786, #D7D3E7, #95D6F6);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* 按钮变体样式 */
.tp-button-primary {
    /* 主要按钮样式 */
}

.tp-button-secondary {
    background: #000000 !important;
    color: #ffffff !important;
}

.tp-button-secondary::before {
    display: none;
}

.tp-button-transparent {
    background: transparent !important;
    color: #000000 !important;
    border: 1px solid #000000 !important;
}

.tp-button-transparent::after {
    filter: invert(1) !important; /* 将白色反转为黑色 */
}

/* 不同尺寸的按钮 */
.tp-button.tp-button-sm {
    padding: 8px 16px 8px 16px;
    padding-right: 40px;
    font-size: 14px;
}

.tp-button.tp-button-sm::after {
    right: 12px;
    width: 18px;
    height: 9px;
}

.tp-button.tp-button-lg {
    padding: 16px 32px 16px 32px;
    padding-right: 64px;
    font-size: 18px;
}

.tp-button.tp-button-lg::after {
    right: 20px;
    width: 28px;
    height: 13px;
}

/* 不同颜色的按钮 */
.tp-button.tp-button-dark {
    color: #000000;
}

.tp-button.tp-button-dark::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='11' viewBox='0 0 23 11' fill='none'%3E%3Cpath d='M0 5.5H22M22 5.5L17.448 0.5M22 5.5L17.448 10.5' stroke='black'/%3E%3C/svg%3E");
}

/* 无箭头版本 */
.tp-button.tp-button-no-arrow::after {
    display: none;
}

/* Brand Clients Section */

.brand-clients-section .section-title {
    font-size: 36px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 12px;
}

.brand-clients-section .section-subtitle {
    font-size: 18px;
    color: #666666;
}

.brand-clients-section .brand-description {
    max-width: 900px;
    margin: 0 auto;
}

.brand-clients-section .brand-description p {
    font-size: 16px;
    line-height: 1.8;
    color: #555555;
}

.brand-showcase {
    margin-top: 40px;
    text-align: center;
}

.brand-showcase-image {
    width: 100%;
    max-width: 1200px;
    height: auto;
    aspect-ratio: 24/7;
    object-fit: cover;
    border-radius: 12px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.brand-showcase-image:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

/* Stats Section */

.stat-card {
    background: #ffffff;
    padding: 32px 24px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
}

.stat-title {
    color: #000;
    text-align: center;
    font-family: Inter;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 20px;
}

.stat-value {
    width: 100%;
    padding: 8px 0;
    border-radius: 8px;
    margin-bottom: 16px;
    text-align: center;
    line-height: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    min-height: 40px;
}

.stat-value span {
    background: linear-gradient(90deg, #F8C786 0.01%, #DCD4FA 48%, #95D6F6 99.99%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 20px;
    font-weight: 700;
    display: inline-block;
}

.stat-description {
    color: #000;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0;
}

.stats-note {
    margin-top: 40px;
}

.stats-note p {
    margin-bottom: 5px;
}

/* Case Studies Section */
.case-studies-section {
    background: #ffffff;
    padding: 80px 0;
}

.case-studies-section .section-title {
    font-size: 36px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 60px;
}

.case-study-card {
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.case-study-card:hover {
    transform: translateY(-8px);
}


.case-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.case-study-card:hover .case-image img {
    transform: scale(1.05);
}

.case-title {
    font-size: 18px;
    font-weight: 600;
    color: #000000;
}

.case-description {
    font-size: 14px;
    line-height: 1.6;
    color: #464646;
    margin-bottom: 20px;
    height:70px;

}

.case-cta {
    color: #000000;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: color 0.3s ease;
}



/* Responsive Design */
@media (max-width: 960px) {
    .case-hero-section .hero-title {
        font-size: 36px;
    }
    
    .case-hero-section .hero-stats-title {
        font-size: 28px;
    }
    
    .case-hero-section .hero-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .brand-clients-section .section-title,
    .case-studies-section .section-title {
        font-size: 28px;
    }
    
    .stat-card {
        padding: 30px 20px;
    }
}

@media (max-width: 640px) {
    .case-hero-section {
        padding: 80px 0 60px;
    }
    
    .case-hero-section .hero-title {
        font-size: 28px;
    }
    
    .case-hero-section .hero-stats-title {
        font-size: 22px;
    }
    
    .brand-clients-section,
    .case-stats-section,
    .case-studies-section {
        padding: 60px 0;
    }
    
    .brand-clients-section .brand-description {
        margin-bottom: 40px;
    }
    
    .case-study-card {
        margin-bottom: 20px;
    }
}

/* ============================================
   About Page Styles
   ============================================ */

/* About Hero Section */
.about-hero-section {
    background: #000000;
    background-image: 
        radial-gradient(circle at 30% 70%, rgba(120, 119, 198, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 70% 30%, rgba(255, 175, 73, 0.1) 0%, transparent 50%);
    position: relative;
    overflow: hidden;
}

.about-hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3e%3cpath d='M50 50 L150 50 L200 100 L150 150 L50 150 L0 100 Z' stroke='%23ffffff05' stroke-width='1' fill='none'/%3e%3cpath d='M100 100 L200 100 L250 150 L200 200 L100 200 L50 150 Z' stroke='%23ffffff03' stroke-width='1' fill='none'/%3e%3c/svg%3e");
    background-size: 150px 150px;
}

.about-hero-section .hero-content {
    position: relative;
    z-index: 2;
}

.about-hero-section .hero-company-name {
    color: #ffffff;
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 16px;
    line-height: 1.2;
}

.about-hero-section .hero-description {
    color: rgba(255, 255, 255, 0.9);
    font-size: 18px;
    margin-bottom: 60px;
    line-height: 1.6;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.hero-advantages {
    margin-top: 60px;
}

.advantage-card {
    background: rgba(255, 255, 255, 0.05);
    padding: 30px 20px;
    border-radius: 12px;
    text-align: center;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.advantage-card:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-5px);
}
.advantage-card li{
    color: #CDCDCD;
}

.advantage-title {
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
}

.advantage-divider {
    width: 30px!important;
    height: 2px!important;
}

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

.advantage-list li {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 8px;
    position: relative;
    padding-left: 20px;
}

.advantage-list li::before {
    content: '•';
    color: #FFAF49;
    position: absolute;
    left: 0;
    top: 0;
}

/* Company Introduction Section */
.company-intro-section {
    background: #ffffff;
    padding: 80px 0;
}

.company-intro-section .section-title {
    font-size: 36px;
    font-weight: 700;
    color: #000000;
    position: relative;
}

.company-content p {
    font-size: 16px;
    line-height: 1.8;
    color: #555555;
    margin-bottom: 24px;
}

.company-quote {
    font-size: 18px;
    color: #333333;
}

.office-image-container {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}

.office-image {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

.office-image-container:hover .office-image {
    transform: scale(1.05);
}

/* Brand Values Section */

.brand-values-section .section-title {
    font-size: 36px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 16px;
}

.brand-values-section .section-subtitle {
    font-size: 18px;
    color: #666666;
}

.value-card {
    background: #333333;
    color: #ffffff;
    padding: 30px 20px;
    border-radius: 12px;
    text-align: center;
    transition: all 0.3s ease;
}

.value-card:hover {
    background: #444444;
    transform: translateY(-8px);
}

.value-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #ffffff;
}

.value-subtitle {
    font-size: 16px;
    color: #FFAF49;
    margin-bottom: 16px;
    font-weight: 500;
}

.value-description {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
}

/* Company History Section */

.company-history-section .section-title {
    color: #000000;
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 60px;
    position: relative;
}

.history-timeline {
    position: relative;
    overflow: hidden;
}

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

.timeline-line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(255, 255, 255, 0.2);
    z-index: 1;
}

.timeline-items {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 2;
    padding: 60px 0;
}

.timeline-item {
    position: relative;
    text-align: center;
    flex: 1;
    max-width: 120px;
}

.timeline-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    margin: 0 auto 20px;
    position: relative;
    z-index: 3;
    transition: all 0.3s ease;
}

.timeline-item.active .timeline-dot {
    background: #FFAF49;
    width: 20px;
    height: 20px;
}

.timeline-item::after {
    content: attr(data-date);
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
}

.timeline-content {
    position: absolute;
    top: -280px;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    background: rgba(255, 255, 255, 0.05);
    padding: 24px;
    border-radius: 12px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.timeline-image {
    width: 100%;
    height: 120px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 16px;
}

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

.timeline-title {
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 12px;
}

.timeline-description {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
}

.timeline-navigation {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    z-index: 4;
}

.timeline-nav-prev,
.timeline-nav-next {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #ffffff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    pointer-events: auto;
    transition: all 0.3s ease;
}

.timeline-nav-prev:hover,
.timeline-nav-next:hover {
    background: #FFAF49;
    color: #000000;
}

/* Team Members Section */

.team-members-section .section-title {
    font-size: 36px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 60px;
    position: relative;
}

.team-members-section .section-title::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: #FFAF49;
}

.member-card {
    background: #ffffff;
    padding: 30px 20px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    height: 100%;
}

.member-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.member-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 20px;
    border: 3px solid #FFAF49;
}

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

.member-name {
    font-size: 20px;
    font-weight: 600;
    color: #000000;
    margin-bottom: 8px;
}

.member-position {
    font-size: 16px;
    font-weight: 500;
    color: #FFAF49;
    margin-bottom: 6px;
}

.member-sub-position {
    font-size: 14px;
    color: #666666;
    margin-bottom: 16px;
}

.member-bio {
    font-size: 14px;
    line-height: 1.6;
    color: #555555;
    margin-bottom: 20px;
}

.member-quote {
    font-size: 13px;
    font-style: italic;
    color: #444444;
    border-left: 3px solid #FFAF49;
    padding-left: 12px;
    margin: 0;
    text-align: left;
}

.member-quote footer {
    font-size: 12px;
    color: #888888;
    margin-top: 8px;
}

/* Office Environment Section */
.office-environment-section {
    background: #ffffff;
    padding: 80px 0;
}

.office-description {
    font-size: 16px;
    line-height: 1.8;
    color: #555555;
    max-width: 900px;
    margin: 0 auto;
}

.office-gallery {
    margin-top: 60px;
}

.office-image-large,
.office-image-medium,
.office-image-small {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
}

.office-image-large img,
.office-image-medium img,
.office-image-small img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.office-image-large {
    height: 300px;
}

.office-image-medium {
    height: 250px;
}

.office-image-small {
    height: 140px;
}

.office-quote {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    color: #ffffff;
    padding: 40px 20px 20px;
    font-size: 14px;
    line-height: 1.5;
}

.office-image-large:hover img,
.office-image-medium:hover img,
.office-image-small:hover img {
    transform: scale(1.05);
}

/* Responsive Design */
@media (max-width: 960px) {
    .about-hero-section .hero-company-name {
        font-size: 32px;
    }
    
    .about-hero-section .hero-title {
        font-size: 24px;
    }
    
    .hero-advantages {
        margin-top: 40px;
    }
    
    .advantage-card {
        padding: 24px 16px;
    }
    
    .company-intro-section .section-title,
    .brand-values-section .section-title,
    .company-history-section .section-title,
    .team-members-section .section-title {
        font-size: 28px;
    }
    
    .timeline-content {
        width: 280px;
        top: -260px;
    }
    
    .member-card {
        padding: 24px 16px;
    }
}

@media (max-width: 640px) {
    
    .about-hero-section .hero-company-name {
        font-size: 28px;
    }
    
    .about-hero-section .hero-title {
        font-size: 20px;
    }
    
    .company-intro-section,
    .brand-values-section,
    .company-history-section,
    .team-members-section,
    .office-environment-section {
        padding: 60px 0;
    }
    
    .timeline-items {
        flex-wrap: wrap;
        gap: 40px;
    }
    
    .timeline-item {
        max-width: 80px;
    }
    
    .timeline-content {
        width: 250px;
        top: -240px;
    }
    
    .office-image-large {
        height: 200px;
    }
    
    .office-image-medium {
        height: 180px;
    }
    
    .office-image-small {
        height: 120px;
    }
}

/* ============================================
   Blog Pages Styles
   ============================================ */

/* Blog Hero Section */
.blog-hero-section {
    background: #000000;
    padding: 80px 0 60px;
    text-align: center;
}

.blog-hero-section .hero-breadcrumb {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    margin-bottom: 12px;
}

.blog-hero-section .hero-title {
    color: #ffffff;
    font-size: 36px;
    font-weight: 700;
    margin: 0;
}

/* Blog Categories Section */
.blog-categories-section {
    background: #f8f9fa;
    padding: 40px 0;
}

.categories-tabs {
    gap: 0;
    border-bottom: 2px solid #e9ecef;
    justify-content: center;
}

.category-tab {
    background: transparent;
    border: none;
    padding: 16px 32px;
    font-size: 16px;
    font-weight: 500;
    color: #666666;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
    border-bottom: 2px solid transparent;
}

.category-tab:hover {
    color: #FFAF49;
}

.category-tab.active {
    color: #FFAF49;
    border-bottom-color: #FFAF49;
}

/* Blog Posts Section */

.blog-posts-container {
    max-width: 900px;
    margin: 0 auto;
}

.blog-post-item {
    background: #ffffff;
    border-bottom: 1px solid #e9ecef;
    padding: 40px 0;
    transition: all 0.3s ease;
}

.blog-post-item:first-child {
    padding-top: 0;
}

.blog-post-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.blog-post-item:hover {
    background: #fafbfc;
}

.post-image {
    border-radius: 8px;
    overflow: hidden;
}

.post-thumbnail {
    width: 100%;
    height: 180px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.blog-post-item:hover .post-thumbnail {
    transform: scale(1.05);
}

.post-content {
    padding-left: 40px;
}

.post-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 16px;
    line-height: 1.4;
}

.post-title a {
    color: #000000;
    text-decoration: none;
    transition: color 0.3s ease;
}

.post-title a:hover {
    color: #FFAF49;
}

.post-excerpt {
    color: #666666;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.post-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 13px;
    color: #888888;
}

.post-date,
.post-category {
    position: relative;
}

.post-category::before {
    content: '|';
    margin-right: 20px;
    color: #ddd;
}

.read-more {
    color: #FFAF49;
    text-decoration: none;
    font-weight: 500;
    margin-left: auto;
    transition: color 0.3s ease;
}

.read-more:hover {
    color: #E5A142;
}

/* Placeholder styles */
.placeholder-post {
    opacity: 0.8;
}

.placeholder-link {
    /* 移除限制，让链接可以正常点击 */
    /* pointer-events: none; */
    /* cursor: default; */
}

/* Blog Pagination */
.blog-pagination {
    margin-top: 60px;
}

.blog-pagination .page-numbers {
    display: inline-flex;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.blog-pagination .page-numbers li {
    display: inline-block;
}

.blog-pagination .page-numbers a,
.blog-pagination .page-numbers span {
    display: block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.blog-pagination .page-numbers a {
    background: #f8f9fa;
    color: #666666;
}

.blog-pagination .page-numbers a:hover {
    background: #FFAF49;
    color: #ffffff;
}

.blog-pagination .page-numbers .current {
    background: #FFAF49;
    color: #ffffff;
}

/* ============================================
   Single Post Styles
   ============================================ */

/* Single Post Article */
.single-post-article {
    padding: 40px 0 0;
    background: #ffffff;
}

/* Post Header */
.post-header {
    margin-bottom: 30px;
}

.post-header .post-title {
    font-size: 32px;
    font-weight: 700;
    color: #000000;
    line-height: 1.3;
    margin-bottom: 20px;
}

.post-header .post-meta {
    display: flex;
    gap: 20px;
    font-size: 14px;
    color: #666666;
    padding-bottom: 20px;
    border-bottom: 1px solid #e9ecef;
}

.post-header .post-meta span {
    position: relative;
}

.post-header .post-meta span:not(:first-child)::before {
    content: '|';
    position: absolute;
    left: -12px;
    color: #ddd;
}

/* Post Featured Image */
.post-featured-image {
    border-radius: 12px;
    overflow: hidden;
}

.featured-image {
    width: 100%;
    height: auto;
    display: block;
}

/* Post Content */
.post-content {
    font-size: 16px;
    line-height: 1.8;
    color: #333333;
}

.post-content p {
    margin-bottom: 24px;
}

.post-content h2,
.post-content h3,
.post-content h4 {
    margin: 40px 0 20px 0;
    color: #000000;
}

.post-content h2 {
    font-size: 24px;
}

.post-content h3 {
    font-size: 20px;
}

.post-content h4 {
    font-size: 18px;
}

.post-content ul,
.post-content ol {
    margin-bottom: 24px;
    padding-left: 20px;
}

.post-content li {
    margin-bottom: 8px;
}

.content-image {
    text-align: center;
}

.content-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Post Navigation */
.post-navigation {
    border-top: 1px solid #e9ecef;
    padding-top: 40px;
}

.nav-previous,
.nav-next {
    padding: 20px;
    border-radius: 8px;
    transition: background 0.3s ease;
}

.nav-previous:hover,
.nav-next:hover {
    background: #f8f9fa;
}

.nav-link {
    display: block;
    text-decoration: none;
    color: #333333;
}

.nav-link.disabled {
    color: #ccc;
    cursor: not-allowed;
}

.nav-direction {
    font-size: 14px;
    color: #666666;
    display: block;
    margin-bottom: 8px;
}

.nav-title {
    font-size: 16px;
    font-weight: 500;
    display: block;
    line-height: 1.4;
}

.nav-next .nav-link {
    text-align: right;
}

/* Sidebar Styles */
.post-sidebar {
    padding-left: 40px;
}

.sidebar-widget {
    background: #f8f9fa;
    padding: 24px;
    border-radius: 12px;
    margin-bottom: 30px;
}

.widget-title {
    font-size: 18px;
    font-weight: 600;
    color: #000000;
    margin-bottom: 20px;
    position: relative;
}

.widget-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 30px;
    height: 2px;
    background: #FFAF49;
}

/* Share Buttons */
.share-buttons {
    display: flex;
    gap: 12px;
}

.share-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.share-btn.facebook {
    color: rgba(0, 0, 0, 0.15);
}

.share-btn.twitter {
    color: rgba(0, 0, 0, 0.15);
}

.share-btn.linkedin {
    color: rgba(0, 0, 0, 0.15);
}

.share-btn.wechat {
    color: rgba(0, 0, 0, 0.15);
}

.share-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Popular Posts */
.popular-post-item {
    padding: 16px 0;
    border-bottom: 1px solid #e9ecef;
}

.popular-post-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.popular-post-item:first-child {
    padding-top: 0;
}

.popular-post-image {
    width: 80px;
    height: 50px;
    border-radius: 6px;
    overflow: hidden;
}

.popular-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.popular-post-title {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 6px;
}

.popular-post-title a {
    color: #333333;
    text-decoration: none;
    transition: color 0.3s ease;
}

.popular-post-title a:hover {
    color: #FFAF49;
}

.popular-post-date {
    font-size: 12px;
    color: #888888;
}

/* Related Posts Section */
.related-posts-section {
    background: #f8f9fa;
    padding: 80px 0;
}

.related-posts-section .section-title {
    font-size: 28px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 50px;
    position: relative;
}

.related-posts-section .section-title::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: #FFAF49;
}

.related-post-card {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.related-post-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.related-post-image {
    height: 160px;
    overflow: hidden;
}

.related-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.related-post-card:hover .related-thumbnail {
    transform: scale(1.1);
}

.related-post-content {
    padding: 20px;
}

.related-post-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 12px;
}

.related-post-title a {
    color: #000000;
    text-decoration: none;
    transition: color 0.3s ease;
}

.related-post-title a:hover {
    color: #FFAF49;
}

.related-post-excerpt {
    font-size: 14px;
    line-height: 1.6;
    color: #666666;
}


/* Responsive Design */
@media (max-width: 960px) {
    .blog-hero-section .hero-title {
        font-size: 28px;
    }
    
    .category-tab {
        padding: 12px 20px;
        font-size: 14px;
    }
    
    .post-content {
        padding-left: 0;
        margin-top: 20px;
    }
    
    .post-header .post-title {
        font-size: 24px;
    }
    
    .post-sidebar {
        padding-left: 0;
        margin-top: 40px;
    }
    
    .related-posts-section .section-title {
        font-size: 24px;
    }
}

@media (max-width: 640px) {
    .blog-hero-section {
        padding: 60px 0 40px;
    }
    
    .blog-hero-section .hero-title {
        font-size: 24px;
    }
    
    .blog-categories-section {
        padding: 30px 0;
    }
    
    .categories-tabs {
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
    }
    
    .category-tab {
        padding: 10px 16px;
        font-size: 13px;
    }
    
    .blog-post-item {
        padding: 30px 0;
    }
    
    .post-thumbnail {
        height: 150px;
    }
    
    .post-header .post-title {
        font-size: 20px;
    }
    
    .post-header .post-meta {
        flex-direction: column;
        gap: 8px;
    }
    
    .post-header .post-meta span::before {
        display: none;
    }
    
    .post-navigation .uk-grid {
        margin: 0;
    }
    
    .nav-previous,
    .nav-next {
        margin-bottom: 20px;
    }
    
    .share-buttons {
        justify-content: center;
    }
    
    .popular-post-image {
        width: 60px;
        height: 40px;
    }
    
    .related-posts-section {
        padding: 60px 0;
    }
    
    .related-post-image {
        height: 140px;
    }
    
}
.topgus-header-desktop {
    background: #ffffff;
    height: 80px;
    width: 100%;
}

/* ============================================
   New Timeline Styles (Horizontal Timeline)
   ============================================ */

/* Timeline Dates Container */
.history-timeline-section {
    position: relative;
    opacity: 0;
    transition: opacity 0.3s;
}

.history-timeline-section.timeline--loaded {
    opacity: 1;
}

.timeline-dates-container {
    position: relative;
    height: 100px;
    margin-bottom: 40px;
}

.timeline-dates {
    position: relative;
    height: 100%;
    overflow: hidden;
}

/* Timeline blur effect */
.timeline-dates::before,
.timeline-dates::after {
    content: '';
    position: absolute;
    z-index: 2;
    top: 0;
    height: 100%;
    width: 50px;
}

.timeline-dates::before {
    left: 0;
    background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0));
}

.timeline-dates::after {
    right: 0;
    background: linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0));
}

/* Timeline horizontal line */
.timeline-dates .timeline-line {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 49px;
    height: 2px;
    background-color: #f0f0f0;
    transition: transform 0.4s;
    width: 100%;
}

.timeline-filling-line {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: #FFAF49;
    transform: scaleX(0.2);
    transform-origin: left center;
    transition: transform 0.3s;
}

.timeline-date-list {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    display: flex;
    gap: 120px;
    padding-left: 80px;
    transition: transform 0.4s;
}

.timeline-date-list li {
    position: relative;
}

/* Timeline date points */
.timeline-dates .timeline-date {
    position: relative;
    display: block;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    padding-bottom: 20px;
    color: #333333;
    text-decoration: none;
    user-select: none;
    transition: all 0.3s ease;
}

.timeline-dates .timeline-date:hover {
    color: #FFAF49;
}

.timeline-dates .timeline-date::after,
.timeline-dates .timeline-date::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -8px;
    height: 12px;
    width: 12px;
    border-radius: 50%;
    border: 2px solid #FFAF49;
    background-color: #ffffff;
    transition: all 0.3s ease;
}

.timeline-dates .timeline-date::before {
    bottom: -3px;
    height: 6px;
    width: 6px;
    border: none;
    background-color: transparent;
    z-index: 2;
}

.timeline-date--selected {
    pointer-events: none;
    color: #FFAF49;
}

.timeline-date--selected::after {
    background-color: #ffffff;
    border-color: #FFAF49;
}

.timeline-date--selected::before {
    background-color: #FFAF49;
}

/* Timeline Navigation */
.timeline-navigation {
    display: flex;
    gap: 10px;
    align-items: center;
}

.timeline-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid #f0f0f0;
    background: #ffffff;
    color: #666666;
    text-decoration: none;
    font-size: 18px;
    transition: all 0.3s ease;
}

.timeline-nav:hover {
    border-color: #FFAF49;
    color: #FFAF49;
}

.timeline-nav--inactive {
    cursor: not-allowed;
    opacity: 0.5;
}

.timeline-nav--inactive:hover {
    border-color: #f0f0f0;
    color: #666666;
}

/* Timeline Events Container */
.timeline-events {
    position: relative;
    overflow: hidden;
    min-height: 400px;
}

.timeline-event {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    opacity: 0;
    transform: translateX(-100%);
    transition: all 0.4s ease-in-out;
    padding: 20px 0;
}

.timeline-event--selected {
    position: relative;
    opacity: 1;
    transform: translateX(0);
}

/* Timeline Content */
.timeline-events .timeline-content {
    padding-right: 40px;
}

.timeline-events .timeline-title {
    font-size: 28px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 16px;
    line-height: 1.3;
}

.timeline-events .timeline-date {
    display: block;
    font-style: italic;
    color: #FFAF49;
    margin-bottom: 20px;
    font-size: 16px;
}

.timeline-events .timeline-description {
    font-size: 16px;
    line-height: 1.8;
    color: #555555;
}

.timeline-events .timeline-image {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

.timeline-events .timeline-image img {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

.timeline-event:hover .timeline-image img {
    transform: scale(1.02);
}

/* Timeline Animations */
.timeline-event--enter-right {
    animation: enterRight 0.4s ease-in-out;
}

.timeline-event--enter-left {
    animation: enterLeft 0.4s ease-in-out;
}

.timeline-event--leave-right {
    animation: leaveRight 0.4s ease-in-out;
}

.timeline-event--leave-left {
    animation: leaveLeft 0.4s ease-in-out;
}

@keyframes enterRight {
    0% {
        opacity: 0;
        transform: translateX(100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes enterLeft {
    0% {
        opacity: 0;
        transform: translateX(-100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes leaveRight {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(100%);
    }
}

@keyframes leaveLeft {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-100%);
    }
}

/* Responsive Timeline */
@media (max-width: 960px) {
    .timeline-date-list {
        gap: 80px;
        padding-left: 40px;
    }
    
    .timeline-events .timeline-title {
        font-size: 24px;
    }
    
    .timeline-events .timeline-content {
        padding-right: 0;
        margin-bottom: 30px;
    }
}

@media (max-width: 640px) {
    .timeline-dates-container {
        height: 80px;
    }
    
    .timeline-date-list {
        gap: 60px;
        padding-left: 20px;
    }
    
    .timeline-dates .timeline-date {
        font-size: 12px;
    }
    
    .timeline-events .timeline-title {
        font-size: 20px;
    }
    
    .timeline-events .timeline-description {
        font-size: 14px;
    }
}

.header-content {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 20px;
}

.logo-section {
    margin-right: 60px;
}

.topgus-logo-img {
    height: 23px;
    width: 140px;
}

.nav-section {
    margin-right: auto;
}

.topgus-nav-desktop li a {
    color: #000000;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    white-space: nowrap;
}

.topgus-nav-desktop .uk-active a {
    color: #FFAF49!important;
}

.topgus-nav-desktop li a:hover {
    color: #FFAF49;
}

.topgus-phone-desktop {
    color: #000000;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.topgus-cta-desktop {
    background: linear-gradient(90deg, #F8C786 0%, #D7D3E7 48%, #95D6F6 100%);
    color: #000000;
    padding: 12px 24px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 16px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
}

.topgus-cta-desktop:hover {
    color: #000000;
    transform: translateY(-1px);
    transition: all 0.3s ease;
}

.right-section {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Mobile Header */
.topgus-header-mobile {
    background: #ffffff;
    height: 80px;
}

/* 移动端汉堡菜单样式 */
.uk-navbar-toggle {
    color: #333;
}

/* ====================================
   Hero 区域样式
   ==================================== */

.hero-section {
    background: #000000;
    min-height: 800px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(45deg, rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(-45deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0.3;
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero-title {
    ，
    rj height: 然后;
    color: #ffffff;
    font-size: 36px;
    font-weight: 400;
    margin-bottom: 20px;
}

.hero-subtitle {
    background: linear-gradient(89.99deg, #F8C786 0.01%, #D7D3E7 48%, #95D6F6 99.99%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 40px;
}

.hero-text {
    background: linear-gradient(89.99deg, #ef8a05 0.01%, #b3aad7 48%, #0094eb 99.99%)
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 40px;
}

.hero-cta {
    background: #000000;
    color: #ffffff;
    padding: 12px 24px;
    border-radius: 10px;
    border: 1px solid #F8C786;
    text-decoration: none;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.hero-cta:hover {
    color: #ffffff;
    transform: translateY(-2px);
}

.hero-image {
    position: relative;
    padding: 40px;
}

.hero-dashboard {
    background: #F9F9F9;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    max-width: 600px;
    position: relative;
}

.dashboard-header {
    background: #000000;
    height: 40px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    gap: 8px;
}

.dashboard-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.dot-red { background: #EF5746; }
.dot-yellow { background: #FBC632; }
.dot-green { background: #22C843; }

.dashboard-body {
    padding: 20px;
    min-height: 300px;
    background: #ffffff;
}

/* ====================================
   统计数据区域样式
   ==================================== */

.stats-container {
    position: relative;
    z-index: 10;
    margin-top: -100px;
    margin-bottom: -100px;
    padding: 0 0 150px 0;
}

.stats-grid {
    background: linear-gradient(90deg, rgba(248,199,134,0.9) 0%, rgba(215,211,231,0.9) 48%, rgba(149,214,246,0.9) 100%);
    border-radius: 20px;
    margin: 0 auto;
    max-width: 1200px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    backdrop-filter: blur(10px);
}

.stat-item {
    text-align: center;
    padding: 20px;
}


.stat-number {
    font-size: 26px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 5px;
}

.stat-label {
    font-size: 18px;
    font-weight: 500;
    color: #000000;
}

/* ====================================
   品牌区域样式
   ==================================== */

.brand-section{
    background: linear-gradient(135deg, #F7F0FF 0%, #F6FEFF 51%, #EAF9FF 100%), #F9F9F9
}

.brand-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.brand-item {
    height: 46px;
    border: 1px solid #636363;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
}

/* ====================================
   产品卡片样式
   ==================================== */

.product-card {
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    overflow: hidden;
    position: relative;
    padding: 30px 20px 20px;
}

.product-card li {
    font-size:14px;    
}

.product-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 20px;
}

.product-features {
    font-size: 15px;
    font-weight: 600;
    line-height: 30px;
}

.product-visual{
    z-index: 2;
    position: relative;
}

.product-visual img {
    object-fit: cover;
    aspect-ratio: 2.3 /1;
}

.product-circle {
    position: absolute;
    width: 354px;
    height: 354px;
    border-radius: 50%;
    right: -180px;
    bottom: -180px;
}
/* SEO会议移动端卡片样式 */
.seo-conference-mobile-slider .seo-conference-card {
    border-radius: 12px;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    margin: 0 15px;
    overflow: hidden;
}

.seo-conference-mobile-slider .uk-slider-items {
    padding: 10px 0;
}

.seo-conference-mobile-slider .uk-card-body {
    background: white;
    padding: 20px !important;
}

@media only screen and (max-width: 600px) {
    .product-circle{
        position: absolute;
        width:300px;
        height: 300px;
        border-radius: 50%;
        right:-150px;
        bottom:-150px;
    }
    .product-card li{
        font-size:12px;
        padding-left:20px;
    }
    .product-card {
        width: 320px !important;
        max-width: calc(100vw - 30px);
        margin: 0 auto 20px;
        min-height: auto;
    }
    .products-mobile-slider .uk-slider-items {
        display: flex;
        align-items: stretch;
    }
    .products-mobile-slider .uk-slider-items > li {
        display: flex;
        justify-content: center;
        width: 100%;
    }
    .products-mobile-slider .product-card {
        height: auto;
        display: flex;
        flex-direction: column;
    }
    .products-mobile-slider .product-header {
        flex: 1;
    }
    .products-mobile-slider .product-visual {
        margin-top: auto;
    }
}

.circle-purple { background: #CFC9F3; }
.circle-orange { background: #FFD8A4; }
.circle-blue { background: #C1DAF7; }
.circle-green { background: #B6ECCC; }
 
.product-btn {
    position: absolute;
    bottom: 20px;
    left: 20px;
    padding: 8px 16px;
    border-radius: 17px;
    border: 1px solid #000;
    background: transparent;
    font-size: 14px;
    text-decoration: none;
    color: #000;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ====================================
   特色功能区域样式
   ==================================== */

.features-section {
    background: #000000;
    position: relative;
}

.features-content {
    color: #ffffff;
    max-width: 600px;
}

.features-title {
    color: #F8C786;
    font-size: 36px;
    font-weight: 700;
}

.features-subtitle {
    color: #ffffff;
    font-size: 30px;
    font-weight: 400;
    margin-bottom: 40px;
}

.features-stats {
    display: flex;
    gap: 40px;
    margin-bottom: 40px;
}

.feature-stat {
    text-align: left;
}



.stat-blue { color: #95D6F6; }
.stat-orange { color: #FFD399; }

.stat-desc {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

/* ====================================
   FAQ 区域样式
   ==================================== */

.faq-section {
    padding: 100px 0;
    background: #ffffff;
}

.faq-section .uk-tile{
    padding:18px;
    border-radius: 10px;
}

.faq-section .uk-accordion-title{
    font-size: 18px;
    font-weight: 700;
}

/* ====================================
   客户评价区域样式
   ==================================== */

.reviews-section {
    padding: 100px 0;
    background: #ffffff;
}

.review-text {
    font-size: 15px;
    line-height: 30px;
    color: #000000;
    flex-grow: 1;
    margin-bottom: 20px;
}

.review-author {
    font-size: 14px;
    font-weight: 500;
    color: #B5B5B5;
    line-height: 30px;
}

/* ====================================
   质量保证区域样式
   ==================================== */

.quality-section {
    background: #000000;
    padding: 100px 0;
    color: #ffffff;
}

.quality-subtitle {
    color: #ffffff;
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 60px;
}

.quality-list .icon-wrapper {
    width: 38px;
    height: 38px;
    border: 2px solid #303030;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-right: 10px;
}

/* ====================================
   联系表单区域样式
   ==================================== */

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.contact-form {
    background: #ffffff;
    border-radius: 10px;
    padding: 40px;
}

.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    color: #000000;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
}

.form-input {
    width: 100%;
    height: 40px;
    border: 1px solid #C5C5C5;
    border-radius: 5px;
    padding: 0 15px;
    font-size: 14px;
    color: #333 !important;
    background: white;
}

.form-input::placeholder {
    color: #999;
}

.form-input:focus {
    outline: none;
    border-color: #999;
    color: #333 !important;
}

/* 确保选择框的文字颜色 */
.form-input option {
    color: #333;
    background: white;
}

.form-input select {
    color: #333 !important;
}

.form-submit {
    width: 100%;
    height: 40px;
    background: linear-gradient(90deg, #F8C786 0%, #D7D3E7 48%, #95D6F6 100%);
    border: none;
    border-radius: 10px;
    color: #000000;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

/* ====================================
   页脚样式
   ==================================== */

.footer-section {
    background: #F6F6F6;
    padding: 80px 0 30px;
}

.footer-content {
    display: grid;
    grid-template-columns: 240px repeat(5, minmax(120px, 1fr)) 240px;
    gap: 30px;
    margin-bottom: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-column h3 {
    font-size: 16px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 20px;
    white-space: nowrap;
}

.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-column ul li {
    margin-bottom: 0;
    line-height: 32px;
}

.footer-column ul li a {
    color: #7A7A7A;
    font-size: 14px;
    text-decoration: none;
    display: inline-block;
    transition: color 0.3s;
}

.footer-column ul li a:hover {
    color: #333;
    text-decoration: underline;
}

/* 第一列 - Logo和描述 */
.footer-intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-intro p {
    line-height: 1.8 !important;
}

/* 最后一列 - 联系我们 */
.footer-column:last-child ul li {
    color: #7A7A7A;
    font-size: 14px;
}

.footer-column:last-child ul li:last-child {
    line-height: 1.6;
    margin-top: 5px;
}

.footer-bottom {
    background: #000000;
    padding: 20px 0;
    text-align: center;
}

.footer-bottom p {
    color: #ffffff;
    font-size: 14px;
    line-height: 24px;
}

/* ====================================
   CTA 按钮样式
   ==================================== */

.cta-btn {
    background: #000000;
    color: #ffffff;
    padding: 12px 24px;
    border-radius: 10px;
    border: 1px solid #F8C786;
    text-decoration: none;
    font-size: 16px;
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.cta-btn:hover {
    color: #ffffff;
    transform: translateY(-1px);
}

/* ====================================
   工具类样式
   ==================================== */

.topgus-divider{
    width:80px;
    height:6px;
    margin:auto;
    background: linear-gradient(90deg, #F8C786 0%, #D7D3E7 48%, #95D6F6 100%)
}

.topgus-icon{
    border: 1px solid;
    border-radius: 50%;
}

.topgus-icon svg{
    color:#A3FFB5;
}

.gradient-title .uk-text-background{
    background-image: linear-gradient(90deg, #F8C786 0.01%, #DCD4FA 48%, #95D6F6 99.99%);
}

/* 拓谷思渐变色文字样式 */
.topgus-text {
    background: linear-gradient(90deg, #F8C786 0%, #D7D3E7 48%, #95D6F6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    font-weight: bold;
}
/* ====================================
   SEO 解决方案区域样式
   ==================================== */

.seo-solution-section .uk-nav-seo {
    padding: 0;
}

.seo-solution-section .uk-nav-seo > li {
    margin: 0 0 20px 0;
}

.seo-solution-section .uk-nav-seo > li:last-child {
    margin-bottom: 0;
}

.seo-solution-section .uk-nav-seo > li > a {
    padding: 24px 30px;
    color: #60697b;
    font-weight: 600;
    text-decoration: none;
    display: block;
    transition: all 0.3s ease;
    background: white;
    border: none;
    border-radius: 9px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.10);
}

.seo-solution-section .uk-nav-seo > li > a:hover {
    background: white;
    color: #3f78e0;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.10);
}

.seo-solution-section .uk-nav-seo > li.uk-active > a {
    background: white;
    color: #000;
    border: 2px #F8C786 solid;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.10);
}

/* 大企业样式 */
.seo-solution-section .uk-nav-seo > li:nth-child(2).uk-active > a {
    border: 2px #45C4A0 solid;
}

/* 全球品牌样式 */
.seo-solution-section .uk-nav-seo > li:nth-child(3).uk-active > a {
    border: 2px #8B5CF6 solid;
}

.seo-solution-section .nav-title {
    font-size: 24px;
    font-weight: 700;
    color: #000;
    margin-bottom: 6px;
    line-height: 1.2;
}

.seo-solution-section .nav-subtitle {
    font-size: 16px;
    font-weight: 700;
    color: #2E9AD6;
    line-height: 1.4;
    margin-bottom: 12px;
}

.seo-solution-section .nav-features {
    font-size: 14px;
    line-height: 1.6;
    color: #60697b;
}

.seo-solution-section .feature-item {
    margin-bottom: 8px;
}

.seo-solution-section .feature-title {
    font-weight: 700;
    color: #000;
}

.seo-solution-section .feature-desc {
    font-weight: 400;
    color: #000;
}

/* 内容区域样式 */
.seo-solution-section .uk-switcher-content {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    min-height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 确保switcher正常工作 */
.seo-solution-section .uk-switcher > * {
    display: none;
}

.seo-solution-section .uk-switcher > .uk-active {
    display: block;
}

.seo-solution-section .content-image {
    width: 600px;
    height: auto;
    border-radius: 12px;
    box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.15);
}

/* 手机端卡片滑动样式 */
.seo-solution-section .mobile-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.10);
    overflow: hidden;
    margin: 0 10px;
}

.seo-solution-section .mobile-card-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.seo-solution-section .mobile-card-content {
    padding: 20px;
}

.seo-solution-section .mobile-card-title {
    font-size: 20px;
    font-weight: 700;
    color: #000;
    margin-bottom: 8px;
}

.seo-solution-section .mobile-card-subtitle {
    font-size: 14px;
    font-weight: 700;
    color: #2E9AD6;
    margin-bottom: 12px;
}

.seo-solution-section .mobile-card-features {
    font-size: 13px;
    line-height: 1.5;
    color: #60697b;
}

.seo-solution-section .mobile-feature-item {
    margin-bottom: 8px;
}

.seo-solution-section .mobile-feature-title {
    font-weight: 700;
    color: #000;
}

.seo-solution-section .mobile-feature-desc {
    font-weight: 400;
    color: #000;
}

/* ====================================
   响应式卡片圆角样式
   ==================================== */

.card-responsive-radius {
    border-radius: 0;
    overflow: hidden;
}

/* 移动端：图片在上方，文字在下方 */
.card-responsive-radius .uk-card-media-right {
    border-radius: 12px 12px 0 0;
}

.card-responsive-radius .uk-card-body {
    border-radius: 0 0 12px 12px;
}

/* 平板及以上 (640px+)：图片在右侧，文字在左侧 */
@media (min-width: 640px) {
    .card-responsive-radius .uk-card-media-right {
        border-radius: 0 12px 12px 0;
    }
    
    .card-responsive-radius .uk-card-body {
        border-radius: 12px 0 0 12px;
    }
}

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

.seo-list li {
    display: flex;
    align-items: center;
    padding: 1rem 0;
    font-size: 1.125rem;
    font-weight: 500;
    color: #2c3e50;
}

.seo-list li:last-child {
    border-bottom: none;
}

.seo-list .icon-wrapper {
    width: 50px;
    height: 50px;
    background: #f8f9fa;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    flex-shrink: 0;
}

.seo-list .icon-wrapper svg {
    width: 24px;
    height: 24px;
    color: #6c757d;
}

/* ====================================
   Timeline Slideshow Styles
   ==================================== */

/* Override UIKit slideshow default min-height */
#tp-slideshow {
    min-height: 150px;
}

#tp-slideshow .uk-slideshow-items > li {
    min-height: 150px;
}

.history-timeline-uikit .timeline-nav-container {
    max-width: 90%;
    margin: 0 auto;
}

.timeline-line-wrapper {
    padding: 30px 0;
}

.timeline-horizontal-line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #F8C786 0.01%, #DCD4FA 48%, #95D6F6 99.99%);
    transform: translateY(-50%);
}

.timeline-points {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 2;
}

.timeline-point-wrapper {
    position: relative;
    cursor: pointer;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.timeline-point {
    width: 16px;
    height: 16px;
    background: #aaaaaa;
    border: 3px solid #aaaaaa;
    border-radius: 50%;
    transition: all 0.3s ease;
    position: relative;
    z-index: 3;
}

.timeline-point-wrapper:hover .timeline-point,
.timeline-point-wrapper.uk-active .timeline-point {
    background: #F8C786;
    border-color: #DCD4FA;
    transform: scale(1.3);
}

.timeline-description {
    position: absolute;
    text-align: center;
    white-space: nowrap;
    font-size: 12px;
    transition: all 0.3s ease;
}

.timeline-description-top {
    bottom: 100%;
    margin-bottom: 15px;
}

.timeline-description-bottom {
    top: 100%;
    margin-top: 15px;
}

.timeline-year {
    font-weight: 700;
    color: #757575;
    font-size: 14px;
    line-height: 1.2;
}

.timeline-month {
    font-weight: 400;
    color: #666;
    font-size: 11px;
    line-height: 1.2;
}

.timeline-point-wrapper:hover .timeline-description {
    transform: scale(1.1);
}

/* Responsive adjustments */
@media (max-width: 959px) {
    .timeline-nav-container {
        display: none !important;
    }
}

@media (max-width: 1199px) {
    .timeline-points {
        padding: 0 20px;
    }
    
    .timeline-description {
        font-size: 10px;
    }
    
    .timeline-year {
        font-size: 12px;
    }
    
    .timeline-month {
        font-size: 10px;
    }
}

/* ====================================
   响应式设计
   ==================================== */

/* 大屏幕适配 */
@media (min-width: 1600px) {
    .header-content {
        max-width: 1920px;
        margin: 0 auto;
        padding: 0;
    }
    
    .logo-section {
        width: 163px;
        padding-left: 163px;
        margin-right: 0;
    }
    
    .nav-section {
        width: 635px;
        padding-left: 57px;
        margin-right: 0;
    }
    
    .spacer {
        flex: 1;
    }
    
    .right-section {
        padding-right: 173px;
    }
}

/* 中等屏幕适配 */
@media (max-width: 1199px) and (min-width: 960px) {
    .footer-content {
        grid-template-columns: repeat(4, 1fr);
        gap: 35px;
    }
}

/* 平板适配 */
@media (max-width: 959px) {
    .hero-subtitle {
        font-size: 32px;
    }
    .hero-text {
        font-size: 32px;
    }
    
    .stats-grid {
        margin-top: 20px;
    }
    
    .contact-content {
        grid-template-columns: 1fr;
    }
    
    .footer-content {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }
}

/* 手机端footer布局 */
.footer-other-columns {
    display: none; /* 默认隐藏，PC端不显示 */
}

@media (max-width: 767px) {
    /* 桌面端的footer-content，手机端只显示第一栏 */
    .footer-content {
        display: block !important;
        margin-bottom: 30px;
    }
    
    .footer-content .footer-column:not(.footer-intro) {
        display: none; /* 隐藏除第一栏外的所有栏目 */
    }
    
    .footer-intro {
        text-align: center;
        padding-bottom: 30px;
        border-bottom: 1px dashed #C5C5C5;
        margin-bottom: 30px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .footer-intro img {
        margin: 0 auto 20px !important;
    }
    
    .footer-intro p {
        text-align: center !important;
        margin: 0 auto !important;
    }
    
    /* 显示手机端的其他栏目容器 */
    .footer-other-columns {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 25px;
    }
    
    .footer-column h3 {
        font-size: 16px;
        margin-bottom: 15px;
    }
    
    .footer-column ul li {
        margin-bottom: 0;
    }
    
    .footer-column ul li a {
        font-size: 13px;
        line-height: 32px;
    }
}

@media (max-width: 479px) {
    /* 小屏手机继续保持第一栏独立，其他栏目2列布局 */
    .footer-other-columns {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
    
    .footer-section {
        padding: 60px 0 20px;
    }
    
    .footer-intro {
        padding-bottom: 25px;
        margin-bottom: 25px;
    }
}

/* ====================================
   Solutions Page 专属样式 - 基于Figma设计
   ==================================== */

/* Solutions Hero Section */

.solutions-hero-section .hero-desc {
    color: white;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 40px;
    max-width: 568px;
}

.hero-buttons {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.hero-cta-primary, .hero-cta-secondary {
    padding: 12px 24px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.hero-cta-primary {
    background: black;
    color: white;
    border: 1px solid #F8C786;
}

.hero-cta-secondary {
    background: black;
    color: white;
    border: 1px solid #F8C786;
}

.hero-cta-primary:hover, .hero-cta-secondary:hover {
    color: white;
    transform: translateY(-2px);
}

.hero-image-container {
    position: relative;
    text-align: center;
}

.hero-image-container img {
    width: 100%;
    max-width: 600px;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

/* Trouble Questions Section */
.trouble-questions-section {
    background: linear-gradient(135deg, #F7F0FF 0%, #F6FEFF 51%, #EAF9FF 100%), #F9F9F9;
}

.trouble-cards {
    margin-bottom: 40px;
}

.trouble-icon {
    width: 60px;
    height: 60px;
    background: #F1F5FF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin: 0 auto 20px;
}

.trouble-title {
    color: #000000;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}



.industry-slider .uk-slidenav {
    color: #F8C786;
}

.industry-slider .uk-slidenav:hover {
    color: #E6B375;
}

.section-subtitle {
    color: #464646;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.75;
    max-width: 913px;
    margin: 0 auto;
}


.case-point {
    margin-bottom: 16px;
}

.point-label {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    display: block;
    margin-bottom: 8px;
}

.pain-point {
    color: #2E9AD6;
}

.solution-point {
    color: #F26252;
}

.result-point {
    color: #3371EC;
}

.solution-items {
    margin-top: 8px;
}

.solution-items p {
    color: black;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 6px;
}

.result-tags {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.result-tag {
    background: white;
    border: 1px solid #F8C786;
    border-radius: 10px;
    padding: 12px 16px;
    color: black;
    font-size: 16px;
    font-weight: 700;
    display: block;
    max-width: 320px;
}

.cta-btn-large {
    background: black;
    color: white;
    padding: 12px 24px;
    border-radius: 10px;
    border: 1px solid #F8C786;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.cta-btn-large:hover {
    color: white;
    transform: translateY(-2px);
}

/* New Site Section */
.new-site-section {
    background: #000000 url('https://placehold.co/1919x631') no-repeat center center;
    background-size: cover;
    position: relative;
}

.new-site-section {
    background: rgba(0,0,0,0.6);
}

.section-title-white {
    color: white;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

.section-subtitle-white {
    color: white;
    font-size: 20px;
    font-weight: 400;
    text-align: center;
    margin-top: 16px;
}

.section-desc-white {
    color: white;
    font-size: 20px;
    font-weight: 400;
    text-align: center;
    margin-top: 16px;
}

.problem-cards {
    position: relative;
    z-index: 2;
}

.problem-card {
    border-radius: 12px;
    padding: 40px 24px;
    text-align: center;
    height: 100%;
    position: relative;
    z-index: 2;
}

.problem-icon {
    width: 60px;
    height: 60px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin: 0 auto 20px;
}

.problem-title {
    color: white;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
}

.problem-desc {
    color: #C0C0C0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
}

.solution-framework-title {
    color: #F8C786;
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 16px;
}

.framework-subtitle {
    color: white;
    font-size: 20px;
    font-weight: 400;
}

.solution-steps {
    position: relative;
    z-index: 2;
}

.step-card {
    background: #3A3A3A;
    border-radius: 10px;
    padding: 32px 24px;
    text-align: left;
    position: relative;
    height: 100%;
}

.step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    color: black;
    margin-bottom: 16px;
}

.step-icon {
    width: 100%;
    height: 40px;
    background: url('/assets/images/2025/08/arrow-symbol.png') no-repeat center center;
    background-size: contain;
    margin-bottom: 16px;
    position: relative;
}

.step-card:nth-child(1) .step-number {
    background: #FFD8A4;
}

.step-card:nth-child(2) .step-number {
    background: #CFC9F3;
}

.step-card:nth-child(3) .step-number {
    background: #C1DAF7;
}

.step-card:nth-child(4) .step-number {
    background: #B6ECCC;
}

.step-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 16px;
    line-height: 1.2;
}

.step-card:nth-child(1) .step-title {
    color: #FFD8A4;
}

.step-card:nth-child(2) .step-title {
    color: #CFC9F3;
}

.step-card:nth-child(3) .step-title {
    color: #C1DAF7;
}

.step-card:nth-child(4) .step-title {
    color: #B6ECCC;
}

.step-desc {
    color: white;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}

.link-solution-card {
    background: #202020;
    border-radius: 10px;
    padding: 32px 24px;
    height: 100%;
}

.link-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 16px;
    text-align: center;
}

.link-btn {
    background: linear-gradient(90deg, #F8C786 0%, #DCD4FA 48%, #95D6F6 100%);
    color: black;
    padding: 8px 24px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    display: block;
    text-align: center;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.link-btn:hover {
    color: black;
    transform: translateY(-1px);
}

.link-solution-card:nth-child(1) .link-title {
    color: #CFC9F3;
}

.link-solution-card:nth-child(2) .link-title {
    color: #C1DAF7;
}

.link-solution-card:nth-child(3) .link-title {
    color: #B6ECCC;
}

.link-detail p {
    color: white;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 8px;
}

.link-detail p strong {
    font-weight: 700;
    color: white;
}

.link-detail p:not(:has(strong)) {
    color: #C0C0C0;
    margin-bottom: 16px;
}

/* Emergency Section */
.emergency-section {
    background: white;
    position: relative;
}

.section-title-dark {
    color: black;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
}

.emergency-subtitle {
    color: #F26252;
    font-size: 28px;
    font-weight: 600;
    margin-top: 20px;
}

.emergency-desc {
    color: #3371EC;
    font-size: 28px;
    font-weight: 700;
    margin-top: 20px;
}

.emergency-timeline {
    background: #000000;
    border-radius: 12px;
    padding: 40px;
    margin: 0 auto;
}

.timeline-item {
    background: rgba(107, 107, 107, 0.4);
    border-radius: 10px;
    padding: 20px;
    backdrop-filter: blur(3.5px);
    height: 100%;
    position: relative;
}

/* 弧形虚线箭头连接 - 只在中等屏幕及以上显示 */
@media (min-width: 960px) {
    .timeline-item:nth-child(1)::after,
    .timeline-item:nth-child(2)::after {
        content: '';
        position: absolute;
        top: -40px;
        right: -50px;
        width: 100px;
        height: 80px;
        background: url('/assets/images/2025/08/arrow-symbol3.png') no-repeat center;
        background-size: contain;
        z-index: 10;
    }
    
    /* 只有前两个项目显示箭头，最后一个不显示 */
    .timeline-item:nth-child(3)::after,
    .timeline-item-last::after {
        display: none;
    }
}

.timeline-content-layout {
    display: flex;
    align-items: center;
    gap: 16px;
}

.timeline-period {
    color: #F8C786;
    font-size: 30px;
    font-weight: 700;
}

.timeline-content h4 {
    color: white;
    font-size: 16px;
    font-weight: 400;
    margin: 0;
}

.emergency-cta-btn {
    background: black;
    color: white;
    padding: 12px 24px;
    border-radius: 10px;
    border: 1px solid #F8C786;
    text-decoration: none;
    font-size: 16px;
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.emergency-cta-btn:hover {
    color: white;
    transform: translateY(-2px);
}


.service-card.dark {
    background: #292929;
    border-radius: 10px;
    padding: 24px;
    height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

.service-icon {
    width: 48px;
    height: 48px;
    background: rgba(149, 214, 246, 0.2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.service-icon svg {
    width: 24px;
    height: 24px;
}

.service-content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    flex: 1;
}

.service-content .uk-width-expand {
    flex: 1;
}

.service-content .uk-width-auto {
    flex-shrink: 0;
}

.service-card.dark .service-title {
    color: white;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    flex: 1;
    line-height: 1.4;
}

.service-arrow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 16px;
}

.dashed-line {
    width: 20px;
    height: 1px;
    background: repeating-linear-gradient(
        to right,
        #95D6F6 0,
        #95D6F6 2px,
        transparent 2px,
        transparent 4px
    );
}

.service-arrow svg {
    width: 16px;
    height: 16px;
}

/* Site Optimization Section */
.site-optimization-section {
    background: #000000;
    background-size: cover;
    position: relative;
}

.section-title-gradient {
    background: linear-gradient(89.99deg, #F8C786 0.01%, #D7D3E7 48%, #95D6F6 99.99%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

.subsection-title-gradient {
    background: linear-gradient(89.99deg, #F8C786 0.01%, #D7D3E7 48%, #95D6F6 99.99%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
}

.subsection-title-white {
    color: white;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
}

/* Site Optimization Cards */
.optimization-cards {
    position: relative;
    z-index: 2;
}

.optimization-card {
    background: rgba(255,255,255,0.1);
    border-radius: 12px;
    text-align: center;
    backdrop-filter: blur(10px);
    height: 100%;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.optimization-card:hover {
    border-color: #F8C786;
    transform: translateY(-3px);
}

.opt-card-header {
    border-radius: 8px 8px 0 0;
}

.opt-card-header.orange {
    background: #57524A;
    color: #FFFFFF;
}

.opt-card-header.purple {
    background: #464451;
    color: #FFFFFF;
}

.opt-card-header.green {
    background: #39473F;
    color: #FFFFFF;
}

.opt-card-header .uk-card-title {
    color: #FFFFFF;
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}

.opt-card-desc {
    color: white;
    font-size: 14px;
    line-height: 1.6;
}

/* Search Analysis Cards */
.search-analysis-cards {
    position: relative;
    z-index: 2;
}

.search-card {
    text-align: center;
    padding: 40px 24px;
}

.search-icon {
    width: 60px;
    height: 60px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin: 0 auto 20px;
    border: 2px solid white;
}

.search-title {
    color: white;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 12px;
}

.search-desc {
    color: #CDCDCD;
    font-size: 14px;
    line-height: 1.5;
}

/* Architecture Cards */
.architecture-cards {
    position: relative;
    z-index: 2;
}

.architecture-card {
    background: rgba(255,255,255,0.1);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    height: 100%;
}

.arch-card-header {
    border-radius: 8px 8px 0 0;
    text-align: center;
}

.arch-card-header.orange {
    background: #FFD8A4;
    color: #FFFFFF;
}

.arch-card-header.purple {
    background: #CFC9F3;
    color: #FFFFFF;
}

.arch-card-header.green {
    background: #B6ECCC;
    color: #FFFFFF;
}

.arch-card-header .uk-card-title {
    color: #000;
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}

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

.arch-card-list li {
    color: white;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 12px;
    position: relative;
    padding-left: 16px;
}

.arch-card-list li:before {
    content: "•";
    position: absolute;
    left: 0;
    color: #F8C786;
}

.optimization-cta-btn {
    background: black;
    color: white;
    padding: 12px 24px;
    border-radius: 10px;
    border: 1px solid #F8C786;
    text-decoration: none;
    font-size: 16px;
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

.optimization-cta-btn:hover {
    color: white;
    transform: translateY(-2px);
}

/* Keyword Section */
.keyword-section {
    background: #F9F9F9;
}

/* 关键词表格样式 */
.keyword-table-container {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.keyword-table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 8px;
    overflow: hidden;
}

.keyword-table .table-header {
    display: flex;
    background: linear-gradient(90deg, #F8C786 0.01%, #D7D3E7 48%, #95D6F6 99.99%);
    color: #000000;
    font-weight: 600;
    font-size: 14px;
}

.keyword-table .table-row {
    display: flex;
    border-bottom: 1px solid #E0E0E0;
    background: white;
}

.keyword-table .table-row:last-child {
    border-bottom: none;
}

.keyword-table .table-cell {
    flex: 1;
    padding: 16px 12px;
    text-align: center;
    font-size: 14px;
    color: #333333;
    display: flex;
    align-items: center;
    justify-content: center;
}

.keyword-table .table-header .table-cell {
    font-weight: 600;
    color: #000000;
}

.keyword-table .table-row .table-cell:last-child {
    text-align: left;
    justify-content: flex-start;
}

.keyword-table .stars {
    color: #000000;
    font-size: 16px;
    letter-spacing: 2px;
}

.keyword-subtitle {
    color: #666666;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 30px;
}

.matrix-title {
    color: #333333;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 10px;
}

.matrix-subtitle {
    color: #666666;
    font-size: 16px;
    margin-bottom: 40px;
}

.keyword-matrix {
    margin-bottom: 60px;
}

.matrix-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    height: 100%;
    transition: transform 0.3s ease;
}

.matrix-card:hover {
    transform: translateY(-4px);
}

.matrix-header {
    background: #000000;
    color: #FFFFFF;
    border-radius: 12px 12px 0 0;
    text-align: center;
}

.matrix-header .uk-card-title {
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.matrix-content {
    text-align: center;
    padding: 24px;
}

.matrix-card.long-tail .uk-card-body {
    background: #FFF2E1;
}

.matrix-card.secondary .uk-card-body {
    background: #F1EFFF;
}

.matrix-card.core .uk-card-body {
    background: #E9F3FF;
}

.content-type {
    color: #444444;
    font-size: 20px;
    margin-bottom: 15px;
}

.matrix-arrow {
    font-size: 24px;
    margin: 15px 0;
}



.matrix-card.long-tail .example-item {
    border-left-color: #FFD8A4;
}

.matrix-card.secondary .example-item {
    border-left-color: #CFC9F3;
}

.matrix-card.core .example-item {
    border-left-color: #95D6F6;
}

.subsection-title-dark {
    color: black;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
}

.strategy-comparison {
    margin-top: 60px;
}

.strategy-card {
    background: #292929;
    border-radius: 10px;
    padding: 32px 24px;
    height: 100%;
    position: relative;
}

.strategy-title {
    color: white;
    font-size: 25px;
    font-weight: 700;
    margin-bottom: 16px;
}

.strategy-solution {
    color: white;
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 8px;
}

.strategy-method {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 24px;
}

.strategy-card:nth-child(1) .strategy-method {
    color: #CFC9F3;
}

.strategy-card:nth-child(2) .strategy-method {
    color: #B6ECCC;
}

.strategy-btn {
    background: linear-gradient(90deg, #F8C786 0%, #DCD4FA 48%, #95D6F6 100%);
    color: black;
    padding: 12px 24px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 700;
    display: block;
    width: calc(100% - 48px);
    text-align: center;
    margin-bottom: 32px;
}

.strategy-content {
    margin-top: 24px;
}

.strategy-item {
    margin-bottom: 20px;
}

.strategy-item strong {
    color: white;
    font-size: 16px;
    font-weight: 700;
    display: block;
    margin-bottom: 8px;
}

.strategy-item p {
    color: #CDCDCD;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}

.strategy-item .uk-list li {
    color: #FFFFFF;
}

/* 策略对比折叠样式 */
.strategy-collapse {
    margin-top: 20px;
}

.strategy-collapse-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 0 auto;
}

.strategy-collapse-trigger:hover {
    background: rgba(255, 255, 255, 0.2);
}

.strategy-collapse-trigger svg {
    transition: transform 0.3s ease;
}

.strategy-collapse-trigger[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.strategy-details {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.strategy-details .strategy-item {
    margin-bottom: 16px;
}

.strategy-details .strategy-item:last-child {
    margin-bottom: 0;
}

.strategy-details .uk-list {
    margin: 8px 0 0 0;
}

.strategy-details .uk-list li {
    color: #CDCDCD;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 4px;
}

/* Solutions Contact Section */
.solutions-contact-section {
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(0,0,0,0.9) 100%);
    position: relative;
}

.contact-bg-effects {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgba(248,199,134,0.1) 0%, rgba(149,214,246,0.1) 100%);
}

.contact-title {
    color: white;
    font-size: 32px;
    line-height: 1.4;
}

.contact-qr {
    border-radius: 8px;
    border: 1px solid #DBDBDB;
    margin-top: 24px;
}

/* Responsive Design for Solutions Page */
@media (max-width: 959px) {
    .solutions-hero-section .hero-title {
        font-size: 36px;
    }
    
    .solutions-hero-section .hero-desc {
        font-size: 18px;
    }
    
    .hero-buttons {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .case-content {
        padding-left: 0;
        margin-top: 40px;
    }
    
    .emergency-timeline {
        flex-direction: column;
        gap: 20px;
    }
    
    .timeline-arrow {
        width: 2px;
        height: 40px;
        transform: rotate(90deg);
    }
    
    .timeline-arrow::after {
        top: 34px;
        right: -3px;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 8px solid #F8C786;
        border-bottom: none;
    }
}

@media (max-width: 767px) {
    .solutions-hero-section .hero-title {
        font-size: 28px;
    }
    
    .section-title-white,
    .section-title-dark,
    .subsection-title-white,
    .subsection-title-dark {
        font-size: 24px;
    }
    
    .solution-framework-title {
        font-size: 28px;
    }
    
    .step-card,
    .problem-card,
    .link-solution-card,
    .strategy-card {
        padding: 24px 20px;
    }
    
    .emergency-timeline {
        padding: 24px;
    }
    
    .timeline-item {
        min-width: auto;
        padding: 16px;
    }
}

/* Why Choose Us Section */
.why-choose-section {
    background: linear-gradient(135deg, #F7F0FF 0%, #F6FEFF 51%, #EAF9FF 100%), #F9F9F9;
}

.why-choose-card {
    background: #ffffff;
    border-radius: 15px;
    padding: 40px 30px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
}

.why-choose-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}


.feature-title {
    font-size: 24px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 16px;
}

.feature-desc {
    font-size: 16px;
    color: #666666;
    line-height: 1.6;
}

/* Solutions Categories Section */
.solutions-categories-section {
    background: #ffffff;
}

.solution-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 32px 24px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    border: 2px solid transparent;
}

.solution-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    border-color: #F8C786;
}

.solution-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #F8C786 0%, #95D6F6 100%);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 20px;
}

.solution-title {
    font-size: 20px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 12px;
}

.solution-desc {
    font-size: 14px;
    color: #666666;
    line-height: 1.6;
    margin-bottom: 16px;
}

.solution-features {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.solution-features li {
    font-size: 14px;
    color: #333333;
    padding: 4px 0;
    position: relative;
    padding-left: 16px;
}

.solution-features li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #4CAF50;
    font-weight: bold;
}

.solution-btn {
    color: #F8C786;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.3s ease;
}

.solution-btn:hover {
    color: #E6B375;
}

/* Core Services Section */
.core-services-section {
    background: #000000;
}

.core-service-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 0;
    overflow: hidden;
    display: flex;
    min-height: 280px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.service-content {
    padding: 32px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.service-title {
    font-size: 24px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 8px;
}

.service-subtitle {
    font-size: 16px;
    font-weight: 600;
    color: #666666;
    margin-bottom: 16px;
}

.service-desc {
    font-size: 14px;
    color: #666666;
    line-height: 1.6;
    margin-bottom: 20px;
}

.service-features {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
    flex-grow: 1;
}

.service-features li {
    font-size: 14px;
    color: #333333;
    padding: 6px 0;
    position: relative;
    padding-left: 20px;
}

.service-features li:before {
    content: "●";
    position: absolute;
    left: 0;
    color: #F8C786;
}

.service-btn {
    color: #000000;
    text-decoration: none;
    font-weight: 600;
    padding: 10px 20px;
    border: 2px solid #F8C786;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    align-self: flex-start;
}

.service-btn:hover {
    background: #F8C786;
    color: #000000;
}

.service-image {
    width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

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

.service-orange .service-image {
    background: linear-gradient(135deg, #FFD8A4 0%, #F8C786 100%);
}

.service-purple .service-image {
    background: linear-gradient(135deg, #CFC9F3 0%, #8B5CF6 100%);
}

.service-blue .service-image {
    background: linear-gradient(135deg, #C1DAF7 0%, #2E9AD6 100%);
}

.service-green .service-image {
    background: linear-gradient(135deg, #B6ECCC 0%, #4CAF50 100%);
}

/* Success Stats Section */
.success-stats-section {
    background: linear-gradient(135deg, #F7F0FF 0%, #F6FEFF 51%, #EAF9FF 100%), #F9F9F9;
}

.success-stat-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 40px 20px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transition: transform 0.3s ease;
}

.success-stat-card:hover {
    transform: translateY(-5px);
}

.success-stat-card .stat-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(90deg, #F8C786 0%, #D7D3E7 48%, #95D6F6 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    margin: 0 auto 20px;
}

.success-stat-card .stat-number {
    font-size: 36px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 8px;
}

.success-stat-card .stat-label {
    font-size: 16px;
    font-weight: 500;
    color: #666666;
}

/* Service Process Section */
.service-process-section {
    background: #000000;
}

.process-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 32px 24px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    transition: transform 0.3s ease;
    height: 100%;
    position: relative;
}

.process-card:hover {
    transform: translateY(-5px);
}

.process-step {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    background: linear-gradient(90deg, #F8C786 0%, #D7D3E7 48%, #95D6F6 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: #000000;
}

.process-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #F8C786 0%, #95D6F6 100%);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin: 20px auto 20px;
}

.process-title {
    font-size: 20px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 12px;
}

.process-desc {
    font-size: 14px;
    color: #666666;
    line-height: 1.6;
}

/* Responsive Design for Solutions Page */
@media (max-width: 959px) {
    .core-service-card {
        flex-direction: column;
        min-height: auto;
    }
    
    .service-image {
        width: 100%;
        height: 200px;
    }
    
    .service-content {
        padding: 24px;
    }
}

@media (max-width: 767px) {
    .feature-icon,
    .solution-icon,
    .process-icon,
    .success-stat-card .stat-icon {
        width: 60px;
        height: 60px;
        font-size: 24px;
    }
    
    .feature-title,
    .solution-title,
    .process-title {
        font-size: 18px;
    }
    
    .service-title {
        font-size: 20px;
    }
    
    .success-stat-card .stat-number {
        font-size: 28px;
    }
    
    .why-choose-card,
    .solution-card,
    .process-card {
        padding: 24px 20px;
    }
    
    .core-service-card .service-content {
        padding: 20px;
    }
}

/* ====================================
   WordPress 默认样式覆盖
   ==================================== */

/* 确保WordPress默认样式不会干扰 */
.wp-block-group,
.wp-site-blocks {
    padding: 0 !important;
    margin: 0 !important;
}

.wp-block-group__inner-container {
    max-width: none !important;
}

/* 隐藏WordPress默认标题 */
.wp-block-post-title,
.entry-title {
    display: none;
}

/* 确保页面内容全宽显示 */
.alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
}

/* ====================================
   Products Page 专属样式
   ====================================== */

/* Products Hero Section */
.products-hero-section {
    background: #000000;
    min-height: 700px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.products-hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255,255,255,0.05) 1px, transparent 1px),
               linear-gradient(-45deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0.3;
}

/* Services Navigation */
.services-overview-section {
    background: #ffffff;
    position: relative;
}

.services-overview-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(248, 199, 134, 0.05) 0%, rgba(215, 211, 231, 0.05) 48%, rgba(149, 214, 246, 0.05) 100%);
    pointer-events: none;
}

.service-nav-card {
    background: white;
    border-radius: 16px;
    padding: 32px 24px;
    text-align: center;
    border: none;
    transition: all 0.3s ease;
    cursor: pointer;
    height: 100%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

.service-nav-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(248, 199, 134, 0.1) 0%, rgba(215, 211, 231, 0.1) 48%, rgba(149, 214, 246, 0.1) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.service-nav-card:hover::before {
    opacity: 1;
}

.service-nav-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.service-nav-icon {
    font-size: 48px;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
}

.service-nav-title {
    font-size: 20px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 0;
    position: relative;
    z-index: 1;
    font-family: 'Inter', sans-serif;
}

/* APL Service Content */
.apl-service-content {
    background: #ffffff;
    padding-top: 60px;
}

.apl-image-container {
    text-align: center;
}

.apl-image {
    width: 100%;
    max-width: 600px;
}

.service-benefits {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;
    margin-top: 30px;
}

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

.benefit-icon {
    width: 20px;
    height: 20px;
    border: 1px solid #BBBBBB;
    color: #23ADFC;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
}

.benefit-text {
    font-size: 16px;
    color: #000000;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
}

.apl-features {
    margin-top: 40px;
}

.feature-card {
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
    overflow: visible !important;
    height: 200px;
    position: relative;
}

.feature-card .uk-card-media-right {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
}

.feature-icon {
    width: 150px;
    height: 150px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    z-index: 1;
    position: absolute;
    top: -20px;
    right: -20px;
}

.feature-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.feature-card.blue .feature-icon {
    background: transparent;
}

.feature-card.purple .feature-icon {
    background: transparent;
}

.feature-card.orange .feature-icon {
    background: transparent;
}

.feature-card.green .feature-icon {
    background: transparent;
}

.checkmark {
    color: white;
    font-size: 48px;
    font-weight: bold;
}

.feature-title {
    font-size: 20px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 16px;
    font-family: 'Inter', sans-serif;
}

.feature-description {
    font-size: 14px;
    color: #666666;
    line-height: 1.6;
    font-family: 'Inter', sans-serif;
}

/* Scenarios Section */
.apl-scenarios-section {
    background: #ffffff;
}

.scenario-subtitle {
    font-size: 18px;
    color: #666666;
    margin-bottom: 20px;
}

.highlight-orange {
    color: #F8C786;
    font-weight: 700;
}

.scenario-card {
    background: white;
    border-radius: 16px;
    padding: 32px 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    height: 100%;
    position: relative;
    overflow: hidden;
}

.scenario-header {
    margin-bottom: 20px;
    padding: 16px 20px;
    border-radius: 10px;
    background: linear-gradient(128deg, #E2CBFF 0%, #F1FDFF 50.96%, #B0E8FF 100%);
}

.scenario-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 4px;
    color: #000000;
    font-family: 'Inter', sans-serif;
}

.scenario-subtitle {
    font-size: 14px;
    color: #666666;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
}

.scenario-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.3;
}

.icon-placeholder {
    font-size: 32px;
    color: #95D6F6;
}

.scenario-content {
    margin-top: 20px;
}

.scenario-content h5 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #000000;
    font-family: 'Inter', sans-serif;
}

.scenario-content p {
    font-size: 14px;
    line-height: 1.6;
    color: #666666;
    font-family: 'Inter', sans-serif;
}

/* Guest Post Section */
.guestpost-section {
    background: #000000;
    position: relative;
}

.guestpost-section .benefit-text {
    color: white;
}

.service-description-white {
    color: white;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.guestpost-image-container {
    text-align: center;
}

.guestpost-image {
    width: 100%;
    max-width: 500px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.guestpost-scenarios-section {
    background: #000000;
}

.guestpost-scenarios-section .subsection-title-dark{
    color: white;
}

/* Product Features Section */
.product-features-section {
    background: linear-gradient(128deg, #F7F0FF 0%, #F6FEFF 50.96%, #EAF9FF 100%);
    overflow: hidden;
}

.product-feature-card {
    background: white;
    border-radius: 12px;
    padding: 40px 30px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    height: 100%;
    border-top: 4px solid transparent;
    position: relative;
    overflow: hidden;
}

.product-feature-card::after {
    content: '';
    position: absolute;
    bottom: -200px;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: #FFD8A4;
    filter: blur(25px);
    z-index: 0;
    opacity: 0.6;
    pointer-events: none;
}

.product-feature-card.orange { border-top-color: #F8C786; }
.product-feature-card.purple { border-top-color: #8B5CF6; }
.product-feature-card.blue { border-top-color: #4A90E2; }

.product-feature-card.orange::after {
    background: #FFD8A4;
}

.product-feature-card.purple::after {
    background: #CFC9F3;
}

.product-feature-card.blue::after {
    background: #C1DAF7;
}

.product-feature-title {
    font-size: 20px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 16px;
}

.product-feature-desc {
    font-size: 14px;
    color: #666666;
    line-height: 1.6;
}

.product-feature-img {
    margin-top: 20px;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    position: relative;
    z-index: 1;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Industry Coverage Section */
.industry-coverage-section {
    background: white;
}

.industry-grid {
    max-width: 1000px;
    margin: 0 auto;
}

.industry-column {
    text-align: center;
    border-radius: 10px;
    background:white;
    padding: 20px;
}

.industry-title {
    font-size: 16px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 16px;
    padding: 8px 16px;
    border-radius: 8px;
}

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

.industry-list li {
    font-size: 14px;
    color: #666666;
    padding: 4px 0;
    line-height: 1.5;
}

/* Consulting Section */

.consulting-cards {
    margin-bottom: 60px;
}

.consulting-card {
    background: linear-gradient(128deg, #F7F0FF 0%, #F6FEFF 50.96%, #EAF9FF 100%);
    border-radius: 12px;
    padding: 32px 24px;
    height: 100%;
}

.consulting-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #E0E0E0;
}

.consulting-title {
    font-size: 24px;
    font-weight: 700;
    color: #000000;
}

.consulting-price {
    background: black;
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
}

.consulting-section {
    margin-bottom: 0;
}

.consulting-card .consulting-section h4 {
    font-size: 16px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 8px;
}

.consulting-card .consulting-section p {
    font-size: 14px;
    color: #666666;
    line-height: 1.5;
    margin-bottom: 8px;
}

.consulting-card .consulting-section ol {
    padding-left: 20px;
    margin: 0;
}

.consulting-card .consulting-section ol li {
    font-size: 14px;
    color: #666666;
    line-height: 1.5;
    margin-bottom: 4px;
}

.consulting-card .benefit-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.consulting-card .benefit-list li {
    font-size: 14px;
    color: #666666;
    line-height: 1.5;
    margin-bottom: 4px;
}

.team-background .consulting-section h4 {
    font-size: 16px;
    font-weight: 700;
    color: white;
    margin-bottom: 8px;
}

.team-background .consulting-section p {
    font-size: 14px;
    color: white;
    line-height: 1.5;
    margin-bottom: 8px;
}

.team-background .consulting-section ol {
    padding-left: 20px;
    margin: 0;
}

.team-background .consulting-section ol li {
    font-size: 14px;
    color: white;
    line-height: 1.5;
    margin-bottom: 4px;
}

.team-background .benefit-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.team-background .benefit-list li {
    font-size: 14px;
    color: white;
    line-height: 1.5;
    margin-bottom: 4px;
}

/* Team Section */
.consulting-team-section {
    margin-top: 60px;
}

.team-background {
    background: #000000;
    border-radius: 12px;
    padding: 40px 40px;
    color: white;
}

.team-title {
    color: white;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 30px;
}

.team-stat-card {
    text-align: center;
    padding: 20px;
}

.team-stat-card .stat-icon {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto 15px !important;
}

.team-stat-card .stat-title {
    text-align: center !important;
}

.team-stat-card .stat-desc {
    text-align: center !important;
}




.stat-desc {
    font-size: 14px;
    color: white;
    line-height: 1.5;
}

.team-cta-btn {
    background: transparent;
    color: white;
    padding: 12px 24px;
    border: 1px solid white;
    border-radius: 10px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.team-cta-btn:hover {
    background: white;
    color: black;
}

/* Advisory Section */


.advisory-card-container {
    max-width: 800px;
    margin: 0 auto;
}

.advisory-card {
    background: #000000;
    border-radius: 12px;
    padding: 40px;
    color: white;
}

.advisory-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    padding-bottom: 20px;
    border-bottom: 1px solid #333333;
}

.advisory-title {
    font-size: 24px;
    font-weight: 700;
    color: white;
}

.advisory-price {
    background: white;
    color: black;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
}

.advisory-main-section {
    margin-bottom: 0;
    background: linear-gradient(128deg, #F7F0FF 0%, #F6FEFF 50.96%, #EAF9FF 100%);
}

.advisory-section h4 {
    font-size: 16px;
    font-weight: 700;
    color: white;
    margin-bottom: 8px;
}

.advisory-section p {
    font-size: 14px;
    line-height: 1.5;
}

.advisory-section ol {
    padding-left: 20px;
    margin: 0;
}

.advisory-section ol li {
    font-size: 14px;
    color: white;
    line-height: 1.5;
    margin-bottom: 4px;
}

.advisory-footer {
    text-align: center;
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid #333333;
}

.advisory-cta-btn {
    background: white;
    color: black;
    padding: 12px 24px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.advisory-cta-btn:hover {
    background: #F8C786;
    color: black;
}

/* Operation Section */


.operation-advantages {
    margin-bottom: 0;
}

.advantages-title {
    font-size: 20px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 24px;
}

.advantages-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.advantage-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.advantage-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}


.advantage-desc {
    font-size: 14px;
    color: #666666;
    line-height: 1.5;
}

.operation-card {
    background: linear-gradient(128deg, #F7F0FF 0%, #F6FEFF 50.96%, #EAF9FF 100%);
    border-radius: 12px;
    padding: 32px 24px;
    height: 100%;
}

.operation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #E0E0E0;
}

.operation-title {
    font-size: 24px;
    font-weight: 700;
    color: #000000;
}

.operation-price {
    background: black;
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
}

.operation-section {
    margin-bottom: 20px;
}

.operation-section h4 {
    font-size: 16px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 8px;
}

.operation-section p {
    font-size: 14px;
    color: #666666;
    line-height: 1.5;
    margin-bottom: 8px;
}

.operation-section ol {
    padding-left: 20px;
    margin: 0;
}

.operation-section ol li {
    font-size: 14px;
    color: #666666;
    line-height: 1.5;
    margin-bottom: 4px;
}

.operation-footer {
    text-align: center;
    margin-top: 32px;
}

.operation-cta-btn {
    background: black;
    color: white;
    padding: 12px 24px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.operation-cta-btn:hover {
    background: #F8C786;
    color: black;
}

/* Products Contact Section */
.products-contact-section {
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(0,0,0,0.9) 100%);
    position: relative;
}

/* Responsive Design for Products Page */
@media (max-width: 959px) {
    .operation-content-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .consulting-header,
    .advisory-header {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }
}

@media (max-width: 767px) {
    .products-hero-section .hero-subtitle {
        font-size: 28px;
    }
    .products-hero-section .hero-text {
        font-size: 28px;
    }
    
    .service-nav-card {
        padding: 24px 16px;
    }
    
    .service-nav-icon {
        font-size: 36px;
        height: 60px;
        margin-bottom: 16px;
    }
    
    .service-nav-title {
        font-size: 18px;
        margin-bottom: 0;
    }
    
    .feature-card,
    .scenario-card,
    .consulting-card,
    .advisory-card {
        padding: 24px 20px;
    }
    
    .team-background,
    .operation-card {
        padding: 40px 20px;
    }
    
    .service-benefits {
        gap: 30px;
        flex-wrap: wrap;
    }
    
    .benefit-item {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }
    
    .feature-card {
        height: auto;
        min-height: 160px;
    }
    
    .feature-card .uk-card-media-right {
        width: 80px;
        height: 80px;
    }
    
    .feature-icon {
        width: 80px;
        height: 80px;
        transform: none;
    }
    
    .checkmark {
        font-size: 32px;
    }
    
    .scenario-card {
        padding: 24px 20px;
    }
    
    .scenario-icon {
        width: 50px;
        height: 50px;
    }
    
    .icon-placeholder {
        font-size: 24px;
    }
    
    .apl-service-content {
        padding-top: 40px;
    }
}

/* ====================================
   打印样式优化
   ==================================== */

@media print {
    .hero-section {
        background: white !important;
        color: black !important;
    }
    
    .stats-card {
        background: #f5f5f5 !important;
    }
    
    .services-section,
    .quality-section,
    footer {
        background: white !important;
        color: black !important;
    }
    
    .topgus-cta-desktop,
    .hero-cta,
    .cta-btn {
        background: #f0f0f0 !important;
        color: black !important;
        border: 1px solid #ccc !important;
    }
}

#tp-slideshow .uk-slideshow-items{
    min-height: 500px!important;
}

/* Emergency timeline specific styles */
.emergency-timeline .timeline-image {
    width: 100%;
    height: 120px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 16px;
    flex-shrink: 0;
}

.emergency-timeline .timeline-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.emergency-timeline .timeline-content-layout {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    height: 100%;
}

.emergency-timeline .timeline-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.emergency-cta-btn {
    background: black;
    color: white;
    padding: 12px 24px;
    border-radius: 10px;
    border: 1px solid #F8C786;
    text-decoration: none;
    font-size: 16px;
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.emergency-cta-btn:hover {
    color: white;
    transform: translateY(-2px);
}