/* ==========================================================================
   惠隆包装 HUILONG PACKAGING — 全站样式
   配色：深炭首屏 + 橙色强调 + 牛皮纸暖调，B2B 外贸风格
   ========================================================================== */
:root {
  --ink: #1a1d21;
  --dark: #15181c;
  --dark-2: #1f2429;
  --paper: #ffffff;
  --white: #ffffff;
  --accent: #e8722a;
  --accent-dark: #c95d1d;
  --kraft: #c89b6d;
  --muted: #6b7280;
  --muted-2: #9aa3ad;
  --line: #e6e8eb;
  --line-dark: rgba(255, 255, 255, .12);
  --radius: 10px;
  --shadow: 0 10px 30px rgba(15, 18, 22, .08);
  --gold: #bfa05a;
  --gold-2: #e6d2a0;
  --serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; }

.container { width: min(1180px, 92%); margin: 0 auto; }

/* ---------- 顶部导航（轻奢米白风） ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .82);
  border-bottom: 1px solid rgba(191, 160, 90, .20);
  backdrop-filter: blur(12px);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 70px; gap: 16px;
}
.logo { display: flex; align-items: center; gap: 11px; color: var(--ink); }
.logo-img { display: block; height: 44px; width: auto; }
.logo-footer .logo-img { height: 66px; }
/* logo 的 <picture> 只是「优先 webp」的包装，不能改变 img 原本的尺寸与对齐。
   display:contents 让 picture 本身不生成盒子，img 仍直接参与父级布局，
   效果与不加 picture 完全一致（首图的 .fb-media picture 需要 block，单独排除了）。 */
.logo-mark picture, .hb-mark picture, .logo-footer picture, .m-brand picture { display: contents; }
/* 导航 logo：品牌标识（透明无底，按原图比例显示）+ 公司名称（中英） */
.logo-mark {
  flex: none; display: flex; align-items: center;
}
/* mark.png 内容为宽幅（约 1.47:1），按高度等比缩放，避免正方框纵向拉伸 */
.logo-mark img { height: 36px; width: auto; display: block; }
.logo-text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.logo-text b {
  font-family: var(--serif);
  font-size: 21px; font-weight: 700; letter-spacing: 1px; color: var(--ink);
  white-space: nowrap;
}
/* 导航栏「中国广东」：与右上角同一套设计语言（圆点 + 疏排小字），
   但头部是浅米白底，所以圆点用品牌金、文字用深金棕。 */
.logo-name { display: flex; align-items: baseline; gap: 10px; }
.logo-name em {
  position: relative;
  font-style: normal; font-size: 11.5px; font-weight: 600;
  letter-spacing: .16em; white-space: nowrap;
  color: #8a6d1f;
  padding-left: 15px;
}
.logo-name em::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(191, 160, 90, .18);
}
.logo-text i {
  font-style: normal; font-size: 9.5px; letter-spacing: 1.2px; color: var(--muted);
  margin-top: 3px; white-space: nowrap;
}

.main-nav { display: flex; align-items: center; gap: 4px; }
.main-nav a {
  color: var(--muted); font-size: 15.5px; padding: 8px 15px; border-radius: 8px;
  transition: color .2s, background .2s;
}
.main-nav a:hover { color: var(--gold); background: rgba(191, 160, 90, .10); }
.main-nav a.active { color: var(--gold); background: rgba(191, 160, 90, .14); font-weight: 600; }

.lang-switch {
  display: flex; align-items: center; gap: 2px;
  border: 1px solid rgba(191, 160, 90, .35); border-radius: 999px; padding: 3px;
  margin-left: 8px;
}
.lang-switch button {
  border: none; background: transparent; color: var(--muted);
  font-size: 12px; padding: 5px 12px; border-radius: 999px;
}
.lang-switch button.active { background: var(--gold); color: #fff; font-weight: 700; }

.nav-toggle {
  display: none; border: 1px solid rgba(191, 160, 90, .35); background: transparent;
  border-radius: 8px; color: var(--ink); width: 40px; height: 40px; font-size: 18px;
}

/* ---------- 通用板块 ---------- */
.section { padding: 84px 0; }
.section.tight { padding: 60px 0; }
.section-head { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.section-head .kicker {
  display: inline-block; color: var(--accent); font-size: 12px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase; margin-bottom: 12px;
}
.section-head h2 {
  font-family: var(--serif); font-size: clamp(26px, 4vw, 38px); font-weight: 900;
  letter-spacing: 1px; line-height: 1.3;
}
.section-head p { color: var(--muted); margin-top: 14px; font-size: 15px; }
.on-dark .section-head h2 { color: #fff; }
.on-dark .section-head p { color: var(--muted-2); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; border-radius: 999px; padding: 13px 30px;
  font-size: 15px; font-weight: 700; transition: transform .15s, box-shadow .2s, background .2s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: linear-gradient(135deg, var(--accent), #f2a05e); color: #fff; box-shadow: 0 8px 22px rgba(232, 114, 42, .35); }
.btn-primary:hover { box-shadow: 0 12px 28px rgba(232, 114, 42, .45); }
.btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .4); }
.btn-ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }
.btn-outline { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.btn-outline:hover { background: rgba(232, 114, 42, .08); }

/* ---------- 首页 Banner ---------- */
.hero {
  position: relative; color: #fff; overflow: hidden;
  background:
    radial-gradient(900px 420px at 85% -10%, rgba(232, 114, 42, .22), transparent 60%),
    radial-gradient(700px 380px at -10% 110%, rgba(200, 155, 109, .16), transparent 60%),
    linear-gradient(160deg, #15181c 0%, #1d232a 60%, #15181c 100%);
  padding: 110px 0 120px;
}
.hero::before {
  content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 56px 56px;
}
.hero-inner { position: relative; max-width: 780px; }
.hero .badge {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid rgba(232, 114, 42, .55); color: #f2a05e;
  border-radius: 999px; padding: 6px 16px; font-size: 12px; letter-spacing: 2px;
  text-transform: uppercase; font-weight: 700; margin-bottom: 26px;
}
.hero h1 {
  font-family: var(--serif);
  font-size: clamp(34px, 6vw, 60px); font-weight: 900; line-height: 1.2; letter-spacing: 1px;
}
.hero h1 .hl { color: var(--accent); }
.hero p.lead { margin-top: 22px; font-size: 16px; color: #c3cad2; max-width: 640px; }
.hero .cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }

/* 数据带 */
.stats-band { background: linear-gradient(120deg, var(--accent), #d96a1f); color: #fff; padding: 40px 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.stat .num { font-size: clamp(30px, 4vw, 44px); font-weight: 900; font-family: var(--serif); }
.stat .num small { font-size: .55em; font-weight: 700; margin-left: 2px; }
.stat .label { font-size: 13px; opacity: .92; margin-top: 4px; letter-spacing: 1px; }

/* ---------- 关于摘要 ---------- */
.about-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.about-grid h2 { font-family: var(--serif); font-size: clamp(24px, 3.4vw, 34px); font-weight: 900; line-height: 1.35; }
.about-grid .kicker { color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; }
.about-grid p { color: var(--muted); margin-top: 16px; font-size: 15px; }
.about-points { margin-top: 24px; display: grid; gap: 14px; }
.about-points li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; }
.about-points .dot {
  flex: none; width: 24px; height: 24px; border-radius: 50%; margin-top: 2px;
  background: rgba(232, 114, 42, .14); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 900;
}

/* 纸盒插画 */
.box-visual {
  position: relative; border-radius: 16px; overflow: hidden;
  background: linear-gradient(150deg, #f0ebe2, #e2d8c8);
  min-height: 380px; box-shadow: var(--shadow);
  display: flex; align-items: center; justify-content: center;
}
.box-visual svg { width: 72%; height: auto; }

/* ---------- 产品分类卡片 ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cat-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; transition: transform .2s, box-shadow .25s; display: flex; flex-direction: column;
}
.cat-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.cat-thumb { height: 150px; position: relative; overflow: hidden; }
.cat-thumb .ph {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
}
.cat-thumb svg { width: 84px; height: 84px; opacity: .9; }
.cat-body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.cat-body h3 { font-size: 18px; font-weight: 800; letter-spacing: .5px; }
.cat-body p { color: var(--muted); font-size: 14px; flex: 1; }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  font-size: 11px; color: var(--muted); background: var(--paper);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px;
}
.cat-link { color: var(--accent); font-weight: 700; font-size: 14px; margin-top: 4px; }
.cat-card:hover .cat-link { text-decoration: underline; }

/* 产品网格（列表页） */
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 40px; }
.filter-chip {
  border: 1px solid var(--line); background: var(--white); color: var(--muted);
  border-radius: 999px; padding: 9px 20px; font-size: 14px; font-weight: 600;
  transition: all .2s;
}
.filter-chip:hover { border-color: var(--accent); color: var(--accent); }
.filter-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.product-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .2s, box-shadow .25s;
}
.product-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.product-thumb { height: 170px; position: relative; overflow: hidden; }
.product-thumb .ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.product-thumb svg { width: 90px; height: 90px; }
.product-thumb .doc-tag {
  position: absolute; top: 12px; right: 12px;
  background: rgba(21, 24, 28, .78); color: #f2a05e; font-size: 10px; letter-spacing: 1px;
  padding: 4px 10px; border-radius: 4px; border: 1px solid rgba(242, 160, 94, .4);
}
.product-body { padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.product-body h3 { font-size: 16px; font-weight: 800; }
.product-body .en-name { font-size: 12px; color: var(--muted-2); letter-spacing: .5px; }
.product-body p { color: var(--muted); font-size: 13.5px; flex: 1; }
.product-body .more { color: var(--accent); font-size: 13px; font-weight: 700; }
.product-card:hover .more { text-decoration: underline; }

/* ---------- 优势 ---------- */
.adv-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.adv-card {
  background: var(--dark-2); border: 1px solid var(--line-dark); border-radius: var(--radius);
  padding: 30px 26px; transition: transform .2s, border-color .2s;
}
.adv-card:hover { transform: translateY(-4px); border-color: rgba(232, 114, 42, .5); }
.adv-card .big { font-family: var(--serif); font-size: 15px; font-weight: 900; color: var(--accent); letter-spacing: 1px; }
.adv-card h3 { color: #fff; font-size: 17px; font-weight: 800; margin: 10px 0 10px; letter-spacing: .5px; }
.adv-card p { color: var(--muted-2); font-size: 13.5px; }

/* ---------- 流程 ---------- */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; counter-reset: step; }
.step {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 20px; position: relative;
}
.step .no {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #f2a05e); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 16px; margin-bottom: 16px;
}
.step h3 { font-size: 15px; font-weight: 800; letter-spacing: .5px; }
.step p { color: var(--muted); font-size: 13px; margin-top: 8px; }

/* ---------- 工厂 / CTA 横条 ---------- */
.factory-band {
  background:
    radial-gradient(700px 320px at 90% 20%, rgba(232, 114, 42, .2), transparent 60%),
    linear-gradient(150deg, #1d232a, #15181c);
  color: #fff; border-radius: 18px; padding: 60px;
  display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: center;
}
.factory-band h2 { font-family: var(--serif); font-size: clamp(22px, 3vw, 30px); font-weight: 900; }
.factory-band p { color: var(--muted-2); margin-top: 14px; font-size: 14.5px; }
.factory-facts { display: grid; gap: 12px; }
.factory-facts li {
  display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid var(--line-dark); border-radius: 10px; padding: 14px 16px;
  font-size: 14px; color: #d7dce2; background: rgba(255, 255, 255, .03);
}
.factory-facts .ic { color: var(--accent); font-weight: 900; }

/* ---------- 联系 ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.contact-info h2 { font-family: var(--serif); font-size: clamp(24px, 3.4vw, 34px); font-weight: 900; }
.contact-info > p { color: var(--muted); margin-top: 14px; font-size: 15px; }
.info-list { margin-top: 28px; display: grid; gap: 14px; }
.info-list li {
  display: flex; gap: 14px; background: var(--white); border: 1px solid var(--line);
  border-radius: 10px; padding: 16px 18px;
}
.info-list .k { flex: none; width: 42px; height: 42px; border-radius: 10px;
  background: rgba(232, 114, 42, .12); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-size: 18px; }
.info-list .v b { display: block; font-size: 12px; color: var(--muted-2); letter-spacing: 1.5px; text-transform: uppercase; }
.info-list .v span { font-size: 15px; font-weight: 600; }

.contact-form {
  background: var(--white); border: 1px solid var(--line); border-radius: 14px;
  padding: 32px; box-shadow: var(--shadow);
}
.contact-form h3 { font-size: 18px; font-weight: 800; margin-bottom: 18px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .full { grid-column: 1 / -1; }
.contact-form label { font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: 1px; display: block; margin-bottom: 6px; }
.contact-form input, .contact-form select, .contact-form textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 8px;
  padding: 11px 13px; font-size: 14px; font-family: inherit; background: #fbfaf8;
  transition: border-color .2s;
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
  outline: none; border-color: var(--accent);
}
.contact-form textarea { resize: vertical; min-height: 110px; }
.form-tip { font-size: 12px; color: var(--muted-2); margin-top: 10px; }

/* ---------- 产品文档页（仿说明书样式） ---------- */
.doc-wrap { padding: 46px 0 90px; }
.breadcrumb { font-size: 13px; color: var(--muted); margin-bottom: 26px; }
.breadcrumb a { color: var(--accent); }
.breadcrumb a:hover { text-decoration: underline; }

.doc-sheet {
  background: var(--white); border: 1px solid var(--line); border-radius: 6px;
  box-shadow: var(--shadow); overflow: hidden;
}
.doc-toolbar {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 14px 24px; border-bottom: 1px solid var(--line); background: #fbfaf8;
  font-size: 12px; color: var(--muted);
}
.doc-toolbar .actions { display: flex; gap: 8px; }
.doc-toolbar button {
  border: 1px solid var(--line); background: var(--white); border-radius: 6px;
  font-size: 12px; padding: 6px 14px; color: var(--muted); transition: all .2s;
}
.doc-toolbar button:hover { border-color: var(--accent); color: var(--accent); }

.doc-head {
  padding: 44px 48px 36px; border-bottom: 3px double var(--line);
  display: flex; justify-content: space-between; gap: 30px; align-items: flex-start;
}
.doc-head .cat-line { font-size: 12px; color: var(--accent); font-weight: 700; letter-spacing: 2px; }
.doc-head h1 { font-family: var(--serif); font-size: clamp(26px, 4vw, 40px); font-weight: 900; margin-top: 8px; line-height: 1.25; }
.doc-head .en-title { font-size: 15px; color: var(--muted); letter-spacing: 1px; margin-top: 8px; }
.doc-head .tagline { color: var(--muted); font-size: 14.5px; margin-top: 16px; max-width: 560px; }
.doc-stamp {
  flex: none; text-align: center; border: 2px solid var(--accent); color: var(--accent);
  border-radius: 6px; padding: 10px 16px; transform: rotate(6deg);
}
.doc-stamp .zh { font-family: var(--serif); font-size: 15px; font-weight: 900; letter-spacing: 3px; }
.doc-stamp .en { font-size: 9px; letter-spacing: 2px; margin-top: 2px; }

.doc-body { padding: 40px 48px 48px; display: grid; grid-template-columns: 1.6fr 1fr; gap: 48px; }
.doc-main .doc-sec { margin-bottom: 36px; }
.doc-sec > h2 {
  font-size: 15px; font-weight: 900; letter-spacing: 1px; color: var(--ink);
  padding-left: 12px; border-left: 4px solid var(--accent); margin-bottom: 18px;
}
.doc-sec p { color: #4b5563; font-size: 14.5px; margin-bottom: 12px; }

/* 【】规格表（仿说明书字段） */
.spec-table { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.spec-row { display: grid; grid-template-columns: 170px 1fr; border-bottom: 1px solid var(--line); }
.spec-row:last-child { border-bottom: none; }
.spec-row:nth-child(odd) { background: #fbfaf8; }
.spec-row .k {
  padding: 12px 16px; font-size: 13.5px; font-weight: 700; color: var(--ink);
  border-right: 1px solid var(--line);
}
.spec-row .k::before { content: "【"; color: var(--accent); font-weight: 900; }
.spec-row .k::after { content: "】"; color: var(--accent); font-weight: 900; }
.spec-row .v { padding: 12px 16px; font-size: 13.5px; color: #4b5563; }

.feat-list li, .app-list li {
  position: relative; padding: 8px 0 8px 24px; font-size: 14.5px; color: #4b5563;
  border-bottom: 1px dashed var(--line);
}
.feat-list li:last-child, .app-list li:last-child { border-bottom: none; }
.feat-list li::before, .app-list li::before {
  content: ""; position: absolute; left: 4px; top: 16px;
  width: 8px; height: 8px; border-radius: 2px; background: var(--accent); transform: rotate(45deg);
}

/* 文档侧栏 */
.doc-side .quote-card {
  background: linear-gradient(150deg, #1d232a, #15181c); color: #fff;
  border-radius: 12px; padding: 28px; position: sticky; top: 92px;
}
.quote-card h3 { font-size: 17px; font-weight: 800; }
.quote-card p { color: var(--muted-2); font-size: 13px; margin-top: 8px; }
.quote-card .btn { width: 100%; margin-top: 18px; }
.quote-contact { margin-top: 20px; border-top: 1px solid var(--line-dark); padding-top: 16px; display: grid; gap: 10px; }
.quote-contact li { display: flex; gap: 10px; font-size: 13.5px; color: #d7dce2; }
.quote-contact .k { color: var(--accent); font-weight: 800; flex: none; width: 82px; }

.related h3 { font-size: 15px; font-weight: 900; letter-spacing: 1px; margin-bottom: 14px; }
.related ul { display: grid; gap: 8px; }
.related li a {
  display: flex; justify-content: space-between; gap: 10px;
  border: 1px solid var(--line); border-radius: 8px; padding: 11px 14px;
  font-size: 13.5px; color: #4b5563; transition: all .2s; background: var(--white);
}
.related li a:hover { border-color: var(--accent); color: var(--accent); }
.related li .arrow { color: var(--accent); }

.doc-nav { display: flex; justify-content: space-between; gap: 16px; margin-top: 26px; }
.doc-nav a {
  border: 1px solid var(--line); background: var(--white); border-radius: 8px;
  padding: 12px 18px; font-size: 13.5px; color: var(--muted); max-width: 48%;
  transition: all .2s;
}
.doc-nav a:hover { border-color: var(--accent); color: var(--accent); }
.doc-nav a b { display: block; font-size: 11px; letter-spacing: 1px; color: var(--muted-2); margin-bottom: 2px; }
.doc-nav a.next { text-align: right; margin-left: auto; }

/* ---------- 页脚 ---------- */
.site-footer { background: var(--dark); color: #b9c0c8; padding: 64px 0 0; margin-top: 0; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 48px; }
.footer-grid h4 { color: #fff; font-size: 14px; letter-spacing: 2px; margin-bottom: 18px; }
.footer-grid p { font-size: 13.5px; }
.footer-grid ul { display: grid; gap: 10px; }
.footer-grid ul a { font-size: 13.5px; transition: color .2s; }
.footer-grid ul a:hover { color: var(--accent); }
.footer-bottom {
  border-top: 1px solid var(--line-dark); padding: 20px 0;
  font-size: 12.5px; color: #7c848d; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}

/* ---------- 打印样式（产品文档可直接打印） ---------- */
@media print {
  .site-header, .site-footer, .doc-toolbar, .doc-side, .doc-nav, .breadcrumb { display: none !important; }
  body { background: #fff; }
  .doc-sheet { border: none; box-shadow: none; }
  .doc-body { grid-template-columns: 1fr; padding: 0; }
  .doc-head, .doc-body { padding-left: 0; padding-right: 0; }
}

/* ---------- 响应式 ---------- */
@media (max-width: 1000px) {
  .cat-grid, .product-grid { grid-template-columns: repeat(2, 1fr); }
  .adv-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .about-grid, .contact-grid { grid-template-columns: 1fr; }
  .factory-band { grid-template-columns: 1fr; padding: 40px 28px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .doc-body { grid-template-columns: 1fr; }
  .doc-side .quote-card { position: static; }
}
@media (max-width: 640px) {
  .main-nav {
    display: none; position: absolute; top: 70px; left: 0; right: 0;
    background: #fff; flex-direction: column; align-items: stretch;
    padding: 12px 16px 18px; border-bottom: 1px solid rgba(191,160,90,.2); gap: 4px;
    box-shadow: 0 16px 32px rgba(120,100,60,.12);
  }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 12px 14px; }
  /* 窄屏：logo 文字和「中国广东」chip 一起缩小，避免把头部挤爆 */
  .logo-mark img { width: 30px; height: 30px; }
  .logo-text b { font-size: 18px; }
  .logo-name { gap: 7px; }
  .logo-name em { font-size: 10.5px; letter-spacing: .1em; padding-left: 12px; }
  .logo-name em::before { width: 4px; height: 4px; margin-top: -2px; }
  .nav-toggle { display: block; }
  .hero { padding: 72px 0 84px; }
  .cat-grid, .product-grid, .adv-grid, .steps { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .doc-head, .doc-body { padding-left: 22px; padding-right: 22px; }
  .doc-head { flex-direction: column; }
  .doc-stamp { align-self: flex-start; transform: rotate(0); }
  .spec-row { grid-template-columns: 112px 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .section { padding: 60px 0; }
}

/* ==========================================================================
   视觉升级（2026-10）
   —— 真实样品实拍 + 双栏 Hero + 卡片质感 + 滚动动效
   ========================================================================== */

/* ---------- 导航：滚动后浅色投影（轻奢） ---------- */
html { scroll-padding-top: 86px; }   /* 固定导航下锚点跳转留位 */
.site-header { transition: background .3s ease, box-shadow .3s ease, transform .45s cubic-bezier(.32,.72,.36,1), border-color .3s ease; }
.site-header.scrolled {
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 10px 32px rgba(120, 100, 60, .14);
}
/* ---------- 首页专属：首屏全屏时导航隐藏，下滑后滑入 ---------- */
.site-header.hero-top {
  position: fixed; top: 0; left: 0; right: 0;
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .45s cubic-bezier(.32,.72,.36,1), visibility 0s linear .45s;
}
.site-header.hero-top.scrolled {
  transform: translateY(0);
  visibility: visible;
  background: rgba(255, 255, 255, .94);
  border-bottom-color: rgba(191, 160, 90, .20);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 32px rgba(120, 100, 60, .14);
  transition: transform .45s cubic-bezier(.32,.72,.36,1), visibility 0s;
}
.header-inner { transition: height .3s ease; }

/* ---------- 导航右侧 CTA（金色） ---------- */
.nav-cta {
  margin-left: 14px; padding: 9px 18px; border-radius: 999px;
  background: linear-gradient(140deg, var(--gold), #9c7c3a);
  color: #fff !important; font-size: 13.5px; font-weight: 600; letter-spacing: .2px;
  box-shadow: 0 8px 18px rgba(191,160,90,.30);
  transition: transform .2s ease, box-shadow .2s ease;
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 12px 24px rgba(191,160,90,.40); }

/* ---------- Hero：左文右图 ---------- */
.hero {
  padding: 84px 0 96px;
  background:
    radial-gradient(900px 420px at 78% 18%, rgba(232,114,42,.16), transparent 62%),
    radial-gradient(700px 380px at 8% 86%, rgba(201,93,29,.10), transparent 60%),
    var(--dark);
}
.hero-grid {
  display: grid; grid-template-columns: 1.02fr .98fr;
  gap: 56px; align-items: center;
}
.hero-copy h1 { font-size: clamp(34px, 4.1vw, 52px); line-height: 1.16; }
.hero-copy .lead { max-width: 540px; }
.hero-trust { margin-top: 28px; display: grid; gap: 10px; }
.hero-trust li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: rgba(255,255,255,.74); line-height: 1.5; }
.hero-trust i {
  flex: none; width: 19px; height: 19px; margin-top: 1px; border-radius: 50%;
  background: rgba(232,114,42,.18); color: var(--accent);
  font-style: normal; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* 实拍拼贴 */
.hero-visual { position: relative; }
.hv-main {
  position: relative; margin: 0; border-radius: 22px; overflow: hidden;
  box-shadow: 0 34px 70px rgba(0,0,0,.5);
}
.hv-main img { width: 100%; height: 470px; object-fit: cover; object-position: center 56%; display: block; }
.hv-main::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,.5) 100%);
}
.hv-main figcaption {
  position: absolute; right: 18px; bottom: 16px; z-index: 2; text-align: right;
  color: #fff; font-size: 12.5px; font-weight: 600; letter-spacing: .3px;
  text-shadow: 0 2px 12px rgba(0,0,0,.7);
}
.hv-sub {
  position: absolute; margin: 0; width: 172px; border-radius: 16px; overflow: hidden;
  border: 3px solid rgba(255,255,255,.1);
  box-shadow: 0 22px 48px rgba(0,0,0,.5);
}
.hv-sub img { width: 100%; height: 136px; object-fit: cover; display: block; }
.hv-sub::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.68) 100%);
}
.hv-sub figcaption {
  position: absolute; left: 10px; bottom: 9px; z-index: 2; color: #fff;
  font-size: 10.5px; font-weight: 600; text-shadow: 0 1px 8px rgba(0,0,0,.85);
}
.hv-s1 { left: -30px; bottom: -26px; transform: rotate(-4.5deg); z-index: 3; }
.hv-s2 { right: -26px; top: -30px; transform: rotate(4.5deg); z-index: 3; }
.hv-chip {
  position: absolute; right: 14px; bottom: -22px; z-index: 4;
  background: #fff; border-radius: 16px; padding: 13px 18px;
  box-shadow: 0 20px 44px rgba(0,0,0,.3);
  display: flex; align-items: baseline; gap: 8px;
}
.hv-chip b { font-family: var(--serif); font-size: 27px; color: var(--accent); line-height: 1; }
.hv-chip span { font-size: 11.5px; color: var(--muted); }
.hv-tag {
  position: absolute; left: 16px; top: 20px; z-index: 4;
  font-size: 9.5px; letter-spacing: 2.4px; text-transform: uppercase; font-weight: 700;
  color: rgba(255,255,255,.85); background: rgba(10,12,14,.45);
  border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 5px 12px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

/* ---------- 关于区：实景图 + 悬浮指标卡 ---------- */
.box-visual {
  position: relative; border-radius: 24px; overflow: hidden;
  box-shadow: 0 28px 64px rgba(18,20,24,.2); background: #eceae5; min-height: 400px;
}
.bv-photo { width: 100%; height: 100%; min-height: 400px; object-fit: cover; display: block; }
.bv-card {
  position: absolute; z-index: 3; background: #fff; border-radius: 14px;
  padding: 12px 16px; box-shadow: 0 16px 38px rgba(18,20,24,.18);
  max-width: 210px;
}
.bv-card b { display: block; font-family: var(--serif); font-size: 19px; color: var(--accent); line-height: 1.2; }
.bv-card span { display: block; margin-top: 2px; font-size: 11px; color: var(--muted); line-height: 1.45; }
.bv-c1 { left: 20px; bottom: 20px; }
.bv-c2 { right: 20px; top: 20px; }

/* ---------- 分类卡：实拍图 ---------- */
.cat-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cat-card { overflow: hidden; border-radius: 18px; transition: transform .28s ease, box-shadow .28s ease; }
.cat-card:hover { transform: translateY(-6px); box-shadow: 0 26px 52px rgba(18,20,24,.14); }
.cat-thumb {
  position: relative; height: 230px; overflow: hidden; background: #f1efe9;
}
.cat-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 56%;
  display: block; transition: transform .55s cubic-bezier(.22,.7,.28,1);
}
.cat-card:hover .cat-thumb img { transform: scale(1.07); }
.cat-thumb::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(12,14,17,.5) 100%);
}
.cat-count {
  position: absolute; right: 12px; top: 12px; z-index: 3;
  background: rgba(255,255,255,.94); color: var(--ink);
  border-radius: 999px; padding: 4px 12px; font-size: 11.5px; font-weight: 700;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}
.cat-en {
  position: absolute; left: 14px; bottom: 12px; z-index: 3;
  color: rgba(255,255,255,.9); font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase;
}
.cat-body { padding: 20px 22px 22px; }
.cat-body h3 { font-size: 19px; }
.cat-body p { margin-top: 8px; }

/* 第 6 张：全部产品目录 */
.cat-card.cat-all {
  background: linear-gradient(150deg, #1b1f24, #101317);
  color: #fff; display: flex; flex-direction: column; justify-content: space-between;
  border: 1px solid rgba(255,255,255,.08);
}
.cat-card.cat-all:hover { box-shadow: 0 26px 52px rgba(18,20,24,.34); }
.cat-all-body { padding: 26px 24px 24px; height: 100%; display: flex; flex-direction: column; }
.cat-all-kicker {
  font-size: 10px; letter-spacing: 2.6px; text-transform: uppercase; color: var(--accent); font-weight: 700;
}
.cat-all-body h3 { margin-top: 14px; font-size: 21px; color: #fff; }
.cat-all-body p { margin-top: 10px; color: rgba(255,255,255,.62); font-size: 13.5px; }
.cat-all-body .cat-link { margin-top: auto; color: var(--accent); }

/* ---------- 产品卡（产品中心页） ---------- */
.product-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
.product-card { border-radius: 18px; overflow: hidden; transition: transform .28s ease, box-shadow .28s ease; }
.product-card:hover { transform: translateY(-6px); box-shadow: 0 26px 52px rgba(18,20,24,.13); }
.product-thumb { position: relative; height: 300px; overflow: hidden; background: #f1efe9; }
.product-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 56%;               /* 实拍图为 2:3 竖构图，焦点对准盒体 */
  display: block; transition: transform .55s cubic-bezier(.22,.7,.28,1);
}
.product-card:hover .product-thumb img { transform: scale(1.06); }
.product-thumb::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(12,14,17,.42) 100%);
}
/* BUG 修复（2026-10-23）：上面第 233 行那条同优先级规则留了 top:12px / right:12px，
   如果这里不显式清掉，绝对定位的span 四条边全被指定 → 被拉成
   「卡片图减去 14/12 内边距」那么大的一整块 rgba(255,255,255,.94) 白面板，
   视觉上就是「产品列表图片上有个白遮挡」。必须 top/right:auto 只留左下角贴边。 */
.product-thumb .doc-tag {
  position: absolute; top: auto; right: auto; left: 14px; bottom: 12px; z-index: 3;
  white-space: nowrap;                       /* 明确不被stretch 拉宽 */
  background: rgba(255,255,255,.94); color: var(--ink);
}
.product-body { padding: 20px 22px 22px; }
.product-body h3 { font-size: 17px; }
.product-body .en-name { display: block; margin-top: 4px; font-size: 11.5px; color: var(--muted-2); letter-spacing: .4px; }

/* ---------- 文档页：主图轮播（横向 scroll-snap）+ 文字并排 ---------- */
.doc-head { position: relative; }
.doc-head-main { display: flex; gap: 30px; align-items: flex-start; }
.doc-gallery {
  /* 290×380 → 380×500 → 440×580（客户两次要求「再大一点」）。
     清晰度核算：产品实拍原图 1280×1707，这里按440 宽显示还有 2.9 倍余量，
     依旧是「缩小显示」，retina 屏也不发虚；配合 object-fit: cover
     裁掉多余留白，产品主体更突出。 */
  width: 440px; height: 580px; flex: none; position: relative;
  border-radius: 16px; overflow: hidden; background: #f1efe9;
  box-shadow: 0 18px 40px rgba(18,20,24,.14);
  /* 键盘可达：左右方向键翻页 */
  outline: none;
}
.doc-gallery:focus-visible { box-shadow: 0 0 0 3px rgba(232,114,42,.45), 0 18px 40px rgba(18,20,24,.14); }
/* 左右切换按钮（电脑端没有触摸手势，靠它翻页） */
.doc-g-btn {
  position: absolute; top: 50%; z-index: 4;
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; line-height: 1; color: #fff;
  background: rgba(18, 20, 24, .55);
  border: 1px solid rgba(255, 255, 255, .28);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transform: translateY(-50%);
  transition: background .2s, transform .16s, opacity .2s;
  opacity: .55;                  /* 常态半透明可见（客户要求「加切换按钮」，
                                   做成全隐形会让人以为没有），悬停/聚焦时全亮 */
}
.doc-gallery:hover .doc-g-btn, .doc-gallery:focus-within .doc-g-btn { opacity: 1; }
.doc-g-btn:hover { background: rgba(232, 114, 42, .92); border-color: rgba(255, 255, 255, .5); }
.doc-g-btn:active { transform: translateY(-50%) scale(.92); }
.doc-g-prev { left: 10px; }
.doc-g-next { right: 10px; }
/* 触屏没有 hover，按钮常驻可见，否则手机上也点不到 */
@media (hover: none) {
  .doc-g-btn { opacity: .92; width: 34px; height: 34px; font-size: 21px; }
}
.doc-g-track {
  display: flex; width: 100%; height: 100%;
  overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  cursor: grab;                /* 电脑端可按住左右拖（新增，见 main.js bindDocGallery） */
  user-select: none; -webkit-user-select: none;
}
.doc-g-track:active { cursor: grabbing; }
/* 拖拽翻页时不要选中文本/图片 */
.doc-g-track img { -webkit-user-drag: none; user-select: none; pointer-events: none; }
.doc-g-track::-webkit-scrollbar { display: none; }
.doc-g-slide { flex: none; width: 100%; height: 100%; scroll-snap-align: center; }
.doc-g-slide img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 55%;
  display: block;
}
.doc-g-dots {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 12px; z-index: 2;
  display: flex; gap: 6px;
}
.doc-g-dots i {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,.45); transition: all .25s;
}
.doc-g-dots i.on { width: 16px; border-radius: 3px; background: #fff; }
.doc-g-idx {
  position: absolute; right: 10px; top: 10px; z-index: 2;
  font-size: 11px; letter-spacing: .5px; color: #fff;
  background: rgba(10,12,14,.45); border-radius: 999px; padding: 3px 9px;
}

/* ---------- 工厂横条：车间实景做背景 ---------- */
.factory-band {
  position: relative; overflow: hidden;
  background:
    linear-gradient(100deg, rgba(16,19,23,.95) 0%, rgba(16,19,23,.86) 48%, rgba(16,19,23,.55) 100%),
    url('../img/site/shipping.jpg?v=20261023p') center/cover no-repeat;
  /* WebP 优先（同画质小约 70%），不支持的浏览器保留上面的 JPG 声明 */
  background:
    linear-gradient(100deg, rgba(16,19,23,.95) 0%, rgba(16,19,23,.86) 48%, rgba(16,19,23,.55) 100%),
    url('../img/site/shipping.webp?v=20261023p') center/cover no-repeat;
  border-radius: 24px; padding: 52px 54px;
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center;
  box-shadow: 0 28px 60px rgba(18,20,24,.22);
}
.factory-band h2 { color: #fff; }
.factory-band p { color: rgba(255,255,255,.7); }
.factory-facts { display: grid; gap: 12px; }
.factory-facts li {
  display: flex; gap: 11px; align-items: flex-start;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px; padding: 14px 16px; color: rgba(255,255,255,.88); font-size: 13.5px; line-height: 1.5;
}
.factory-facts .ic { color: var(--accent); flex: none; }

/* ---------- 优势 / 流程 / 步骤：质感升级 ---------- */
.adv-card { border-radius: 18px; transition: transform .28s ease, background .28s ease; }
.adv-card:hover { transform: translateY(-5px); }
.section.on-dark .adv-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.section.on-dark .adv-card:hover { background: rgba(255,255,255,.09); }
.step { position: relative; padding-top: 52px; }
.step .no {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: #fff; color: var(--accent); border: 2px solid var(--accent);
  font-family: var(--serif); font-size: 16px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 18px rgba(232,114,42,.18);
}
.steps::before {
  content: ''; position: absolute; left: 10%; right: 10%; top: 20px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 16px);
  z-index: 0;
}
.steps { position: relative; }
.step > * { position: relative; z-index: 1; }

/* ---------- 滚动入场 ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.22,.7,.28,1), transform .7s cubic-bezier(.22,.7,.28,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }

/* ---------- 统计带：数字更立体 ---------- */
.stats-band { background: linear-gradient(120deg, var(--accent), var(--accent-dark)); }
.stat .num { text-shadow: 0 6px 18px rgba(0,0,0,.16); }

/* ---------- 响应式 ---------- */
@media (max-width: 1180px) {
  .hero-grid { gap: 36px; }
  .hv-main img { height: 360px; }
  .hv-sub { width: 148px; }
  .hv-sub img { height: 116px; }
}
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .hero-copy .lead { max-width: none; }
  .hv-main img { height: 320px; }
  .hv-sub { display: none; }
  .hv-chip { right: 12px; bottom: 12px; }
  .cat-grid, .product-grid { grid-template-columns: repeat(2, 1fr); }
  .factory-band { grid-template-columns: 1fr; padding: 38px 32px; }
  .steps::before { display: none; }
  .step { padding-top: 48px; }
}
@media (max-width: 640px) {
  .hero { padding: 56px 0 64px; }
  .hero-grid { gap: 30px; }
  .hv-main img { height: 240px; }
  .hv-chip { padding: 10px 14px; }
  .hv-chip b { font-size: 22px; }
  .cat-grid, .product-grid { grid-template-columns: 1fr; }
  .cat-thumb { height: 168px; }
  .product-thumb { height: 180px; }
  .bv-photo, .box-visual { min-height: 240px; }
  .bv-c2 { right: 12px; top: 12px; padding: 9px 12px; }
  .bv-c1 { left: 12px; bottom: 12px; padding: 9px 12px; }
  .factory-band { padding: 28px 22px; border-radius: 18px; }
  /* 窄屏必须同时放开宽度：桌面端主图已放大到 440px，
     这里若只压高度、宽度还留着 440px，在 375px 手机上会横向溢出。 */
  .doc-gallery { width: 100%; height: 230px; }
  .doc-stamp { top: 230px; right: 22px; }
}

/* ==========================================================================
   PC 精简版（2026-10）：公司简介 / 产品介绍 / 联系方式
   —— 单页三段式，去掉数据带、优势、流程、工厂横条与拼贴 Hero
   ========================================================================== */

/* 锚点定位：避免被固定导航遮住 */
html { scroll-behavior: smooth; }
.anchor-target { scroll-margin-top: 92px; }

/* Hero：只保留一张实拍主图 */
.hero-simple .hv-main img { height: 400px; }
.hero-simple .hero-copy h1 { font-size: clamp(32px, 3.8vw, 48px); }

/* 公司简介：紧凑数字行（替代原来的整条橙色数据带） */
.mini-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 46px;
}
.mini-stats .stat {
  background: var(--white); border: 1px solid var(--line); border-radius: 14px;
  padding: 22px 16px; text-align: center;
}
.mini-stats .num {
  font-family: var(--serif); font-size: clamp(26px, 3vw, 34px);
  font-weight: 900; color: var(--ink); line-height: 1.1;
}
.mini-stats .num small { font-size: .55em; font-weight: 700; margin-left: 2px; }
.mini-stats .label { margin-top: 6px; font-size: 12.5px; color: var(--muted); letter-spacing: .5px; }

/* 产品介绍：5 个分类一行排开，卡片只留标题与数量 */
.cat-grid.simple { grid-template-columns: repeat(5, 1fr); gap: 18px; }
.cat-grid.simple .cat-thumb { height: 190px; }
.cat-grid.simple .cat-body { padding: 16px 16px 18px; }
.cat-grid.simple .cat-body h3 { font-size: 16px; }
.cat-grid.simple .cat-body p,
.cat-grid.simple .cat-body .tag-row { display: none; }
.center-cta { margin-top: 34px; text-align: center; }

/* 页脚：三列精简版 */
.footer-simple { grid-template-columns: 1.6fr 1fr 1.2fr; gap: 36px; }

/* 响应式 */
@media (max-width: 1180px) {
  .cat-grid.simple { grid-template-columns: repeat(3, 1fr); }
  .mini-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1000px) {
  .cat-grid.simple { grid-template-columns: repeat(2, 1fr); }
  .footer-simple { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .hero-simple .hv-main img { height: 240px; }
  .cat-grid.simple { grid-template-columns: 1fr; }
  .cat-grid.simple .cat-thumb { height: 160px; }
  .mini-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .footer-simple { grid-template-columns: 1fr; }
}

/* ==========================================================================
   PC 官网版（2026-10 重新设计）
   —— 官方公司风 + 产品轮播展示（重点）+ 暖橙纸品质感 + 无表单联系方式
   ========================================================================== */

.kicker.gold { color: var(--gold); }
.section-head .kicker.gold { color: var(--gold); }

/* ---------- 首屏全幅大图（PC 全屏沉浸 · 下滑显示导航） ---------- */
.hero-fullbleed {
  position: relative; padding: 0; margin: 0;
  width: 100%; background: #14100c; overflow: hidden;
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center;
}
.fb-media { position: absolute; inset: 0; margin: 0; width: 100%; height: 100%; }
.fb-media picture { display: block; width: 100%; height: 100%; }
.fb-media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 62% 30%; display: block;
  filter: contrast(1.06) saturate(1.05);
}
/* 三重遮罩：顶部压暗（导航滑入区）、左侧压暗（文案区）、底部暗角（图注） */
.fb-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10,7,4,.52) 0%, rgba(10,7,4,.10) 20%, rgba(10,7,4,0) 38%),
    linear-gradient(90deg, rgba(10,7,4,.80) 0%, rgba(10,7,4,.52) 30%, rgba(10,7,4,.18) 52%, rgba(10,7,4,0) 72%),
    linear-gradient(180deg, rgba(10,7,4,0) 58%, rgba(10,7,4,.70) 100%);
}
/* 文案主区：垂直居中，与站点容器同宽 */
.fb-content {
  position: relative; z-index: 2;
  width: min(1180px, 92%); margin: 0 auto;
  padding: 110px 0 128px;
}
/* ---------- 首屏右上角：logo + 公司名称 ---------- */
/* 2026-10-23 整体再放大一档（客户要求「整体美观再大一点」）：
   logo 54→60px、品牌简称 21→23px、公司全称 10→11.5px，
   容器内边距与宽度同步放宽，避免放大后被max-width 挤到换行。 */
.hero-brand {
  position: absolute; top: 24px; right: 4%; z-index: 3;
  display: flex; align-items: center; gap: 15px;
  max-width: min(640px, 68vw);
  padding: 13px 28px 13px 15px; border-radius: 999px;
  background: rgba(18, 14, 9, .32);
  border: 1px solid rgba(244, 234, 212, .24);
  backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .32);
}
.hb-mark { flex: none; display: flex; }
.hb-mark img {
  height: 60px; width: auto; display: block;
  filter: drop-shadow(0 5px 13px rgba(0, 0, 0, .52));
}
.hb-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* 名称行：品牌简称 + 地域小标（客户要求 logo 右侧加「中国广东」） */
.hb-name { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
/* 「中国广东」地域标识（2026-10-23 重做，第二次微调）
   要点：小字要靠「疏 + 淡」取胜，不是靠大。
   字号只跟整体放大一档（13→13.5px），但字重保持 600（中文小字用 500 会发虚糊），
   字距再疏一点 .2em→.24em，颜色提到 .78 白 —— 放大后在小屏浅色图上依然读得清，
   又不会像之前 15.5px/700 那样反客为主跟「惠隆」抢主次。
   圆点从 6px 收到 5px、光晕收细：只做定位锚点，不抢文字的戏。 */
.hb-name em {
  position: relative;
  font-style: normal; font-size: 13.5px; font-weight: 600;
  letter-spacing: .24em; white-space: nowrap;
  color: rgba(255, 255, 255, .78);
  padding-left: 17px;                /* 给圆点留位 */
  text-shadow: 0 1px 8px rgba(0, 0, 0, .28);
}
.hb-name em::before {
  content: ''; position: absolute; left: 1px; top: 50%;
  width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(232, 114, 42, .16);
}
.hb-txt b {
  font-family: var(--serif);
  font-size: 23px; font-weight: 700; color: #fff;
  /* 字间距保持 1.2px（收窄过的）：23px 字号下再拉开会和疏排的
     「中国广东」再次脱节，两个字号都好看的前提是节奏一致。 */
  letter-spacing: 1.2px;
  line-height: 1.2; text-shadow: 0 1px 10px rgba(0, 0, 0, .34);
  white-space: nowrap;
}
.hb-txt i {
  /* 公司全称 10px → 11.5px：这是客户明确要求的放大项。
     同时把颜色提到 .72，浅色背景图上不会糊成一片。 */
  font-style: normal; font-size: 11.5px; letter-spacing: 1px;
  color: rgba(255, 255, 255, .72); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .30);
}
.fb-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 16px; border-radius: 999px;
  border: 1px solid rgba(244, 234, 212, .34);
  background: rgba(20, 16, 12, .34);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-size: 12px; letter-spacing: 2px; color: var(--gold-2);
}
/* 「用纸品 / 讲好你的品牌故事」——2026-10-23 整体缩小一档（客户要求）
   原 clamp(36px, 4.8vw, 66px) 在 1440 以上屏幕直接顶到 66px，
   两行大字把首屏压得很满、也把下面的副文案和按钮挤到视线之外。
   现降到54px 上限，并把 4.8vw → 4.15vw，让大屏和小屏的过渡更平缓。
   行高 1.14 → 1.2：两行中文标题行距太紧会「顶在一起」，1.2 才是舒服的比例。 */
.fb-title {
  margin-top: 20px;
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(33px, 4.15vw, 54px);
  line-height: 1.2; letter-spacing: 1.5px; color: #fff;
  text-shadow: 0 4px 30px rgba(0, 0, 0, .45);
}
.fb-title span, .fb-title em { display: block; font-style: normal; }
.fb-title em { color: var(--gold-2); }
.fb-lead {
  margin-top: 20px; max-width: 620px;
  font-size: clamp(13.5px, 1.05vw, 15.5px); line-height: 1.8;
  color: rgba(255, 255, 255, .84);
  text-shadow: 0 2px 14px rgba(0, 0, 0, .4);
}
.fb-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.fb-btn {
  height: 52px; padding: 0 32px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14.5px; font-weight: 600; letter-spacing: .4px;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.fb-btn-primary {
  background: linear-gradient(140deg, var(--gold), #9c7c3a);
  color: #fff; box-shadow: 0 14px 34px rgba(191, 160, 90, .36);
}
.fb-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(191, 160, 90, .46); }
.fb-btn-ghost {
  border: 1px solid rgba(255, 255, 255, .42); color: #fff;
  background: rgba(255, 255, 255, .06);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.fb-btn-ghost:hover { background: rgba(255, 255, 255, .16); transform: translateY(-2px); }
.fb-trust { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 38px; }
.fb-trust li { display: flex; gap: 9px; align-items: center; font-size: 13px; color: rgba(255, 255, 255, .78); }
.fb-trust i {
  flex: none; width: 19px; height: 19px; border-radius: 50%;
  background: rgba(191, 160, 90, .22); color: var(--gold-2);
  font-style: normal; font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
/* 底部条：左图注 + 右下滑提示 */
.fb-bottom {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  width: min(1180px, 92%); margin: 0 auto;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
  padding-bottom: calc(28px + env(safe-area-inset-bottom));
  pointer-events: none;
}
.fb-caption { text-align: left; }
.fb-caption b {
  display: block; font-family: var(--serif); font-weight: 700;
  font-size: 17px; letter-spacing: 4px; color: #f4ead4;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .55);
}
.fb-caption b::after {
  content: ''; display: block; width: 42px; height: 2px; margin: 11px 0 0;
  background: linear-gradient(90deg, var(--gold-2), transparent);
}
.fb-caption span {
  display: block; margin-top: 8px; font-size: 10px; letter-spacing: 3px;
  text-transform: uppercase; color: var(--gold-2);
}
.fb-scroll {
  pointer-events: auto;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  font-size: 10.5px; letter-spacing: 2.5px; text-transform: uppercase;
  color: rgba(255, 255, 255, .72); transition: color .25s ease;
}
.fb-scroll:hover { color: #fff; }
.fb-scroll-ico {
  width: 22px; height: 34px; border-radius: 12px;
  border: 1.5px solid rgba(255, 255, 255, .48); position: relative;
}
.fb-scroll-ico::after {
  content: ''; position: absolute; left: 50%; top: 6px;
  width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px;
  background: var(--gold-2);
  animation: fbWheel 1.7s ease-in-out infinite;
}
@keyframes fbWheel {
  0% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(11px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}
/* 中等屏幕：收紧留白与字号 */
@media (max-width: 900px) {
  .fb-content { padding: 96px 0 116px; }
  .fb-title { font-size: clamp(32px, 6.4vw, 46px); }
  .fb-trust { gap: 10px 20px; }
  .fb-caption b { font-size: 16px; letter-spacing: 3px; }
}
/* 小屏（含强制电脑版的手机）：图文上下排布，隐藏图注 */
@media (max-width: 700px) {
  .hero-fullbleed { min-height: 0; display: block; }
  .fb-media { position: relative; inset: auto; height: auto; }
  .fb-media picture { height: auto; }
  .fb-media img { height: clamp(460px, 82vh, 640px); object-position: center 30%; }
  .fb-content { padding: 44px 0 60px; }
  .fb-caption { display: none; }
  .fb-bottom { justify-content: center; }
  .fb-btn { height: 48px; padding: 0 26px; }
  .hero-brand {
    top: 14px; right: 14px; left: 14px; max-width: none;
    padding: 8px 15px 8px 9px; gap: 10px;
  }
  .hb-mark img { width: 38px; height: 38px; }
  .hb-txt b { font-size: 18px; letter-spacing: 1.2px; }
  .hb-name em { font-size: 11px; padding-left: 13px; letter-spacing: .14em; }
  .hb-name em::before { width: 4px; height: 4px; margin-top: -2px; }
  .hb-txt i { font-size: 10px; }
}
@media (max-width: 400px) {
  .hb-txt i { display: none; }
  .hero-brand { padding: 7px 13px 7px 8px; }
}

/* ---------- 产品轮播（重点展示展品） ---------- */
.products-showcase { background: #fff; }
.carousel { position: relative; margin-top: 6px; }
.carousel-stage { position: relative; overflow: hidden; border-radius: 18px; }
.carousel-track {
  display: flex; transition: transform .6s cubic-bezier(.22,.7,.28,1);
}
.c-slide {
  flex: 0 0 100%; display: grid; grid-template-columns: 1.05fr .95fr;
  background: var(--paper); min-height: 600px;
}
/* 展品图：完整显示、不裁切、不放大。
   产品实拍是 1080×1440 的竖构图，以前用 cover 会把上下裁掉一大截，
   客户看不全产品，而且强行撑满会放大像素导致发虚。
   现在改为 contain + 固定高度：原图按原始比例居中完整呈现，
   1:1 像素不放大 = 最清晰。
   高度从 500 提到 600：缩放比 600/1440 = 0.42，仍然是「缩小显示」，
   比原图小只会更锐，绝不会发虚，同时展品看得更大更清楚。 */
.c-media {
  position: relative; background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; box-sizing: border-box;
}
.c-media img {
  width: 100%; height: 600px; max-height: 600px;
  object-fit: contain; object-position: center; display: block;
}
.c-panel { padding: 52px 56px; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.c-cat { color: var(--gold); font-size: 12px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; }
.c-name { font-family: var(--serif); font-size: clamp(24px, 3vw, 34px); font-weight: 900; line-height: 1.25; }
.c-en { font-size: 13px; color: var(--muted-2); letter-spacing: 1px; }
.c-tag { color: var(--muted); font-size: 15px; margin-top: 2px; }
.c-panel .tag-row { margin-top: 4px; }
.c-panel .btn { margin-top: 14px; align-self: flex-start; }

/* 同一产品第 2+ 张图：全屏大图 + 计数器 + 「查看详情」入口 */
.c-slide { position: relative; }
.c-slide.c-solo { grid-template-columns: 1fr; }
.c-idx {
  position: absolute; right: 18px; top: 18px; z-index: 3;
  font-size: 12px; letter-spacing: 1px; color: rgba(255,255,255,.9);
  background: rgba(10,12,14,.42); border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-radius: 999px; padding: 5px 12px;
}
.c-more {
  position: absolute; left: 18px; bottom: 18px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500; color: #fff; text-decoration: none;
  background: rgba(10,12,14,.42); border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-radius: 999px; padding: 8px 16px;
  transition: background .2s, border-color .2s;
}
.c-more:hover { background: var(--gold); border-color: var(--gold); }

.carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.5); background: rgba(21,24,28,.5); color: #fff;
  font-size: 26px; line-height: 1; display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px); transition: background .2s, border-color .2s;
}
.carousel-arrow:hover { background: var(--gold); border-color: var(--gold); }
.carousel-arrow.prev { left: 16px; }
.carousel-arrow.next { right: 16px; }
.carousel-dots { display: flex; gap: 8px; justify-content: center; margin-top: 22px; }
.car-dot {
  width: 9px; height: 9px; border-radius: 50%; border: none;
  background: rgba(21,24,28,.18); padding: 0; transition: all .25s;
}
.car-dot.active { background: var(--gold); width: 26px; border-radius: 999px; }

/* ---------- 联系方式（无表单，直接展示） ---------- */
.contact-official { background: var(--paper); }
.contact-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 8px; }
.cc-card {
  display: flex; flex-direction: column; gap: 8px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 24px;
  transition: transform .2s, box-shadow .25s, border-color .2s;
}
a.cc-card { text-decoration: none; color: inherit; }
a.cc-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: rgba(191,160,90,.5); }
.cc-ic {
  width: 44px; height: 44px; border-radius: 11px;
  background: rgba(191,160,90,.14); color: var(--gold);
  display: flex; align-items: center; justify-content: center; font-size: 19px;
}
.cc-card b { font-size: 12px; color: var(--muted-2); letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; }
.cc-v { font-size: 15px; font-weight: 600; line-height: 1.5; }
/* 微信卡片：手机号 + 一键复制 */
.cc-copy { align-self: flex-start; margin-top: 2px; }
.cc-card .copy-btn { border: 1px solid var(--line); background: #fff; border-radius: 7px;
  padding: 4px 12px; font-size: 12px; color: var(--muted); cursor: pointer; transition: all .16s; }
.cc-card .copy-btn:hover { border-color: var(--gold); color: var(--gold); }
/* 地址卡占满整行 */
.cc-wide { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 18px; flex-wrap: wrap; }
.cc-wide .cc-ic { flex: none; }
.cc-wide b { flex: none; }
.cc-wide .cc-v { flex: 1; min-width: 220px; }

/* ---------- 响应式 ---------- */
@media (max-width: 1000px) {
  .c-slide { grid-template-columns: 1fr; min-height: 400px; }
  .c-media { min-height: 340px; padding: 16px; }
  .c-media img { height: 340px; max-height: 340px; }
  .c-panel { padding: 34px 30px; }
  .contact-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .hero-official { padding: 60px 0 64px; }
  .logo-img { height: 36px; }
  .logo-footer .logo-img { height: 52px; }
  .fb-media img { height: 56vh; min-height: 300px; object-position: center 48%; }
  .fb-caption { bottom: 26px; }
  .fb-caption b { font-size: 16px; letter-spacing: 4px; }
  .c-media { min-height: 270px; padding: 12px; }
  .c-media img { height: 270px; max-height: 270px; }
  .c-panel { padding: 26px 22px; }
  .contact-cards { grid-template-columns: 1fr; }
  .carousel-arrow { width: 38px; height: 38px; font-size: 20px; }
  .carousel-arrow.prev { left: 8px; } .carousel-arrow.next { right: 8px; }
}