/* 基础重置 */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: "Noto Sans SC", "Segoe UI", Roboto, Arial, sans-serif; color:#222; background:#f5f7fa; line-height:1.6; }

/* 布局容器 */
.container { width: 92%; max-width: 1200px; margin: 0 auto; }

/* 顶部导航 */
.nav { position: sticky; top:0; background: rgba(255,255,255,0.95); border-bottom:1px solid #e8eef6; z-index:20; }
.nav-inner { display:flex; align-items:center; justify-content:space-between; padding:14px 0; }
.logo { font-weight:700; letter-spacing:1px; }
.menu a { margin-left:18px; color:#3b4a61; text-decoration:none; font-weight:500; }

/* Hero */
.hero { padding:80px 0; }
.hero-inner { display:flex; gap:32px; align-items:center; }
.hero-text { flex:1; }
.hero-text h1 { font-size:36px; color:#0b2a4a; margin-bottom:12px; }
.hero-text p { color:#44607e; margin-bottom:18px; }
.btn { display:inline-block; background:#0b66ff; color:#fff; padding:10px 18px; border-radius:8px; text-decoration:none; }

/* 图片占位 */
.hero-image { width:420px; height:260px; border-radius:12px; background-image:url('https://images.unsplash.com/photo-1581092580345-e0d23cbdf1dc?auto=format&fit=crop&w=1200&q=80'); background-size:cover; background-position:center; }

/* 产品格网 */
.products { display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap:20px; margin:40px 0; }
.card { background:#fff; border-radius:10px; overflow:hidden; box-shadow: 0 6px 18px rgba(15,30,60,0.06); transition:transform .18s ease, box-shadow .18s ease; display:flex; flex-direction:column; }
.card:hover { transform:translateY(-6px); box-shadow:0 12px 26px rgba(15,30,60,0.09); }
.thumb { height:160px; background-size:cover; background-position:center; }
.card-body { padding:14px; flex:1; display:flex; flex-direction:column; }
.card-body h3 { margin-bottom:8px; color:#07203a; }
.card-body p { color:#556b83; flex:1; margin-bottom:12px; }
.detail-btn { border: none; background:#0b66ff; color:#fff; padding:10px; border-radius:8px; cursor:pointer; }

/* about/contact */
.about, .contact { background: #fff; padding:22px; border-radius:10px; margin-bottom:18px; box-shadow: 0 6px 16px rgba(10,20,40,0.03); }

/* Modal */
.modal { position:fixed; inset:0; display:none; align-items:center; justify-content:center; background: rgba(5,10,20,0.45); z-index:50; }
.modal-dialog { background:#fff; padding:26px; border-radius:10px; width:92%; max-width:560px; position:relative; box-shadow:0 20px 40px rgba(2,8,23,0.4); }
.modal-close { position:absolute; right:12px; top:8px; border:none; background:none; font-size:28px; color:#666; cursor:pointer; }

/* 响应式 */
@media (max-width:900px) {
  .hero-inner { flex-direction:column-reverse; text-align:center; }
  .hero-image { width:100%; height:200px; }
  .menu { display:none; }
}