/* 全局设定 */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: sans-serif; line-height: 1.6; color: #333; }

/* 导航栏 */
header { background: #000; padding: 15px 0; position: sticky; top: 0; z-index: 1000; }
.nav-wrapper { display: flex; justify-content: space-between; align-items: center; max-width: 900px; margin: auto; padding: 0 20px; }
.logo { color: #fff; font-weight: bold; }
nav a { color: #fff; text-decoration: none; margin-left: 15px; font-size: 0.9rem; }

/* 首屏资源区 (核心) */
.hero-download { 
    height: 80vh; 
    /* 核心修改：使用背景图，并叠加一层半透明黑色遮罩以保证文字清晰度 */
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('../TuiGril-banner.jpg');
    background-size: cover;          /* 图片铺满整个区域，不留白 */
    background-position: center;     /* 图片居中显示 */
    background-repeat: no-repeat;    /* 不平铺 */
    display: flex; 
    justify-content: center; 
    align-items: center; 
    text-align: center; 
    color: #fff; 
}
.hero-content h1 { font-size: 2.5rem; margin-bottom: 15px; }
.btn-main { 
    display: inline-block; padding: 20px 40px; background: #ff5500; color: #fff; 
    text-decoration: none; font-size: 1.2rem; font-weight: bold; border-radius: 50px;
    box-shadow: 0 4px 15px rgba(255,85,0,0.4); transition: 0.3s;
}
.btn-main:hover { transform: scale(1.05); background: #ff7700; }
.tips { margin-top: 15px; font-size: 0.9rem; opacity: 0.8; }

/* 确保页脚居中并拥有良好的视觉间距 */
footer {
    text-align: center;      /* 水平居中 */
    padding: 30px 20px;      /* 上下留白 */
    background: #1a1a1a;     /* 黑色背景 */
    color: #777;             /* 灰色文字 */
    font-size: 14px;         /* 字号 */
    margin-top: 50px;        /* 顶部间距 */
    width: 100%;             /* 宽度铺满 */
}

/* 模块布局 */
.module { padding: 60px 20px; max-width: 900px; margin: auto; text-align: center; }
.model-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-top: 20px; }
.model-item { background: #eee; height: 300px; display: flex; align-items: center; justify-content: center; }

/* 移动端响应式 */
@media (max-width: 768px) {
    .hero-content h1 { font-size: 1.8rem; }
    .model-grid { grid-template-columns: repeat(2, 1fr); }
}