:root{
  --bg: #f7f8fa;
  --card: #ffffff;
  --text: #1f2937;
  --muted: #064b80;
  --brand: #0460ab;
  --brand-dark:#0284c7;
  --accent:#22c55e;
  --danger:#fbbe14;
  --shadow: 0 8px 20px rgba(0,0,0,.06);
  --radius: 16px;
}
.hero .lead {
  color: #111235;
}

.logo {
  height: 30px;       /* 控制 logo 高度 */
  width: auto;        /* 保持比例 */
  vertical-align: middle; /* 让文字和图标对齐 */
  margin-right: 8px;  /* 图标和文字之间留点空隙 */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif;color:var(--text);background:var(--bg);line-height:1.6}
img,video{max-width:100%;display:block;border-radius:12px}
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--brand-dark);text-decoration:underline}
.container{width:min(1120px,92%);margin:0 auto}
main {
  padding-top: 80px; /* 👈 这个数值和 header 的高度大约一致 */
}
.header {
  position: fixed;       /* 固定位置 */
  top: 0;                /* 离页面顶部 0 */
  left: 0;               /* 从左侧对齐 */
  width: 100%;           /* 占满全宽 */
  z-index: 1000;         /* 确保它盖在视频和其他内容上 */
  background: rgba(255, 255, 255, 0.8); /* 半透明背景（可选） */
  backdrop-filter: blur(10px);          /* 毛玻璃效果（可选） */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 添加轻微阴影 */
}
/* 字体 */
body {
  font-family: 'Syne', sans-serif;
}


.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.nav .brand{display:flex;gap:10px;align-items:center;font-weight:800}
.brand .dot{width:12px;height:12px;border-radius:50%;background:var(--brand)}
.nav ul{list-style:none;display:flex;gap:18px;margin:0;padding:0}
.nav a.active{font-weight:700;color:var(--brand-dark)}
.btn{
  display:inline-block;background:var(--brand);color:white;padding:10px 14px;border-radius:10px;
  box-shadow:var(--shadow);border:0;font-weight:600
}
.btn:hover{background:var(--brand-dark);text-decoration:none}
.hero{padding:56px 0 28px}
.hero .wrap{display:grid;grid-template-columns: 1.1fr .9fr;gap:28px;align-items:center}
.badge{display:inline-flex;gap:8px;align-items:center;padding:6px 10px;border-radius:999px;background:#e0f2fe;color:#0369a1;font-weight:700;font-size:13px}
.h1{font-size:clamp(28px,5vw,44px);line-height:1.15;margin:10px 0 12px}
.lead{color:var(--muted);font-size:18px}
.grid{display:grid;gap:22px}
.cards{grid-template-columns:repeat(3,1fr)}
.card{
  background:var(--card);border:1px solid #e5e7eb;border-radius:var(--radius);
  padding:18px;box-shadow:var(--shadow)
}
.card h3{margin:6px 0 8px}
.kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:6px}
.kpi .pill{background:#eef2ff;color:#3730a3;padding:8px 10px;border-radius:12px;font-weight:700}
.section{padding:26px 0}
.section h2{font-size:clamp(22px,3.5vw,32px);margin:0 0 12px}
.two-col{grid-template-columns:1fr 1fr}
.muted{color:var(--muted)}
.figure{display:grid;gap:8px}
.figure figcaption{font-size:13px;color:var(--muted)}
.table-wrap{overflow:auto;border-radius:12px;border:1px solid #e5e7eb;background:var(--card);box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse}
th,td{padding:12px 14px;border-bottom:1px solid #e5e7eb;text-align:left;font-size:15px}
thead th{background:#f1f5f9;font-weight:800}
.tag{display:inline-block;background:#ecfeff;color:#155e75;border:1px solid #cffafe;padding:4px 8px;border-radius:999px;font-size:12px;font-weight:700}
.footer{margin:36px 0 28px;color:var(--muted);font-size:14px}
.callout{
  border-left:6px solid var(--accent);padding:14px 16px;background:#ecfdf5;border-radius:12px;margin:10px 0
}
.warning{border-left-color:var(--danger);background:#fef2f2}
.media{aspect-ratio:16/9;background:#e5e7eb;display:grid;place-items:center;border:1px solid #d1d5db;border-radius:12px}
figure{margin:0}
.list-check{margin:0;padding-left:20px}
.list-check li{margin:6px 0}
hr{border:0;border-top:1px solid #e5e7eb;margin:26px 0}

.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero .container.wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  z-index: 2;
}
.container.wrap {
  display: flex;                  /* 开启 Flex 布局 */
  flex-direction: column;         /* 纵向排列 */
  justify-content: center;        /* 垂直居中 */
  align-items: center;            /* 水平居中 */
  text-align: center;             /* 文本居中 */
  min-height: 100vh;              /* 高度占满一屏 */
  padding: 0 20px;                /* 两边留空，防止太贴边 */
  position: relative;
  z-index: 10;                    /* 保证文字在视频上方 */
}
.h1 {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* Responsive */
@media (max-width: 900px){
  .hero .wrap{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .two-col{grid-template-columns:1fr}
}