/* --- CSS Variables & Reset --- */
        :root {
            /* exact colors requested */
            --primary-purple: rgb(102, 8, 118);
            --accent-blue: rgb(5, 25, 100);
            
            --text-dark: #333333;
            --text-light: #666666;
            --bg-light: #f9f9fb;
            --white: #ffffff;
            --border-color: #e1e1e1;
            --container-width: 1200px;}

        * { margin: 0; padding: 0; box-sizing: border-box;}
        body {
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            color: var(--text-dark);
            background-color: var(--white);
            line-height: 1.6;}
        a { text-decoration: none; color: inherit; transition: color 0.3s;}
        ul { list-style: none;}
        .container {
            max-width: var(--container-width);
            margin: 0 auto;
            padding: 0 20px;}

        /* --- 1. Banner Section --- */
        .hero-banner {
            position: relative;
            height: 550px;
            overflow: hidden;
            background-color: #ddd;
            }
        
        .hero-banner img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: brightness(0.85);}

        .banner-content {
            position: absolute;
            bottom: 60px;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: var(--container-width);
            padding: 0 20px;
            color: var(--white);
            text-shadow: 0 2px 4px rgba(0,0,0,0.5);}

        .banner-content h2 {
            font-size: 42px;
            margin-bottom: 10px;
            font-weight: 700;}

        .banner-content p {
            font-size: 20px;
            max-width: 800px;
            margin-bottom: 20px;}

        /* Banner Controls */
        .banner-controls {
            position: absolute;
            right: 40px;
            bottom: 40px;
            display: flex;
            gap: 10px;}
        .control-btn {
            background: rgba(255,255,255,0.2);
            border: 1px solid var(--white);
            color: var(--white);
            padding: 8px 15px;
            cursor: pointer;
            transition: 0.3s;}
        .control-btn:hover { background: var(--primary-purple); border-color: var(--primary-purple);}

        /* --- 2. Stats Section --- */
        .stats-section {
            background-color: var(--primary-purple);
            color: var(--white);
            padding: 50px 0;}

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            text-align: center;}

        .stat-item h3 {
            font-size: 48px;
            font-weight: 800;
            margin-bottom: 5px;
            color: #d1bce3;}

        .stat-item p {
            font-size: 16px;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 500;}

        /* --- Common Section Styles --- */
        .section {
            padding: 60px 0;}
        .section-title {
            text-align: center;
            margin-bottom: 40px;}
        .section-title h2 {
            font-size: 32px;
            color: var(--primary-purple);
            display: inline-block;
            position: relative;}
        .section-title h2::after {
            content: '';
            display: block;
            width: 60px;
            height: 3px;
            background: var(--accent-blue);
            margin: 10px auto 0;}

/* --- 3. Research Frontier (Updated with Images) --- */
.research-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3列布局 */
    gap: 30px;}

.research-card {
    display: block; /* 让a标签变成块级元素 */
    background: var(--white);
    border-radius: 8px;
    overflow: hidden; /* 保证图片放大时不超出圆角 */
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #eee;}

/* Base Hover Effect: Lift card */
.research-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.12);
    border-color: transparent;}

/* Image Wrapper */
.card-image {
    width: 100%;
    height: 200px; /* 固定图片高度，保证整齐 */
    overflow: hidden;
    position: relative;
    background-color: #eee;}

/* Image Style & Animation */
.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保证图片填满容器且不变形 */
    transition: transform 0.5s ease;}

.research-card:hover .card-image img {
    transform: scale(1.1);}

/* Text Content */
.card-content {
    padding: 24px;
    position: relative;}

/* Title Styling */
.card-content h3 {
    color: var(--accent-blue); /* 深蓝色标题 */
    font-size: 20px;
    margin-bottom: 12px;
    font-weight: 700;
    transition: color 0.3s;}

.research-card:hover .card-content h3 {
    color: var(--primary-purple);}

/* Description Styling */
.card-content p {
    color: var(--text-light);
    font-size: 14px;
    line-height: 1.6;
    margin: 0;}

/* Bottom decorative line (Optional) */
.research-card::after {
    content: '';
    display: block;
    height: 4px;
    width: 0;
    background: var(--primary-purple);
    transition: width 0.3s;}

.research-card:hover::after {
    width: 100%;}

/* Responsive adjustment */
@media (max-width: 900px) {
    .hero-banner{height:auto}
    .banner-content h2{
    font-size: 24px;
    line-height: 29px;
}
    .banner-content p{
    font-size: 15px;
}
    .stats-section{
    padding: 20px 0;
}
    .stats-section .stats-grid{grid-template-columns: repeat(4, 1fr)}
    .stat-item h3{
    font-size: 20px;
}
    .stat-item p{
    font-size: 10px;
}
    .research-grid {
        grid-template-columns: repeat(2, 1fr);}
}

@media (max-width: 600px) {
    .research-grid {
        grid-template-columns: 1fr;}
    .card-image {
        height: 220px;}
}

        /* --- 4. News & Events --- */
        .news-container {
            display: grid;
            grid-template-columns: 1.2fr 0.8fr;
            gap: 30px;}

        /* Left: Highlight Feature */
        .news-feature {
            position: relative;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);}
        .news-feature img {
            width: 100%;
            height: 350px;
            object-fit: cover;
            display: block;}
        .news-feature-content {
            padding: 24px;
            background: var(--white);
            border: 1px solid #eee;
            border-top: none;}
        .tag {
            background: var(--primary-purple);
            color: var(--white);
            padding: 4px 10px;
            font-size: 12px;
            border-radius: 3px;
            text-transform: uppercase;}
        .news-feature-content h3 {
            margin: 10px 0;
            color: var(--accent-blue);
            font-size: 22px;}

        /* Right: List */
        .news-list {
            display: flex;
            flex-direction: column;
            gap: 20px;}
        .news-item {
            display: flex;
            gap: 15px;
            border-bottom: 1px solid #eee;
            padding-bottom: 15px;}
        .news-date {
            text-align: center;
            min-width: 60px;}
        .news-date .day { display: block; font-size: 24px; font-weight: bold; color: var(--primary-purple);}
        .news-date .month { display: block; font-size: 12px; text-transform: uppercase; color: var(--text-light);}
        .news-info h4 { font-size: 16px; margin-bottom: 5px;}
        .news-info h4 a:hover { color: var(--primary-purple);}

        /* --- 5. Recent Highlights --- */
        .highlights-section {
            background-color: var(--bg-light);
            padding: 60px 0;}
        .highlights-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;}
        .highlight-card {
            background: var(--white);
            padding: 40px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            border-top: 5px solid var(--primary-purple);
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);}
        .highlight-card.fund { border-top-color: var(--accent-blue);}

        .highlight-card h3 {
            font-size: 24px;
            color: var(--primary-purple);
            margin-bottom: 15px;}
        .highlight-card.fund h3 { color: var(--accent-blue);}

        .highlight-card p {
            margin-bottom: 25px;
            color: var(--text-light);}
        .btn {
            padding: 10px 24px;
            background: var(--primary-purple);
            color: var(--white);
            font-weight: 600;
            border-radius: 4px;
            transition: background 0.3s;}
        .btn-blue { background: var(--accent-blue);}
        .btn:hover { opacity: 0.9;}

        /* --- Footer --- */
        footer {
            background-color: var(--accent-blue);
            color: #e0e0e0;
            padding: 60px 0 20px;
            font-size: 15px;}
        .footer-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 40px;
            margin-bottom: 40px;}
        .footer-col h4 {
            color: var(--white);
            font-size: 18px;
            margin-bottom: 20px;
            border-bottom: 2px solid rgba(255,255,255,0.2);
            padding-bottom: 10px;
            display: inline-block;}
        .footer-col ul li { margin-bottom: 10px;}
        .footer-link {
            color: inherit;
            text-decoration: none;
            pointer-events: none; /* disable navigation until real links provided */
            cursor: default;
            display: inline-block;}
        .footer-link:hover { color: var(--white); text-decoration: underline;}
        
        .address-box {
            line-height: 1.8;
            border-left: 3px solid var(--primary-purple);
            padding-left: 15px;}

        .copyright {
            text-align: center;
            border-top: 1px solid rgba(255,255,255,0.1);
            padding-top: 20px;
            color: rgba(255,255,255,0.5);
            font-size: 13px;}

        /* --- Responsive Design --- */
        @media (max-width: 900px) {
            .nav-menu { display: none;} /* Simplified mobile handling */
            .menu-toggle {display: block;position: absolute;right: 20px;}
            .stats-grid, .research-grid, .footer-grid, .news-container, .highlights-grid {
                grid-template-columns: 1fr;
                }
            .news-feature img { height: 250px;}
        }