/* ==========================================================================
   ASIA METAL 中文站点 — 共享样式表
   设计基调：工业金属质感 — 深钢灰 + 氧化锈红 + 黄铜点缀
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700;900&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  /* 色板 */
  --ink:        #17222A;   /* 主文字 / 深钢黑 */
  --steel-900:  #16232B;   /* 最深钢板 */
  --steel-800:  #1D2E38;   /* 深色板块背景 */
  --steel-600:  #3D525F;   /* 中钢灰 */
  --steel-400:  #6C808C;   /* 浅钢灰 / 次要文字 */
  --steel-200:  #C7D0D3;   /* 分隔线 */
  --bg:         #EEF0EF;   /* 页面底色（冷调米白，带钢青） */
  --panel:      #FFFFFF;   /* 卡片底色 */
  --rust:       #B24B28;   /* 氧化锈红 — 主强调色 */
  --rust-dark:  #8F3A1E;
  --brass:      #A9884F;   /* 黄铜 — 次强调色 */
  --line:       #D9DCD6;

  --font-display: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-body:    'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-mono:    'JetBrains Mono', 'Consolas', monospace;

  --container: 1180px;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ font-family: var(--font-display); font-weight:900; line-height:1.25; margin:0 0 .5em; letter-spacing:.01em; }
p{ margin:0 0 1em; color: var(--steel-600); }
:focus-visible{ outline:3px solid var(--rust); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

.container{ max-width: var(--container); margin:0 auto; padding:0 24px; }
.section{ padding: 84px 0; }
.section-tight{ padding: 56px 0; }

/* ---------- 材质色标条（签名元素）：贯穿全站的“金属样条”分隔条 ---------- */
.metal-strip{
  display:flex; height:8px; width:100%;
}
.metal-strip span{ flex:1; }
.metal-strip .m1{ background:#fe6601; } /* 不锈钢 */
.metal-strip .m2{ background:#fe6601; } /* 碳钢 */
.metal-strip .m3{ background:#fe6601; } /* 镀锌 */
.metal-strip .m4{ background:#fe6601; } /* 铝 */
.metal-strip .m5{ background:#fe6601; } /* 合金钢 */
.metal-strip .m6{ background:#fe6601; } /* 铜 */

/* ---------- 顶部信息条 ---------- */
.topbar{
  background: var(--steel-900);
  color:#C7D0D3;
  font-size:13px;
}
.topbar .container{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:9px; padding-bottom:9px; flex-wrap:wrap; gap:8px;
}
.topbar a{ color:#C7D0D3; }
.topbar a:hover{ color:#fff; }
.topbar .topbar-contact{ display:flex; gap:20px; flex-wrap:wrap; }
.topbar .topbar-links{ display:flex; gap:18px; align-items:center; }
.topbar .topbar-links span{ opacity:.4; }

/* ---------- 主导航 ---------- */
.navbar{
  background: var(--panel);
  border-bottom:1px solid var(--line);
  position: sticky; top:0; z-index: 50;
}
.navbar .container{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:14px; padding-bottom:14px;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand-mark{
  width:38px; height:38px; border-radius:4px;
  background: linear-gradient(135deg, var(--steel-800), var(--steel-600));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-family:var(--font-mono); font-weight:700; font-size:15px;
  flex:none;
}
.brand-text{ font-family:var(--font-display); font-weight:900; font-size:19px; letter-spacing:.02em; color:var(--ink); }
.brand-text small{ display:block; font-family:var(--font-mono); font-weight:500; font-size:10.5px; letter-spacing:.16em; color:var(--rust); text-transform:uppercase; }

.nav-toggle{
  display:none; background:none; border:1px solid var(--line); border-radius:6px;
  width:42px; height:42px; cursor:pointer; align-items:center; justify-content:center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:''; display:block; width:20px; height:2px; background:var(--ink); position:relative; transition:.2s;
}
.nav-toggle span::before{ position:absolute; top:-6px; }
.nav-toggle span::after{ position:absolute; top:6px; }

.nav-menu{ display:flex; align-items:center; gap:2px; }
.nav-menu > li{ position:relative; }
.nav-menu > li > a{
  display:block; padding:10px 16px; font-size:14.5px; font-weight:500; color:var(--steel-800);
  border-radius:6px; transition:.15s;
}
.nav-menu > li > a:hover, .nav-menu > li.active > a{ color:var(--rust); background:#F4EDE9; }

.nav-menu .has-dropdown > a::after{ content:'▾'; margin-left:5px; font-size:11px; opacity:.6; }
.dropdown{
  position:absolute; top:calc(100% + 6px); left:0; min-width:190px;
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  box-shadow:0 16px 40px rgba(23,34,42,.14);
  padding:8px; opacity:0; visibility:hidden; transform:translateY(6px);
  transition:.18s ease; z-index:60;
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown{
  opacity:1; visibility:visible; transform:translateY(0);
}
.dropdown li a{
  display:block; padding:9px 12px; border-radius:6px; font-size:13.5px; color:var(--steel-600);
}
.dropdown li a:hover{ background:var(--bg); color:var(--rust); }

.nav-cta{
  background:var(--rust); color:#fff !important; padding:10px 20px !important;
  border-radius:6px; font-weight:700 !important;
}
.nav-cta:hover{ background:var(--rust-dark) !important; }

/* ---------- 面包屑 / 页面头 ---------- */
.page-hero{
  background: var(--steel-900);
  background-image:
    linear-gradient(120deg, rgba(178,75,40,.16), transparent 55%),
    linear-gradient(180deg, var(--steel-800), var(--steel-900));
  color:#fff; padding: 64px 0 46px; position:relative; overflow:hidden;
}
.page-hero::after{
  content:''; position:absolute; right:-60px; top:-40px; width:280px; height:280px;
  border:1px solid rgba(255,255,255,.08); border-radius:50%;
}
.page-hero .eyebrow{
  font-family:var(--font-mono); letter-spacing:.18em; text-transform:uppercase;
  font-size:12px; color:var(--brass); margin-bottom:10px;
}
.page-hero h1{ color:#fff; font-size:clamp(28px,4vw,42px); margin-bottom:10px; }
.breadcrumb{ font-size:13px; color:#9FB0B8; display:flex; gap:8px; align-items:center; }
.breadcrumb a:hover{ color:#fff; }
.breadcrumb .sep{ opacity:.5; }

/* ---------- 首页大banner ---------- */
.hero{
  position:relative; background: var(--steel-900); color:#fff; overflow:hidden;
  min-height: 560px; display:flex; align-items:center;
}
.hero-bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:.32; filter:saturate(.6) contrast(1.05);
}
.hero-bg-overlay{
  position:absolute; inset:0;
  background: linear-gradient(100deg, rgba(22,35,43,.97) 20%, rgba(22,35,43,.62) 62%, rgba(178,75,40,.35));
}
.hero-slash{
  position:absolute; top:0; bottom:0; right:14%; width:2px;
  background:linear-gradient(180deg, transparent, var(--rust), transparent);
  opacity:.5;
}
.hero .container{ position:relative; z-index:2; padding-top:70px; padding-bottom:70px; }
.hero-eyebrow{
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--brass); display:flex; align-items:center; gap:10px; margin-bottom:18px;
}
.hero-eyebrow::before{ content:''; width:30px; height:1px; background:var(--brass); }
.hero h1{
  color:#fff; font-size:clamp(32px,5vw,54px); max-width:16ch; margin-bottom:20px;
}
.hero h1 em{ font-style:normal; color:var(--rust); text-decoration: underline; text-decoration-color:rgba(178,75,40,.5); text-underline-offset:8px; }
.hero p.lead{ color:#C7D0D3; max-width:52ch; font-size:16.5px; margin-bottom:32px; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }

.btn{
  display:inline-flex; align-items:center; gap:8px; padding:13px 26px; border-radius:6px;
  font-weight:700; font-size:14.5px; border:1px solid transparent; cursor:pointer; transition:.15s;
}
.btn-primary{ background:var(--rust); color:#fff; }
.btn-primary:hover{ background:var(--rust-dark); }
.btn-outline{ border-color:rgba(255,255,255,.35); color:#fff; }
.btn-outline:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
.btn-dark{ background:var(--steel-900); color:#fff; }
.btn-dark:hover{ background:var(--steel-800); }

/* stat plate strip within hero */
.hero-stats{
  position:relative; z-index:2; border-top:1px solid rgba(255,255,255,.14);
  background: rgba(22,35,43,.55); backdrop-filter: blur(2px);
}
.hero-stats .container{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; padding-top:26px; padding-bottom:26px; }
.hero-stats .stat{ padding:0 20px; border-left:1px solid rgba(255,255,255,.14); }
.hero-stats .stat:first-child{ border-left:none; }
.hero-stats .stat b{ display:block; font-family:var(--font-mono); font-size:26px; color:#fff; }
.hero-stats .stat span{ font-size:12.5px; color:#9FB0B8; }

/* ---------- 小节标题 ---------- */
.section-head{ max-width:640px; margin-bottom:44px; }
.section-head .kicker{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--rust); display:flex; align-items:center; gap:10px; margin-bottom:12px;
}
.section-head .kicker::before{ content:''; width:22px; height:2px; background:var(--rust); }
.section-head h2{ font-size:clamp(24px,3vw,34px); color:var(--ink); }
.section-head p{ margin-top:10px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head.center .kicker{ justify-content:center; }
.section-head.center .kicker::before{ display:none; }

/* ---------- 优势卡片 ---------- */
.features-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.feature-card{
  background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:26px 22px;
  position:relative;
}
.feature-card .plate{
  width:44px; height:44px; border-radius:6px; background:var(--steel-900);
  color:var(--brass); display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-weight:700; margin-bottom:16px;
}
.feature-card h3{ font-size:16.5px; margin-bottom:8px; color:var(--ink); }
.feature-card p{ font-size:13.8px; margin:0; }

/* ---------- 产品分类 Tab ---------- */
.tabs{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:34px; }
.tab-btn{
  padding:10px 20px; border-radius:999px; border:1px solid var(--line); background:var(--panel);
  font-weight:700; font-size:13.5px; cursor:pointer; color:var(--steel-600);
}
.tab-btn.active, .tab-btn:hover{ border-color:var(--rust); color:var(--rust); background:#FBF3EF; }

.product-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.product-card{
  background:var(--panel); border:1px solid var(--line); border-radius:12px; overflow:hidden;
  transition:.18s; display:flex; flex-direction:column;
}
.product-card:hover{ transform:translateY(-4px); box-shadow:0 20px 40px rgba(23,34,42,.1); border-color:var(--steel-200); }
.product-card .thumb{ aspect-ratio:4/3; overflow:hidden; background:var(--steel-200); }
.product-card .thumb img{ width:100%; height:100%; object-fit:cover; }
.product-card .body{ padding:18px 20px 20px; flex:1; display:flex; flex-direction:column; }
.product-card .tag{
  align-self:flex-start; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em;
  color:var(--rust); background:#FBF3EF; border:1px solid #F0D9CD; padding:3px 9px; border-radius:4px; margin-bottom:10px;
}
.product-card h3{ font-size:16px; margin-bottom:6px; color:var(--ink); }
.product-card p{ font-size:13.5px; margin-bottom:14px; }
.product-card .more{ margin-top:auto; font-size:13px; font-weight:700; color:var(--steel-800); display:flex; align-items:center; gap:6px; }
.product-card:hover .more{ color:var(--rust); }

/* ---------- About / split layout ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.split img{ border-radius:12px; }
.split .kicker{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--rust); display:flex; align-items:center; gap:10px; margin-bottom:12px;
}
.split .kicker::before{ content:''; width:22px; height:2px; background:var(--rust); }
.split h2{ font-size:clamp(24px,3vw,32px); margin-bottom:16px; }

.stat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:30px; }
.stat-row .stat{ border-left:2px solid var(--rust); padding-left:14px; }
.stat-row .stat b{ display:block; font-family:var(--font-mono); font-size:24px; color:var(--ink); }
.stat-row .stat span{ font-size:12.5px; color:var(--steel-400); }

/* ---------- 核心价值观 ---------- */
.values-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.value-card{
  background:var(--steel-900); color:#fff; border-radius:12px; padding:28px 22px; position:relative; overflow:hidden;
}
.value-card::before{
  content:attr(data-letter); position:absolute; right:10px; top:-6px; font-family:var(--font-mono);
  font-size:64px; font-weight:700; color:rgba(255,255,255,.06);
}
.value-card h3{ color:#fff; font-size:16px; margin-bottom:8px; position:relative; }
.value-card p{ color:#9FB0B8; font-size:13.5px; margin:0; position:relative; }

/* ---------- Mission/Vision ---------- */
.mv-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.mv-card{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:32px; }
.mv-card .kicker{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.14em; color:var(--brass); text-transform:uppercase; margin-bottom:10px; }
.mv-card h3{ font-size:19px; margin-bottom:12px; }

/* ---------- 工厂展示 ---------- */
.showcase-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.showcase-grid a{ display:block; border-radius:10px; overflow:hidden; aspect-ratio:4/3; position:relative; }
.showcase-grid img{ width:100%; height:100%; object-fit:cover; transition:.3s; }
.showcase-grid a:hover img{ transform:scale(1.06); }

/* ---------- FAQ ---------- */
.faq-list{ max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.faq-item{ background:var(--panel); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.faq-item summary{
  list-style:none; cursor:pointer; padding:18px 22px; font-weight:700; font-size:15px;
  display:flex; justify-content:space-between; align-items:center; gap:12px; color:var(--ink);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:'+'; font-family:var(--font-mono); font-size:20px; color:var(--rust); flex:none; transition:.2s; }
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item .faq-body{ padding:0 22px 20px; font-size:13.8px; color:var(--steel-600); }

/* ---------- 联系表单 / 联系信息 ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1.15fr; gap:40px; }
.contact-info-card{ background:var(--steel-900); color:#fff; border-radius:14px; padding:34px; }
.contact-info-card h3{ color:#fff; font-size:19px; margin-bottom:6px; }
.contact-info-card p{ color:#9FB0B8; font-size:13.8px; }
.info-row{ display:flex; gap:14px; padding:16px 0; border-top:1px solid rgba(255,255,255,.12); }
.info-row:first-of-type{ margin-top:20px; }
.info-row .ico{
  width:38px; height:38px; border-radius:8px; background:rgba(178,75,40,.18); color:var(--rust-alt,#E38257);
  display:flex; align-items:center; justify-content:center; flex:none; font-family:var(--font-mono); font-weight:700;
}
.info-row b{ display:block; font-size:13.5px; color:#fff; margin-bottom:2px; }
.info-row span{ font-size:13px; color:#9FB0B8; }

.form-card{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:34px; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ margin-bottom:16px; }
.field.full{ grid-column:1 / -1; }
.field label{ display:block; font-size:13px; font-weight:700; color:var(--steel-800); margin-bottom:6px; }
.field input, .field select, .field textarea{
  width:100%; border:1px solid var(--line); border-radius:8px; padding:11px 13px; font-size:14px;
  font-family:var(--font-body); color:var(--ink); background:#FAFAF9;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--rust); background:#fff; }
.field textarea{ resize:vertical; min-height:110px; }
.form-note{ font-size:12.5px; color:var(--steel-400); margin-top:4px; }

.map-wrap{ border-radius:14px; overflow:hidden; border:1px solid var(--line); margin-top:36px; }
.map-wrap iframe{ width:100%; height:380px; border:0; display:block; }

/* ---------- CTA band ---------- */
.cta-band{
  background: var(--steel-900); color:#fff; border-radius:16px; padding:48px; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.cta-band::after{
  content:''; position:absolute; right:-40px; bottom:-70px; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle, rgba(178,75,40,.35), transparent 70%);
}
.cta-band h2{ color:#fff; font-size:26px; margin-bottom:6px; position:relative; }
.cta-band p{ color:#9FB0B8; margin:0; position:relative; }
.cta-band .btn{ position:relative; }

/* ---------- Footer ---------- */
.footer{ background:var(--steel-900); color:#9FB0B8;  }
.footer .container{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1.2fr; gap:36px; padding-bottom:40px;  padding-top: 50px; }
.footer h4{ color:#fff; font-size:14.5px; letter-spacing:.03em; margin-bottom:16px; }
.footer li{ margin-bottom:10px; font-size:13.5px; }
.footer li a:hover{ color:#fff; }
.footer .brand-text{ color:#fff; }
.footer .foot-desc{ font-size:13.5px; margin-top:14px; color:#8496A0; max-width:32ch; }
.footer .info-row{ padding:10px 0; }
.footer .info-row .ico{ background:rgba(255,255,255,.06); color:var(--brass); }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1); padding:18px 0; font-size:12.5px; color:#7488937b;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
}
.footer-bottom a:hover{ color:#fff; }

/* ---------- Utility ---------- */
.mt-0{ margin-top:0; }
.text-center{ text-align:center; }

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .features-grid, .values-grid, .showcase-grid{ grid-template-columns:repeat(2,1fr); }
  .product-grid{ grid-template-columns:repeat(2,1fr); }
  .split, .mv-grid, .contact-grid{ grid-template-columns:1fr; }
  .stat-row, .hero-stats .container{ grid-template-columns:repeat(2,1fr); row-gap:18px; }
  .hero-stats .stat:nth-child(3){ border-left:none; }
  .footer .container{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 760px){
  .nav-toggle{ display:flex; }
  .nav-menu{
    position:absolute; top:100%; left:0; right:0; background:var(--panel); border-bottom:1px solid var(--line);
    flex-direction:column; align-items:stretch; padding:10px; display:none; box-shadow:0 20px 30px rgba(0,0,0,.08);
  }
  .nav-menu.open{ display:flex; }
  .nav-menu > li{ width:100%; }
  .dropdown{ position:static; opacity:1; visibility:visible; transform:none; display:none; box-shadow:none; border:none; padding:0 0 0 14px; }
  .has-dropdown.open .dropdown{ display:block; }
  .nav-cta{ text-align:center; margin-top:6px; }
  .topbar .topbar-links{ display:none; }
  .form-grid{ grid-template-columns:1fr; }
  .footer .container{ grid-template-columns:1fr; }
}
@media (max-width: 640px){
  .features-grid, .values-grid, .showcase-grid, .product-grid{ grid-template-columns:1fr; }
  .section{ padding:56px 0; }
  .hero{ min-height:auto; }
}