:root { --blue: #2563eb; --dark: #0f172a; --gray: #475569; --light: #f1f5f9; --white: #fff; --radius: 12px; }
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:"PingFang SC","Microsoft YaHei",sans-serif; color:var(--dark); line-height:1.8; }
.container { max-width:1100px; margin:0 auto; padding:0 24px; }
.hero { background:linear-gradient(165deg,#0f172a 0%,#1e293b 50%,#0f172a 100%); padding:100px 0 60px; color:#fff; text-align:center; position:relative; overflow:hidden; }
.hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 20%, rgba(37,99,235,.15) 0%, transparent 70%); }
.hero h1 { font-size:2.6rem; font-weight:900; position:relative; z-index:1; }
.hero p { font-size:1.15rem; color:#94a3b8; margin-top:14px; position:relative; z-index:1; max-width:700px; margin-inline:auto; }
.hero .tags { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:20px; position:relative; z-index:1; }
.hero .tag { background:rgba(37,99,235,.2); color:#60a5fa; padding:5px 16px; border-radius:50px; font-size:.82rem; font-weight:600; }
.section { padding:70px 0; }
.section h2 { font-size:1.9rem; font-weight:800; margin-bottom:12px; color:var(--dark); }
.section .sub { color:var(--gray); margin-bottom:40px; font-size:1.05rem; }
.three-col { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:24px; }
.card { background:#fff; border-radius:var(--radius); padding:32px; box-shadow:0 1px 3px rgba(0,0,0,.08); border:1px solid #e2e8f0; }
.card h3 { font-size:1.2rem; margin-bottom:8px; color:var(--blue); }
.card p { color:var(--gray); font-size:.95rem; }
.card .icon { font-size:2rem; margin-bottom:12px; }
table { width:100%; border-collapse:collapse; margin-top:24px; font-size:.93rem; }
th,td { border:1px solid #e2e8f0; padding:12px 16px; text-align:left; }
th { background:var(--light); font-weight:700; color:var(--dark); }
tr:nth-child(even) td { background:#f8fafc; }
.cases { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:24px; }
.case-card { background:#fff; border-radius:var(--radius); padding:28px; box-shadow:0 1px 3px rgba(0,0,0,.08); border-left:3px solid var(--blue); }
.case-card h3 { font-size:1.1rem; margin-bottom:6px; }
.case-card .loc { font-size:.82rem; color:var(--blue); font-weight:600; margin-bottom:8px; }
.case-card p { color:var(--gray); font-size:.9rem; }
.cta { background:linear-gradient(135deg,#2563eb,#1d4ed8); padding:60px 0; text-align:center; color:#fff; margin-top:40px; }
.cta h2 { font-size:1.8rem; color:#fff; margin-bottom:8px; }
.cta p { opacity:.85; margin-bottom:20px; }
.cta a { display:inline-block; background:#fff; color:#2563eb; padding:14px 40px; border-radius:50px; font-weight:700; text-decoration:none; font-size:1rem; }
.footer { background:#0f172a; color:rgba(255,255,255,.5); padding:30px 0; text-align:center; font-size:.82rem; }
.footer a { color:rgba(255,255,255,.65); text-decoration:none; margin:0 6px; }
.bg-light { background:#f8fafc; }

@media (max-width: 768px) {
  .hero { padding: 64px 0 40px; }
  .hero h1 { font-size: 1.7rem; }
  .hero p { font-size: .95rem; }
  .hero .tag { font-size: .7rem; padding: 4px 12px; }
  .section { padding: 44px 0; }
  .section h2 { font-size: 1.4rem; }
  .section .sub { font-size: .9rem; margin-bottom: 24px; }
  .three-col { grid-template-columns: 1fr; gap: 16px; }
  .card { padding: 22px; }
  .card h3 { font-size: 1.05rem; }
  .card p { font-size: .88rem; }
  .cases { grid-template-columns: 1fr; gap: 16px; }
  .case-card { padding: 20px; }
  table { font-size: .8rem; }
  th, td { padding: 8px 10px; }
  .cta { padding: 44px 0; margin-top: 24px; }
  .cta h2 { font-size: 1.3rem; }
  .cta a { padding: 12px 28px; font-size: .9rem; }
  .container { padding: 0 16px; }
}
@media (max-width: 400px) {
  .hero h1 { font-size: 1.35rem; }
  .hero .tags { gap: 6px; }
  th, td { padding: 6px 8px; font-size: .72rem; }
}