/* MathOS V3.0 - Authority & Academic Excellence */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;700;900&family=Inter:wght@300;400;600&display=swap');

:root {
    /* 权威色盘 */
    --royal-blue: #002147;     /* 牛津蓝：深邃、智慧、学术 */
    --gold-accent: #C5A059;    /* 鎏金：荣耀、第一名、高价值 */
    --paper-white: #FCFBF9;    /* 米白：模仿高级纸张的质感 */
    --text-dark: #1A1A1A;      /* 纯黑偏灰：阅读舒适 */
    --text-grey: #555555;      /* 辅助文字 */
    
    /* 字体系统 */
    --font-heading: 'Merriweather', 'Times New Roman', serif; /* 标题：严肃衬线体 */
    --font-body: 'Inter', -apple-system, sans-serif;         /* 正文：清晰无衬线 */
}

body {
    background-color: var(--paper-white);
    color: var(--text-dark);
    font-family: var(--font-body);
    line-height: 1.8; /* 增加行高，提升阅读从容感 */
    margin: 0;
}

/* 布局容器 */
.container {
    max-width: 960px;
    margin: 0 auto;
    padding: 60px 24px;
}

/* 顶部导航：极简、留白 */
header {
    background: white;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    padding: 20px 0;
}

.nav-content {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
}

.brand {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 1.2rem;
    color: var(--royal-blue);
    letter-spacing: 0.5px;
}

/* Hero 区域：像一张名片或书封 */
.hero-section {
    text-align: center;
    padding: 80px 0;
    border-bottom: 1px solid #eee;
}

h1 {
    font-family: var(--font-heading);
    font-size: 3.2rem;
    color: var(--text-dark);
    margin-bottom: 16px;
    letter-spacing: -1px;
}

.subtitle {
    font-size: 1.2rem;
    color: var(--text-grey);
    font-weight: 300;
    max-width: 600px;
    margin: 0 auto 40px auto;
}

/* 信任背书模块 (Credentials) */
.credentials-bar {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 40px;
    flex-wrap: wrap;
}

.credential-item {
    font-family: var(--font-heading);
    color: var(--royal-blue);
    font-weight: 700;
    font-size: 0.95rem;
    border-top: 2px solid var(--gold-accent);
    padding-top: 10px;
}

/* MathOS 核心方法论模块 */
.section-title {
    font-family: var(--font-heading);
    font-size: 2rem;
    text-align: center;
    margin-top: 80px;
    margin-bottom: 40px;
    position: relative;
}

.section-title::after {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    background: var(--gold-accent);
    margin: 15px auto 0;
}

/* 严谨的卡片设计 */
.program-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.program-card {
    background: white;
    border: 1px solid #e0e0e0;
    padding: 30px;
    transition: all 0.3s ease;
    position: relative;
}

.program-card:hover {
    border-color: var(--royal-blue);
    box-shadow: 0 10px 30px rgba(0,33,71,0.08);
    transform: translateY(-2px);
}

.program-card h3 {
    font-family: var(--font-heading);
    color: var(--royal-blue);
    margin-top: 0;
}

/* 按钮：克制、精英感 */
.btn-primary {
    display: inline-block;
    background-color: var(--royal-blue);
    color: white;
    padding: 14px 32px;
    font-size: 0.9rem;
    letter-spacing: 1px;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.2s;
}

.btn-primary:hover {
    background-color: #003366; /* 更深一点的蓝 */
}

/* 强调文字 */
.highlight {
    color: var(--royal-blue);
    font-weight: 600;
    background: rgba(0,33,71, 0.05);
    padding: 0 4px;
}

/* =========================================
   Google Design Update for MathOS V3.0
   ========================================= */

/* 1. 按钮升级：胶囊形状 + 悬浮反馈 */
.btn-primary {
    /* 之前的样式保留，修改以下属性 */
    border-radius: 999px; /* Google 标志性的胶囊按钮 */
    padding: 18px 48px;   /* 更大的点击区域，体现从容 */
    font-family: var(--font-body); /* 按钮文字用无衬线体，更清晰 */
    text-transform: uppercase;     /* 增加严肃感 */
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1); /* 静态微阴影 */
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1); /* Google 的标准缓动曲线 */
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 33, 71, 0.2); /* 悬浮时阴影扩散 */
    background-color: var(--gold-accent); /* 保持金色 */
    color: var(--royal-blue);
}

/* 2. 卡片升级：Material Surface 质感 */
.program-card {
    background: white;
    /* 大圆角是 Modern CSS 的特征，不要用小圆角 */
    border-radius: 24px; 
    border: 1px solid rgba(0,0,0,0.06); /* 极淡的边框 */
    padding: 40px;
    position: relative;
    overflow: hidden;
    /* 移除默认阴影，保持纸张平整感，仅在 hover 时浮起 */
    box-shadow: none; 
    transition: all 0.4s cubic-bezier(0.2, 0, 0, 1);
}

/* 悬浮时的“反重力”感 */
.program-card:hover {
    transform: translateY(-8px) scale(1.01);
    border-color: transparent;
    box-shadow: 0 20px 40px rgba(0, 33, 71, 0.08); /* 深邃而柔和的阴影 */
}

.program-card h3 {
    font-size: 1.5rem;
    margin-bottom: 16px;
}

/* 3. 布局升级：Bento Grid (不对称网格) */
/* 需要修改 HTML 结构来配合，或者直接用 CSS Grid 强行布局 */
.program-grid {
    display: grid;
    /* 自动填充，但最小宽度变大，保证阅读体验 */
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); 
    gap: 24px;
    padding: 0 24px;
}

/* 让第一个卡片（核心卡片）跨两列，形成视觉重点 */
@media (min-width: 960px) {
    .program-card:first-child {
        grid-column: span 2;
        background-color: var(--royal-blue); /* 核心卡片反色设计 */
        color: white;
    }
    
    /* 核心卡片内的标题变色 */
    .program-card:first-child h3 {
        color: var(--gold-accent);
    }
    
    .program-card:first-child p {
        color: rgba(255,255,255,0.9);
    }
}

/* 4. 滚动显现动画 (Scroll Reveal) */
/* 给卡片加上这个 class，或者通过 JS 动态添加 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.program-card {
    animation: fadeInUp 0.8s ease-out backwards;
}

/* 让卡片依次出现，增加节奏感 */
.program-card:nth-child(1) { animation-delay: 0.1s; }
.program-card:nth-child(2) { animation-delay: 0.2s; }
.program-card:nth-child(3) { animation-delay: 0.3s; }

/* 5. 版式微调：Google 风格的留白 */
.section-title {
    font-size: 2.8rem; /* 更大的标题，建立绝对层级 */
    margin-bottom: 60px;
    font-weight: 300; /* 细字体显得更高级 */
}