* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Microsoft YaHei", sans-serif;
}
html { scroll-behavior: smooth; }
body { color: #333; line-height: 1.7; }
.container { width: 1200px; max-width: 94%; margin: 0 auto; }
img { max-width: 100%; display: block; }
a { text-decoration: none; }
ul { list-style: none; }

:root {
  --red: #e6212a;
  --red-hover: #c41a22;
}

/* 导航 */
.navbar {
  position: fixed; top:0; left:0; width:100%;
  background:#fff; box-shadow:0 2px 10px rgba(0,0,0,0.08);
  z-index:999; padding:12px 0;
}
.nav-container {
  display:flex; justify-content:space-between; align-items:center;
  width:1200px; max-width:94%; margin:0 auto;
}
.nav-logo img { width:58px; height:58px; object-fit:contain; }
.nav-menu { display:flex; gap:32px; align-items:center; }
.nav-link { font-size:16px; color:#444; transition:.3s; }
.nav-link:hover { color:var(--red); }
.download-btn {
  padding:9px 24px; background:var(--red); color:#fff;
  border-radius:50px; transition:.3s;
}
.download-btn:hover { background:var(--red-hover); }

main { margin-top:82px; }

/* 首页展示区 */
.hero-section {
  display:flex; align-items:center; justify-content:space-between;
  gap:40px; min-height:85vh; padding:60px 0;
  width:1200px; max-width:94%; margin:0 auto;
}
.hero-left { flex:0 0 52%; }
.hero-right { flex:0 0 45%; }
.banner-img { width:100%; border-radius:12px; }

.slogan { font-size:22px; color:#555; margin-bottom:8px; }
.title { font-size:52px; font-weight:700; color:var(--red); margin-bottom:20px; line-height:1.2; }
.desc { font-size:16px; color:#666; margin-bottom:36px; line-height:1.9; }

.btns { display:flex; gap:16px; margin-bottom:46px; }
.red-btn {
  padding:14px 32px; background:var(--red); color:#fff;
  border-radius:50px; font-size:15px; transition:.3s;
}
.red-btn:hover { background:var(--red-hover); }

.data-group { display:flex; gap:50px; }
.data h3 { font-size:28px; color:var(--red); font-weight:700; margin-bottom:4px; }
.data p { font-size:15px; color:#777; }

/* 翻译 */
.translate-section { padding:80px 0; background:#f7f8fa; text-align:center; }
.translate-section h2 { font-size:30px; margin-bottom:36px; }
.translate-box {
  max-width:780px; margin:0 auto; background:#fff;
  padding:36px; border-radius:16px; box-shadow:0 4px 18px rgba(0,0,0,0.05);
}
.lang { display:flex; gap:16px; align-items:center; margin-bottom:22px; justify-content:center; }
.lang select { padding:11px 18px; border:1px solid #eee; border-radius:8px; outline:none; }
.lang span { font-size:18px; color:#666; }
.translate-box textarea {
  width:100%; height:126px; padding:18px; border:1px solid #eee;
  border-radius:10px; resize:none; outline:none; margin-bottom:16px;
}
.translate-btn {
  width:100%; padding:14px; background:var(--red); color:#fff;
  border:none; border-radius:10px; font-size:16px; cursor:pointer; transition:.3s;
}
.translate-btn:hover { background:var(--red-hover); }

/* 功能 */
.features { padding:80px 0; }
.features h2 { text-align:center; font-size:30px; margin-bottom:40px; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.card {
  background:#f9f9f9; padding:36px 24px; border-radius:16px;
  text-align:center; transition:.3s;
}
.card:hover { transform:translateY(-6px); box-shadow:0 6px 16px rgba(0,0,0,0.06); }
.card img { width:76px; height:76px; margin:0 auto 22px; }
.card h3 { font-size:19px; margin-bottom:12px; }
.card p { color:#666; font-size:15px; }

/* 教程 */
.tutorial { padding:80px 0; background:#f7f8fa; text-align:center; }
.tutorial h2 { font-size:30px; margin-bottom:36px; }
.tutorial-box { display:flex; align-items:center; justify-content:center; gap:60px; }
.tutorial-box img { max-width:420px; border-radius:12px; }
.step { display:flex; align-items:center; gap:16px; margin:24px 0; text-align:left; }
.step span {
  width:32px; height:32px; background:var(--red); color:#fff;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
}

/* 关于 */
.about { padding:80px 0; text-align:center; }
.about h2 { font-size:30px; margin-bottom:20px; }
.about p { max-width:800px; margin:0 auto; color:#666; }

/* 下载横幅 */
.download-banner {
  padding:66px 0; background:var(--red); color:#fff; text-align:center;
}
.download-banner h2 { font-size:28px; margin-bottom:16px; }
.download-banner p { font-size:16px; margin-bottom:28px; }
.banner-btn { background:#fff; color:var(--red); font-weight:500; }
.banner-btn:hover { background:#f5f5f5; }

/* 页脚 */
.footer { background:#222; color:#fff; padding:32px 0; text-align:center; }

/* 下载页 */
.download-page {
  margin-top:82px; padding:80px 0; min-height:80vh;
}
.download-page h1.title {
  text-align:center; margin-bottom:50px;
}
.download-layout {
  display:flex; align-items:center; gap:40px;
  width:1200px; max-width:94%; margin:0 auto 50px;
}
.download-left { flex:0 0 45%; text-align:center; }
.download-left img {
  max-width:400px; border-radius:16px; margin:0 auto;
}
.download-right { flex:0 0 52%; }
.download-cards {
  display:grid; grid-template-columns:repeat(2,1fr); gap:20px;
}
.download-card {
  background:#fff; padding:30px; border-radius:16px;
  text-align:center; box-shadow:0 4px 12px rgba(0,0,0,0.05);
  transition:.3s; border:1px solid #f0f0f0;
}
.download-card:hover {
  transform:translateY(-6px); box-shadow:0 8px 20px rgba(0,0,0,0.08);
  border-color:var(--red);
}
.download-card h3 { font-size:18px; margin-bottom:8px; }
.download-card p { font-size:14px; color:#777; }

.features-box {
  background:#f7f8fa; padding:40px; border-radius:16px;
  width:1200px; max-width:94%; margin:0 auto; text-align:center;
}
.features-box h2 { font-size:26px; margin-bottom:30px; }
.features-list {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px;
  text-align:left;
}
.features-list li {
  padding:12px 16px; background:#fff; border-radius:8px;
  list-style:none; font-size:15px; color:#555;
}

/* 响应式 */
@media (max-width:992px) {
  .hero-section,.download-layout,.tutorial-box {
    flex-direction:column; text-align:center;
  }
  .hero-left,.hero-right,.download-left,.download-right {
    flex:0 0 100%;
  }
  .btns,.data-group { justify-content:center; }
  .grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:768px) {
  .grid,.download-cards { grid-template-columns:1fr; }
}