:root{
    --bg-0:#00183a; --bg-1:#002449; --bg-2:#0b3a73;
    --ink:#eaf4ff; --muted:#8fa8c8; --faint:#5e769b;
    --cyan:#35d6ff; --blue:#29a8df; --gold:#ffb020; --amber:#f5a623;
    --pink:#e94f8a; --green:#7ac943; --purple:#8352c9;
    --line:rgba(53,214,255,.22);
    --font:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  }

  .hero{position:relative; width:100%; height:100vh; height:100dvh; min-height:560px; overflow:hidden; background:var(--bg-0)}

  /* 文字层 */
  /* 背景层：科幻高空俯瞰城市夜景线路图（位于大地图之下，仅道路网格 + 发光光线，无建筑实体） */
  #map-bg{position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; display:block}
  #map{position:absolute; inset:0; z-index:2; display:block}

  /* 文字层 */
  .ov{position:absolute; inset:0; pointer-events:none; z-index:3}
  /* 文字防遮挡：左侧与底部加深色渐变垫底，光线条始终在文字之下 */
  .ov::before{content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(90deg, rgba(0,24,58,.92) 0%, rgba(0,24,58,.62) 10%, rgba(0,24,58,0) 22%),
               linear-gradient(0deg, rgba(0,24,58,.88) 0%, rgba(0,24,58,0) 16%)}
  .box-l{z-index:3}
  .tip,.legend{z-index:3}
  /* 首屏文字块整体上移 70px（09-22 起 20px；本次指令再 +50px，共上移 70px；纯位移，比例/结构不变） */
  .box-l{position:absolute; left:3.5vw; top:50%; transform:translateY(-50%); max-width:min(480px,30vw); margin-top:-70px}
  .eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:14px; letter-spacing:.16em;
    color:var(--cyan); border:1px solid var(--line); border-radius:99px; padding:5px 13px; background:rgba(10,28,54,.5); backdrop-filter:blur(6px)}
  h1{font-size:clamp(33px,4.3vw,68px); line-height:1.3; margin:10px 0 0; font-weight:800; letter-spacing:-.01em}
  .sr-only{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
  .sub{margin-top:22px; font-size:clamp(15px,1.15vw,19px); line-height:1.8; color:#fff; font-weight:700; max-width:30em; text-shadow:0 1px 8px rgba(0,24,58,.9)}
  .sub .gold{color:var(--gold)}
  .kpis{display:flex; gap:72px; margin-top:10px; flex-wrap:wrap}
  .kpi b{display:block; font-size:clamp(29px,3vw,46px); font-weight:800; color:#fff; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
  .kpi span{font-size:19px; font-weight:700; color:var(--faint); letter-spacing:.04em}

  /* 首屏二维码组（微信公众号 + 名片）：绝对定位挂在文字块正下方，不占文档流 → 文字排版/间距/居中位置均不受影响 */
  /* 初始 visibility:hidden：待字体就绪、对齐稳定后再由脚本显现，消除加载期字体换用导致的跳动 */
  .qr{position:absolute; left:0; top:calc(100% + 16px); margin:0; display:flex; align-items:flex-start; gap:30px; visibility:hidden}
  .qr-item{margin:0; display:flex; flex-direction:column; align-items:center; gap:6px}
  .qr-item img{display:block; width:clamp(104px,15vw,124px); height:auto; border-radius:10px; background:#fff;
    box-shadow:0 8px 24px rgba(0,0,0,.42)}
  .qr-item figcaption{font-size:13px; color:var(--muted); font-weight:600; letter-spacing:.02em; white-space:nowrap; text-align:center; width:0; min-width:100%}
  /* 桌面端：二维码尺寸随视口高度自适应，避免超出首屏被裁切；过矮视口不显示 */
  @media (min-width:901px){
    .qr{top:calc(100% + 14px)}
    .qr-item img{width:clamp(64px, calc(50vh - 276px), 124px)}
  }
  @media (min-width:901px) and (max-height:760px){
    .qr{top:calc(100% + 8px)}
    .qr figcaption{font-size:12px}
  }
  @media (min-width:1500px) and (max-height:860px){
    .qr-item img{width:clamp(64px, calc(50vh - 322px), 110px)}
  }
  @media (min-width:901px) and (max-height:660px){ .qr{display:none} }
  @media (min-width:1500px) and (max-height:710px){ .qr{display:none} }

  /* 图例 + 说明：同一区块，图例在上、说明在下，整体贴右下角（说明位于图例区块下方） */
  .map-meta{position:absolute; right:5vw; bottom:clamp(3px,0.7vh,10px); z-index:3; max-width:min(560px,52vw);
    display:flex; flex-direction:column; align-items:flex-end; gap:5px; text-align:right}
  .legend{display:flex; gap:18px; flex-wrap:wrap; font-size:14px; line-height:1.3; color:var(--muted); justify-content:flex-end}

  /* 提示条（说明）：承接在图例区块下方 */
  .tip{margin:0; font-size:13.5px; color:var(--faint); letter-spacing:.02em; line-height:1.35}
  @media (min-height:900px){ .map-meta{bottom:18px} }

  /* 节点浮层（悬停/点击时出现：地区名 + 一个随机业务标签） */
  #tip{position:absolute; z-index:5; display:none; transform:translate(-50%,-140%);
    background:rgba(6,18,38,.94); border:1px solid var(--line); border-radius:10px; padding:9px 15px 10px;
    font-size:16px; font-weight:700; white-space:nowrap; box-shadow:0 10px 30px rgba(0,0,0,.5); pointer-events:none}
  #tip b{color:#fff}
  #tip s{text-decoration:none; color:var(--gold); font-weight:700}

  /* 服务品类轮播弹层 */
  #svc-tip{position:absolute; z-index:6; display:none; transform:translate(-50%,-110%);
    background:rgba(6,18,38,.96); border:1px solid rgba(53,214,255,.55); border-radius:12px;
    padding:10px 16px 11px; max-width:min(260px,80vw); white-space:nowrap;
    box-shadow:0 14px 40px rgba(0,0,0,.55); pointer-events:none; backdrop-filter:blur(8px)}
  #svc-tip.left{transform:translate(-6%,-110%)}
  #svc-tip.right{transform:translate(-94%,-110%)}
  #svc-tip.below{transform:translate(-50%,12px)}
  #svc-tip.left.below{transform:translate(-6%,12px)}
  #svc-tip.right.below{transform:translate(-94%,12px)}
  #svc-tip b{font-size:15px; color:var(--gold)}
  #svc-tip s{text-decoration:none; font-size:14px; color:var(--cyan); font-weight:600}
  @media(max-width:900px){#svc-tip{max-width:78vw}}

  @media (max-width:900px){
    .hero{height:100dvh; min-height:560px}
    .box-l{left:5vw; right:5vw; top:clamp(58px,7vh,96px); transform:none; max-width:none; margin-top:0}
    /* 移动端恢复首屏说明文字（原为 display:none，导致内容缺失） */
    .sub{display:block; margin-top:7px; font-size:15px; line-height:1.7; max-width:none}
    .kpis{gap:18px; margin-top:8px}
    .map-meta{left:5vw; right:5vw; bottom:8px; max-width:none; align-items:center; text-align:center}
    .legend{gap:10px; font-size:12px; justify-content:center}
    .tip{display:none}
    .vline{display:none}
  }
  /* 横屏 / 矮屏（高度不足 560px）：精简文案，避免首屏被迫双向滚动 */
  @media (max-width:900px) and (max-height:560px){
    .hero{min-height:520px}
    .sub{display:none}
    .box-l{top:6vh; margin-top:0}
    .kpis{margin-top:6px}
    h1{font-size:clamp(24px,5.9vw,37px)}
  }
  /* 手机横屏（宽 ≥600 且高 <560）：改用左右布局，文案在左、地图在右，互不遮挡 */
  @media (min-width:600px) and (max-width:900px) and (max-height:560px){
    .hero{min-height:0; height:100dvh}
    /* 顶部对齐（不再垂直居中），给说明文字留出可预算的高度，避免顶到固定导航 */
    .box-l{left:3.5vw; right:auto; top:60px; transform:none; max-width:min(260px,29vw); margin-top:0}
    h1{font-size:clamp(21px,3.3vw,31px); margin-top:6px}
    /* 恢复被隐藏的简介段（原 display:none 导致横屏内容缺失），限 2 行并缩小字号 */
    .sub{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
         margin-top:5px; font-size:13px; line-height:1.6; max-width:none}
    .kpis{gap:14px; margin-top:6px}
    .kpi b{font-size:26px}
    .map-meta{left:auto; right:3vw; bottom:8px; max-width:none; align-items:flex-end; text-align:right}
    .kpi span{font-size:15px}
  }

/* ===================== 整站布局（深色科技风，与地图协调） ===================== */
:root{
  --bg:#00183a; --bg2:#0a244b; --panel:rgba(16,26,48,.66);
  --bd:rgba(86,150,230,.16); --cyan:#35d6ff; --red:#e63946; --gold:#ffb020;
  --txt:#e9eff8; --muted:#94a8c6; --grad:linear-gradient(135deg,#35d6ff,#7b6cff);
}
.nav .links a{padding:7px 13px;border-radius:9px;font-size:18px;color:var(--muted);transition:.18s}
.nav .links a:hover{color:#fff;background:rgba(255,255,255,.1)}
.nav .links a.active{color:#fff;background:rgba(255,255,255,.14);font-weight:700}
.nav.scrolled{background:rgba(0,24,58,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--bd)}
.badge{position:absolute;top:14px;right:14px;font-size:13px;color:var(--gold);
  border:1px solid rgba(255,176,32,.4);padding:3px 8px;border-radius:8px}
.shots.two{grid-template-columns:repeat(2,1fr)}
@media(max-width:780px){.shots.two{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.shots.two{grid-template-columns:1fr}}
.shot{aspect-ratio:4/3;border-radius:14px;border:1px dashed var(--bd);
  background:linear-gradient(135deg,rgba(53,214,255,.06),rgba(123,108,255,.06));
  display:grid;place-items:center;color:var(--muted);font-size:13px;text-align:center;padding:10px;overflow:hidden}
.shot img{width:100%;height:100%;object-fit:cover;border-radius:10px;display:block}
.more-link{margin:26px 0 0;text-align:right}
.more-link a{color:var(--gold);font-size:16px;font-weight:600;text-decoration:none}
.more-link a:hover{text-decoration:underline}
.foot .col h4{margin:0 0 12px;font-size:16px;color:var(--cyan)}
.foot .col p{color:var(--muted);font-size:15.5px;display:block;margin:6px 0}

  /* ==== 首屏以下：浅色版 ==== */
  .below{background:#f5f8fc; color:#16273e}
  .below .sec-head .k{color:#0a7ea4}
  .below .sec-head h2, .below h2{color:#12233c}
  .below .sec-head p{color:#5a6b82}
  .below .sub{color:#5a6b82; text-shadow:none}
  .below .card{background:#fff; border-color:#dde6f1; box-shadow:0 2px 10px rgba(23,43,77,.05)}
  .below .card:hover{border-color:#7cc7e8; box-shadow:0 10px 26px rgba(23,43,77,.1)}
  .below .card h3{color:#12233c}
  .below .card p{color:#5a6b82}
  .below .card .ic{background:rgba(10,126,164,.09); color:#0a7ea4}
  .below .tag{background:rgba(10,126,164,.08); color:#0a7ea4; border-color:rgba(10,126,164,.2)}
  .below .badge{color:#b26a00; border-color:rgba(178,106,0,.4)}
  .below .note{color:#8a5300; background:rgba(255,176,32,.1); border-color:rgba(178,106,0,.35)}
  .below .shot{background:#edf2f9; border-color:#c6d3e4; color:#6b7c93}
  .below .shot b{color:#0a7ea4}
  .below .more-link a{color:#b26a00}
  .below footer{background:#fff; border-top:1px solid #dde6f1}
  .below .foot .col h4{color:#0a7ea4}
  .below .foot .col p{color:#5a6b82}
    .below .foot .bot{color:#8595ab; border-top-color:#e4ebf4}
  /* 首页合作项目精选预览 */
  .below .pp-list{list-style:none; margin:0; padding:0; display:grid; gap:12px}
  .below .pp-item{display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; background:#fff; border:1px solid #dde6f1; border-left:3px solid #0a7ea4; border-radius:12px; padding:14px 18px; transition:.18s}
  .below .pp-item:hover{border-color:#7cc7e8; box-shadow:0 8px 22px rgba(23,43,77,.08)}
  .below .pp-main{display:flex; flex-direction:column; gap:5px; min-width:0}
  .below .pp-title{font-weight:700; color:#12233c; font-size:16px; line-height:1.45; text-decoration:none}
  .below .pp-title:hover{color:#0a7ea4}
  .below .pp-meta{display:flex; gap:10px; flex-wrap:wrap; align-items:center; color:#5a6b82; font-size:13.5px}
  .below .pp-cust{color:#3a4a63}
    .below .pp-tag{display:inline-block; padding:1px 10px; border-radius:20px; font-size:12px; font-weight:600; white-space:nowrap}
  .below .pp-tag.gov{background:rgba(10,126,164,.1); color:#0a7ea4}
  .below .pp-tag.biz{background:rgba(178,106,0,.12); color:#b26a00}
  .below .pp-tag.other{background:#eef2f7; color:#6b7c93}
  .below .pp-amt{font-weight:800; color:#0a7ea4; font-size:16px; white-space:nowrap; text-align:right}
  @media(max-width:640px){.below .pp-item{grid-template-columns:1fr; gap:8px} .below .pp-tag{justify-self:start} .below .pp-amt{text-align:left; font-size:15px}}
  /* 主营产品（首页区块，沿用 .below 浅色系） */
  .below .prod-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
  .below .prod-card{margin:0; display:flex; flex-direction:column; background:#fff; border:1px solid #dde6f1; border-radius:16px; overflow:hidden; box-shadow:0 2px 10px rgba(23,43,77,.05); transition:.22s}
  .below .prod-card:hover{border-color:#7cc7e8; box-shadow:0 10px 26px rgba(23,43,77,.1); transform:translateY(-3px)}
  .below .prod-img{overflow:hidden; background:#eef3f8}
  .below .prod-img img{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; display:block}
  .below .prod-card figcaption{padding:16px 20px 20px}
  .below .prod-card h3{margin:0 0 8px; font-size:20px; color:#12233c}
  .below .prod-card p{margin:0; color:#5a6b82; font-size:15.5px; line-height:1.72}
  @media(max-width:900px){.below .prod-grid{grid-template-columns:1fr 1fr}}
  @media(max-width:620px){.below .prod-grid{grid-template-columns:1fr}}