/* ============================================================
   乡建院官网 · 蓝图工程美学设计系统 design-system.css
   ------------------------------------------------------------
   用法（开发必读）：
   1. 每个页面 <head> 里引入本文件，禁止重新定义本文件已有的类与变量
   2. 页面私有样式写在页面自己的 <style> 里，只新增、不覆盖
   3. 字号 / 颜色 / 间距一律引用 var(--xxx)，不许写死色值
   4. 本文件数值即设计稿权威值，与 8 个 HTML 原型一一对应
   ------------------------------------------------------------
   设计哲学：建筑蓝图（Blueprint Engineering）
   - 深墨蓝蓝晒底 + 双层坐标网格 = 工程图纸的物质性
   - 赭橙是唯一强调色，占比 < 5%，只用于标线 / 编号 / CTA
   - 宋体承担文化感，等宽字体承担技术感，二者构成张力
   - 直角优先（2px）：圆角是"平面设计感"，直角才是"图纸感"
   ============================================================ */

/* ============ 1. 设计 Token（唯一色彩与字体来源） ============ */
:root{
  /* 蓝晒底：由深到浅 */
  --bp-900:#0B1D33;      /* 页面主底 */
  --bp-850:#0E2440;      /* 次级区块底 */
  --bp-800:#142E4F;      /* 卡片/面板 */
  --bp-700:#1F3F6B;      /* 网格主线 */
  --bp-600:#2B5285;      /* 描边 / 主色 */
  --bp-500:#3D6BA8;      /* 交互态 */
  --bp-400:#5B7A9E;      /* 标注文字 */
  --bp-300:#8FA9C6;      /* 次级文字 */
  --bp-100:#D9E4F0;      /* 近白 */
  --bp-50:#F2F6FB;       /* 正文反白 */

  /* 赭橙：唯一强调色 */
  --ochre:#E8B24A;
  --ochre-soft:#F2CB80;
  --ochre-deep:#B8853A;

  /* 相容旧变量名（页面私有样式 / mobile.css / contact.css 可能引用） */
  --paper:var(--bp-900);
  --paper-2:var(--bp-850);
  --ink:var(--bp-50);
  --ink-soft:var(--bp-300);
  --ink-mute:var(--bp-400);
  --brand:var(--bp-600);
  --brand-deep:var(--bp-900);
  --brand-darker:#07162A;
  --brand-light:var(--bp-400);
  --gold:var(--ochre);
  --gold-soft:var(--ochre-soft);
  --line:rgba(43,82,133,.55);
  --line-soft:rgba(43,82,133,.32);

  /* 字体三层次 */
  --serif:"Noto Serif SC","Songti SC","STSong",serif;
  --sans:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --mono:"SFMono-Regular","JetBrains Mono",Consolas,"Liberation Mono",monospace;

  --maxw:1240px;
}

/* ============ 2. 基础重置与全局 ============ */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--sans);
  background:var(--bp-900);
  color:var(--bp-50);
  font-weight:300;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  letter-spacing:.02em;
}
a{text-decoration:none;color:inherit;}
img{display:block;max-width:100%;}

/* 全站蓝图网格底纹：20px 细格 + 100px 主格 */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(43,82,133,.13) 1px,transparent 1px),
    linear-gradient(90deg,rgba(43,82,133,.13) 1px,transparent 1px),
    linear-gradient(rgba(43,82,133,.26) 1px,transparent 1px),
    linear-gradient(90deg,rgba(43,82,133,.26) 1px,transparent 1px);
  background-size:20px 20px,20px 20px,100px 100px,100px 100px;
}
/* 内容抬到网格层之上 */
.nav,.page-hero,.section,section,footer,header{position:relative;z-index:1;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px;}

/* 图纸标注小字（等宽） */
.anno{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--bp-400);text-transform:uppercase;}
.anno-o{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--ochre);text-transform:uppercase;}

/* ============ 3. 顶部导航（全站固定） ============ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(11,29,51,.86);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line-soft);
}
.nav .wrap{display:flex;align-items:center;height:72px;gap:44px;max-width:1440px;}
.logo{display:flex;align-items:baseline;gap:10px;flex-shrink:0;}
.logo .mark{font-family:var(--serif);font-size:24px;font-weight:700;color:var(--bp-50);letter-spacing:.1em;}
.logo .sub{font-family:var(--mono);font-size:10px;color:var(--bp-400);letter-spacing:.2em;}
.nav .menu{display:flex;gap:32px;margin-left:14px;}
.nav .menu a{
  font-size:14px;color:var(--bp-300);font-weight:400;position:relative;
  padding:6px 0;transition:color .2s;letter-spacing:.04em;
}
.nav .menu a:hover{color:var(--bp-50);}
.nav .menu a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1px;
  background:var(--ochre);transition:width .28s;
}
.nav .menu a:hover::after{width:100%;}
/* 当前页高亮 */
.nav .menu a.on{color:var(--ochre);}
.nav .menu a.on::after{width:100%;}
.nav .cta{margin-left:auto;display:flex;align-items:center;gap:18px;}
.nav .cta .link{
  font-family:var(--mono);font-size:13px;color:var(--bp-300);letter-spacing:.06em;
}
.nav .cta .link:hover{color:var(--ochre);}

/* ============ 4. 按钮（全站唯一三种） ============ */
/* 赭橙实心 —— 全站唯一实心按钮 */
.btn-gold{
  background:var(--ochre);color:#0B1D33;border:0;border-radius:2px;
  font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.12em;
  padding:12px 24px;cursor:pointer;transition:.2s;text-transform:uppercase;
}
.btn-gold:hover{background:var(--ochre-soft);transform:translateY(-1px);}
/* 工程线框按钮（深底用） */
.btn-ghost{
  background:transparent;color:var(--bp-50);border:1px solid var(--bp-600);border-radius:2px;
  font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.12em;
  padding:11px 23px;cursor:pointer;transition:.2s;text-transform:uppercase;
}
.btn-ghost:hover{border-color:var(--ochre);color:var(--ochre);}
/* 浅描边按钮（Hero 用） */
.btn-line{
  background:transparent;color:var(--bp-100);border:1px solid rgba(217,228,240,.34);
  border-radius:2px;font-size:15px;font-weight:300;padding:13px 28px;
  cursor:pointer;transition:.2s;letter-spacing:.06em;
}
.btn-line:hover{border-color:var(--ochre);color:var(--ochre-soft);}
/* 深底实心按钮（浅色弹窗内用） */
.btn-dark{
  background:var(--bp-900);color:var(--bp-50);border:0;border-radius:2px;
  font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.1em;
  padding:12px 24px;cursor:pointer;transition:.2s;
}
.btn-dark:hover{background:var(--bp-800);}

/* ============ 5. 章节通用（section / sec-head） ============ */
section{padding:112px 0;}
.section{padding:88px 0;border-top:1px solid var(--line-soft);}
.sec-head{margin-bottom:56px;position:relative;}
.sec-head .no{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:11px;color:var(--ochre);
  letter-spacing:.22em;font-weight:500;text-transform:uppercase;
}
.sec-head .no::before{content:"";width:34px;height:1px;background:var(--ochre);flex-shrink:0;}
.sec-head h2{
  font-family:var(--serif);font-size:42px;font-weight:700;color:var(--bp-50);
  margin-top:16px;letter-spacing:.04em;line-height:1.3;
}
.sec-head .lead{
  margin-top:16px;font-size:15px;color:var(--bp-400);font-weight:300;
  max-width:640px;line-height:1.9;
}
/* 内页紧凑版标题 */
.sec-head.compact h2{font-size:36px;margin-top:14px;}
.rule{height:1px;background:var(--line-soft);}
.more{
  display:inline-flex;align-items:center;gap:9px;color:var(--bp-100);
  font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;
  border-bottom:1px solid var(--ochre);padding-bottom:4px;transition:.2s;
}
.more:hover{gap:14px;color:var(--ochre);}

/* ============ 6. 内页页头（page-hero + 面包屑） ============ */
.page-hero{
  background:linear-gradient(118deg,#142E4F 0%,#0E2440 48%,#0B1D33 100%);
  padding:158px 0 62px;position:relative;overflow:hidden;
  border-bottom:1px solid var(--line);
}
/* 装饰：同心方框（替代原装饰圆，呼应图纸图框） */
.page-hero::after{
  content:"";position:absolute;right:-80px;bottom:-80px;width:320px;height:320px;
  border:1px solid rgba(232,178,74,.16);border-radius:2px;pointer-events:none;
}
.page-hero::before{
  content:"";position:absolute;right:-20px;bottom:-20px;width:320px;height:320px;
  border:1px solid rgba(43,82,133,.4);border-radius:2px;pointer-events:none;
}
.page-hero .crumb{
  font-family:var(--mono);font-size:11.5px;color:var(--bp-400);
  letter-spacing:.14em;text-transform:uppercase;
}
.page-hero .crumb a:hover{color:var(--ochre);}
.page-hero h1{
  font-family:var(--serif);font-size:46px;font-weight:700;color:var(--bp-50);
  margin-top:18px;letter-spacing:.04em;
}
.page-hero p{
  margin-top:18px;color:var(--bp-400);font-size:15px;font-weight:300;
  max-width:620px;line-height:1.95;
}

/* ============ 7. 数据卡（平台实力等 4 联卡） ============ */
.stat-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border:1px solid var(--line);border-radius:2px;overflow:hidden;background:var(--bp-800);
}
.stat{
  background:rgba(20,46,79,.5);padding:40px 32px 36px;position:relative;
  border-right:1px solid var(--line-soft);transition:.25s;
}
.stat:last-child{border-right:0;}
.stat:hover{background:rgba(31,63,107,.55);}
.stat::before{
  content:"";position:absolute;top:0;left:0;width:0;height:2px;
  background:var(--ochre);transition:width .35s;
}
.stat:hover::before{width:100%;}
.stat .num{
  font-family:var(--serif);font-size:52px;font-weight:700;color:var(--bp-50);
  line-height:1;letter-spacing:.01em;
}
.stat .num small{font-size:20px;color:var(--ochre);margin-left:5px;font-family:var(--mono);font-weight:500;}
.stat .num.is-text{font-size:34px;letter-spacing:.06em;}
.stat .num.is-text small{font-size:15px;margin-left:7px;}
.stat .lab{margin-top:16px;font-size:14px;color:var(--bp-100);font-weight:400;letter-spacing:.04em;}
.stat .desc{
  margin-top:7px;font-family:var(--mono);font-size:10.5px;color:var(--bp-400);
  line-height:1.7;letter-spacing:.04em;
}

/* ============ 8. 服务卡（2 列大卡） ============ */
.svc-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:0;
  border:1px solid var(--line);border-radius:2px;overflow:hidden;background:var(--bp-800);
}
.svc{
  position:relative;background:transparent;padding:44px 42px 40px;
  border-right:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  transition:background .25s;overflow:hidden;
}
.svc:nth-child(2n){border-right:0;}
.svc:nth-last-child(-n+2){border-bottom:0;}
.svc:hover{background:rgba(31,63,107,.4);}
.svc::before{
  content:"";position:absolute;top:0;left:0;width:2px;height:0;
  background:var(--ochre);transition:height .35s;
}
.svc:hover::before{height:100%;}
.svc .head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:22px;}
.svc .idx{
  font-family:var(--mono);font-size:34px;color:rgba(143,169,198,.28);
  font-weight:400;line-height:1;letter-spacing:.02em;
}
.svc .ico{width:42px;height:42px;color:var(--bp-500);flex-shrink:0;transition:color .25s;}
.svc:hover .ico{color:var(--ochre);}
.svc h3{font-family:var(--serif);font-size:25px;font-weight:600;color:var(--bp-50);letter-spacing:.04em;}
.svc .tag{
  display:inline-block;margin-top:12px;font-family:var(--mono);font-size:10.5px;
  color:var(--ochre);background:rgba(232,178,74,.1);padding:4px 10px;border-radius:2px;
  letter-spacing:.08em;border:1px solid rgba(232,178,74,.22);
}
.svc p{margin-top:16px;font-size:13.5px;color:var(--bp-400);font-weight:300;line-height:1.9;min-height:52px;}
.svc .go{
  margin-top:20px;font-family:var(--mono);font-size:12px;color:var(--bp-100);
  font-weight:400;display:inline-flex;gap:8px;align-items:center;
  letter-spacing:.08em;transition:.2s;
}
.svc:hover .go{color:var(--ochre);gap:13px;}

/* ============ 9. 图纸卡片（商城/首页通用） ============ */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.card{
  background:var(--bp-800);border:1px solid var(--line);border-radius:2px;
  overflow:hidden;cursor:pointer;transition:.25s;position:relative;
}
.card:hover{border-color:var(--bp-500);transform:translateY(-4px);box-shadow:0 22px 46px rgba(3,10,20,.5);}
/* 图框：1:1 主图 */
.card .pic{
  aspect-ratio:1/1;height:auto;position:relative;overflow:hidden;
  background:linear-gradient(150deg,#1B3E6B,#0E2440);
  border-bottom:1px solid var(--line-soft);
}
.card .pic::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:
    linear-gradient(rgba(61,107,168,.14) 1px,transparent 1px),
    linear-gradient(90deg,rgba(61,107,168,.14) 1px,transparent 1px);
  background-size:22px 22px;
}
.card .pic svg{position:absolute;inset:0;width:100%;height:100%;opacity:.5;z-index:2;}
.card .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;}
.card .pic .ph{
  position:absolute;top:0;left:0;z-index:3;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  color:var(--bp-100);background:rgba(11,29,51,.72);
  padding:6px 12px;border-right:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
}
.card .pic .sq{
  position:absolute;bottom:12px;right:14px;z-index:3;
  font-family:var(--mono);font-size:26px;color:rgba(217,228,240,.18);font-weight:400;
}
.card .body{padding:22px 22px 24px;}
.card .body .nm{font-family:var(--serif);font-size:19px;font-weight:600;color:var(--bp-50);letter-spacing:.03em;}
.card .body .meta{
  margin-top:12px;font-family:var(--mono);font-size:11px;color:var(--bp-400);
  display:flex;gap:14px;flex-wrap:wrap;letter-spacing:.04em;
}
.card .body .meta span{display:inline-flex;align-items:center;gap:5px;}
.card .body .ft{
  margin-top:18px;padding-top:16px;border-top:1px solid var(--line-soft);
  display:flex;align-items:center;justify-content:space-between;
}
.card .body .price{
  font-family:var(--serif);font-size:24px;font-weight:700;color:var(--ochre);letter-spacing:.01em;
}
.card .body .price small{font-family:var(--mono);font-size:12px;color:var(--bp-400);font-weight:400;margin-right:3px;}
.card .body .look{font-family:var(--mono);font-size:11.5px;color:var(--bp-100);letter-spacing:.06em;}

/* ============ 10. 筛选 chip（胶囊 → 图纸标签） ============ */
.chips{display:flex;flex-wrap:wrap;gap:9px;}
.chip{
  font-family:var(--mono);font-size:12px;color:var(--bp-300);
  background:transparent;border:1px solid var(--line);border-radius:2px;
  padding:7px 15px;cursor:pointer;transition:.2s;font-weight:400;letter-spacing:.06em;
}
.chip:hover{border-color:var(--bp-500);color:var(--bp-50);}
.chip.on{background:var(--ochre);color:#0B1D33;border-color:var(--ochre);font-weight:600;}
.lab{
  font-family:var(--mono);font-size:11px;color:var(--bp-400);
  letter-spacing:.18em;margin-bottom:12px;font-weight:500;text-transform:uppercase;
}

/* ============ 11. 表单字段 ============ */
.field{margin-bottom:16px;}
.field label{
  display:block;font-family:var(--mono);font-size:11.5px;color:var(--bp-300);
  margin-bottom:8px;letter-spacing:.1em;font-weight:400;
}
.field input,.field select,.field textarea{
  width:100%;background:rgba(11,29,51,.55);border:1px solid var(--line);border-radius:2px;
  padding:12px 14px;font-size:14px;color:var(--bp-50);font-family:var(--sans);
  outline:none;transition:.2s;
}
.field input::placeholder,.field textarea::placeholder{color:var(--bp-400);}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ochre);background:rgba(11,29,51,.8);}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;}
.field select option{background:var(--bp-800);color:var(--bp-50);}

/* ============ 12. 深底 CTA 横幅（案例入口等） ============ */
.case{
  position:relative;border-radius:2px;overflow:hidden;
  background:linear-gradient(115deg,#142E4F,#0B1D33 70%);
  border:1px solid var(--line);
  padding:76px 68px;display:flex;align-items:center;justify-content:space-between;gap:44px;
}
.case::after{
  content:"";position:absolute;right:-70px;top:-70px;width:340px;height:340px;
  border:1px solid rgba(232,178,74,.16);border-radius:2px;pointer-events:none;
}
.case::before{
  content:"";position:absolute;right:-20px;top:-20px;width:340px;height:340px;
  border:1px solid rgba(43,82,133,.4);border-radius:2px;pointer-events:none;
}
.case .txt{position:relative;z-index:2;}
.case .txt h2{font-family:var(--serif);font-size:36px;color:var(--bp-50);font-weight:700;letter-spacing:.04em;}
.case .txt p{
  margin-top:18px;color:var(--bp-400);font-size:15px;font-weight:300;
  max-width:460px;line-height:1.95;
}
.case .acts{position:relative;z-index:2;flex-shrink:0;}

/* ============ 13. 页脚（全站固定） ============ */
footer{
  background:#07162A;color:var(--bp-300);padding:72px 0 34px;
  border-top:1px solid var(--line);position:relative;
}
footer .top{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.3fr;gap:44px;}
footer .f-logo .mark{font-family:var(--serif);font-size:25px;color:var(--bp-50);font-weight:700;letter-spacing:.1em;}
footer .f-logo p{margin-top:16px;font-size:13px;line-height:1.95;color:var(--bp-400);max-width:300px;}
footer .col h4{
  font-family:var(--mono);font-size:11px;color:var(--ochre);font-weight:500;
  margin-bottom:20px;letter-spacing:.2em;text-transform:uppercase;
}
footer .col a{display:block;font-size:13.5px;color:var(--bp-300);padding:6px 0;font-weight:300;transition:.2s;}
footer .col a:hover{color:var(--ochre);}
footer .f-contact p{font-size:13.5px;color:var(--bp-300);line-height:2.1;font-weight:300;}
footer .bar{
  border-top:1px solid rgba(43,82,133,.35);margin-top:52px;padding-top:26px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;color:var(--bp-400);letter-spacing:.06em;
}

/* ============ 14. 标签 tag ============ */
.tag{
  display:inline-block;font-family:var(--mono);font-size:10.5px;
  color:var(--ochre);background:rgba(232,178,74,.1);
  padding:4px 10px;border-radius:2px;letter-spacing:.08em;
  border:1px solid rgba(232,178,74,.22);
}

/* ============ 15. 页码 / 分页 ============ */
.pager{display:flex;gap:8px;justify-content:center;margin-top:52px;}
.pager a,.pager span{
  font-family:var(--mono);font-size:12.5px;min-width:38px;height:38px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:2px;color:var(--bp-300);
  transition:.2s;letter-spacing:.06em;
}
.pager a:hover{border-color:var(--bp-500);color:var(--bp-50);}
.pager .on{background:var(--ochre);color:#0B1D33;border-color:var(--ochre);font-weight:600;}

/* ============ 16. 空状态 ============ */
.empty{
  padding:72px 24px;text-align:center;border:1px dashed var(--line);border-radius:2px;
  color:var(--bp-400);font-size:14px;
}
.empty b{display:block;font-family:var(--serif);font-size:20px;color:var(--bp-100);margin-bottom:10px;font-weight:600;}

/* ============ 17. 字号速查（开发对照，非类） ============
   Hero H1        70px serif 700 行高1.18（首页）
   内页 H1        46px serif 700
   章节 H2        42px serif 700（内页紧凑 36px）
   卡片标题 h3     25px serif 600（服务卡）/ 19px serif 600（图纸卡 .nm）
   数据卡数字      52px serif 700 反白 line-height:1 ← 不许被撑高
   价格           24px serif 700 赭橙
   正文           13.5~15px sans 300
   技术标注        10.5~12px mono
   眉题 no         11px mono 间距 .22em 大写
   导航菜单        14px
   区块纵向留白     section 112px（内页 .section 88px）
   卡片圆角        2px（全站统一直角）
   卡片描边        1px var(--line) = rgba(43,82,133,.55)
   内容区          max-width 1240px + 左右 40px 内边距
============================================================ */