/* ════════════════════════════════════════════════════════════
   欧奢五金 · 内贸站设计系统
   风格参照：深色工业大图 hero + 橙色 CTA + 蓝色页脚
   ════════════════════════════════════════════════════════════ */
:root{
  --ink:#1a1d22;          /* 主文字 */
  --ink-2:#3a3f47;        /* 次级文字 */
  --muted:#6e747d;        /* 弱化文字 */
  --line:#e2e4e8;         /* 浅分隔线 */
  --line-dark:#c9ccd1;    /* 深分隔线 */
  --accent:#d9531e;       /* 橙色主按钮（模板 CTA 色） */
  --accent-hover:#b8440f;
  --accent-soft:#fdf1ea;  /* 橙色浅底 */
  --hero-1:#22262c;       /* hero 深色渐变 */
  --hero-2:#3a4149;
  --footer:#2b4ea2;       /* 页脚蓝（模板色） */
  --footer-dark:#223f83;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC",sans-serif;
  color:var(--ink);background:#fff;line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
ul,ol{list-style:none;}
img{max-width:100%;display:block;}
[hidden]{display:none!important;}

.wrap{max-width:1080px;margin:0 auto;padding:0 24px;}

/* ── 导航 ─────────────────────────────────── */
.nav{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--line);}
.nav-in{max-width:1080px;margin:0 auto;padding:0 24px;height:62px;display:flex;align-items:center;gap:34px;}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;letter-spacing:.02em;}
.brand-mark{width:30px;height:30px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;border-radius:3px;}
.nav-links{display:flex;gap:26px;margin-left:auto;font-size:14.5px;}
.nav-links a{color:var(--ink-2);padding:4px 0;border-bottom:2px solid transparent;}
.nav-links a:hover{color:var(--ink);}
.nav-links a.on{color:var(--ink);border-bottom-color:var(--accent);}
.nav-cta{background:var(--accent);color:#fff;padding:8px 18px;font-size:14px;border-radius:3px;white-space:nowrap;}
.nav-cta:hover{background:var(--accent-hover);}
@media(max-width:760px){
  .nav-links{gap:14px;font-size:13px;overflow-x:auto;}
  .nav-cta{display:none;}
}

/* ── Hero（深色工业大图风） ────────────────── */
.hero{
  background:linear-gradient(115deg,var(--hero-1) 0%,var(--hero-2) 60%,#2a3038 100%);
  color:#fff;padding:clamp(90px,16vw,170px) 0;
  position:relative;overflow:hidden;
}
/* 照片占位：拿到真实车间照片后，把 .hero 背景换成
   background:url(/images/hero.jpg) center/cover;  并保留一层深色遮罩保证文字可读 */
.hero::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 80% 20%,rgba(217,83,30,.14),transparent 55%);}
.hero .wrap{position:relative;z-index:1;}
.hero h1{font-size:clamp(30px,5.4vw,52px);font-weight:700;line-height:1.28;letter-spacing:.01em;}
.hero p{margin-top:16px;font-size:clamp(15px,2.2vw,18px);color:rgba(255,255,255,.78);max-width:560px;}
.hero-rule{margin-top:30px;height:1px;width:min(520px,80%);background:rgba(255,255,255,.28);position:relative;}
.hero-rule::after{content:"";position:absolute;left:50%;top:-3px;width:7px;height:7px;background:var(--accent);border-radius:50%;}
.hero-cta{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap;}
.btn{display:inline-block;padding:11px 26px;font-size:15px;border-radius:3px;cursor:pointer;border:0;font-family:inherit;}
.btn-accent{background:var(--accent);color:#fff;}
.btn-accent:hover{background:var(--accent-hover);}
.btn-ghost{border:1px solid rgba(255,255,255,.5);color:#fff;background:transparent;}
.btn-ghost:hover{border-color:#fff;}
.btn-dark{background:var(--ink);color:#fff;}
.btn-dark:hover{background:#000;}

/* ── 通用 section ─────────────────────────── */
.section{padding:clamp(56px,9vw,96px) 0;}
.section--soft{background:#f7f8fa;}
.sec-head{text-align:center;max-width:640px;margin:0 auto clamp(36px,6vw,56px);}
.sec-head h2{font-size:clamp(24px,3.6vw,34px);font-weight:700;}
.sec-head p{margin-top:12px;color:var(--muted);font-size:15px;}
.eyebrow{display:block;font-size:12.5px;letter-spacing:.22em;color:var(--accent);font-weight:600;margin-bottom:10px;}

/* 卡片网格 */
.grid{display:grid;gap:22px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media(max-width:860px){.grid-3{grid-template-columns:1fr;}}
@media(max-width:640px){.grid-2{grid-template-columns:1fr;}}

.card{background:#fff;border:1px solid var(--line);padding:28px 26px;border-radius:4px;}
.card h3{font-size:17px;margin-bottom:10px;}
.card p{font-size:14px;color:var(--ink-2);}
.card .num{font-size:13px;color:var(--accent);font-weight:700;letter-spacing:.1em;display:block;margin-bottom:12px;}
.card a{color:var(--accent);font-size:14px;border-bottom:1px solid var(--accent);}

/* 产品卡：顶部色块当图片占位 */
.pcard{border:1px solid var(--line);border-radius:4px;overflow:hidden;background:#fff;display:flex;flex-direction:column;}
.pcard-media{height:190px;background:linear-gradient(135deg,#2c3138,#454d56);display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.55);font-size:13px;letter-spacing:.14em;}
.pcard-body{padding:22px 22px 24px;flex:1;display:flex;flex-direction:column;}
.pcard-body h3{font-size:17.5px;margin-bottom:8px;}
.pcard-body p{font-size:14px;color:var(--ink-2);flex:1;}
.pcard-meta{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted);display:flex;justify-content:space-between;align-items:center;}
.pcard-meta b{color:var(--accent);font-weight:700;}

/* 数字实力 */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center;}
@media(max-width:640px){.stats{grid-template-columns:repeat(2,1fr);}}
.stat b{display:block;font-size:clamp(26px,4vw,38px);color:var(--accent);font-weight:700;}
.stat span{font-size:13.5px;color:var(--muted);}

/* 步骤 */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;}
@media(max-width:860px){.steps{grid-template-columns:repeat(2,1fr);}}
.step{border:1px solid var(--line);border-radius:4px;padding:20px 16px;background:#fff;text-align:center;}
.step b{display:block;font-size:14.5px;margin:8px 0 6px;}
.step p{font-size:12.5px;color:var(--muted);}
.step .no{font-size:20px;font-weight:700;color:var(--accent);}

/* 深色 CTA 横幅（模板的"携手共创"区） */
.banner{background:linear-gradient(115deg,#20242a,#333a42);color:#fff;padding:clamp(64px,10vw,110px) 0;text-align:left;}
.banner h2{font-size:clamp(24px,4vw,36px);font-weight:700;}
.banner p{margin-top:12px;color:rgba(255,255,255,.75);max-width:520px;}
.banner .btn{margin-top:26px;}

/* 规格表 */
.tbl{width:100%;border-collapse:collapse;font-size:14px;background:#fff;}
.tbl th,.tbl td{border:1px solid var(--line);padding:10px 14px;text-align:left;vertical-align:top;}
.tbl th{background:#f2f4f7;font-weight:600;white-space:nowrap;}
.tbl td b{color:var(--accent);}
@media(max-width:640px){
  .tbl th,.tbl td{padding:8px 10px;font-size:13px;}
}

/* FAQ 折叠 */
details{border-bottom:1px solid var(--line);}
summary{cursor:pointer;padding:18px 4px;font-size:15.5px;font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center;}
summary::-webkit-details-marker{display:none;}
summary::after{content:"+";font-size:20px;color:var(--accent);font-weight:400;}
details[open] summary::after{content:"−";}
details .ans{padding:0 4px 18px;font-size:14.5px;color:var(--ink-2);}

/* 表单 */
.form{background:#fff;border:1px solid var(--line);border-radius:4px;padding:28px;}
.form label{display:block;font-size:13.5px;font-weight:600;margin:16px 0 6px;}
.form label:first-child{margin-top:0;}
.form input,.form textarea,.form select{width:100%;padding:11px 12px;border:1px solid var(--line-dark);border-radius:3px;font-size:14.5px;font-family:inherit;}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--accent);}
.form .req{color:var(--accent);}
.form button[type=submit]{margin-top:22px;}
.form-note{font-size:12.5px;color:var(--muted);margin-top:12px;}
.form-ok,.form-err{display:flex;gap:10px;align-items:flex-start;padding:14px 16px;margin-bottom:18px;font-size:14px;line-height:1.65;border-left:3px solid var(--accent);background:var(--accent-soft);transition:opacity .7s;}
.form-ok::before{content:"✓";font-weight:700;color:var(--accent);}
.form-err{border-left-color:#8c2f16;background:#fbeeea;}
.form-err::before{content:"!";color:#8c2f16;}
.form-ok b{display:block;margin-bottom:2px;}
.form-ok.fade,.form-err.fade{opacity:0;}
.hp{position:absolute;left:-9999px;}

/* 联系名片区 */
.contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media(max-width:760px){.contact-cards{grid-template-columns:1fr;}}
.cc{border:1px solid var(--line);border-radius:4px;padding:26px;text-align:center;background:#fff;}
.cc .ic{width:44px;height:44px;margin:0 auto 14px;background:var(--accent-soft);color:var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:19px;}
.cc b{display:block;font-size:15px;margin-bottom:6px;}
.cc p{font-size:14px;color:var(--ink-2);}
.cc .big{font-size:16.5px;font-weight:700;color:var(--ink);}

/* 浮动名片（右下角） */
.float{position:fixed;right:18px;bottom:20px;display:flex;flex-direction:column;gap:9px;z-index:200;}
.float-item{position:relative;}
.float-btn{width:48px;height:48px;border:1px solid var(--line-dark);background:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;border-radius:50%;color:var(--ink);cursor:pointer;transition:background .18s,color .18s;font-family:inherit;}
.float-btn:hover,.float-item.open .float-btn{background:var(--ink);color:#fff;border-color:var(--ink);}
.float-panel{display:none;position:absolute;right:58px;bottom:0;min-width:210px;max-width:78vw;background:#fff;border:1px solid var(--line-dark);padding:15px 17px;font-size:14px;line-height:1.6;color:var(--ink-2);z-index:210;box-shadow:0 4px 18px rgba(0,0,0,.08);}
.float-item.open .float-panel{display:block;}
.float-panel b{display:block;font-size:11px;letter-spacing:.08em;color:var(--muted);margin-bottom:5px;font-weight:600;}
.float-panel a{width:auto;height:auto;border:0;border-radius:0;background:transparent;padding:0;}
.fp-num{display:block;font-size:13.5px;color:var(--ink);margin-bottom:8px;}
a.fp-num:hover{color:var(--accent);}

/* 页脚 */
.footer{background:var(--footer);color:#fff;padding:52px 0 34px;}
.footer-in{max-width:1080px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px;}
@media(max-width:760px){.footer-in{grid-template-columns:1fr 1fr;}}
.footer h4{font-size:14px;margin-bottom:14px;font-weight:600;opacity:.9;}
.footer a,.footer p{font-size:13.5px;color:rgba(255,255,255,.75);display:block;margin-bottom:9px;}
.footer a:hover{color:#fff;}
.footer .brand{color:#fff;margin-bottom:14px;}
.footer .brand-mark{background:rgba(255,255,255,.16);}
.footer-bottom{max-width:1080px;margin:38px auto 0;padding:20px 24px 0;border-top:1px solid rgba(255,255,255,.18);
  font-size:12.5px;color:rgba(255,255,255,.55);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}
.footer-bottom a{display:inline;margin-bottom:0;color:rgba(255,255,255,.55);}

/* 页头横幅（内页 hero，矮一点） */
.page-hero{background:linear-gradient(115deg,var(--hero-1),var(--hero-2));color:#fff;padding:clamp(64px,10vw,110px) 0;}
.page-hero h1{font-size:clamp(26px,4.4vw,40px);font-weight:700;}
.page-hero p{margin-top:12px;color:rgba(255,255,255,.75);max-width:600px;}

/* 面包屑 */
.crumb{font-size:13px;color:var(--muted);padding:18px 0 0;}
.crumb a:hover{color:var(--accent);}

.blog-item{border:1px solid var(--line);border-radius:4px;padding:24px;background:#fff;}
.blog-item h3{font-size:16.5px;margin-bottom:8px;}
.blog-item .date{font-size:12.5px;color:var(--muted);margin-bottom:8px;display:block;}
.blog-item p{font-size:14px;color:var(--ink-2);}

/* ── 核心能力（深色图卡，模板同款） ─────────── */
.cap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
@media(max-width:900px){.cap-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.cap-grid{grid-template-columns:1fr;}}
.cap-card{position:relative;height:240px;border-radius:4px;overflow:hidden;
  background:linear-gradient(145deg,#262b31,#3d444d 55%,#2c3238);color:#fff;
  display:flex;flex-direction:column;justify-content:flex-end;padding:20px;}
/* 拿到照片后把 background 换成 url(/images/cap1.jpg) center/cover */
.cap-card::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.55),transparent 60%);}
.cap-card h3{position:relative;z-index:1;font-size:16.5px;font-weight:600;}
.cap-card p{position:relative;z-index:1;font-size:12.5px;color:rgba(255,255,255,.72);margin-top:6px;line-height:1.6;}

/* ── 服务于多元市场（行业标签，模板同款） ───── */
.chips{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
@media(max-width:760px){.chips{grid-template-columns:repeat(2,1fr);}}
.chip{border:1px solid var(--line);border-radius:4px;padding:26px 14px;text-align:center;background:#fff;
  font-size:15.5px;font-weight:600;color:var(--ink);transition:border-color .2s,color .2s;}
.chip:hover{border-color:var(--accent);color:var(--accent);}
.chip small{display:block;font-size:12px;font-weight:400;color:var(--muted);margin-top:6px;}

/* ── 使命 / 愿景 ─────────────────────────── */
.mv{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
@media(max-width:760px){.mv{grid-template-columns:1fr;}}
.mv-card{background:linear-gradient(140deg,#20242a,#343b44);border-radius:4px;color:#fff;padding:36px 32px;}
.mv-card h3{font-size:20px;margin-bottom:12px;}
.mv-card p{font-size:14px;color:rgba(255,255,255,.75);line-height:1.9;}
.mv-card .en{font-size:12px;letter-spacing:.2em;color:var(--accent);font-weight:700;display:block;margin-bottom:10px;text-transform:uppercase;}

/* ── 客户评价 ────────────────────────────── */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media(max-width:860px){.quotes{grid-template-columns:1fr;}}
.quote{border:1px solid var(--line);border-radius:4px;padding:26px;background:#fff;font-size:14.5px;color:var(--ink-2);position:relative;}
.quote::before{content:"\201C";position:absolute;top:8px;right:20px;font-size:54px;color:var(--accent-soft);font-family:serif;line-height:1;}
.quote .who{margin-top:14px;font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:12px;}
.quote .who b{color:var(--ink);font-size:13.5px;}