/* ============================================================
   北京华夏威视安防系统技术有限公司 — 官网样式
   品牌色：墨黑 #0E1218 / 品牌红 #D3432C
   ============================================================ */

:root{
  --ink:#0E1218;
  --ink-2:#191E26;
  --ink-3:#232A34;
  --red:#D3432C;
  --red-dark:#B33622;
  --red-soft:#FBEDEA;
  --gray-bg:#F5F6F8;
  --line:#E4E7EC;
  --text:#171A20;
  --text-2:#5C6675;
  --text-3:#8A93A1;
  --white:#fff;
  --maxw:1200px;
  --radius:4px;
  --shadow-sm:0 1px 2px rgba(14,18,24,.06);
  --shadow:0 6px 24px -8px rgba(14,18,24,.16);
  --shadow-lg:0 20px 48px -16px rgba(14,18,24,.28);
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:var(--sans);color:var(--text);
  background:var(--white);line-height:1.7;font-size:16px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;line-height:1.28;font-weight:700;letter-spacing:-.01em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

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

/* ---------- 顶部导航 ---------- */
.nav{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.94);backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:0 28px;height:72px;display:flex;align-items:center;gap:36px}
.nav-logo{display:flex;align-items:center;flex-shrink:0}
.nav-logo img{height:48px;width:auto}
.nav-links{display:flex;gap:30px;margin-left:auto}
.nav-links a{font-size:15px;font-weight:500;color:var(--text-2);position:relative;padding:6px 0;transition:color .18s}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--red);transition:right .22s ease}
.nav-links a:hover,.nav-links a.active{color:var(--text)}
.nav-links a:hover::after,.nav-links a.active::after{right:0}
.nav-cta{
  flex-shrink:0;background:var(--ink);color:#fff;font-size:14.5px;font-weight:600;
  padding:11px 22px;border-radius:var(--radius);transition:background .18s;
}
.nav-cta:hover{background:var(--red)}
.nav-burger{display:none;margin-left:auto;background:none;border:0;padding:8px;cursor:pointer;flex-direction:column;gap:5px}
.nav-burger span{display:block;width:22px;height:2px;background:var(--ink)}

/* ---------- 通用按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-size:15px;font-weight:600;padding:14px 28px;border-radius:var(--radius);
  transition:.18s;cursor:pointer;border:1px solid transparent;
}
.btn svg{width:16px;height:16px;flex-shrink:0}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-dark)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:var(--red)}
.btn-ghost{border-color:rgba(255,255,255,.34);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.6)}
.btn-line{border-color:var(--line);color:var(--text);background:#fff}
.btn-line:hover{border-color:var(--ink);background:var(--ink);color:#fff}

/* ---------- 区块 ---------- */
.section{padding:96px 0}
.section-sm{padding:64px 0}
.section-gray{background:var(--gray-bg)}
.section-ink{background:var(--ink);color:#fff}
.section-ink .sec-title{color:#fff}
.section-ink .sec-desc{color:rgba(255,255,255,.68)}

.sec-head{margin-bottom:52px;max-width:760px}
.sec-tag{
  display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;
  letter-spacing:.14em;color:var(--red);text-transform:uppercase;margin-bottom:16px;
}
.sec-tag::before{content:"";width:22px;height:2px;background:var(--red)}
.sec-title{font-size:clamp(26px,3.2vw,40px);letter-spacing:-.02em}
.sec-desc{margin-top:16px;font-size:16.5px;color:var(--text-2);line-height:1.8}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head.center .sec-tag{justify-content:center}

/* ---------- 首页 Hero ---------- */
.hero{position:relative;min-height:660px;display:flex;flex-direction:column;overflow:hidden;background:var(--ink)}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.45;transform:scale(1.02)}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(9,12,17,.96) 0%,rgba(9,12,17,.86) 44%,rgba(9,12,17,.5) 100%);
}
.hero-inner{
  position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;
  padding:100px 28px 72px;flex:1;display:flex;flex-direction:column;justify-content:center;
}
.hero-badge{
  display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:#fff;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  padding:7px 15px;border-radius:100px;margin-bottom:26px;letter-spacing:.02em;
}
.hero-badge i{width:6px;height:6px;border-radius:50%;background:var(--red);display:block;box-shadow:0 0 0 3px rgba(211,67,44,.28)}
.hero h1{color:#fff;font-size:clamp(32px,4.6vw,56px);line-height:1.16;letter-spacing:-.025em;max-width:16em}
.hero h1 em{font-style:normal;color:var(--red)}
.hero-sub{margin-top:24px;max-width:640px;font-size:17px;line-height:1.85;color:rgba(255,255,255,.76)}
.hero-actions{margin-top:38px;display:flex;gap:14px;flex-wrap:wrap}

.hero-stats{
  position:relative;z-index:2;flex-shrink:0;border-top:1px solid rgba(255,255,255,.13);
  background:rgba(9,12,17,.5);
}
.hero-stats-inner{max-width:var(--maxw);margin:0 auto;padding:30px 28px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.stat b{display:block;font-size:clamp(26px,3vw,36px);font-weight:700;color:#fff;letter-spacing:-.02em;line-height:1.1}
.stat b span{font-size:.5em;font-weight:600;color:var(--red);margin-left:3px}
.stat p{margin-top:7px;font-size:13.5px;color:rgba(255,255,255,.6)}

/* ---------- 卡片网格 ---------- */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:32px 30px;position:relative;overflow:hidden;transition:.2s;
}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--red);transform:scaleY(0);transform-origin:top;transition:transform .24s}
.card:hover{border-color:transparent;box-shadow:var(--shadow);transform:translateY(-3px)}
.card:hover::before{transform:scaleY(1)}
.card-ico{width:50px;height:50px;border-radius:7px;background:var(--red-soft);display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.card-ico svg{width:29px;height:29px;stroke:var(--red);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* 双色图标：.d 深墨线条，.f 红色实心（不带 class 的元素继承红色描边，兼容旧图标） */
.card-ico svg .d{stroke:var(--ink)}
.card-ico svg .f{fill:var(--red);stroke:none}
.card h3{font-size:18.5px;margin-bottom:11px}
.card p{font-size:14.8px;color:var(--text-2);line-height:1.78}
.card-num{position:absolute;right:24px;top:22px;font-size:12px;font-weight:700;color:var(--text-3);letter-spacing:.1em}

/* 图片卡 */
.card-img{padding:0;overflow:hidden}
.card-img .ph{aspect-ratio:16/10;background-size:cover;background-position:center;transition:transform .5s}
.card-img:hover .ph{transform:scale(1.05)}
.card-img .bd{padding:26px 28px 30px}
.card-img h3{font-size:18px;margin-bottom:9px}
.card-img p{font-size:14.6px;color:var(--text-2);line-height:1.75}
.card-img .tags{margin-top:16px;display:flex;gap:8px;flex-wrap:wrap}
.tag{font-size:12.5px;color:var(--text-2);background:var(--gray-bg);border:1px solid var(--line);padding:4px 11px;border-radius:100px}

/* ---------- 应用领域 ---------- */
.field-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.field{background:#fff;padding:26px 14px;text-align:center;transition:.18s}
.field:hover{background:var(--ink)}
.field:hover .field-ico{background:rgba(255,255,255,.12)}
.field:hover .field-ico svg{stroke:#fff}
.field:hover span{color:#fff}
.field-ico{width:40px;height:40px;margin:0 auto 12px;border-radius:6px;background:var(--red-soft);display:flex;align-items:center;justify-content:center;transition:.18s}
.field-ico svg{width:21px;height:21px;stroke:var(--red);fill:none;stroke-width:1.7;transition:.18s}
.field span{font-size:14px;font-weight:500;color:var(--text);transition:.18s}

/* ---------- 品牌条 ---------- */
.brand-row{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.brand-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:34px 32px;display:flex;gap:24px;align-items:flex-start}
.brand-mark{width:76px;height:76px;flex-shrink:0;border-radius:6px;background:var(--gray-bg);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;color:var(--ink);text-align:center;line-height:1.2;padding:8px}
.brand-card h3{font-size:18px;margin-bottom:4px}
.brand-card .en{font-size:12.5px;color:var(--text-3);letter-spacing:.06em;text-transform:uppercase;margin-bottom:11px}
.brand-card p{font-size:14.6px;color:var(--text-2);line-height:1.78}

/* ---------- 项目业绩列表 ---------- */
.proj-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.proj-col{padding:32px 30px;border-right:1px solid var(--line)}
.proj-col:last-child{border-right:0}
.proj-col h3{font-size:17px;margin-bottom:6px;display:flex;align-items:center;gap:9px}
.proj-col h3 svg{width:19px;height:19px;stroke:var(--red);fill:none;stroke-width:1.7}
.proj-col .cnt{font-size:12.5px;color:var(--text-3);margin-bottom:20px;letter-spacing:.03em}
.proj-list li{font-size:14.6px;color:var(--text-2);padding:9px 0;border-bottom:1px dashed var(--line);display:flex;gap:10px}
.proj-list li:last-child{border-bottom:0}
.proj-list li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--red);flex-shrink:0;margin-top:9px}

/* ---------- 流程 ---------- */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:s}
.flow-step{padding:0 30px 0 0;position:relative}
.flow-step::before{content:"";position:absolute;top:19px;left:46px;right:6px;height:1px;background:var(--line)}
.flow-step:last-child::before{display:none}
.flow-num{
  width:38px;height:38px;border-radius:50%;background:#fff;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:var(--red);
  position:relative;z-index:2;margin-bottom:20px;
}
.flow-step h4{font-size:16.5px;margin-bottom:9px}
.flow-step p{font-size:14.4px;color:var(--text-2);line-height:1.75}

/* ---------- CTA ---------- */
.cta{background:var(--ink);position:relative;overflow:hidden;padding:82px 0}
.cta::before{content:"";position:absolute;right:-120px;top:-120px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(211,67,44,.28),transparent 68%)}
.cta-inner{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.cta h2{color:#fff;font-size:clamp(24px,2.8vw,34px);max-width:20em}
.cta p{margin-top:14px;color:rgba(255,255,255,.66);font-size:16px;max-width:38em}

/* ---------- 页脚 ---------- */
.footer{background:#0A0D12;color:rgba(255,255,255,.62);padding:64px 0 0;font-size:14.5px}
.footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:40px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.09)}
.footer img{height:46px;margin-bottom:22px}
.footer h4{color:#fff;font-size:14.5px;margin-bottom:18px;font-weight:600}
.footer li{margin-bottom:11px}
.footer a:hover{color:#fff}
.footer .fdesc{line-height:1.85;max-width:30em}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:24px 0;font-size:13px;color:rgba(255,255,255,.4)}
.footer-bottom a:hover{color:rgba(255,255,255,.78)}

/* ---------- 内页头部 ---------- */
.page-head{background:var(--ink);position:relative;overflow:hidden;padding:88px 0 72px}
.page-head .bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.3}
.page-head::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,12,17,.92),rgba(9,12,17,.62))}
.page-head-inner{position:relative;z-index:2}
.page-head h1{color:#fff;font-size:clamp(28px,3.6vw,42px)}
.page-head p{margin-top:16px;color:rgba(255,255,255,.7);max-width:46em;font-size:16.5px;line-height:1.8;text-wrap:pretty}
.crumb{font-size:13.5px;color:rgba(255,255,255,.48);margin-bottom:20px}
.crumb a:hover{color:#fff}
.crumb span{margin:0 9px;opacity:.5}

/* ---------- 内容排版（关于我们 / 详情） ---------- */
.prose{font-size:16.5px;line-height:1.95;color:var(--text-2)}
.prose p+p{margin-top:20px}
.prose strong{color:var(--text);font-weight:600}
.split{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:center}
.split.rev{grid-template-columns:.85fr 1.15fr}
.split-img{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:4/3;background-size:cover;background-position:center}

.kv{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.kv div{background:#fff;padding:24px 26px}
.kv b{display:block;font-size:12.5px;color:var(--text-3);font-weight:600;letter-spacing:.06em;margin-bottom:7px}
.kv span{font-size:16px;font-weight:600;color:var(--text)}

.timeline{border-left:2px solid var(--line);padding-left:34px;margin-left:6px}
.tl-item{position:relative;padding-bottom:40px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:"";position:absolute;left:-41px;top:6px;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--red)}
.tl-item .yr{font-size:13px;font-weight:700;color:var(--red);letter-spacing:.06em;margin-bottom:7px}
.tl-item h4{font-size:17.5px;margin-bottom:9px}
.tl-item p{font-size:14.8px;color:var(--text-2);line-height:1.78}

/* 表格 */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius)}
table{width:100%;border-collapse:collapse;font-size:14.8px;background:#fff}
th{background:var(--gray-bg);text-align:left;padding:15px 20px;font-weight:600;font-size:13.5px;color:var(--text);white-space:nowrap;border-bottom:1px solid var(--line)}
td{padding:15px 20px;border-bottom:1px solid var(--line);color:var(--text-2)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:#FAFBFC}
td.strong{color:var(--text);font-weight:600}

/* 联系页 */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.contact-item{display:flex;gap:16px;padding:22px 0;border-bottom:1px solid var(--line)}
.contact-item:last-child{border-bottom:0}
.contact-item .ci{width:42px;height:42px;flex-shrink:0;border-radius:6px;background:var(--red-soft);display:flex;align-items:center;justify-content:center}
.contact-item .ci svg{width:20px;height:20px;stroke:var(--red);fill:none;stroke-width:1.7}
.contact-item b{display:block;font-size:13px;color:var(--text-3);font-weight:600;margin-bottom:5px;letter-spacing:.04em}
.contact-item span{font-size:16px;font-weight:500;color:var(--text)}

.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:38px 36px;box-shadow:var(--shadow)}
.field-row{margin-bottom:20px}
.field-row label{display:block;font-size:13.5px;font-weight:600;color:var(--text);margin-bottom:8px}
.field-row input,.field-row textarea,.field-row select{
  width:100%;padding:13px 15px;border:1px solid var(--line);border-radius:var(--radius);
  font-family:inherit;font-size:15px;color:var(--text);background:#fff;transition:.16s;
}
.field-row input:focus,.field-row textarea:focus,.field-row select:focus{outline:0;border-color:var(--red);box-shadow:0 0 0 3px rgba(211,67,44,.1)}
.field-row textarea{min-height:118px;resize:vertical}

/* 徽标条 */
.cert-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.cert-row.two{grid-template-columns:repeat(2,1fr)}
.cert-row.two .cert{padding:34px 30px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.cert{border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px;background:#fff;text-align:center}
.cert svg{width:30px;height:30px;stroke:var(--red);fill:none;stroke-width:1.5;margin:0 auto 14px}
.cert b{display:block;font-size:15px;margin-bottom:6px}
.cert span{font-size:13.2px;color:var(--text-2)}

/* 数字带 */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.metric{padding:32px 28px;border-right:1px solid var(--line)}
.metric:last-child{border-right:0}
.metric b{font-size:clamp(24px,2.6vw,32px);font-weight:700;color:var(--red);letter-spacing:-.02em;display:block;line-height:1.15}
.metric span{font-size:14px;color:var(--text-2);display:block;margin-top:8px}

/* ---------- 响应式 ---------- */
@media (max-width:1000px){
  .g4,.field-grid,.cert-row,.metrics{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(2,1fr)}
  .flow{grid-template-columns:repeat(2,1fr);gap:36px 0}
  .flow-step::before{display:none}
  .proj-cols{grid-template-columns:1fr}
  .proj-col{border-right:0;border-bottom:1px solid var(--line)}
  .proj-col:last-child{border-bottom:0}
  .split,.split.rev{grid-template-columns:1fr;gap:36px}
  .contact-grid{grid-template-columns:1fr;gap:40px}
  .footer-top{grid-template-columns:1fr 1fr;gap:32px}
  .hero-stats-inner{grid-template-columns:repeat(2,1fr);gap:28px}
  .metric{border-bottom:1px solid var(--line)}
  .metric:nth-child(2){border-right:0}
}
@media (max-width:720px){
  .nav-links,.nav-cta{display:none}
  .nav-burger{display:flex}
  .nav-logo img{height:40px}
  .nav{position:sticky}
  .nav-links.open{
    display:flex;position:absolute;left:0;right:0;top:72px;flex-direction:column;gap:0;
    background:#fff;border-bottom:1px solid var(--line);padding:10px 28px 20px;box-shadow:var(--shadow);
  }
  .nav-links.open a{padding:13px 0;border-bottom:1px solid var(--line)}
  .wrap,.wrap-narrow,.hero-inner,.nav-inner,.hero-stats-inner,.page-head .wrap{padding-left:20px;padding-right:20px}
  .section{padding:64px 0}
  .section-sm{padding:48px 0}
  .g2,.g3,.g4,.field-grid,.cert-row,.cert-row.two,.metrics,.kv,.brand-row{grid-template-columns:1fr}
  .metric{border-right:0}
  .flow{grid-template-columns:1fr}
  .hero{min-height:auto}
  .hero-inner{padding:88px 20px 64px}
  .cta-inner{flex-direction:column;align-items:flex-start}
  .footer-top{grid-template-columns:1fr}
  .form-card{padding:28px 22px}
}