/* ==========================================================================
   好小蚁科技 · 全站统一硬性版式规范层（spec.css）
   --------------------------------------------------------------------------
   定位：本文件在 style.css / premium.css / v7.css **之后**加载，是全站最高优先级。
   任何页面若与本规范冲突，以本文件为准；禁止在页面模板里写内联样式私自改动。

   规范条目：
     1. 背景色块 / 渐变条横向通栏 100%；内容统一约束版心 1320px，左右内边距 24px
        （移动端 16px，流式自适应）
     2. PC 导航高度固定 76px、固定置顶、右侧常驻电话；移动端汉堡折叠菜单
     3. 动效极度克制：禁止批量滚动上浮入场动画；仅保留按钮 hover 颜色过渡；
        全站禁止自动弹出咨询遮罩弹窗
     4. 配色：主色深邃科技蓝 / 标题深炭黑 / 正文深灰 / 基底浅灰白
     5. H 标签层级有序 H1>H2>H3>H4，禁止跳级（由模板保证）
     6. banner：首页首屏 PC 650px；所有内页头部 banner 统一 380px
     7. 卡片网格：业务 / 案例 PC 一行最多 3 张；资讯列表 PC 一行 2 张
     8. 统一转化 CTA 标准文案（见 .cta-std / .cta-text）
   ========================================================================== */

/* ============ 0. 版心：全站唯一内容容器约束 ============ */
:root{
  --wrap:        1320px;
  --wrap-pad:    24px;
  --nav-h:       76px;
  --banner-home: 650px;
  --banner-inner:380px;
  --blue:        #12539E;
  --blue-d:      #0B3A73;
  --blue-l:      #2E7BF6;
  --ink:         #0F1B2A;
  --text:        #2A3341;
  --muted:       #5A6779;
  --bg-soft:     #F5F7FA;
  --line:        #E3E8F0;
}

/* 通栏外壳：所有 section / band 背景天然 100% 铺满 */
.wrap,
.footer .wrap,
.header .wrap,
.topbar .wrap{
  width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--wrap-pad);
}
@media (max-width:860px){
  .wrap,.footer .wrap,.header .wrap,.topbar .wrap{ padding:0 16px; }
}

/* 保险：任何被塞进 .wrap 的 section 也要通栏（防止历史嵌套 BUG 复发） */
.wrap > section,
.wrap > .v7-hero,
.wrap > .v7-sec,
.wrap > .banner,
.wrap > footer,
.wrap > .footer{
  width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
}

/* ============ 1. 导航：PC 高度 76px、固定置顶、右侧常驻电话 ============ */
.header{
  position:fixed; top:0; left:0; right:0; z-index:200;
  height:var(--nav-h);
  background:var(--v7-hdr-bg);
  -webkit-backdrop-filter:saturate(1.4) blur(14px); backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--v7-hdr-line);
  box-shadow:0 1px 0 rgba(15,27,42,.04);
}
.header .wrap{ height:var(--nav-h); display:flex; align-items:center; gap:20px; }
.header .logo img{ max-height:44px; width:auto; }
.header nav{ flex:1; min-width:0; }
.header nav .nav{ display:flex; align-items:center; gap:26px; }
.header nav .nav > li > a{ color:var(--v7-nav-txt); font-size:15px; font-weight:500; }

/* 右上常驻联系电话 */
.header .cta{ display:flex; align-items:center; gap:14px; flex:none; }
.header .cta .hd-tel{
  display:flex; align-items:center; gap:7px;
  font-size:17px; font-weight:700; color:var(--blue);
  font-variant-numeric:tabular-nums; white-space:nowrap; text-decoration:none;
}
.header .cta .hd-tel svg{ width:17px; height:17px; stroke:var(--blue); fill:none; stroke-width:1.9; flex:none; }
.header .cta .hd-tel:hover{ color:var(--blue-l); }

/* 有吸顶导航时，页面内容让出 76px（避免首屏内容被导航压住） */
body{ padding-top:var(--nav-h); }
body:has(.v7-mbar){ padding-bottom:66px; }

@media (max-width:1100px){
  .header .cta .btn{ display:none; }
  .header nav{ display:none; }
  .menu-toggle{ display:block !important; }
}
@media (max-width:600px){
  .header .cta .hd-tel span{ display:none; }   /* 窄屏只留电话图标 + 号码由图标旁文字承担 */
}

/* 移动端导航展开面板 */
@media (max-width:1100px){
  .header nav.open{
    display:block; position:absolute; top:var(--nav-h); left:0; right:0;
    max-height:calc(100vh - var(--nav-h)); overflow-y:auto;
    background:#FFFFFF; border-bottom:1px solid var(--line);
    box-shadow:0 18px 40px -20px rgba(15,27,42,.22); padding:8px 0;
  }
  .header nav.open .nav{ display:block; padding:0 16px; }
  .header nav.open .nav > li{ border-bottom:1px solid var(--v7-line-2); }
  .header nav.open .nav > li > a{ display:block; padding:13px 0; font-size:15.5px; color:var(--ink); }
  .header nav.open .nav .sub{
    position:static; display:block; box-shadow:none; border:0; background:transparent;
    padding:0 0 10px 8px; opacity:1; visibility:visible; transform:none; min-width:0;
  }
  .header nav.open .nav .sub a{ display:block; padding:8px 0; font-size:14px; color:var(--muted); }
}

/* ============ 2. 动效：禁止批量滚动上浮入场动画 ============ */
[data-rv],[data-rv-d]{
  opacity:1 !important;
  transform:none !important;
  visibility:visible !important;
}
*,*::before,*::after{ animation-play-state:running; }
/* 只允许极简 hover 颜色过渡 */
.v7-b,.v7-pane,.card,.box,.win-card,.cty-p,.case-card,.news-card,.btn,.v7-btn,a{
  transition-property:color, background-color, border-color, box-shadow, opacity;
  transition-duration:.18s; transition-timing-function:ease;
}

/* ============ 3. 禁止自动弹出咨询遮罩弹窗 ============ */
/* 保留手动触发的二维码层（#mqr 默认关闭），禁止任何脚本自动加 .on */
.mqr:not(.on){ display:none !important; }

/* ============ 4. banner 高度规范 ============ */
/* 首页首屏：PC 严格 650px（内部自适应压缩，不靠滚动） */
@media (min-width:1025px){
  .v7-hero.is-home,
  .home-banner,
  .index-banner{
    height:var(--banner-home); min-height:var(--banner-home); max-height:var(--banner-home);
    padding:0; overflow:hidden; display:flex; align-items:center;
  }
  .v7-hero.is-home > .wrap{ width:100%; }
  .v7-hero.is-home .v7-hero-grid{
    display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    gap:48px; align-items:center; width:100%;
  }
  .v7-hero.is-home .v7-kicker{ margin-bottom:14px; }
  .v7-hero.is-home .v7-display{ font-size:46px; line-height:1.22; margin-bottom:14px; }
  .v7-hero.is-home .v7-sub{ font-size:15px; line-height:1.7; margin-bottom:20px; max-width:44em; }
  .v7-hero.is-home .v7-act{ margin-bottom:12px; }
  .v7-hero.is-home .hero-cta-line{ margin:10px 0 0; }
  .v7-hero.is-home .v7-pledge{ margin-top:14px; }
  .v7-hero.is-home .v7-monitor{ max-height:430px; overflow:hidden; }
}

/* 首屏之下：这通电话能拿到什么 */
.hero-takeaway{
  background:#0B3A73;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.hero-takeaway .wrap{ display:flex; }
.hero-takeaway .ht-row{
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  padding:15px 0; font-size:14.5px; color:rgba(255,255,255,.88); width:100%;
}
.hero-takeaway .ht-lb{ font-weight:700; color:#FFFFFF; white-space:nowrap; }
.hero-takeaway .ht-it b{ color:var(--blue-l); margin-right:6px; font-weight:800; }
.hero-takeaway .ht-tail{ margin-left:auto; color:rgba(255,255,255,.7); font-size:13.5px; }
@media (max-width:860px){
  .hero-takeaway .ht-row{ gap:10px; font-size:13px; padding:12px 0; }
  .hero-takeaway .ht-tail{ margin-left:0; flex:1 1 100%; }
}
/* 内页统一 380px */
.subbanner,
.page-banner,
.inner-banner{
  min-height:var(--banner-inner) !important;
  padding:0 !important;
  display:flex; align-items:center;
  background:linear-gradient(135deg,#0B3A73 0%,#12539E 55%,#2E7BF6 100%) !important;
  color:#FFFFFF;
}
.subbanner .wrap,.page-banner .wrap,.inner-banner .wrap{ position:relative; z-index:2; }
.subbanner h1,.page-banner h1,.inner-banner h1{ color:#FFFFFF; font-size:38px; margin:0 0 12px; }
.subbanner p,.page-banner p,.inner-banner p{ color:rgba(255,255,255,.85); margin:0; max-width:760px; font-size:16.5px; }
.subbanner::before,.subbanner::after,
.page-banner::before,.page-banner::after{ display:none !important; }

@media (max-width:860px){
  :root{ --banner-home:auto; --banner-inner:220px; }
  .v7-hero.is-home,.home-banner,.index-banner{ min-height:auto; }
  .subbanner h1,.page-banner h1,.inner-banner h1{ font-size:27px; }
}

/* ============ 5. 面包屑统一 ============ */
.crumb{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:13.5px; padding:16px 0; border-bottom:1px solid var(--line);
  color:var(--muted); background:transparent;
}
.crumb a{ color:var(--muted); text-decoration:none; }
.crumb a:hover{ color:var(--blue); }
.crumb i{ font-style:normal; opacity:.45; }
.crumb span{ color:var(--ink); font-weight:600; }

/* ============ 6. 卡片网格：业务 / 案例 3 列，资讯 2 列 ============ */
.card-grid-3,
.business-grid,
.case-grid,
.cty-list{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px;
}
.card-grid-2,
.news-grid,
.article-grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px;
}
@media (max-width:1024px){
  .card-grid-3,.business-grid,.case-grid,.cty-list{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
  .card-grid-2,.news-grid,.article-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
}
@media (max-width:700px){
  .card-grid-3,.business-grid,.case-grid,.cty-list,
  .card-grid-2,.news-grid,.article-grid{ grid-template-columns:1fr; gap:16px; }
}

/* 通用卡片外观 */
.spec-card{
  background:#FFFFFF; border:1px solid var(--line); border-radius:12px;
  overflow:hidden; display:flex; flex-direction:column;
  transition:box-shadow .18s ease, border-color .18s ease;
}
.spec-card:hover{ border-color:rgba(18,83,158,.38); box-shadow:0 14px 34px -18px rgba(15,27,42,.25); }
.spec-card .sc-img{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--bg-soft); }
.spec-card .sc-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.spec-card .sc-body{ padding:20px 22px 22px; flex:1; }
.spec-card .sc-tag{
  display:inline-block; font-size:12px; font-weight:600; letter-spacing:.04em;
  color:var(--blue); background:rgba(18,83,158,.08); border-radius:4px; padding:3px 9px; margin-bottom:10px;
}
.spec-card h3{ font-size:18px; line-height:1.5; color:var(--ink); margin:0 0 10px; }
.spec-card p{ font-size:14.5px; line-height:1.75; color:var(--muted); margin:0; }
.spec-card .sc-meta{
  display:flex; align-items:center; gap:14px; font-size:13px; color:var(--muted);
  padding-top:12px; margin-top:12px; border-top:1px solid var(--v7-line-2);
}

/* ============ 7. 筛选标签 ============ */
.filter-tags{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 28px; }
.filter-tags a,.filter-tags button{
  padding:7px 16px; border-radius:999px; font-size:14px; cursor:pointer;
  border:1px solid var(--line); background:#FFFFFF; color:var(--muted);
  text-decoration:none; font-family:inherit;
  transition:color .18s ease, background-color .18s ease, border-color .18s ease;
}
.filter-tags a:hover{ color:var(--blue); border-color:rgba(18,83,158,.4); }
.filter-tags .on{ background:var(--blue); border-color:var(--blue); color:#FFFFFF; font-weight:600; }

/* ============ 8. 数字分页（禁止无限滚动） ============ */
.pagebar{ display:flex; justify-content:center; align-items:center; gap:8px; margin:38px 0 0; flex-wrap:wrap; }
.pagebar a,.pagebar span{
  min-width:38px; height:38px; padding:0 12px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:8px; border:1px solid var(--line); background:#FFFFFF; color:var(--muted);
  font-size:14px; text-decoration:none; box-sizing:border-box;
}
.pagebar a:hover{ color:var(--blue); border-color:rgba(18,83,158,.45); }
.pagebar span{ background:var(--blue); border-color:var(--blue); color:#FFFFFF; font-weight:700; }

/* ============ 9. 统一转化 CTA 区块 ============ */
.cta-std{
  background:var(--v7-cta-bg); border:1px solid var(--v7-cta-line);
  border-radius:16px; padding:44px 48px; margin:0;
  display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
}
.cta-std .cta-copy{ flex:1 1 420px; min-width:0; }
.cta-std .cta-kicker{
  font-size:12px; font-weight:700; letter-spacing:.16em; color:var(--blue); margin-bottom:10px;
}
.cta-std h2,.cta-std h3{ margin:0 0 12px; font-size:26px; line-height:1.45; color:var(--ink); }
.cta-std .cta-text{ font-size:16px; line-height:1.8; color:var(--text); margin:0 0 6px; }
.cta-std .cta-sub{ font-size:14px; color:var(--muted); margin:8px 0 0; }
.cta-std .cta-act{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.cta-std .cta-act a{ display:inline-flex; align-items:center; gap:7px; height:50px; padding:0 24px;
  border-radius:10px; font-size:15px; font-weight:600; text-decoration:none; white-space:nowrap; }
.cta-std .cta-act svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.9; }
.cta-std .btn-tel{ background:var(--v7-btnmain-bg); color:#FFFFFF; }
.cta-std .btn-tel:hover{ filter:brightness(1.08); }
.cta-std .btn-wx{ background:transparent; border:1px solid var(--v7-ghost-line); color:var(--ink); }
.cta-std .btn-wx:hover{ border-color:var(--blue); color:var(--blue); }
.cta-std .tel-num{ font-variant-numeric:tabular-nums; letter-spacing:.01em; }
@media (max-width:860px){
  .cta-std{ padding:28px 22px; border-radius:12px; }
  .cta-std h2,.cta-std h3{ font-size:21px; }
  .cta-std .cta-act a{ flex:1 1 100%; justify-content:center; }
}

/* CTA 区块内的二维码位（电话/微信优先，二维码是补充） */
.cta-qrs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; padding-top:22px; border-top:1px solid var(--v7-line); }
.cta-qrs .qr-item{ text-align:center; }
.cta-qrs .qr{ width:104px; height:104px; margin:0 auto 10px; background:#FFFFFF; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.cta-qrs .qr img{ width:100%; height:100%; object-fit:contain; display:block; }
.cta-qrs h3{ font-size:14.5px; margin:0 0 4px; color:var(--ink); }
.cta-qrs p{ margin:0; font-size:12.5px; line-height:1.6; color:var(--muted); }
@media (max-width:700px){
  .cta-qrs{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
  .cta-qrs .qr{ width:100%; height:auto; aspect-ratio:1/1; }
}

/* 首屏标准 CTA 辅助文案（紧跟按钮组） */
.hero-cta-line{ margin:16px 0 0; font-size:14.5px; line-height:1.75; }
.hero-cta-line b{ display:block; color:var(--ink); font-size:15px; font-weight:700; }
.hero-cta-line span{ display:block; margin-top:4px; color:var(--muted); font-size:13.5px; }

/* 新闻详情：阅读区 760px + PC 右侧栏，移动端侧边栏下沉 */
.news-layout{ display:grid; grid-template-columns:minmax(0,760px) 300px; gap:60px; align-items:start; }
.news-body{ max-width:760px; min-width:0; }
.news-body p{ line-height:1.7; margin:0 0 1.15em; font-size:16px; color:var(--text); }
.news-body img{ max-width:100%; height:auto; display:block; margin:1.6em auto; border-radius:10px; }
.news-body h2{ font-size:23px; margin:1.9em 0 .8em; }
.news-body h3{ font-size:19px; margin:1.5em 0 .7em; }
.news-side{ position:sticky; top:calc(var(--nav-h) + 20px); }

/* 案例详情：正文 + 右侧相关推荐 */
.case-layout{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:56px; align-items:start; }
.case-main{ min-width:0; }
.case-main h2{ font-size:24px; margin:1.9em 0 .8em; }
.case-main h2:first-child{ margin-top:0; }
.case-layout .news-side .box{
  background:#FFFFFF; border:1px solid var(--line); border-radius:12px; padding:20px 22px; margin-bottom:18px;
}

/* 通用侧栏列表 */
.side-list{ list-style:none; padding:0; margin:0; }
.side-list li{ padding:0 0 10px; margin:0 0 10px; border-bottom:1px solid var(--v7-line-2); }
.side-list li:last-child{ border-bottom:0; margin-bottom:0; padding-bottom:0; }
.side-list a{ color:var(--text); text-decoration:none; font-size:14.5px; line-height:1.6; display:block; transition:color .18s ease; }
.side-list a:hover{ color:var(--blue); }
.side-list .sl-tag{ display:block; font-size:12px; color:var(--blue); margin-bottom:3px; }
.side-list .sl-t{ font-weight:500; }

/* 上一篇 / 下一篇 */
.prev-next{ display:flex; gap:16px; flex-wrap:wrap; margin:32px 0 0; }
.prev-next .pn-item{ flex:1 1 240px; min-width:0; border:1px solid var(--line); border-radius:10px; padding:14px 16px; background:#FFFFFF; }
.prev-next em{ display:block; font-style:normal; font-size:12px; color:var(--muted); margin-bottom:5px; }
.prev-next a{ color:var(--ink); text-decoration:none; font-size:14.5px; font-weight:500; transition:color .18s ease; }
.prev-next a:hover{ color:var(--blue); }

/* 联系页：左信息 + 右地图/表单 */
.contact-layout{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:start; }
.contact-info{ min-width:0; }
.contact-aside{ min-width:0; }
.contact-info h2,.contact-aside h2{ font-size:24px; margin:0 0 18px; }
.ci-block{ padding:20px 0; border-top:1px solid var(--v7-line-2); }
.ci-block h3{ font-size:17px; margin:0 0 10px; color:var(--ink); }
.ci-block p{ margin:0 0 6px; font-size:15px; line-height:1.8; color:var(--text); }
.ci-note{ font-size:13.5px; color:var(--muted); line-height:1.7; }
.ci-tel{
  display:inline-flex; align-items:center; gap:9px; height:52px; padding:0 22px; border-radius:10px;
  background:var(--v7-btnmain-bg); color:#FFFFFF; text-decoration:none; font-size:20px; font-weight:800;
  font-variant-numeric:tabular-nums; letter-spacing:.01em;
}
.ci-tel svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.9; }
.ci-tel:hover{ filter:brightness(1.08); }

.map-box{ border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--bg-soft); }
.map-frame{ display:block; width:100%; height:300px; border:0; }
@media (max-width:900px){
  .map-frame{ height:240px; }
}

/* 表单（辅助定位，弱化视觉权重） */
.contact-form{
  background:var(--bg-soft); border:1px solid var(--line); border-radius:12px; padding:22px 22px 24px;
}
.cf-row{ margin-bottom:14px; }
.cf-row label{ display:block; font-size:13.5px; font-weight:600; color:var(--ink); margin-bottom:6px; }
.cf-row label em{ font-style:normal; color:var(--blue); }
.cf-row input,.cf-row textarea{
  width:100%; box-sizing:border-box; padding:11px 13px; font-size:14.5px; font-family:inherit;
  border:1px solid var(--line); border-radius:9px; background:#FFFFFF; color:var(--text);
}
.cf-row input:focus,.cf-row textarea:focus{ outline:none; border-color:var(--blue); }
.cf-row textarea{ resize:vertical; }
.cf-code-wrap{ display:flex; gap:10px; align-items:center; }
.cf-code-wrap input{ flex:1; }
.cf-code-wrap img{ height:44px; border-radius:8px; border:1px solid var(--line); cursor:pointer; flex:none; }
.cf-submit{
  width:100%; height:46px; border:0; border-radius:10px; cursor:pointer;
  background:var(--v7-btnmain-bg); color:#FFFFFF; font-size:15px; font-weight:600; font-family:inherit;
}
.cf-submit:hover{ filter:brightness(1.08); }

@media (max-width:900px){
  .contact-layout{ grid-template-columns:1fr; gap:32px; }
}

/* 竖向时间轴（简约，无动效） */
.timeline{ list-style:none; padding:0 0 0 26px; margin:0; border-left:2px solid var(--line); }
.timeline li{ position:relative; padding:0 0 26px 18px; }
.timeline li:last-child{ padding-bottom:0; }
.timeline li::before{
  content:""; position:absolute; left:-33px; top:6px; width:12px; height:12px;
  border-radius:50%; background:var(--blue); box-shadow:0 0 0 4px rgba(18,83,158,.12);
}
.timeline .tl-year{
  display:inline-block; font-size:13px; font-weight:700; letter-spacing:.06em;
  color:var(--blue); background:rgba(18,83,158,.08); border-radius:4px; padding:2px 9px; margin-bottom:6px;
}
.timeline h3{ font-size:18px; margin:0 0 6px; color:var(--ink); }
.timeline p{ margin:0; font-size:14.5px; line-height:1.75; color:var(--muted); }

/* 数据统计块 */
.stat-box{
  background:#FFFFFF; border:1px solid var(--line); border-radius:12px;
  padding:26px 22px; text-align:center;
}
.stat-box b{ display:block; font-size:34px; font-weight:800; color:var(--blue); line-height:1.2; font-variant-numeric:tabular-nums; }
.stat-box span{ display:block; margin-top:8px; font-size:14px; color:var(--muted); }

/* 文章头部元信息 */
.news-head{ padding-bottom:18px; margin-bottom:26px; border-bottom:1px solid var(--v7-line-2); }
.news-head .nh-meta{ display:flex; flex-wrap:wrap; gap:16px; font-size:13.5px; color:var(--muted); margin:10px 0 0; }
.news-head .nh-note{ margin:8px 0 0; font-size:13px; color:var(--muted); }

@media (max-width:1024px){
  .news-layout{ grid-template-columns:1fr; gap:36px; }
  .news-side{ position:static; }
  .case-layout{ grid-template-columns:1fr; gap:32px; }
}

/* ============ 11. 资讯卡片封面 16:10 ============ */
.news-card .sc-img{ aspect-ratio:16/10; }

/* ============ 12. 版块间距基准 ============ */
.section,.v7-sec{ padding:72px 0; }
@media (max-width:860px){ .section,.v7-sec{ padding:44px 0; } }
