/* ============================================================
   华讯（深圳）新材料科技有限公司 · 官网设计系统
   设计语言：精密金属工程风（材料规格书式版式）
   规范：类名统一 hx- 前缀（BEM 风格），主题色由 :root 变量集中管理
   约束：零图片纯 CSS（BR-7）；与模板及七历史实例类名/主色零重合（BR-1, BR-2）
   ============================================================ */

:root{
  --hx-titan:#f1f2f4;        /* 钛银灰白 · 全站基底 */
  --hx-steel:#e3e6ea;        /* 浅钢灰 · 分区底/装饰 */
  --hx-plate:#fbfcfd;        /* 板材白 · 卡片底 */
  --hx-graphite:#24272b;     /* 石墨炭 · 结构块/页脚/标题 */
  --hx-carbon:#17191c;       /* 碳黑 · 石墨加深 */
  --hx-anode:#a8318d;        /* 阳极品红 · 唯一点缀色 */
  --hx-anode-deep:#7f2069;   /* 品红加深 · hover */
  --hx-slate:#5f6672;        /* 蓝灰 · 次级文字 */
  --hx-line:#c9ced6;         /* 细描边/网格线 */
  --hx-cut:14px;             /* 切角基准 */
  --hx-wrap:1140px;
  --hx-mono:"Consolas","SFMono-Regular",Menlo,"Courier New",monospace;
  --hx-sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--hx-sans);
  background:var(--hx-titan);
  color:var(--hx-graphite);
  font-size:16px;
  line-height:1.75;
}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}

/* ---------- 通用容器与分区 ---------- */
.hx-wrap{max-width:var(--hx-wrap);margin:0 auto;padding:0 24px;}
.hx-section{padding:84px 0;border-top:1px solid var(--hx-line);}
.hx-section--steel{background:var(--hx-steel);}

/* 规格书式栏目头：mono 编号 + 标题 + 延伸线 */
.hx-head{display:flex;align-items:baseline;gap:18px;margin-bottom:44px;}
.hx-head__no{
  font-family:var(--hx-mono);font-size:13px;letter-spacing:2px;
  color:var(--hx-anode);white-space:nowrap;
}
.hx-head__title{font-size:30px;font-weight:700;letter-spacing:2px;white-space:nowrap;}
.hx-head__rule{flex:1;height:1px;background:var(--hx-line);position:relative;top:-6px;}
.hx-head__rule::after{
  content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;
  background:var(--hx-anode);
}

/* ---------- 顶部规格条 + 页头 ---------- */
.hx-specbar{
  background:var(--hx-graphite);color:#9aa1ab;
  font-family:var(--hx-mono);font-size:12px;letter-spacing:2px;
  padding:6px 0;
}
.hx-specbar .hx-wrap{display:flex;justify-content:space-between;gap:16px;}
.hx-specbar__tel{color:#d3d7dd;}
.hx-specbar__tel:hover{color:#fff;}

.hx-header{
  background:var(--hx-plate);
  border-bottom:1px solid var(--hx-line);
  position:sticky;top:0;z-index:60;
}
.hx-header .hx-wrap{display:flex;align-items:center;justify-content:space-between;height:66px;}
.hx-logo{display:flex;align-items:baseline;gap:10px;}
.hx-logo__mark{font-size:24px;font-weight:800;letter-spacing:4px;}
.hx-logo__dot{width:9px;height:9px;background:var(--hx-anode);display:inline-block;}
.hx-logo__sub{font-family:var(--hx-mono);font-size:11px;letter-spacing:1px;color:var(--hx-slate);}

.hx-nav{display:flex;gap:6px;}
.hx-nav__link{
  display:block;padding:8px 18px;font-size:15px;letter-spacing:1px;
  border:1px solid transparent;
}
.hx-nav__link:hover{border-color:var(--hx-line);background:var(--hx-titan);}
.hx-nav__link--on{
  border-color:var(--hx-graphite);
  background:var(--hx-graphite);color:#fff;
}
.hx-burger{
  display:none;width:40px;height:40px;border:1px solid var(--hx-line);
  background:var(--hx-plate);cursor:pointer;position:relative;
}
.hx-burger span{
  position:absolute;left:9px;right:9px;height:2px;background:var(--hx-graphite);
  transition:transform .25s,opacity .25s;
}
.hx-burger span:nth-child(1){top:13px;}
.hx-burger span:nth-child(2){top:19px;}
.hx-burger span:nth-child(3){top:25px;}
.hx-burger--x span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.hx-burger--x span:nth-child(2){opacity:0;}
.hx-burger--x span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* ---------- 首屏：工程网格 + 角标刻线 ---------- */
.hx-hero{
  position:relative;overflow:hidden;
  background:
    linear-gradient(rgba(201,206,214,.38) 1px,transparent 1px),
    linear-gradient(90deg,rgba(201,206,214,.38) 1px,transparent 1px),
    linear-gradient(180deg,var(--hx-plate),var(--hx-titan));
  background-size:44px 44px,44px 44px,100% 100%;
  padding:110px 0 96px;
}
.hx-hero__kicker{
  font-family:var(--hx-mono);font-size:13px;letter-spacing:3px;
  color:var(--hx-anode);margin-bottom:18px;
}
.hx-hero__title{
  font-size:clamp(30px,4.6vw,52px);font-weight:800;
  letter-spacing:3px;line-height:1.3;max-width:21em;
}
.hx-hero__lead{
  margin-top:22px;max-width:38em;color:var(--hx-slate);font-size:17px;
}
.hx-hero__tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px;}
.hx-hero__tag{
  font-family:var(--hx-mono);font-size:13px;letter-spacing:1px;
  border:1px solid var(--hx-line);background:var(--hx-plate);
  padding:7px 14px;color:var(--hx-graphite);
}
.hx-hero__tag:hover{border-color:var(--hx-anode);color:var(--hx-anode);}
.hx-hero__acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px;}
/* 角标刻线（纯 CSS 装饰） */
.hx-hero::before,.hx-hero::after{
  content:"";position:absolute;width:56px;height:56px;pointer-events:none;
}
.hx-hero::before{left:18px;top:18px;border-left:2px solid var(--hx-anode);border-top:2px solid var(--hx-anode);}
.hx-hero::after{right:18px;bottom:18px;border-right:2px solid var(--hx-anode);border-bottom:2px solid var(--hx-anode);}

/* ---------- 按钮 ---------- */
.hx-btn{
  display:inline-block;padding:13px 30px;font-size:15px;letter-spacing:2px;
  border:1px solid var(--hx-graphite);background:var(--hx-graphite);color:#fff;
  clip-path:polygon(0 0,calc(100% - var(--hx-cut)) 0,100% var(--hx-cut),100% 100%,0 100%);
  transition:background .2s,border-color .2s;
}
.hx-btn:hover{background:var(--hx-carbon);}
.hx-btn--anode{border-color:var(--hx-anode);background:var(--hx-anode);}
.hx-btn--anode:hover{background:var(--hx-anode-deep);border-color:var(--hx-anode-deep);}
.hx-btn--ghost{background:transparent;color:var(--hx-graphite);}
.hx-btn--ghost:hover{background:var(--hx-steel);}

/* ---------- 切角卡与卡组 ---------- */
.hx-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.hx-grid--2{grid-template-columns:repeat(2,1fr);}
.hx-card{
  background:var(--hx-plate);border:1px solid var(--hx-line);
  clip-path:polygon(0 0,calc(100% - var(--hx-cut)) 0,100% var(--hx-cut),100% 100%,0 100%);
  padding:30px 26px;display:block;position:relative;
  transition:border-color .2s,transform .2s;
}
.hx-card:hover{border-color:var(--hx-anode);transform:translateY(-4px);}
.hx-card__no{
  font-family:var(--hx-mono);font-size:13px;letter-spacing:2px;
  color:var(--hx-anode);display:block;margin-bottom:14px;
}
.hx-card__title{font-size:19px;font-weight:700;letter-spacing:1px;margin-bottom:10px;}
.hx-card__text{font-size:14px;color:var(--hx-slate);}
.hx-card__more{
  display:inline-block;margin-top:16px;font-family:var(--hx-mono);
  font-size:12px;letter-spacing:2px;color:var(--hx-graphite);
  border-bottom:1px solid var(--hx-line);padding-bottom:3px;
}
.hx-card:hover .hx-card__more{color:var(--hx-anode);border-color:var(--hx-anode);}

/* ---------- 参数表式词条清单（规格书基元） ---------- */
.hx-sheet{border:1px solid var(--hx-line);background:var(--hx-plate);}
.hx-sheet__row{
  display:flex;gap:22px;align-items:baseline;
  padding:16px 24px;border-top:1px solid var(--hx-line);
}
.hx-sheet__row:first-child{border-top:none;}
.hx-sheet__key{
  font-family:var(--hx-mono);font-size:12px;letter-spacing:1px;
  color:var(--hx-slate);white-space:nowrap;min-width:96px;
}
.hx-sheet__val{font-size:16px;font-weight:600;letter-spacing:.5px;}

/* ---------- 业务领域详述块 ---------- */
.hx-domain{margin-top:64px;scroll-margin-top:96px;}
.hx-domain:first-of-type{margin-top:0;}
.hx-domain__head{display:flex;align-items:baseline;gap:16px;margin-bottom:20px;}
.hx-domain__no{
  font-family:var(--hx-mono);font-size:34px;font-weight:700;
  color:transparent;-webkit-text-stroke:1px var(--hx-anode);
}
.hx-domain__title{font-size:24px;font-weight:700;letter-spacing:2px;}
.hx-domain__desc{color:var(--hx-slate);max-width:46em;margin-bottom:22px;}

/* ---------- 理念条（拉丝渐变分隔） ---------- */
.hx-creed{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.hx-creed__item{
  border:1px solid var(--hx-line);background:var(--hx-plate);padding:28px 24px;
  border-top:3px solid var(--hx-graphite);
}
.hx-creed__item:hover{border-top-color:var(--hx-anode);}
.hx-creed__title{font-size:17px;font-weight:700;letter-spacing:1px;margin-bottom:8px;}
.hx-creed__text{font-size:14px;color:var(--hx-slate);}

/* ---------- CTA 色带（石墨底 + 拉丝渐变） ---------- */
.hx-cta{
  background:
    repeating-linear-gradient(115deg,rgba(255,255,255,.03) 0 2px,transparent 2px 9px),
    linear-gradient(100deg,var(--hx-carbon),var(--hx-graphite) 55%,#2e3237);
  color:#fff;padding:66px 0;
}
.hx-cta .hx-wrap{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;}
.hx-cta__label{
  font-family:var(--hx-mono);font-size:12px;letter-spacing:3px;color:var(--hx-anode);
  display:block;margin-bottom:10px;
}
.hx-cta__title{font-size:26px;font-weight:700;letter-spacing:2px;}
.hx-cta__tel{
  font-family:var(--hx-mono);font-size:clamp(22px,3vw,32px);letter-spacing:2px;
  border:1px solid #4a4f56;padding:14px 30px;display:inline-block;
  clip-path:polygon(0 0,calc(100% - var(--hx-cut)) 0,100% var(--hx-cut),100% 100%,0 100%);
}
.hx-cta__tel:hover{border-color:var(--hx-anode);color:#fff;background:rgba(168,49,141,.16);}

/* ---------- 页脚 ---------- */
.hx-footer{background:var(--hx-carbon);color:#9aa1ab;padding:54px 0 30px;}
.hx-footer__grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;
  padding-bottom:34px;border-bottom:1px solid #33383e;
}
.hx-footer__brand{font-size:20px;font-weight:800;letter-spacing:3px;color:#fff;}
.hx-footer__brand em{font-style:normal;color:var(--hx-anode);}
.hx-footer__text{font-size:13px;margin-top:12px;max-width:26em;}
.hx-footer__label{
  font-family:var(--hx-mono);font-size:12px;letter-spacing:2px;
  color:#6d737d;display:block;margin-bottom:14px;
}
.hx-footer__link{display:block;font-size:14px;padding:4px 0;}
.hx-footer__link:hover{color:#fff;}
.hx-footer__tel{font-family:var(--hx-mono);font-size:20px;color:#d3d7dd;letter-spacing:1px;}
.hx-footer__tel:hover{color:#fff;}
.hx-footer__legal{
  padding-top:22px;font-size:13px;display:flex;flex-wrap:wrap;gap:8px 26px;
  justify-content:space-between;
}
.hx-footer__icp{color:#9aa1ab;border-bottom:1px dotted #4a4f56;}
.hx-footer__icp:hover{color:#fff;border-color:#fff;}

/* ---------- 关于页 ---------- */
.hx-about{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:start;}
.hx-about__text p{margin-bottom:16px;color:#3a3f46;}
.hx-contact{
  border:1px solid var(--hx-line);background:var(--hx-plate);
  padding:34px 30px;scroll-margin-top:96px;
  clip-path:polygon(0 0,calc(100% - var(--hx-cut)) 0,100% var(--hx-cut),100% 100%,0 100%);
}
.hx-contact__label{
  font-family:var(--hx-mono);font-size:12px;letter-spacing:3px;
  color:var(--hx-anode);display:block;margin-bottom:12px;
}
.hx-contact__tel{
  font-family:var(--hx-mono);font-size:clamp(24px,3vw,30px);font-weight:700;
  letter-spacing:1px;display:inline-block;margin:6px 0 14px;
}
.hx-contact__tel:hover{color:var(--hx-anode);}
.hx-contact__note{font-size:13px;color:var(--hx-slate);}

/* ---------- 渐显（JS 门控，仅增强） ---------- */
.hx-js .hx-reveal{opacity:0;transform:translateY(22px);transition:opacity .6s,transform .6s;}
.hx-js .hx-reveal--in{opacity:1;transform:none;}

/* ---------- 响应式 ---------- */
@media (max-width:960px){
  .hx-grid{grid-template-columns:repeat(2,1fr);}
  .hx-creed{grid-template-columns:1fr;}
  .hx-about{grid-template-columns:1fr;}
  .hx-footer__grid{grid-template-columns:1fr;gap:26px;}
}
@media (max-width:768px){
  .hx-specbar .hx-wrap{justify-content:center;}
  .hx-specbar__code{display:none;}
  .hx-burger{display:block;}
  .hx-nav{
    display:none;position:absolute;left:0;right:0;top:66px;
    background:var(--hx-plate);border-bottom:1px solid var(--hx-line);
    flex-direction:column;padding:10px 24px 18px;
  }
  .hx-nav--open{display:flex;}
  .hx-nav__link{border:1px solid var(--hx-line);margin-top:8px;text-align:center;}
  .hx-grid{grid-template-columns:1fr;}
  .hx-section{padding:60px 0;}
  .hx-hero{padding:76px 0 64px;}
  .hx-head{flex-wrap:wrap;gap:10px;}
  .hx-head__rule{flex-basis:100%;}
  .hx-sheet__row{flex-direction:column;gap:4px;}
  .hx-cta .hx-wrap{justify-content:center;text-align:center;}
}