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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    line-height: 1.6;
    color: #1D2129;
    background-color: #fff;
}

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

/* Hero Section */
.hero {
    padding: 80px 0;

    height: 580px;

    background-image: url("/statics/themes/sanpin/images/way/bg01.png");
    /* 水平居中 */
    justify-content: center;
    /* 垂直居中 */
    /* 背景图也居中显示 */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; /* 可选：让背景图覆盖整个区域 */
}

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

.hero-text h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.2;
}

.hero-text .main-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.1;
}
.hero-text .main-title2 {
    /* 设置渐变背景 */
    background: linear-gradient(45deg, #165DFF, #00C5D1);

    /* 将背景裁剪为文字区域 */
    -webkit-background-clip: text;
    background-clip: text;

    /* 将文字颜色设置为透明，显示背景渐变 */
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
}

.hero-text p {
    font-size: 1.1rem;
    margin-bottom: 30px;
    line-height: 1.8;
}

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

.btn {
    padding: 15px 30px;
    border: none;
    border-radius: 30px;
    font-size: 1.2rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

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

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

/* Concept and Methodology Section */
.concept {
    padding: 80px 0 40px;
}

.section-title {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 10px;
    text-align: center;
}

/* Talent Framework Section */
.talent-framework {
    padding: 80px 0;
    background-color: #fff;
}

.framework-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-top: 40px;
}

.framework-card {
    /*text-align: center;*/
    padding: 30px;
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

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

.framework-card h3{
    margin-top: 20px;
}

.framework-icon {
    width: 60px;
    height: 60px;
    /*margin: 0 auto 20px;*/
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
    font-weight: bold;
}
.framework-icon img{
    width: 100%;
}

.framework-card h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: #333;
}

.framework-card p {
    line-height: 1.6;
}

/* Methodology Core Section */
.methodology-core {
    padding: 0px 0 80px;
    background-color: #fff;
}

.methodology-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}
.methodology-left,.methodology-right{
    width: 560px;
    height: 293px;
    padding: 30px;
    border-radius: 15px;
}
.methodology-left{
    background-color: #FEF4FD;

}
.methodology-right{
    background-color: #FFF5F1;
}
.methodology-left h3,
.methodology-right h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 20px;
}

.methodology-left p,
.methodology-right p {
    margin-bottom: 30px;
    line-height: 1.8;
}

.flow-diagram {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 20px;
}

.flow-box {
    background-color: #FFFFFF;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
    flex: 1;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.flow-box h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 5px;
}

.flow-box:nth-child(1) h4{
    color: #165DFF ;
}
.flow-box:nth-child(3) h4{
    color: #924BFF;
}
.flow-box:nth-child(5) h4{
    color: #FF4B80;
}

.flow-box p {
    font-size: 0.9rem;
    margin: 0;
}

.flow-arrow {
    color: #6f42c1;
    font-size: 1.5rem;
    font-weight: bold;
}

.upgrade-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 20px;
}

.upgrade-item {
    background-color: #ffffff;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
    font-size: 0.9rem;
    color: #333;
    font-weight: 500;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

/* Classic Cases Section */
.classic-cases {
    padding: 80px 0;
    background-color: #F1F6FE;
}

.cases-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(560px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.case-card {
    padding: 20px;
    box-shadow: none;
    transition: none;
    display: flex;
    gap: 20px;
    align-items: flex-start;
    background-color: #ffffff;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

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

.case-image {
    width: 90px;
    height: 90px;
    border-radius: 8px;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    flex-shrink: 0;
}
.case-image img{
    width: 100%;
}

.case-content {
    flex: 1;
}

.case-card h4 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
}

.case-card .subtitle {
    font-size: 0.9rem;
    margin-bottom: 20px;
    line-height: 1.5;
}

.case-card .path>div:nth-child(1){
    width: 50px;
    font-weight: 600;
}
.case-card .path>div:nth-child(2){
    width: 360px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero-content {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .hero-text .main-title {
        font-size: 2.5rem;
    }

    .hero-buttons {
        justify-content: center;
    }

    .methodology-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .flow-diagram {
        flex-direction: column;
        gap: 15px;
    }

    .flow-arrow {
        transform: rotate(90deg);
    }

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

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

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

    .section-title {
        font-size: 2rem;
    }

    .final-cta h2 {
        font-size: 2rem;
    }

    .final-cta-buttons {
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }

    .hero,
    .concept,
    .talent-framework,
    .methodology-core,
    .classic-cases,
    .final-cta {
        padding: 60px 0;
    }

    .hero-text .main-title {
        font-size: 2rem;
    }

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

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