:root { --primary:#036EB8; --secondary:#172A88; --accent:#0D8DDC; --text:#0b1220; --muted:#5b6785; --bg:#f6f8fc; }
* { box-sizing: border-box; }
html, body { margin:0; padding:0; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","PingFang SC","Noto Sans SC","Microsoft YaHei",Arial,sans-serif; color: var(--text); background: var(--bg); overflow-x:hidden; }
a { color: var(--primary); text-decoration:none; } a:hover { text-decoration: underline; }
.container { width: min(1200px, 92%); margin: 0 auto; }

.navbar { position: sticky; top:0; z-index:100; background:#fff; border-bottom:1px solid #e6ecf5; }
.navbar .inner { display:flex; align-items:center; justify-content:space-between; padding:12px 0; }
.brand { display:flex; align-items:center; gap:12px; }
:root{
  --logo-h: 40px;        /* 头部 logo 高度 */
  --logo-footer-h: 34px; /* 底部 logo 高度，可略小一点 */
}

/*.brand img { width:42px; height:42px; }  正方形图标改成长条的*/
.navbar .brand img{
  height: var(--logo-h);
  width: auto;           /* 关键：让宽度随比例自适应 */
  object-fit: contain;
  display: block;
}
.footer .brand img{
  height: var(--logo-footer-h);
  width: auto;
  object-fit: contain;
}
@media (max-width: 640px){
  :root{ --logo-h: 32px; --logo-footer-h: 30px; }
  /* 如果导航挤压，可隐藏文字只保留图标 */
  .brand .title{ display:none; }
}

.brand .title { font-weight:700; color: var(--secondary); }
.navlinks a { margin-left:18px; font-weight:600; color:#1b2a4a; padding:6px 10px; border-radius:10px; }
.navlinks a.active, .navlinks a:hover { background: rgba(3,110,184,0.1); color:var(--primary); }

.hero { background: linear-gradient(180deg, rgba(3,110,184,.12), rgba(23,42,136,.08)); padding:72px 0 48px; position:relative; overflow:hidden; }
.hero h1 { font-size:40px; margin:0; color:#0a1a3a; } .hero p { margin:16px 0 24px; color:var(--muted); font-size:18px; }
.kicker { text-transform:uppercase; letter-spacing:.12em; color:var(--primary); font-weight:800; font-size:12px; }
.cta { display:inline-flex; align-items:center; gap:8px; background:var(--primary); color:#fff; padding:12px 18px; border-radius:12px; box-shadow: 0 10px 30px rgba(3,110,184,.25); }
.cta.secondary { background:#fff; color:var(--primary); border:1px solid rgba(3,110,184,.25); }
.badges { display:flex; gap:12px; flex-wrap:wrap; margin-top:18px; }
.badge { background:#fff; border:1px solid #e6ecf5; border-radius:999px; padding:6px 12px; font-size:13px; }

.section { padding:56px 0; } .section h2 { font-size:28px; margin-bottom:10px; } .section p.lead { color: var(--muted); margin-top:0; }
.grid { display:grid; grid-template-columns: repeat(12,1fr); gap:20px; }
.card { grid-column: span 12; background:#fff; border:1px solid #edf1f7; border-radius:16px; padding:18px; transition: transform .2s, box-shadow .2s; }
.card:hover { transform: translateY(-3px); box-shadow: 0 14px 40px rgba(3,110,184,.12); }
.card h3 { margin:8px 0; font-size:20px; } .card p { color:#3f4a66; }
.card .tag { display:inline-block; background: rgba(23,42,136,.08); color: var(--secondary); padding:4px 10px; border-radius:999px; font-size:12px; margin-right:8px; }
@media(min-width:720px){ .card { grid-column: span 6; } } @media(min-width:1024px){ .card { grid-column: span 4; } }

.feature { display:grid; grid-template-columns: 1.1fr 1fr; gap:32px; align-items:center; }
.feature .illus { background: linear-gradient(120deg, rgba(3,110,184,.18), rgba(23,42,136,.10)); border-radius:18px; height:230px; border:1px dashed rgba(3,110,184,.25); display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--secondary); }
.feature ul { padding-left:18px; line-height:1.8; } .feature li { margin-bottom:6px; }

.toolbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.search { flex:1 1 280px; display:flex; gap:8px; } .search input { flex:1; padding:10px 12px; border-radius:12px; border:1px solid #dfe6f4; outline:none; }
.chips { display:flex; gap:8px; flex-wrap:wrap; } .chip { padding:6px 10px; border-radius:999px; border:1px solid #dfe6f4; background:#fff; cursor:pointer; user-select:none; } .chip.on { background:rgba(3,110,184,.1); color:var(--primary); border-color: rgba(3,110,184,.25); }

.gallery img { width:100%; border-radius:12px; display:block; }

.small { font-size:13px; color: var(--muted); } .smallbtn { padding:8px 12px; border-radius:10px; border:1px solid rgba(3,110,184,.25); background:#fff; }

.footer { background:#0c163a; color:#cbd5f6; padding:40px 0 18px; }
.footer a { color:#d7e3ff; }
.footer .cols { display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr; gap:28px; }
.footer h4 { margin:0 0 10px; color:#fff; }
.footer .contact li { list-style:none; margin-bottom:10px; }
.footer .bottom { margin-top:26px; border-top:1px solid rgba(255,255,255,.1); padding-top:16px; font-size:14px; color:#aab6ee; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }

/* Certificates (hmask/htrack constrained row) */
.hwrap { position: relative; }
.hmask { width:100%; max-width:100%; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; padding-bottom:12px; }
.htrack { display:inline-flex; gap:16px; width:max-content; }
.hwrap .hnav { position:absolute; top:50%; transform:translateY(-50%); border:none; width:36px; height:36px; border-radius:10px; background:rgba(255,255,255,.95); color:#1b2a4a; box-shadow:0 6px 18px rgba(3,110,184,.18); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.hwrap .hnav.prev { left:6px; }
.hwrap .hnav.next { right:6px; }
@media (max-width: 640px){ .hwrap .hnav.prev { left:4px; } .hwrap .hnav.next { right:4px; } }
.hmask.drag { cursor:grabbing; }
.cert { flex:0 0 220px; min-width:220px; max-width:220px; background:#fff; border:1px solid #edf1f7; border-radius:14px; padding:10px; cursor:pointer; transition: transform .2s, box-shadow .2s; }
.cert:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(3,110,184,.12); }
.cert img { width:100%; height:280px; object-fit:cover; border-radius:10px; background:#f2f6ff; }
.cert figcaption { margin-top:8px; font-size:13px; color:#3f4a66; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Lightbox */
#lightbox { display:none; position:fixed; inset:0; align-items:center; justify-content:center; z-index:1000; }
.lb-backdrop { position:absolute; inset:0; background:rgba(10,20,40,.6); backdrop-filter: blur(2px); }
.lb-content { position:relative; background:#fff; padding:16px; border-radius:16px; max-width:90vw; max-height:90vh; display:flex; flex-direction:column; align-items:center; }
#lb-img { max-width:82vw; max-height:76vh; border-radius:12px; }
.lb-close { position:absolute; top:8px; right:10px; border:none; background:#fff; color:#1b2a4a; font-size:24px; width:36px; height:36px; border-radius:10px; cursor:pointer; box-shadow:0 2px 10px rgba(0,0,0,.15); }


/* --- page gutters + robust grids + slider constraints --- */
:root { --container: min(1200px, 92vw); }
.container { width: var(--container); margin-inline:auto; }
.section .container { padding-inline: 8px; }

/* prevent grid children from overflowing columns */
.feature { grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); }
.feature > * { min-width: 0; }

/* certificate rows */
.hwrap { position:relative; overflow:hidden; }       /* keep arrows inside */
.hmask { width:100%; max-width:100%; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; padding-bottom:12px; }
.htrack { display:inline-flex; gap:16px; width:max-content; }
.hmask.drag { cursor:grabbing; }
.cert { flex:0 0 220px; min-width:220px; max-width:220px; }

/* --- htrack sizing fallback for all browsers --- */
.htrack{
  display:flex;           /* fallback: consistent flexbox */
  flex-wrap:nowrap;       /* single line */
  width:max-content;      /* modern browsers */
  min-width:max-content;  /* ensure sum(widths) */
}
/* if max-content not supported, inline-flex makes width = content */
@supports not (width: max-content){
  .htrack{display:inline-flex;}
}

/* 兼容现有 class="cta smallbtn" 的按钮 */
.cta.smallbtn{
  background:#fff;
  color:var(--primary) !important;
  border:1px solid rgba(3,110,184,.25);
  padding:8px 12px; border-radius:10px;
}
.cta.smallbtn:hover{ border-color:var(--primary); box-shadow:0 6px 18px rgba(3,110,184,.18); }

/* 概述  富文本的段落与小标题样式 */
.richtext p{ margin: 0 0 10px; line-height: 1.8; }
.richtext .subhead{
  font-weight: 800;
  display: block;
  margin: 14px 0 6px;
  color: #0c163a;
}

/* 详情页头图（案例/产品通用）：固定尺寸 + 自适应裁剪 */
.feature .illus{
  position: relative;
  width: 840px;     /* 桌面固定宽度 */
  height: 360px;    /* 桌面固定高度 */
  max-width: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(120deg, rgba(3,110,184,.18), rgba(23,42,136,.10));
  border: 1px dashed rgba(3,110,184,.25);
}
.feature .illus .featured-media{
  width: 100%;
  height: 100%;
  object-fit: cover;  /* 关键：裁剪以充满容器 */
  display: block;
}
/* 响应式 */
@media (max-width:1200px){
  .feature .illus{ width: 680px; height: 320px; }
}
@media (max-width:960px){
  .feature .illus{ width: 100%; height: 220px; }
}

/* 让头图与画廊的媒体在裁剪时始终居中 */
.feature .illus .featured-media,
.media-card .media {
  object-fit: cover;
  object-position: 50% 50%; /* 居中裁剪 */
}

/* 兼容少数不支持 object-fit 的旧内核（兜底） */
@supports not (object-fit: cover) {
  .feature .illus { position: relative; overflow: hidden; }
  .feature .illus .featured-media {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%; min-height: 100%;
    width: auto; height: auto;
  }
}