* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { min-width: 1200px; color: #1f2937; background: #f5f7fb; font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif; line-height: 1.7; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.site-header { height: 72px; padding: 0 5vw; display: flex; align-items: center; background: #ffffff; border-bottom: 1px solid #e5e7eb; position: sticky; top: 0; z-index: 10; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; background: #1f4ed8; color: #fff; font: 600 20px "PingFang SC", sans-serif; }
.brand-text strong { display: block; font-size: 15px; color: #111827; letter-spacing: 1px; }
.brand-text small { font-size: 9px; color: #6b7280; letter-spacing: 2px; }
.nav { margin-left: auto; display: flex; gap: 28px; }
.nav a { color: #4b5563; font-size: 13px; padding: 6px 0; border-bottom: 2px solid transparent; }
.nav a:hover, .nav a.active { color: #1f4ed8; border-bottom-color: #1f4ed8; }
.page-main { width: 1200px; margin: 0 auto; padding: 36px 0 60px; }
.section-title { display: flex; align-items: end; justify-content: space-between; padding-bottom: 14px; margin-bottom: 22px; border-bottom: 1px solid #e5e7eb; }
.section-title h2 { margin: 0; font-size: 22px; color: #111827; }
.section-title span { display: block; font-size: 10px; color: #1f4ed8; letter-spacing: 3px; margin-bottom: 6px; }
.banner { width: 1200px; margin: 0 auto; padding: 64px 0 56px; color: #fff; background: linear-gradient(120deg, #1f4ed8, #2563eb 60%, #38bdf8); }
.banner-inner { width: 1000px; margin: 0 auto; }
.banner h1 { margin: 0 0 18px; font-size: 38px; letter-spacing: 2px; }
.banner p { margin: 0 0 28px; font-size: 14px; line-height: 2; max-width: 700px; opacity: .9; }
.banner .btn-row a { display: inline-block; padding: 10px 24px; margin-right: 12px; font-size: 13px; font-weight: 600; }
.banner .btn-row .primary { background: #fff; color: #1f4ed8; }
.banner .btn-row .ghost { border: 1px solid rgba(255,255,255,.7); color: #fff; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.card { background: #fff; border: 1px solid #e5e7eb; padding: 22px; }
.card h3 { margin: 0 0 10px; font-size: 16px; color: #111827; }
.card p { margin: 0 0 14px; color: #6b7280; font-size: 12px; }
.card a { color: #1f4ed8; font-size: 12px; font-weight: 600; }
.card .img-box { height: 160px; margin: -22px -22px 16px; background: linear-gradient(135deg, #1f4ed8, #38bdf8); display: grid; place-items: center; color: #fff; font-size: 14px; letter-spacing: 2px; }
.card.featured { border-color: #1f4ed8; }
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 28px; }
.stat-row .stat { padding: 20px 22px; background: #fff; border: 1px solid #e5e7eb; }
.stat-row strong { display: block; font-size: 24px; color: #1f4ed8; margin-bottom: 6px; }
.stat-row span { color: #6b7280; font-size: 12px; }
.product-card { display: flex; flex-direction: column; }
.product-card .img-box { height: 180px; margin: -22px -22px 16px; background: linear-gradient(135deg, #1f4ed8, #38bdf8); display: grid; place-items: center; color: #fff; font-size: 16px; letter-spacing: 2px; }
.product-card .meta { color: #9ca3af; font-size: 10px; letter-spacing: 2px; margin-bottom: 6px; }
.news-card time { color: #9ca3af; font-size: 11px; }
.news-card .tag { display: inline-block; margin: 8px 0; padding: 2px 8px; background: #e0e7ff; color: #1f4ed8; font-size: 10px; }
.news-card p { color: #4b5563; font-size: 12px; }
.detail-hero { width: 1200px; margin: 0 auto; padding: 40px 0 24px; display: grid; grid-template-columns: 460px 1fr; gap: 40px; align-items: center; }
.detail-hero .img-box { height: 360px; background: linear-gradient(135deg, #1f4ed8, #38bdf8); display: grid; place-items: center; color: #fff; font-size: 24px; letter-spacing: 4px; }
.detail-hero h1 { margin: 0 0 18px; font-size: 30px; color: #111827; }
.detail-hero .lead { color: #4b5563; font-size: 14px; line-height: 2; }
.detail-hero .meta { color: #6b7280; font-size: 11px; margin-bottom: 18px; }
.detail-hero .actions a { display: inline-block; padding: 9px 20px; margin-right: 10px; font-size: 12px; font-weight: 600; }
.detail-hero .actions .primary { background: #1f4ed8; color: #fff; }
.detail-hero .actions .ghost { border: 1px solid #1f4ed8; color: #1f4ed8; }
.spec-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 24px; margin-top: 20px; padding: 0; }
.spec-list li { list-style: none; padding: 8px 0; border-bottom: 1px dashed #e5e7eb; color: #4b5563; font-size: 12px; }
.spec-list li b { color: #111827; margin-right: 8px; }
.news-detail h1 { font-size: 28px; color: #111827; margin: 0 0 12px; }
.news-detail time { color: #9ca3af; font-size: 11px; }
.news-detail p { color: #374151; font-size: 14px; line-height: 2; }
.site-footer { background: #0f172a; color: #cbd5f5; padding: 36px 5vw; }
.footer-grid { width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.footer-grid h4 { margin: 0 0 12px; color: #fff; font-size: 13px; }
.footer-grid a { display: block; color: #94a3b8; font-size: 11px; margin-bottom: 8px; }
.footer-grid p { color: #94a3b8; font-size: 11px; line-height: 1.8; }
.footer-meta { width: 1200px; margin: 24px auto 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.08); font-size: 10px; color: #64748b; text-align: center; }