/* ================= 重置与基础样式 ================= */
      * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
      }

      body {
          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Microsoft YaHei", sans-serif;
          background-color: #f5f7fa;
          color: #333;
          display: flex;
          justify-content: center;
      }

      main {
          display: flex;
          flex-direction: column;
          flex: 1; /* 让 main 填满 .container 除掉 header/footer 后的空间 */
          min-height: 0; /* 防止内容溢出导致滚动条异常 */
      }

      .container {
          width: 100%;
          max-width: 1920px; /* 贴合设计稿宽度 */
          background-color: #fff;
          min-height: 100vh;
          display: flex;
          flex-direction: column;
      }

      /* ================= 顶部导航栏 ================= */
      .header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 16px 60px;
          background-color: #fff;
      }

      .header-logo {
          display: flex;
          align-items: center;
          gap: 10px;
      }

      .header-logo img {
          height: 38px; /* 具体尺寸根据实际Logo调整 */
      }

      .header-logo span {
          font-size: 20px;
          font-weight: bold;
          color: #0056b3;
      }

      .header-nav {
          font-size: 14px;
          color: #666;
      }

      .header-nav a {
          color: #0056b3;
          text-decoration: none;
          margin: 0 5px;
      }

      /* ================= 主体/横幅区域 ================= */
      .hero {
          display: flex;
          justify-content: space-evenly;
          align-items: center;
          position: relative;
          overflow: hidden;
          flex: 1;
          min-height: 300px; 
      }

    .hero-bg-img {
        position: absolute; /* 绝对定位，脱离文档流 */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        
        /* 关键属性：模拟 background-size: cover */
        object-fit: cover; 
        
        /* 确保图片在底层，不遮挡文字内容 */
        z-index: 0; 
    }

      .hero-content {
          max-width: 50%;
          z-index: 1;
      }

      .hero-title {
          font-size: 54px;
          color: rgba(51, 51, 51, 1);
          /* margin-bottom: 24px; */
          font-weight: 500;
      }

      .hero-desc {
          font-size: 15px;
          line-height: 1.8;
          color: #3b5a79;
          max-width: 600px;
          margin-top: 32px;
      }

      .hero-image-box {
          width: 40%;
          display: flex;
          justify-content: center;
          align-items: center;
          z-index: 1;
      }

      .hero-image-box img {
          width: 400px;
          height: 400px;
      }

      /* ================= 下载卡片区域 ================= */
      .download-section {
          display: flex;
          justify-content: center;
          gap: 40px;
          background-color: #fff;
          align-items: center;
          height: 320px;
      }

      .card {
          position: relative;
          width: 240px;
          height: 240px;
          border: 1px solid #e5e9f2;
          border-radius: 10px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          text-decoration: none;
          color: #333;
          transition: all 0.3s ease;
          cursor: pointer;
      }

      .card:hover {
          box-shadow: 0 10px 20px rgba(0,0,0,0.08);
          transform: translateY(-5px);
      }

      /* 新旧标识角标 */
      .card-tag {
          position: absolute;
          top: 0;
          right: 0;
          width: 50px; 
          height: 50px; 
          font-size: 12px;
          color: #fff;
          border-bottom-left-radius: 8px;
 overflow: hidden;
      }

.card-tag img {
    width: 100%;
    height: 100%;
    object-fit: fill; /* 强制拉伸填满，适应不规则角标形状 */
    display: block;   /* 消除图片底部的默认间隙 */
}


      .card-icon-box {
          width: 64px;
          height: 64px;
          margin-bottom: 20px;
          display: flex;
          justify-content: center;
          align-items: center;
          /* 这里的图标可以使用 FontAwesome 或 SVG 替换 */
      }
      
      .card-icon-box img {
          width: 52px;
          height: 52px;
      }

      .card-title {
          font-size: 18px;
          font-weight: 600;
          margin-bottom: 10px;
          color: #1a3b5d;
      }

      .card-subtitle {
          font-size: 13px;
          color: #888;
      }

      /* ================= 底部 ================= */
      .footer {
          text-align: center;
          padding: 14px 0;
          font-size: 12px;
          color: #999;
          border-top: 1px solid #f0f0f0;
          background-color: #f5f5f5;;
      }

      /* ================= 响应式适配 (可选) ================= */
      @media (max-width: 1200px) {
          .download-section {
              flex-wrap: wrap;
          }
      }
      @media (max-width: 768px) {
          .hero {
              flex-direction: column;
              padding: 40px 20px;
              text-align: center;
          }
          .hero-content { max-width: 100%; }
          .hero-image-box { width: 80%; margin-top: 30px; }
          .download-section { padding: 30px 20px; }
      }