:root{
      --container:1400px;
      --gap:20px;
      --radius:12px;
      --bg-soft:#f5f7fa;
      --text:#212529;
      --muted:#6c757d;
      --brand:#e63946;
    }

    *{margin:0;padding:0;}
    body{background-color: rgb(244, 245, 247); font-family: Arial, sans-serif; color:var(--text);}
    img{max-width:100%;display:block;}
    a{text-decoration:none;color:inherit;}
    .container{max-width:var(--container);margin:0 auto;padding:0 var(--gap);}

    /* ===== 头部导航 ===== */
    .site-header{
      position:fixed;
      top:0;
      left:0;
      right:0;
      height:64px;
      background:#fff;
      display:flex;
      align-items:center;
      z-index:1000;
      box-shadow:0 2px 8px rgba(0,0,0,0.1);
    }
    .header-inner{
      display:flex;
      align-items:center;
      width:100%;
      max-width:var(--container);
      padding:0 var(--gap);
    }
    .logo img{
      height:48px;
      width:auto;
      margin-left:140px;
    }

    main{padding-top:72px;}
    /* 顶部栏本身你原来的可以保留，这里只补 header-inner / nav 部分 */


    /* ===== Banner 左文右图 ===== */
    .banner-content{
      display:flex;
      justify-content:flex-start;
      align-items:stretch;
      gap:60px;
      position:relative;
    }
    .banner-text{
      flex:1;
      display:flex;
      flex-direction:column;
      padding-left:60px;
      padding-right:60px;
      margin-top:50px;
    }
    .banner-text h1{
      font-size:clamp(32px,4vw,44px);
      font-weight:800;
      margin-bottom:16px;
      text-align:center;
      margin-top:-10px;
    }
    .banner-text h1.highlight{color:rgba(0,0,0,.9)}
    .banner-text p{
      font-size:18px;
      color:rgb(5 1 1);
      line-height:1.6;
      margin:8px 0 16px 0;
      text-align:center;
    }
    .btn-group{
      display:flex;
      justify-content:center;
      margin-top:16px;
    }
    .btn-red{
      padding:20px 40px;
      border-radius:16px;
      background:var(--brand);
      color:#fff;
      font-weight:600;
      display:inline-block;
    }
    .banner-image{
      flex:1;
      display:flex;
      align-items:flex-start;
      margin-top:50px;
    }
    .banner-image img{
      width:100%;
      border-radius:12px;
    }

    /* ===== Banner 下方说明文字 ===== */
    .banner-desc{text-align:center;margin:70px auto;}
    .banner-desc h1{font-size:clamp(28px,3.5vw,28px);font-weight:800;margin-bottom:12px;}
    .banner-desc h3{font-size:clamp(16px,2.2vw,16px);font-weight:400;color:rgba(0,0,0,0.6);line-height:1.6;margin:0;}

    /* ===== 统计区 ===== */
    .features-content{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:40px;
      text-align:center;
      margin:60px auto;
      max-width:1400px;
    }
    .feature-item p{
      font-size:clamp(28px,3vw,36px);
      font-weight:800;
      margin-bottom:6px;
      color:#423f3d;
    }
    .feature-item span{font-size:14px;color:var(--muted);}

    /* ===== 功能区 ===== */
    .features{padding:64px 0;background:transparent;margin-bottom:5px;}
    .section-title{
      text-align:center;font-size:clamp(22px,3.2vw,34px);font-weight:800;margin:0 0 28px;
    }
    .feature-grid{display:grid;gap:30px;grid-template-columns:repeat(3,minmax(0,1fr));}
    .feature-card{
      display:flex;gap:14px;align-items:flex-start;background:transparent;border:none;padding:20px;
    }
    .feature-card .icon{
      width:48px;height:48px;display:grid;place-items:center;background: rgba(5,85,255,.10);border-radius:10px;
    }
    .feature-card .icon img{width:28px;height:28px;opacity:.9;}
    .feature-card h3{margin:2px 0 6px;font-size:16px;font-weight:800;}
    .feature-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.65;}

    /* ===== 底部 ===== */
    .site-footer{background:#000;color:#fff;padding:24px 0;margin-top:5px;}
    .footer-inner{display:flex;align-items:flex-start;gap:24px;flex-wrap:wrap;}
    .friend-links{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:10px 18px;
      flex:1;
    }
    .friend-links{
      display:grid;
      grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
      gap:8px 16px;
      padding:0;
      margin:0;
      list-style:none;
    }
    .friend-links li{
      display:flex;
      align-items:center;
    }
    .friend-links a{
      display:block;
      width:100%;
      color:#fff;
      text-decoration:none;
      line-height:28px;
    }
    .friend-links a:hover{
      text-decoration:underline;
      opacity:1;
    }

    .sitemap{flex:0 0 auto;}
    .sitemap a{color:#fff;font-weight:700;text-decoration:none;}
    .sitemap a:hover{text-decoration:underline;}

    /* ===== 手机端默认响应式 ===== */
    @media (max-width:1024px){
      .logo img{margin-left:0 !important;}
      .banner-content{
        flex-direction:column;
        align-items:stretch;
        text-align:center;
        gap:20px;
        padding-top:40px;
      }
      .banner-text{
        width:100vw;
        text-align:center;
      }
      .banner-text h1{
        font-size:clamp(28px,6vw,36px);
        margin-bottom:8px;
      }
      .banner-text p{
        display:block;
        font-size:16px;
        text-align:center;
        width:100%;
        margin:0 auto 16px auto;
        line-height:1.6;
      }
      .btn-group{flex-direction:column;align-items:center;gap:16px;margin-top:16px;}
      .banner-image{
        width:100vw;
        margin-left:50%;
        transform:translateX(-50%);
      }
      .banner-image img{
        width:100vw;
        height:70vh;
        object-fit:cover;
        border-radius:0;
      }
      .feature-grid{grid-template-columns:1fr;gap:16px;}
      .features{margin-bottom:5px;}
      .friend-links{grid-template-columns:1fr;gap:12px 0;}
    }

    /* ===== 手机端左文字+按钮+照片单独样式 ===== */
    @media (max-width:1024px){
      .banner-content,
      .banner-text,
      .banner-image{
        max-width:100vw !important;
        width:100vw !important;
        padding:0 !important;
        margin:0 !important;
      }
      .btn-red{
        padding:14px 28px;
        font-size:18px;
      }
      .banner-content{
        position:relative;
        left:-20px;
      }
      .banner-text{
        margin-top:60px;
        text-align:left;
        padding:0 16px;
        margin-top:40px !important;
      }
      .banner-image{
        width:100%;
        margin:16px 0 0 0;
        padding:0;
        transform:none;
      }
      .banner-image img{
        width:100%;
        height:auto;
        border-radius:0;
        display:block;
      }
      body,html{
        overflow-x:hidden;
        width:100vw;
      }
    }
/* ===== 推荐模块整体样式（PC 端保持不变） ===== */
.recommend-section{
  width:100%;
  max-width:1400px;
  margin:40px auto;
  padding:0 20px;
}

.recommend-title{
  text-align:center;
  font-size:28px;
  font-weight:800;
  margin-bottom:20px;
}

.recommend-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.recommend-item{
  display:block;
  background:#fff;
  border-radius:12px;
  padding:18px;
  box-shadow:0 2px 8px rgba(0,0,0,0.08);
  transition:all .2s ease;
  text-align:center;
}

.recommend-item:hover{
  transform:translateY(-4px);
  box-shadow:0 6px 16px rgba(0,0,0,0.12);
}

.recommend-id{
  display:block;
  color:#777;
  margin-bottom:6px;
  font-size:14px;
  text-align:center;
}

.recommend-text{
  color:#0366ff;
  font-size:18px;
  font-weight:700;
  line-height:1.4;
  text-align:center;
  word-break:break-word;
}

/* ===== 手机端：单列 + 左右各 5px 间距，整体居中 ===== */
@media (max-width:768px){

  /* 整个模块左右留 5px */
  .recommend-section{
    padding:0 5px !important;
    margin:0 auto !important;
    width:100% !important;
    box-sizing:border-box;
  }

  /* 栅格容器也左右对称 */
  .recommend-grid{
    grid-template-columns:1fr;
    gap:12px;
    padding:0 0 !important;      /* 重置，防止右边溢出 */
    margin:0 auto !important;
    width:100% !important;
  }

  /* ★ 决定性一行：强制左右 5px 内间距，完全对称 */
  .recommend-item{
    padding:20px;
    margin:0 auto;
    width:100%;
    box-sizing:border-box;
    text-align:center;
  }

  .recommend-text{
    font-size:20px;
  }
}


</style>