/* 知行智造 官网 · cncwang.cn
   标题用子集化的思源黑体（fonts/zx-*.woff2，只含页面上用到的字），正文用系统字体，数字用 Inter。 */
@font-face { font-family: "ZX"; src: url(/fonts/zx-900.woff2) format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "ZX"; src: url(/fonts/zx-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "IN"; src: url(/fonts/inter-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "IN"; src: url(/fonts/inter-800.woff2) format("woff2"); font-weight: 800; font-display: swap; }

:root {
  --ink: #10141a; --text: #2a313b; --steel: #5d6775; --mute: #8a94a3;
  --line: #e3e6eb; --paper: #f4f5f7;
  --dark: #0e1217; --dark-2: #151a21; --dark-line: #2a313b;
  --coral: #fe6a5e; --coral-2: #f2554a; --coral-ink: #2a0d0a; --coral-tint: #fff1ef;
  --cad: #8fb4e8; --green: #22e07c;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", sans-serif;
  --head: "ZX", var(--sans);
  --num: "IN", var(--sans);
  --mono: "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
body { font-family: var(--sans); color: var(--text); background: #fff; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ol, ul { list-style: none; }
figure { margin: 0; }
.wrap { max-width: 1248px; margin: 0 auto; padding: 0 24px; }
.num { font-family: var(--num); font-variant-numeric: tabular-nums; }
.nw { white-space: nowrap; }

/* ---------- 顶部导航 ---------- */
.hd { position: fixed; top: 0; left: 0; right: 0; z-index: 40; transition: background .25s, box-shadow .25s; }
.hd.solid { background: rgba(14, 18, 23, .92); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--dark-line); }
.hd .wrap { height: 76px; display: flex; align-items: center; gap: 40px; }
.brand { display: flex; align-items: center; gap: 12px; color: #fff; flex: none; }
.brand img { width: 34px; }
.brand b { font: 900 22px var(--head); letter-spacing: 1px; }
.brand small { display: block; font: 700 10px var(--num); letter-spacing: 3px; color: var(--mute); margin-top: -2px; }
.nav { display: flex; gap: 28px; margin-left: 12px; font-size: 15px; font-weight: 500; color: #c3cad4; }
.nav a:hover { color: #fff; }
.hd-right { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.hd-tel { font: 700 16px var(--num); color: #fff; letter-spacing: .5px; display: flex; align-items: center; gap: 8px; }
.hd-tel svg { color: var(--coral); }
.btn-login { font-size: 14px; font-weight: 700; color: #fff; border: 1px solid #3a424e; border-radius: 10px; padding: 8px 14px; display: inline-flex; gap: 6px; align-items: center; }
.btn-login:hover { border-color: #5a6472; }
.btn-login i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
.burger { display: none; }

/* ---------- 首屏 ---------- */
.hero { position: relative; background: var(--dark); color: #fff; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
                    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 32px 32px, 32px 32px, 160px 160px, 160px 160px;
  -webkit-mask-image: radial-gradient(1100px 700px at 70% 45%, #000 20%, transparent 80%); mask-image: radial-gradient(1100px 700px at 70% 45%, #000 20%, transparent 80%); }
.hero::after { content: ""; position: absolute; width: 900px; height: 900px; right: -160px; top: -120px; border-radius: 50%; background: radial-gradient(circle, rgba(143,180,232,.14), transparent 62%); }
.hero .wrap { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 600px; gap: 40px; align-items: center; min-height: 840px; padding-top: 96px; padding-bottom: 60px; }
.dwg-tag { position: absolute; z-index: 3; right: 120px; top: 96px; font: 11px var(--mono); color: rgba(255,255,255,.3); letter-spacing: 1px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; letter-spacing: 2px; color: #ffb8b1; padding: 7px 14px; border: 1px solid rgba(254,106,94,.35); border-radius: 999px; background: rgba(254,106,94,.08); }
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 12px var(--coral); }
.hero h1 { font: 900 80px/1.1 var(--head); letter-spacing: -1px; margin: 26px 0 20px; }
.hero h1 em { font-style: normal; color: var(--coral); }
.hero .sub { font: 700 28px/1.4 var(--head); color: #e9edf2; }
.hero .lead { font-size: 18px; line-height: 1.8; color: #a9b3bf; max-width: 560px; margin-top: 14px; }
.hero .lead b { color: #fff; }
.cta-row { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; gap: 10px; height: 58px; padding: 0 28px; border-radius: 14px; font-size: 18px; font-weight: 700; transition: transform .15s, box-shadow .15s; }
.btn:hover { transform: translateY(-1px); }
.btn-coral { background: var(--coral); color: var(--coral-ink); box-shadow: 0 16px 40px rgba(254,106,94,.35); }
.btn-ghost { border: 1px solid #39414d; color: #fff; }
.hero .contact-mini { margin-top: 18px; font-size: 14px; color: #7f8a99; }
.hero .contact-mini b { color: #c9d0da; font-family: var(--num); }
.stats { display: flex; margin-top: 46px; border-top: 1px solid var(--dark-line); padding-top: 24px; max-width: 560px; }
.stats div { flex: 1; padding-right: 18px; }
.stats div + div { padding-left: 22px; border-left: 1px solid var(--dark-line); }
.stats b { display: block; font: 800 36px/1 var(--num); letter-spacing: -.5px; }
.stats b small { font-size: 16px; font-weight: 700; color: #9aa4b2; margin-left: 3px; }
.stats span { font-size: 14px; color: #8a94a3; }

.visual { position: relative; height: 640px; }
.ph-back { position: absolute; right: 0; top: 10px; width: 250px; aspect-ratio: 700 / 809; border-radius: 18px; overflow: hidden; transform: rotate(4deg); box-shadow: 0 30px 60px rgba(0,0,0,.5); border: 1px solid #39424e; opacity: .92; }
.ph-back img { width: 100%; height: 100%; object-fit: cover; }
.ph-front { position: absolute; left: 0; top: 110px; width: 470px; aspect-ratio: 1100 / 966; border-radius: 22px; box-shadow: 0 40px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08); }
.ph-front picture, .ph-front img { width: 100%; height: 100%; border-radius: 22px; object-fit: cover; }
.ph-front .cad { position: absolute; inset: -14px; width: calc(100% + 28px); height: calc(100% + 28px); fill: none; stroke: var(--cad); stroke-width: .35; vector-effect: non-scaling-stroke; opacity: .8; }
.ph-front .cad path { vector-effect: non-scaling-stroke; stroke-width: 1.5; }
.tag-real { position: absolute; left: 16px; top: 16px; font-size: 13px; font-weight: 700; color: #fff; background: rgba(14,18,23,.72); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 4px 12px; backdrop-filter: blur(6px); }
.dim { position: absolute; left: 0; top: 70px; width: 470px; height: 16px; border-left: 1px solid var(--cad); border-right: 1px solid var(--cad); opacity: .85; }
.dim::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; border-top: 1px solid var(--cad); }
.dim span { position: absolute; left: 50%; top: -3px; transform: translateX(-50%); font: 12px var(--mono); color: #cfe0f7; background: var(--dark); padding: 0 10px; }
.tblock { position: absolute; right: 0; bottom: 0; width: 300px; font-size: 13px; color: #c9d0da; background: rgba(21,26,33,.92); border: 1px solid #39424e; border-radius: 12px; overflow: hidden; backdrop-filter: blur(6px); box-shadow: 0 30px 60px rgba(0,0,0,.45); }
.tblock .t { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #2f3742; font-weight: 700; color: #fff; }
.tblock .t span { font: 11px var(--mono); color: var(--cad); }
.tblock dl { display: grid; grid-template-columns: 58px 1fr; }
.tblock dt, .tblock dd { padding: 7px 14px; border-bottom: 1px solid #262d37; }
.tblock dt { color: #7f8a99; border-right: 1px solid #262d37; }
.tblock dd { color: #e6ebf2; font-weight: 500; }
.tblock dl > :nth-last-child(-n+2) { border-bottom: 0; }
.tblock .ok { color: #7ee2a8; }

.strip { background: var(--dark-2); color: #aab3bf; border-top: 1px solid var(--dark-line); }
.strip .wrap { display: flex; align-items: center; gap: 28px; height: 74px; font-size: 15px; white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
.strip .wrap::-webkit-scrollbar { display: none; }
.strip b { color: #fff; font-size: 13px; letter-spacing: 2px; padding-right: 28px; border-right: 1px solid var(--dark-line); }
.strip span::before { content: "◇"; color: var(--coral); margin-right: 10px; font-size: 11px; }

/* ---------- 通用分区 ---------- */
.sec { padding: 120px 0; }
.bg-paper { background: var(--paper); }
.sec-hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 56px; }
.sec-hd.tight { margin-bottom: 28px; }
.idx { display: flex; align-items: center; gap: 12px; font: 800 14px var(--num); color: var(--coral); letter-spacing: 2px; }
.idx::after { content: ""; width: 36px; height: 1px; background: var(--coral); }
.idx span { font: 700 14px var(--sans); color: var(--steel); letter-spacing: 2px; order: 2; }
.sec-hd h2 { font: 900 48px/1.25 var(--head); color: var(--ink); margin-top: 16px; letter-spacing: -.5px; }
.sec-hd h2 em, .sec h2 em { font-style: normal; color: var(--coral); }
.sec-hd p { max-width: 440px; font-size: 16px; line-height: 1.8; color: var(--steel); }

/* 加工服务 */
.svc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.svc article { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 32px 28px 28px; overflow: hidden; }
.svc .no { position: absolute; right: 18px; top: 10px; font: 800 64px var(--num); color: transparent; -webkit-text-stroke: 1px #e6e9ee; }
.ic { width: 54px; height: 54px; border-radius: 14px; background: var(--coral-tint); color: var(--coral-2); display: grid; place-items: center; }
.svc small { display: block; margin-top: 22px; font: 700 11px var(--num); letter-spacing: 2.5px; color: var(--mute); }
.svc h3 { font: 900 24px var(--head); color: var(--ink); margin: 4px 0 10px; }
.svc p { font-size: 15px; line-height: 1.75; color: var(--steel); min-height: 132px; }
.svc ul { margin-top: 18px; padding-top: 16px; border-top: 1px dashed #dde1e7; display: grid; gap: 8px; }
.svc li { font-size: 14px; font-weight: 500; color: var(--text); display: flex; gap: 8px; align-items: center; }
.svc li::before { content: ""; width: 14px; height: 14px; border-radius: 4px; flex: none; background: var(--coral-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7.2l2.3 2.3 4.7-5' fill='none' stroke='%23f2554a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* 合作流程 */
.flow { display: grid; grid-template-columns: repeat(6, 1fr); position: relative; }
.flow::before { content: ""; position: absolute; left: 30px; right: 30px; top: 30px; height: 1px; background: repeating-linear-gradient(90deg, #c9ced6 0 8px, transparent 8px 14px); }
.flow li { position: relative; padding-right: 22px; }
.flow i { position: relative; z-index: 1; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: #fff; border: 1px solid #d5dae1; font: 800 16px var(--num); font-style: normal; color: var(--ink); }
.flow li:first-child i { background: var(--coral); border-color: var(--coral); color: var(--coral-ink); box-shadow: 0 10px 26px rgba(254,106,94,.35); }
.flow h3 { font: 900 20px var(--head); color: var(--ink); margin: 22px 0 6px; }
.flow p { font-size: 14px; line-height: 1.7; color: var(--steel); }
.flow small { display: block; font: 11px var(--mono); color: var(--mute); margin-top: 16px; }

/* 加工能力 */
.cap { display: grid; grid-template-columns: 520px 1fr; gap: 64px; align-items: start; }
.cap-visual { position: relative; border-radius: 22px; overflow: hidden; background: #ddd; aspect-ratio: 1000 / 1133; box-shadow: 0 30px 70px rgba(16,20,26,.16); }
.cap-visual img { width: 100%; height: 100%; object-fit: cover; }
.cap-visual figcaption { position: absolute; left: 16px; bottom: 16px; display: flex; gap: 10px; align-items: center; font-size: 13px; color: #fff; background: rgba(14,18,23,.72); border-radius: 999px; padding: 6px 14px 6px 6px; backdrop-filter: blur(6px); }
.cap-visual figcaption b { background: var(--coral); color: var(--coral-ink); border-radius: 999px; padding: 2px 10px; }
.spec { margin-top: 8px; border-top: 2px solid var(--ink); }
.spec div { display: grid; grid-template-columns: 132px 1fr; gap: 20px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.spec dt { font-size: 15px; font-weight: 700; color: var(--steel); }
.spec dd { font-size: 16px; line-height: 1.65; font-weight: 500; color: var(--ink); }
.spec .m { font-family: var(--num); font-weight: 700; }
.secure { margin-top: 26px; display: flex; gap: 14px; align-items: center; padding: 16px 18px; border-radius: 14px; background: #fff; border: 1px solid var(--line); font-size: 15px; font-weight: 500; }
.secure svg { color: var(--coral-2); flex: none; }

/* 零件案例 */
.gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.gal figure { border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: #fff; }
.gal .ph { position: relative; aspect-ratio: 4 / 3; background: #eceef1; overflow: hidden; }
.gal .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.gal figure:hover .ph img { transform: scale(1.04); }
.gal .ph b { position: absolute; z-index: 1; left: 12px; top: 10px; font: 11px var(--mono); color: #fff; background: rgba(14,18,23,.55); border-radius: 6px; padding: 2px 8px; }
.gal figcaption { padding: 18px 20px 20px; }
.gal h3 { font: 900 19px var(--head); color: var(--ink); }
.gal .meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.gal .meta span { font-size: 12.5px; font-weight: 500; color: var(--steel); background: var(--paper); border-radius: 6px; padding: 3px 8px; }

/* 知 × 行 */
.zx { background: var(--dark); color: #fff; position: relative; overflow: hidden; }
.zx::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size: 32px 32px; }
.zx .wrap { position: relative; display: grid; grid-template-columns: 520px 1fr; gap: 70px; align-items: center; }
.glyphs { display: flex; align-items: center; gap: 6px; font: 900 220px/1 var(--head); }
.glyphs span { color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.55); }
.glyphs span.c { -webkit-text-stroke: 1.5px var(--coral); text-shadow: 0 0 60px rgba(254,106,94,.25); }
.glyphs i { font: 300 64px var(--sans); font-style: normal; color: #4a5361; }
.zx .idx span { color: #8a94a3; }
.zx h2 { font: 900 44px/1.3 var(--head); margin: 16px 0 28px; }
.zx dl { display: grid; gap: 18px; }
.zx dl div { display: grid; grid-template-columns: 54px 1fr; gap: 16px; align-items: start; }
.zx dt { font: 900 30px/1.2 var(--head); color: var(--coral); }
.zx dd { font-size: 17px; line-height: 1.8; color: #b3bcc8; }
.zx dd b { color: #fff; }
.promise { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.promise div { background: var(--dark-2); border: 1px solid var(--dark-line); border-radius: 16px; padding: 20px; }
.promise h3 { font: 900 17px var(--head); display: flex; align-items: center; gap: 10px; }
.promise h3 svg { color: var(--coral); flex: none; }
.promise p { font-size: 14px; line-height: 1.7; color: #8f9aa8; margin-top: 8px; }
.motto { margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--dark-line); display: flex; justify-content: space-between; gap: 20px; font: 700 18px var(--head); color: #dfe4ea; }
.motto span { font: 12px var(--mono); color: #5f6977; letter-spacing: 1px; }

/* 自研系统 */
.erp { background: linear-gradient(180deg, #f3fbf6 0%, var(--paper) 46%); }
.erp .wrap { display: grid; grid-template-columns: 470px 1fr; gap: 60px; align-items: center; }
.prod { display: inline-flex; align-items: center; gap: 12px; padding: 8px 16px 8px 8px; border-radius: 999px; background: #fff; border: 1px solid #d7eedf; font-size: 15px; font-weight: 700; color: var(--ink); }
.prod i { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(145deg, #3cf08f, #0bbf5f); color: #03140a; font: 800 19px var(--num); font-style: normal; }
.prod span { font: 500 13px var(--num); color: var(--mute); }
.erp h2 { font: 900 44px/1.3 var(--head); color: var(--ink); margin: 22px 0 18px; }
.erp h2 em { color: #0fa958; }
.erp .lead { font-size: 16px; line-height: 1.8; color: var(--steel); }
.erp ul { margin: 26px 0; display: grid; gap: 12px; }
.erp li { display: flex; gap: 12px; align-items: center; font-size: 16px; font-weight: 700; color: var(--ink); }
.erp li::before { content: ""; width: 22px; height: 22px; border-radius: 7px; flex: none; background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6 11.4l3.4 3.3L16 8' fill='none' stroke='%2303140a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.trust { display: flex; gap: 12px; padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid #d7eedf; font-size: 14px; line-height: 1.7; }
.trust svg { color: #0fa958; flex: none; margin-top: 2px; }
.erp .ctas { display: flex; gap: 20px; align-items: center; margin-top: 26px; flex-wrap: wrap; }
.btn-green { background: var(--green); color: #03140a; box-shadow: 0 16px 40px rgba(34,224,124,.3); }
.link { font-size: 16px; font-weight: 700; color: var(--ink); border-bottom: 2px solid var(--green); padding-bottom: 2px; }
.shots { position: relative; height: 560px; }
.browser { position: absolute; right: 0; top: 10px; width: 690px; max-width: 94%; border-radius: 16px; overflow: hidden; background: #0e131b; box-shadow: 0 0 0 1px rgba(16,20,26,.08), 0 50px 100px rgba(16,20,26,.25); }
.browser .bar { height: 36px; display: flex; align-items: center; gap: 7px; padding: 0 14px; background: #161c25; }
.browser .bar i { width: 10px; height: 10px; border-radius: 50%; background: #3a4352; }
.browser .bar i:nth-child(1) { background: #ff5f57; } .browser .bar i:nth-child(2) { background: #febc2e; } .browser .bar i:nth-child(3) { background: #28c840; }
.browser .bar span { margin-left: 12px; font: 12px var(--num); color: #9aa6b6; background: #0b0f15; border-radius: 6px; padding: 3px 12px; }
.browser img { width: 100%; aspect-ratio: 5 / 3; object-fit: cover; object-position: top left; }
.phone { position: absolute; left: 0; bottom: 0; width: 214px; height: 446px; border-radius: 34px; background: #0b0d11; padding: 9px; box-shadow: 0 0 0 1.5px #2b313b, 0 40px 80px rgba(16,20,26,.35); }
.phone > div { width: 100%; height: 100%; border-radius: 26px; overflow: hidden; background: #fff; }

/* 关于小王 + 联系 */
.ac { display: grid; grid-template-columns: 1fr 560px; gap: 28px; }
.about { border: 1px solid var(--line); border-radius: 22px; padding: 40px; display: grid; grid-template-columns: 120px 1fr; gap: 28px; align-content: start; }
.avatar { width: 120px; height: 120px; border-radius: 28px; object-fit: cover; }
.about h2 { font: 900 30px var(--head); color: var(--ink); }
.about h2 small { font: 500 15px var(--sans); color: var(--mute); margin-left: 10px; }
.about p { font-size: 16px; line-height: 1.85; color: var(--steel); margin-top: 12px; }
.dy { grid-column: 1 / -1; display: flex; align-items: center; gap: 20px; padding: 16px; border-radius: 16px; background: var(--paper); }
.dy .qr { width: 112px; height: 112px; border-radius: 14px; flex: none; }
.dy b { display: flex; align-items: center; gap: 8px; font: 900 18px var(--head); color: var(--ink); }
.dy p { font-size: 14px; line-height: 1.7; color: var(--steel); margin-top: 4px; }
.contact { border-radius: 22px; padding: 40px; color: #fff; background: linear-gradient(150deg, #ff7a6e, #f2554a); position: relative; overflow: hidden; }
.contact::after { content: ""; position: absolute; right: -60px; top: -60px; width: 260px; height: 260px; border-radius: 50%; border: 40px solid rgba(255,255,255,.12); pointer-events: none; }
.contact h2 { font: 900 34px/1.3 var(--head); }
.contact > p { font-size: 16px; font-weight: 500; color: #ffe3e0; margin-top: 8px; }
.contact .row { display: flex; gap: 24px; margin-top: 26px; align-items: center; }
.contact .qr { width: 150px; height: 150px; flex: none; background: #fff; border-radius: 14px; padding: 8px; }
.contact dl { display: grid; gap: 12px; font-size: 15px; }
.contact dl div { display: flex; gap: 12px; align-items: center; }
.contact dt { color: #ffd7d3; width: 34px; flex: none; }
.contact dd b { font: 800 19px var(--num); letter-spacing: .5px; }
.copy { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.22); color: #fff; margin-left: 6px; }
.copy:hover { background: rgba(255,255,255,.32); }
.contact .files { margin-top: 26px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.25); font-size: 13px; font-weight: 500; color: #ffe3e0; }

/* 页脚：工程图标题栏 */
.ft { background: #0b0e12; color: #8a94a3; padding: 70px 0 34px; }
.tb { display: grid; grid-template-columns: 300px 1fr 1fr 1fr; border: 1px solid var(--dark-line); }
.tb > div { padding: 18px 20px; border-right: 1px solid var(--dark-line); border-bottom: 1px solid var(--dark-line); font-size: 14px; line-height: 1.8; }
.tb > div:nth-child(4), .tb > div:nth-child(7) { border-right: 0; }
.tb small { display: block; font: 11px var(--mono); color: #5f6977; letter-spacing: 1px; margin-bottom: 4px; }
.tb b { color: #e6ebf2; }
.tb a:hover b, .tb a:hover { color: #fff; }
.tb .logo-cell { grid-row: span 2; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.tb .logo-cell > div { display: flex; align-items: center; gap: 12px; }
.tb .logo-cell img { width: 42px; }
.tb .logo-cell b { font: 900 24px var(--head); }
.tb .logo-cell span { font: 700 11px var(--num); letter-spacing: 4px; color: #5f6977; display: block; }
.tb .logo-cell p { font-size: 13px; line-height: 1.7; }
.tb .mini { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); padding: 0; border-right: 0; border-bottom: 0; }
.tb .mini span { padding: 10px 14px; border-right: 1px solid var(--dark-line); font: 11px var(--mono); color: #5f6977; }
.tb .mini span:last-child { border-right: 0; }
.tb .mini em { display: block; font-style: normal; color: #aeb7c3; font-size: 12px; }
.legal { display: flex; justify-content: space-between; gap: 16px; margin-top: 26px; font-size: 13px; color: #5f6977; }
.legal a { color: #8a94a3; }
.legal a:hover { color: #fff; }

/* 微信弹窗、提示 */
.dlg { margin: auto; width: min(380px, calc(100vw - 32px)); border: 0; border-radius: 22px; padding: 30px 26px 24px; text-align: center; color: var(--text); box-shadow: 0 40px 100px rgba(0,0,0,.4); }
.dlg::backdrop { background: rgba(8,10,14,.6); backdrop-filter: blur(3px); }
.dlg h2 { font: 900 22px var(--head); color: var(--ink); }
.dlg img { width: 220px; height: 220px; margin: 18px auto 10px; border-radius: 12px; border: 1px solid var(--line); padding: 6px; }
.dlg .hint { font-size: 14px; color: var(--steel); }
.dlg .hint b { color: var(--ink); }
.dlg .wx-only { display: none; }
.is-wechat .dlg .wx-only { display: block; }
.is-wechat .dlg .not-wx { display: none; }
.dlg-id { margin-top: 16px; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 15px; }
.dlg-id b { font: 800 18px var(--num); color: var(--ink); }
.dlg-id .copy { background: var(--coral); color: var(--coral-ink); font-size: 14px; padding: 7px 14px; margin: 0; }
.dlg-tel { display: inline-block; margin-top: 14px; font-size: 14px; color: var(--steel); border-bottom: 1px solid #c9ced6; }
.dlg-x { position: absolute; right: 12px; top: 8px; font-size: 26px; line-height: 1; color: var(--mute); padding: 6px; }
.toast { position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 20px); z-index: 60; background: rgba(16,20,26,.92); color: #fff; font-size: 14px; padding: 10px 18px; border-radius: 999px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

.mbar { display: none; }

/* ---------- 平板 ---------- */
@media (max-width: 1180px) {
  .nav { display: none; }
  .hero .wrap { grid-template-columns: 1fr 440px; }
  .hero h1 { font-size: 60px; }
  .hero .sub { font-size: 23px; }
  .visual { height: 560px; }
  .ph-front { width: 380px; }
  .dim { width: 380px; }
  .ph-back { width: 200px; }
  .svc { grid-template-columns: repeat(2, 1fr); }
  .flow { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
  .flow::before { display: none; }
  .cap { grid-template-columns: 420px 1fr; gap: 40px; }
  .zx .wrap { grid-template-columns: 1fr; gap: 30px; }
  .glyphs { font-size: 160px; }
  .erp .wrap { grid-template-columns: 1fr; }
  .ac { grid-template-columns: 1fr; }
}

/* ---------- 手机 ---------- */
@media (max-width: 760px) {
  html { scroll-padding-top: 64px; }
  .wrap { padding: 0 18px; }
  .hd .wrap { height: 64px; gap: 0; }
  .brand img { width: 28px; } .brand b { font-size: 19px; }
  .hd-tel span, .btn-login { display: none; }
  .hd-right { gap: 10px; }
  .hd-tel { width: 40px; height: 40px; border-radius: 12px; border: 1px solid #39414d; justify-content: center; }
  .burger { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid #39414d; color: #fff; }
  .nav { display: none; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; gap: 0; margin: 0; padding: 6px 18px 14px; background: rgba(14,18,23,.97); border-bottom: 1px solid var(--dark-line); }
  .nav.open { display: flex; }
  .nav a { padding: 13px 0; border-bottom: 1px solid #1f252e; font-size: 16px; }
  .hd.menu { background: rgba(14,18,23,.97); }
  .dwg-tag { display: none; }
  .hero .wrap { grid-template-columns: 1fr; gap: 0; min-height: 0; padding-top: 92px; padding-bottom: 44px; }
  .hero h1 { font-size: 48px; margin: 18px 0 12px; }
  .hero .sub { font-size: 21px; }
  .hero .lead { font-size: 15px; }
  .cta-row { flex-direction: column; gap: 10px; margin-top: 26px; }
  .cta-row .btn { width: 100%; justify-content: center; height: 52px; font-size: 17px; }
  .stats { margin-top: 30px; }
  .stats b { font-size: 25px; } .stats b small { font-size: 13px; } .stats span { font-size: 12px; }
  .stats div { padding-right: 10px; } .stats div + div { padding-left: 12px; }
  .visual { height: auto; margin-top: 30px; padding-top: 34px; }
  .ph-back { display: none; }
  .ph-front { position: relative; left: auto; top: auto; width: 100%; }
  .dim { top: 0; width: 100%; }
  .tblock { position: relative; width: auto; margin: -40px 12px 0 auto; max-width: 300px; font-size: 12px; }
  .strip .wrap { height: 54px; font-size: 13px; gap: 18px; }
  .sec { padding: 64px 0; }
  .sec-hd { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 32px; }
  .sec-hd h2 { font-size: 31px; }
  .sec-hd p { font-size: 15px; }
  .svc { grid-template-columns: 1fr; gap: 14px; }
  .svc p { min-height: 0; }
  .flow { grid-template-columns: 1fr; gap: 22px; }
  .flow::before { display: block; left: 29px; right: auto; top: 30px; bottom: 30px; width: 1px; height: auto; background: repeating-linear-gradient(180deg, #c9ced6 0 8px, transparent 8px 14px); }
  .flow li { display: grid; grid-template-columns: 60px 1fr; column-gap: 16px; padding: 0; }
  .flow i { grid-row: span 3; }
  .flow h3 { margin: 4px 0 2px; font-size: 18px; } .flow small { margin-top: 4px; }
  .cap { grid-template-columns: 1fr; gap: 28px; }
  .cap-visual { order: 2; aspect-ratio: 4 / 3; }
  .spec div { grid-template-columns: 84px 1fr; gap: 12px; padding: 13px 0; }
  .spec dt { font-size: 14px; } .spec dd { font-size: 15px; }
  .gal { grid-template-columns: 1fr 1fr; gap: 12px; }
  .gal figcaption { padding: 12px; } .gal h3 { font-size: 16px; }
  .gal .meta span { font-size: 11px; padding: 2px 6px; }
  .glyphs { font-size: 116px; justify-content: center; }
  .glyphs i { font-size: 40px; }
  .zx h2 { font-size: 27px; }
  .zx dd { font-size: 15px; }
  .promise { grid-template-columns: 1fr; }
  .motto { flex-direction: column; gap: 8px; font-size: 16px; margin-top: 36px; }
  .erp h2 { font-size: 29px; }
  .shots { height: 330px; }
  .browser img { aspect-ratio: 16 / 10; }
  .phone { width: 128px; height: 268px; border-radius: 24px; padding: 6px; } .phone > div { border-radius: 19px; }
  .about { grid-template-columns: 72px 1fr; padding: 24px; gap: 16px; }
  .avatar { width: 72px; height: 72px; border-radius: 18px; }
  .about h2 { font-size: 22px; } .about h2 small { display: block; margin: 2px 0 0; font-size: 13px; }
  .about p { font-size: 15px; grid-column: 1 / -1; }
  .about > div:nth-child(2) { display: contents; }
  .dy { align-items: flex-start; }
  .dy .qr { width: 96px; height: 96px; }
  .contact { padding: 26px; } .contact h2 { font-size: 27px; }
  .contact .row { flex-direction: column; align-items: flex-start; }
  .contact .qr { width: 170px; height: 170px; }
  .tb { grid-template-columns: 1fr 1fr; }
  .tb .logo-cell { grid-column: 1 / -1; grid-row: auto; }
  .tb > div { border-right: 1px solid var(--dark-line) !important; }
  .tb > div:nth-child(odd):not(.logo-cell):not(.mini) { border-right: 0 !important; }
  .legal { flex-direction: column; gap: 8px; padding-bottom: 80px; }
  .mbar { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); border-top: 1px solid var(--line); box-shadow: 0 -10px 30px rgba(16,20,26,.08); }
  .mbar a, .mbar button { height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 15px; font-weight: 700; border: 1px solid var(--line); color: var(--ink); background: #fff; }
  .mbar .p { background: var(--coral); border-color: var(--coral); color: var(--coral-ink); }
  .toast { bottom: 90px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }