/* 基础重置和手机端适配 */
body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #f4f4f4; /* 浅灰色背景 */
    text-align: center; /* 确保内容居中 */
}

.container {
    width: 100%;
    /* 确保在小屏幕上不出现水平滚动条 */
    overflow-x: hidden; 
}

/* 顶部图片样式 */
.top-image-container {
    width: 100%;
    /* 保持图片的原始比例 */
    overflow: hidden; 
}

.top-image {
    /* 图片宽度占满父容器 */
    width: 100%; 
    /* 确保图片高度自适应 */
    height: auto; 
    /* 可以添加轻微的阴影增加立体感 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
    display: block; /* 移除图片底部的额外空间 */
}

/* 超链按钮样式 (Call-to-Action Button) */
.cta-button {
    display: block; /* 独占一行 */
    width: 80%; /* 按钮宽度 */
    max-width: 400px; /* 最大宽度，防止在大屏幕上过宽 */
    margin: 20px auto; /* 顶部/底部 20px 边距，左右自动居中 */
    padding: 15px 20px;
    
    background-color: #007bff; /* 蓝色背景 */
    color: white; /* 白色文字 */
    text-decoration: none; /* 移除下划线 */
    font-size: 1.2em;
    font-weight: bold;
    border-radius: 8px; /* 圆角 */
    border: none; /* 移除边框 */
    
    /* 添加平滑过渡效果 */
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; 
}

/* 按钮特效：悬停/触摸状态 */
/* 在移动端，:active 伪类在触摸时触发，提供点击反馈 */
.cta-button:hover, 
.cta-button:active {
    background-color: #0056b3; /* 颜色变深 */
    /* 按钮轻微向下和右移动，制造“按下”效果 */
    transform: translateY(2px) translateX(1px); 
    /* 移除阴影，或者改变阴影 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); 
    /* 也可以使用缩放效果： transform: scale(0.98); */
}