/* ==========================================================
   CHUANQI-style corporate site — main stylesheet
   Palette: warm cream background, charcoal text, rust/orange accent
   ========================================================== */

:root {
  --color-bg: #f6f3ee;
  --color-bg-alt: #efe9df;
  --color-surface: #ffffff;
  --color-dark: #1c1a17;
  --color-text: #2b2823;
  --color-text-muted: #6b6558;
  --color-accent: #c8531f;
  --color-accent-dark: #a8431a;
  --color-border: #e2dccf;
  --radius: 10px;
  --max-width: 1180px;
  --font-body: 'Segoe UI', Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }

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

.section { padding: 72px 0; }
.section-alt { background: var(--color-bg-alt); }

.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 12px;
}
.section-title {
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 800;
  margin: 0 0 14px;
  color: var(--color-dark);
}
.section-subtitle {
  color: var(--color-text-muted);
  max-width: 680px;
  margin: 0 0 40px;
  font-size: 16px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--color-accent); color: #fff; }
.btn-primary:hover { background: var(--color-accent-dark); }
.btn-outline { background: transparent; border-color: var(--color-dark); color: var(--color-dark); }
.btn-outline:hover { background: var(--color-dark); color: #fff; }
.btn-whatsapp { background: #1c1a17; color: #fff; }
.btn-whatsapp:hover { background: #000; }
.btn-block { width: 100%; justify-content: center; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(246,243,238,0.95);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--color-border);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
}
.logo {
  font-weight: 900;
  font-size: 22px;
  letter-spacing: 0.02em;
  color: var(--color-dark);
}
.logo span { color: var(--color-accent); }
.main-nav ul { display: flex; gap: 30px; }
.main-nav a {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}
.main-nav a:hover, .main-nav a.active { color: var(--color-accent); }
.header-actions { display: flex; align-items: center; gap: 18px; }
.lang-switch { font-size: 13px; color: var(--color-text-muted); }
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle span { width: 24px; height: 2px; background: var(--color-dark); }

/* ---------- Hero ---------- */
.hero {
  padding: 64px 0 40px;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}
.hero h1 {
  font-size: clamp(34px, 5vw, 54px);
  font-weight: 900;
  line-height: 1.08;
  margin: 0 0 18px;
  color: var(--color-dark);
}
.hero p.lead {
  font-size: 17px;
  color: var(--color-text-muted);
  max-width: 480px;
  margin: 0 0 30px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 40px; }
.hero-stats { display: flex; gap: 36px; flex-wrap: wrap; }
.hero-stats .stat-value { font-size: 24px; font-weight: 800; color: var(--color-accent); }
.hero-stats .stat-label { font-size: 13px; color: var(--color-text-muted); }
.hero-media img {
  border-radius: var(--radius);
  box-shadow: 0 24px 60px -20px rgba(28,26,23,0.35);
}

/* ---------- Quote form ---------- */
.quote-panel {
  background: var(--color-dark);
  color: #fff;
  border-radius: 16px;
  padding: 40px;
  margin-top: -20px;
}
.quote-panel h2 { color: #fff; font-size: 24px; margin: 0 0 24px; }
.quote-form {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: end;
}
.quote-form .field { display: flex; flex-direction: column; gap: 8px; }
.quote-form label { font-size: 13px; font-weight: 600; color: #d8d3c8; }
.quote-form select,
.quote-form input {
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid #454138;
  background: #29261f;
  color: #fff;
  font-size: 14px;
}
.quote-form .submit-col { grid-column: 1 / -1; }

/* ---------- Machine range table ---------- */
.machine-table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--color-border); }
.machine-table { width: 100%; border-collapse: collapse; min-width: 720px; background: var(--color-surface); }
.machine-table th, .machine-table td { padding: 16px 18px; text-align: left; border-bottom: 1px solid var(--color-border); font-size: 14px; }
.machine-table th { background: var(--color-bg-alt); text-transform: uppercase; font-size: 12px; letter-spacing: .06em; color: var(--color-text-muted); }
.machine-table .brand-tag { font-size: 11px; font-weight: 700; color: var(--color-accent); text-transform: uppercase; }
.machine-table .model-name { font-weight: 700; color: var(--color-dark); }
.machine-table .quote-link { color: var(--color-accent); font-weight: 700; white-space: nowrap; }
.catalog-download { text-align: center; margin-top: 28px; }

/* ---------- Product cards ---------- */
.category-block { margin-bottom: 56px; }
.category-heading { display: flex; align-items: baseline; gap: 14px; margin-bottom: 26px; }
.category-heading .cat-index { font-size: 13px; font-weight: 800; color: var(--color-accent); }
.category-heading h3 { font-size: 22px; margin: 0; color: var(--color-dark); }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 24px;
}
.product-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s ease, transform .2s ease;
}
.product-card:hover { box-shadow: 0 18px 40px -22px rgba(28,26,23,0.35); transform: translateY(-3px); }
.product-card .card-media { position: relative; aspect-ratio: 4/3; background: var(--color-bg-alt); }
.product-card .badge {
  position: absolute; top: 12px; left: 12px;
  background: var(--color-dark); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  padding: 5px 10px; border-radius: 999px; text-transform: uppercase;
}
.product-card .card-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.product-card h4 { margin: 0; font-size: 17px; color: var(--color-dark); }
.product-card p { margin: 0; font-size: 14px; color: var(--color-text-muted); flex: 1; }
.product-card .output-row { font-size: 13px; color: var(--color-text-muted); }
.product-card .output-row strong { color: var(--color-dark); display: block; font-size: 14px; }
.product-card .card-cta { margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--color-accent); }

/* ---------- Molds section ---------- */
.molds-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.mold-tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0; }
.mold-tags li {
  background: var(--color-surface); border: 1px solid var(--color-border);
  padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 600;
}
.mold-tags li::before { content: "✓ "; color: var(--color-accent); }
.mold-note { font-size: 13px; color: var(--color-text-muted); margin-bottom: 22px; }
.molds-grid img { border-radius: var(--radius); }

/* ---------- Why us ---------- */
.why-us-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.feature-list { margin: 24px 0 30px; display: flex; flex-direction: column; gap: 14px; }
.feature-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; }
.feature-list li::before { content: "✓"; color: var(--color-accent); font-weight: 900; }
.why-us-grid img { border-radius: var(--radius); }

/* ---------- Galleries ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 18px;
}
.gallery-item { position: relative; border-radius: var(--radius); overflow: hidden; }
.gallery-item img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.gallery-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to top, rgba(0,0,0,.75), transparent);
  color: #fff; padding: 30px 14px 12px; font-size: 13px;
}
.gallery-caption .tag { display: block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #f0c9a8; margin-bottom: 3px; }
.gallery-note { text-align: center; font-size: 13px; color: var(--color-text-muted); margin-top: 22px; }

/* ---------- Payment ---------- */
.payment-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 44px; }
.payment-step { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 26px; }
.payment-step .step-no { font-size: 12px; font-weight: 700; color: var(--color-text-muted); }
.payment-step .figure { font-size: 26px; font-weight: 900; color: var(--color-accent); margin: 6px 0; }
.payment-step h4 { margin: 0 0 8px; font-size: 16px; }
.payment-step p { margin: 0; font-size: 13px; color: var(--color-text-muted); }
.payment-methods {
  background: var(--color-bg-alt); border-radius: var(--radius); padding: 30px;
  display: flex; flex-direction: column; gap: 12px;
}
.payment-methods h4 { margin: 0 0 6px; }
.payment-methods li { font-size: 14px; display: flex; gap: 10px; }
.payment-methods li::before { content: "✓"; color: var(--color-accent); font-weight: 900; }
.payment-methods .btn { margin-top: 14px; align-self: flex-start; }

/* ---------- Process steps ---------- */
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.step-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 26px; }
.step-card .step-no { font-size: 13px; font-weight: 800; color: var(--color-accent); margin-bottom: 10px; }
.step-card h4 { margin: 0 0 8px; font-size: 16px; }
.step-card p { margin: 0; font-size: 13px; color: var(--color-text-muted); }

.solutions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.solution-card { padding: 26px 0; border-top: 3px solid var(--color-accent); }
.solution-card .step-no { font-size: 13px; font-weight: 800; color: var(--color-text-muted); }
.solution-card h4 { font-size: 18px; margin: 10px 0 8px; }
.solution-card p { margin: 0; font-size: 14px; color: var(--color-text-muted); }

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--color-dark);
  color: #fff;
  border-radius: 20px;
  padding: 60px;
  text-align: center;
  margin: 0 24px;
}
.cta-band h2 { color: #fff; font-size: 30px; margin: 0 0 14px; }
.cta-band p { color: #cfc9bc; max-width: 520px; margin: 0 auto 28px; }

/* ---------- Blog ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 26px; }
.blog-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; }
.blog-card img { aspect-ratio: 16/9; object-fit: cover; width: 100%; }
.blog-card .blog-body { padding: 20px; }
.blog-card time { font-size: 12px; color: var(--color-text-muted); }
.blog-card h3 { font-size: 18px; margin: 8px 0; }
.blog-card p { font-size: 14px; color: var(--color-text-muted); margin: 0 0 12px; }
.blog-post-header { max-width: 760px; margin: 0 auto 30px; text-align: center; }
.blog-post-body { max-width: 760px; margin: 0 auto; font-size: 16px; }
.blog-post-body img { border-radius: var(--radius); margin: 20px 0; }

/* ---------- Simple page ---------- */
.page-hero { padding: 60px 0 20px; text-align: center; }
.page-hero h1 { font-size: 36px; margin-bottom: 10px; }
.page-hero p { color: var(--color-text-muted); max-width: 620px; margin: 0 auto; }
.page-body { max-width: 800px; margin: 0 auto; font-size: 16px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--color-dark); color: #cfc9bc; padding: 50px 0 24px; margin-top: 60px; }
.footer-top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px; align-items: center; padding-bottom: 26px; border-bottom: 1px solid #34302a; }
.footer-logo { font-weight: 900; font-size: 20px; color: #fff; }
.footer-logo span { color: var(--color-accent); }
.footer-note { font-size: 13px; }
.footer-note a { color: #f0c9a8; }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding-top: 22px; font-size: 13px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero-grid, .molds-grid, .why-us-grid { grid-template-columns: 1fr; }
  .quote-form { grid-template-columns: 1fr 1fr; }
  .payment-grid, .steps-grid, .solutions-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .main-nav, .header-actions .lang-switch { display: none; }
  .nav-toggle { display: flex; }
  .quote-form { grid-template-columns: 1fr; }
  .payment-grid, .steps-grid, .solutions-grid { grid-template-columns: 1fr; }
  .cta-band { padding: 40px 26px; margin: 0 16px; }
  .hero-stats { gap: 22px; }
}

.site-header.nav-open .main-nav {
  display: block;
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  padding: 16px 24px;
}
.site-header.nav-open .main-nav ul { flex-direction: column; gap: 16px; }

/* ==========================================================================
   图 2 风格定制样式 (1:1 视觉复刻)
   ========================================================================== */

/* 全局基调与字体优化 */
body {
  background-color: #F8F6F2;
  color: #1A1A1A;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* 1. Hero 区域排版 */
.hero {
  padding: 50px 0 30px;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.95fr;
  gap: 48px;
  align-items: center;
}

.eyebrow-highlight {
  display: inline-block;
  color: #C85428;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.hero-title {
  font-size: 52px;
  font-weight: 750;
  line-height: 1.12;
  color: #161616;
  letter-spacing: -0.025em;
  margin: 0 0 20px;
}

.hero-lead {
  font-size: 17px;
  line-height: 1.55;
  color: #555555;
  margin: 0 0 24px;
  max-width: 530px;
}

/* 2. 信任特性勾选项 */
.hero-checkmarks {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.check-item {
  display: inline-flex;
  align-items: center;
  font-size: 15px;
  font-weight: 700;
  color: #1A1A1A;
}

.check-icon {
  color: #C85428;
  font-weight: 900;
  margin-right: 6px;
  font-size: 16px;
}

/* 3. Hero 按钮组 */
.hero-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.btn-primary-pill {
  background-color: #C85428;
  color: #FFFFFF !important;
  font-size: 16px;
  font-weight: 700;
  padding: 13px 28px;
  border-radius: 999px;
  text-decoration: none;
  transition: background-color 0.2s ease;
  border: 1.5px solid #C85428;
  display: inline-block;
}

.btn-primary-pill:hover {
  background-color: #B2461D;
}

.btn-whatsapp-outline {
  background-color: #FFFFFF;
  color: #1A1A1A !important;
  font-size: 15px;
  font-weight: 700;
  padding: 13px 24px;
  border-radius: 999px;
  border: 1.5px solid #1A1A1A;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: all 0.2s ease;
}

.btn-whatsapp-outline:hover {
  background-color: #F0F0F0;
}

.black-dot {
  font-size: 9px;
  margin-right: 8px;
  color: #1A1A1A;
  line-height: 1;
}

/* 4. 右侧视频占位卡片 */
.hero-media-wrap {
  width: 100%;
}

.video-placeholder-card {
  background-color: #DDD8D0;
  border-radius: 18px;
  aspect-ratio: 1.1 / 1;
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 30px 24px;
  box-sizing: border-box;
}

.video-title {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.25;
  color: #4A4A48;
  letter-spacing: 0.04em;
  margin: 0 0 10px;
}

.video-desc {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.45;
  color: #6D6B67;
  margin: 0;
}

/* 5. 底部深色 Find Your Machine 表单面板 */
.quote-panel-custom {
  background-color: #1D1B19;
  border-radius: 18px;
  padding: 28px 36px 32px;
  margin-top: 20px;
  box-sizing: border-box;
}

.quote-panel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.quote-panel-header .grid-icon {
  color: #BDBBB7;
  font-size: 20px;
  line-height: 1;
}

.quote-panel-header h2 {
  color: #FFFFFF;
  font-size: 21px;
  font-weight: 650;
  margin: 0;
  letter-spacing: -0.01em;
}

/* 横向 4 列网格 */
.quote-form-inline {
  display: grid;
  grid-template-columns: 1fr 1fr 1.1fr 0.9fr;
  gap: 14px;
  align-items: stretch;
}

.field-select-wrap,
.field-submit-wrap {
  width: 100%;
  display: flex;
}

.select-field {
  width: 100%;
  height: 52px;
  background-color: #262422;
  border: 1px solid #3A3734;
  border-radius: 8px;
  color: #CCCCCC;
  font-size: 15px;
  font-weight: 500;
  padding: 0 16px;
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23999999%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.select-field:hover,
.select-field:focus {
  border-color: #55524E;
  background-color: #2D2A28;
}

.select-field option {
  background-color: #1D1B19;
  color: #FFFFFF;
}

/* 提交按钮 */
.btn-submit-orange {
  width: 100%;
  height: 52px;
  background-color: #C85428;
  color: #FFFFFF;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background-color 0.2s ease;
}

.btn-submit-orange:hover {
  background-color: #B2461D;
}

/* 6. 响应式适配 (平板与手机端) */
@media (max-width: 960px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .hero-title {
    font-size: 38px;
  }

  .quote-form-inline {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .hero-title {
    font-size: 30px;
  }

  .quote-form-inline {
    grid-template-columns: 1fr;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .btn-primary-pill,
  .btn-whatsapp-outline {
    text-align: center;
    justify-content: center;
  }
}

/* ==========================================================================
   图 2 产品卡片区专用复刻样式 (4-Column Layout)
   ========================================================================== */

/* 1. 外层容器与整体背景 */
.section-products-v2 {
  padding: 80px 0 90px;
  background-color: #F8F6F2;
}

/* 2. 居中标题与副标题 */
.products-header-centered {
  text-align: center;
  margin-bottom: 42px;
}

.products-main-title {
  font-size: 38px;
  font-weight: 700;
  line-height: 1.18;
  color: #1A1A1A;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
}

.products-main-subtitle {
  font-size: 15px;
  line-height: 1.55;
  color: #666666;
  max-width: 680px;
  margin: 0 auto;
}

/* 3. 分类标识：01 椭圆徽章 */
.category-block-v2 {
  margin-top: 20px;
}

.category-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.category-pill-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #D05428;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  line-height: 1.2;
}

.category-name {
  font-size: 22px;
  font-weight: 700;
  color: #1A1A1A;
  margin: 0;
  letter-spacing: -0.01em;
}

/* 4. 四列卡片网格系统 */
.products-grid-4col {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* 单张卡片外观 */
.product-card-v2 {
  background-color: #FFFFFF;
  border-radius: 16px;
  border: 1px solid #ECE7E1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-card-v2:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}

/* 卡片图片媒体区 */
.card-media-box {
  background-color: #F5EFEB;
  height: 210px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
}

.card-media-box img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* 卡片信息区 */
.card-content-box {
  padding: 24px 20px 22px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* 标签徽章 (BEST SELLER 等) */
.tag-badge {
  align-self: flex-start;
  background-color: #FEEFE8;
  color: #D05428;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 4px 8px;
  border-radius: 4px;
  margin-bottom: 14px;
  text-transform: uppercase;
}

/* 机器型号标题 */
.card-machine-title {
  font-size: 19px;
  font-weight: 700;
  color: #1A1A1A;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}

/* 描述文本 (设定统一高度确保底部参数线平齐) */
.card-desc {
  font-size: 13.5px;
  line-height: 1.5;
  color: #666666;
  margin: 0 0 22px;
  min-height: 42px;
}

/* 产能参数行 (左右对齐 + 上边线) */
.output-divider-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid #F0ECE7;
  margin-bottom: 20px;
}

.output-lbl {
  font-size: 13px;
  color: #777777;
}

.output-val {
  font-size: 13.5px;
  font-weight: 700;
  color: #1A1A1A;
}

/* 操作链接列 */
.card-actions-col {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: auto;
}

/* 详情链接 */
.link-view-details {
  color: #D05428;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: opacity 0.2s;
}

.link-view-details:hover {
  opacity: 0.85;
}

/* WhatsApp 链接 */
.link-ask-whatsapp {
  color: #167A53;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: opacity 0.2s;
}

.link-ask-whatsapp:hover {
  opacity: 0.85;
}

.green-dot {
  font-size: 9px;
  color: #167A53;
  line-height: 1;
}

/* 5. 移动端与平板响应式适配 */
@media (max-width: 1100px) {
  .products-grid-4col {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}

@media (max-width: 640px) {
  .products-grid-4col {
    grid-template-columns: 1fr;
  }

  .products-main-title {
    font-size: 28px;
  }

  .card-media-box {
    height: 190px;
  }
}

/* ==========================================================================
   分类间距与 02 / 03 专属高亮样式
   ========================================================================== */

/* 分类板块间距控制 */
.category-block-v2 {
  margin-top: 36px;
}

/* 模块之间的灰色贯穿分割线 */
.category-divider-line {
  border: none;
  border-top: 1px solid #EBE6DF;
  margin: 52px 0 36px;
  width: 100%;
}

/* 02 与 03 模块专属：右侧数值橙色高亮 */
.output-val.text-orange {
  color: #D05428 !important;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

/* 统一图片卡片内部图片样式 */
.card-media-box img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
}

/* ==========================================================================
   图2 / 图3 模具定制板块 (CUSTOM BRICK MOLDS) 1:1 复刻样式
   ========================================================================== */

.section-molds-v2 {
  background-color: #F8F6F2;
  padding: 80px 0 90px;
}

.molds-container-v2 {
  display: grid;
  grid-template-columns: 370px 1fr;
  gap: 48px;
  align-items: flex-start;
}

/* 左侧列（大屏下 sticky 吸顶，浏览长图表时随时可转化） */
.molds-left-col {
  position: sticky;
  top: 90px;
}

.molds-eyebrow {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #7A736E;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.molds-title {
  font-size: 40px;
  font-weight: 750;
  line-height: 1.14;
  color: #1A1A1A;
  margin: 0 0 20px;
  letter-spacing: -0.02em;
}

.molds-desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: #666666;
  margin: 0 0 24px;
}

/* 白色标签 Pill */
.molds-tags-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-bottom: 24px;
}

.mold-tag-pill {
  background-color: #FFFFFF;
  border: 1px solid #ECE7E1;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #1A1A1A;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.check-mark {
  color: #1A1A1A;
  font-weight: 800;
  font-size: 12px;
}

/* 橙色竖线提示块 */
.molds-note-bar {
  border-left: 3px solid #D05428;
  padding: 2px 0 2px 14px;
  margin: 0 0 28px;
  font-size: 13px;
  line-height: 1.55;
  color: #777777;
}

/* 绿色线框圆角按钮 */
.molds-action-wrap {
  margin-top: 4px;
}

.btn-molds-outline {
  display: inline-block;
  padding: 11px 24px;
  border: 1.5px solid #167A53;
  color: #167A53 !important;
  background-color: transparent;
  border-radius: 8px;
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn-molds-outline:hover {
  background-color: #167A53;
  color: #FFFFFF !important;
}

/* 右侧大图容器与卡片质感 */
.molds-right-col {
  width: 100%;
}

.molds-catalog-wrapper {
  background-color: #FFFFFF;
  border-radius: 12px;
  border: 1px solid #EAE5DF;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.molds-catalog-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* 移动端与平板响应式适配 */
@media (max-width: 992px) {
  .molds-container-v2 {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .molds-left-col {
    position: static;
  }

  .molds-title {
    font-size: 32px;
  }
}

/* ==========================================================================
   图2 WHY US / 工厂实力模块 1:1 复刻样式
   ========================================================================== */

.section-why-v2 {
  background-color: #F8F6F2;
  padding: 90px 0 100px;
}

.why-container-v2 {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 56px;
  align-items: center;
}

/* 左侧卡片 */
.why-media-col {
  width: 100%;
}

.why-catalog-card {
  background-color: #FFFFFF;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  border: 1px solid #ECE7E1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.why-card-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* 右侧排版 */
.why-content-col {
  padding-left: 10px;
}

.why-eyebrow {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #7A736E;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.why-title {
  font-size: 42px;
  font-weight: 750;
  line-height: 1.15;
  color: #1A1A1A;
  letter-spacing: -0.025em;
  margin: 0 0 18px;
}

.why-lead {
  font-size: 15px;
  line-height: 1.6;
  color: #666666;
  margin: 0 0 28px;
  max-width: 520px;
}

/* 橙底白勾实心圆清单 */
.why-feature-list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.why-feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.circle-check {
  width: 20px;
  height: 20px;
  min-width: 20px;
  background-color: #D05428;
  color: #FFFFFF;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.feature-text {
  font-size: 14.5px;
  font-weight: 600;
  color: #222222;
}

/* 橙色质感按钮 */
.why-actions {
  margin-top: 6px;
}

.btn-orange-shadow {
  display: inline-block;
  background-color: #D05428;
  color: #FFFFFF !important;
  font-size: 14.5px;
  font-weight: 700;
  padding: 12px 28px;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(208, 84, 40, 0.28);
  transition: all 0.2s ease;
}

.btn-orange-shadow:hover {
  background-color: #B8451D;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(208, 84, 40, 0.35);
}

/* 响应式适配 */
@media (max-width: 992px) {
  .why-container-v2 {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .why-content-col {
    padding-left: 0;
  }

  .why-title {
    font-size: 34px;
  }
}

/* ==========================================================
   新增落地页整合模块样式 (图 1 风格补充)
   ========================================================== */

/* 03 综合方案区 */
.solutions-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  margin: 40px 0 50px;
  align-items: center;
}
.verified-stats {
  display: flex;
  gap: 30px;
  margin-bottom: 24px;
}
.v-stat h3 { font-size: 24px; font-weight: 800; color: #1A1A1A; margin: 0 0 4px; }
.v-stat p { font-size: 12px; color: #777; margin: 0; line-height: 1.4; }
.sol-desc { font-size: 15px; color: #555; margin-bottom: 30px; }
.map-placeholder {
  background: #EAF0F6;
  border-radius: 50%; /* 模拟地图椭圆底 */
  padding: 40px;
  text-align: center;
}
.map-note { font-size: 10px; font-weight: 700; color: #144D8C; letter-spacing: 0.05em; margin-top: 10px; }

/* 蓝色服务能力条 */
.blue-support-banner {
  background-color: #144D8C; /* 工业可信蓝 */
  border-radius: 12px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 40px;
  gap: 30px;
  color: #FFF;
}
.support-item { text-align: center; border-right: 1px solid rgba(255,255,255,0.1); padding: 0 15px; }
.support-item:last-child { border-right: none; }
.support-icon { font-size: 28px; display: block; margin-bottom: 12px; opacity: 0.9; }
.support-item h4 { font-size: 16px; margin: 0 0 10px; color: #FFF; }
.support-item p { font-size: 13px; color: #B3CBE5; margin: 0; line-height: 1.5; }

/* 07 证书卡片 */
.cert-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 30px;
}
.cert-card {
  background: #FFF;
  border: 1px solid #EBE6DF;
  padding: 24px;
  border-radius: 12px;
}
.cert-card h4 { font-size: 16px; margin: 0 0 6px; }
.cert-card p { font-size: 13px; color: #777; margin: 0 0 16px; }
.cert-link { font-size: 13px; font-weight: 700; color: #C85428; }

/* 11 底部长表单 */
.final-form-panel { background-color: #1D1B19; padding: 50px; }
.form-header-center { text-align: center; margin-bottom: 40px; }
.form-header-center h2 { color: #FFF; font-size: 32px; margin: 0 0 12px; }
.form-header-center p { color: #AFAAA3; font-size: 15px; }
.full-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 30px;
}
.textarea-field {
  grid-column: 1 / -1;
  height: 100px;
  padding-top: 14px;
  resize: none;
}
.form-submit-row { text-align: center; }
.btn-large { width: auto; min-width: 280px; display: inline-flex; height: 56px; font-size: 18px; }
.privacy-note { font-size: 12px; color: #666; margin-top: 16px; }

/* 补充橘红色边框按钮 (对应线框样式) */
.text-orange { border-color: #C85428; color: #C85428 !important; }
.text-orange:hover { background: #C85428; color: #FFF !important; }

/* 响应式适配 */
@media (max-width: 900px) {
  .solutions-grid-2col, .blue-support-banner, .full-form-grid { grid-template-columns: 1fr; }
  .support-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 20px; }
}

/* ==========================================================================
   图 1 深色视频首屏 1:1 复刻样式
   ========================================================================== */

/* 深色渐变背景容器 */
.hero-dark-theme {
  /* 模拟图1的黑绿色渐变 */
  background: linear-gradient(135deg, #111414 0%, #1a2321 50%, #25332d 100%);
  padding: 80px 0 120px;
  position: relative;
  overflow: hidden;
}

.hero-grid-dark {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: center;
  position: relative;
  z-index: 2;
}

/* 顶部暗金色小标题 */
.eyebrow-dark {
  display: inline-block;
  color: #c9933b;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 24px;
}

/* 主标题 */
.hero-title-dark {
  font-size: 54px;
  font-weight: 700;
  line-height: 1.1;
  color: #ffffff !important; /* 加上 !important 强制覆盖原有的深色 */
  letter-spacing: -0.03em;
  margin: 0 0 24px;
}

/* 副标题说明 */
.hero-lead-dark {
  font-size: 15px;
  line-height: 1.6;
  color: #d0d0d0;
  margin: 0 0 35px;
  max-width: 580px;
}

/* 线框直角主按钮 */
.btn-outline-white {
  display: inline-flex;
  align-items: center;
  background-color: transparent;
  color: #ffffff !important;
  font-size: 15px;
  font-weight: 600;
  padding: 14px 28px;
  border: 1.5px solid #ffffff;
  border-radius: 4px; /* 图1是微小圆角 */
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.btn-outline-white:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* 右侧视觉容器 */
.hero-visuals-dark {
  position: relative;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}

/* 圆形线框播放按钮 */
.play-btn-circle {
  width: 75px;
  height: 75px;
  border: 1.5px solid #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.play-btn-circle:hover {
  transform: scale(1.05);
  background-color: rgba(255, 255, 255, 0.05);
}

.play-icon {
  color: #ffffff;
  font-size: 20px;
  margin-left: 4px; /* 修正三角形视觉居中 */
}

/* 右下角三根斜向装饰条 */
.hero-stripes {
  position: absolute;
  bottom: -80px;
  right: -150px;
  width: 140%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 1;
}

.stripe {
  height: 14px;
  transform: skewX(-45deg); /* 实现图1的边缘斜切效果 */
}

/* 分别对应暗金、浅灰蓝、深灰蓝 */
.stripe-1 { background-color: #c9933b; width: 100%; }
.stripe-2 { background-color: #728483; width: 95%; margin-left: 5%; }
.stripe-3 { background-color: #4b5a58; width: 90%; margin-left: 10%; }

/* 移动端与平板响应式适配 */
@media (max-width: 960px) {
  .hero-grid-dark {
    grid-template-columns: 1fr;
  }
  .hero-title-dark {
    font-size: 38px;
  }
  .hero-stripes {
    bottom: 0;
    right: -20px;
    width: 110%;
  }
  .hero-visuals-dark {
    margin-top: 60px;
  }
  .play-btn-circle {
    margin-bottom: 60px;
  }
}

/* ==========================================================================
   图 1 综合方案区 1:1 视觉复刻 (Solutions Section)
   ========================================================================== */

.section-solutions-v2 {
  position: relative;
  padding: 70px 0 0 0; /* 顶部内边距 */
  background-color: #ffffff; /* 底部基色白 */
}

/* 顶部浅灰背景层（只覆盖上半部分，让深蓝卡片有一种跨界的层次感） */
.sol-gray-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 100px); /* 底部留白给深蓝卡片 */
  background-color: #F3F4F5;
  z-index: 1;
}

.relative-container {
  position: relative;
  z-index: 2;
}

/* 左右两列排版 */
.sol-top-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  margin-bottom: 50px;
}

/* -- 左侧文字排版 -- */
.sol-eyebrow {
  display: block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #E75515; /* 品牌橙色 */
  text-transform: uppercase;
  margin-bottom: 16px;
}

.sol-main-title {
  font-size: 42px;
  font-weight: 700;
  line-height: 1.15;
  color: #1a1a1a;
  letter-spacing: -0.02em;
  margin: 0 0 30px;
}

/* 三个核心数据 */
.sol-stats-row {
  display: flex;
  gap: 30px;
  margin-bottom: 30px;
}

.stat-number {
  font-size: 44px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 8px;
}

.stat-desc {
  font-size: 13px;
  color: #777777;
  line-height: 1.4;
}

/* 正文段落 */
.sol-paragraph {
  font-size: 15px;
  color: #666666;
  line-height: 1.6;
  max-width: 500px;
  margin: 0 0 30px;
}

/* 橙色线框按钮 */
.btn-orange-outline {
  display: inline-flex;
  align-items: center;
  background-color: transparent;
  color: #E75515 !important;
  font-size: 14.5px;
  font-weight: 700;
  padding: 12px 24px;
  border: 1.5px solid #E75515;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn-orange-outline:hover {
  background-color: #E75515;
  color: #ffffff !important;
}

/* -- 右侧图片与图注 -- */
.sol-image-content {
  text-align: center;
}

.map-illustration img {
  width: 100%;
  max-width: 450px;
  margin: 0 auto;
}

.map-caption {
  font-size: 11px;
  font-weight: 800;
  color: #2F5C8F; /* 深灰蓝 */
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 10px;
}

/* -- 下半部分：深蓝服务卡片 -- */
.sol-bottom-banner {
  background-color: #1C4D82; /* 工业信任蓝 */
  border-radius: 12px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 40px 0;
}

.support-col {
  padding: 0 30px;
  text-align: center;
  position: relative;
  color: #ffffff;
}

/* 中间分割线 (不顶天立地，垂直居中) */
.support-col:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 15%;
  height: 70%;
  width: 1px;
  background-color: rgba(255, 255, 255, 0.2);
}

.support-icon {
  font-size: 22px;
  margin-bottom: 12px;
  color: #ffffff;
}

.support-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 10px;
  color: #ffffff;
}

.support-desc {
  font-size: 13px;
  color: #B4C9DF; /* 浅蓝灰，提升深色背景阅读性 */
  line-height: 1.5;
  margin: 0;
  padding: 0 10px;
}

/* -- 移动端与平板响应式适配 -- */
@media (max-width: 960px) {
  .sol-top-grid {
    grid-template-columns: 1fr;
  }
  .sol-bottom-banner {
    grid-template-columns: 1fr;
    padding: 30px 0;
  }
  .support-col {
    padding: 20px 30px;
  }
  .support-col:not(:last-child)::after {
    /* 手机端改成分割线为横线 */
    right: 15%;
    top: 100%;
    height: 1px;
    width: 70%;
  }
  .sol-stats-row {
    flex-direction: column;
    gap: 20px;
  }
}

/* ==========================================================================
   图 1/2/3 产品展示区 1:1 视觉复刻 (Jiusheng Style)
   ========================================================================== */

.section-products-jiusheng {
  padding: 60px 0 80px;
  background-color: #ffffff;
}

/* 顶部通栏导航菜单 */
.product-nav-tabs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #EBEBEB;
  padding: 20px 40px;
  margin-bottom: 50px;
}

.product-nav-tabs a {
  font-size: 14px;
  color: #333333;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
}

.product-nav-tabs a:hover {
  color: #DE9C2A; /* 同行的暗金橙色 */
}

/* Hot Products 居中标题 */
.group-title-center {
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 40px;
}

/* 横向全宽背景 Banner */
.category-banner {
  width: 100%;
  height: 180px;
  background-color: #2b3945; /* 默认深色底 */
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-top: 40px;
}

/* 暗色遮罩让白色文字更清晰 */
.category-banner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(14, 25, 36, 0.6);
}

.category-banner h2 {
  position: relative;
  z-index: 1;
  color: #ffffff;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin: 0;
}

/* 右侧橙色 CONTACT US 链接 */
.category-contact-link {
  text-align: right;
  padding: 16px 0 24px;
}

.category-contact-link a {
  color: #DDA343; /* 截图同款橙黄色 */
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 4px; /* 调整下划线距离 */
  transition: opacity 0.2s;
}

.category-contact-link a:hover {
  opacity: 0.8;
}

/* 4列卡片网格 */
.product-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px; /* 截图中间距较窄 */
  margin-bottom: 50px;
}

/* 极简灰底卡片 */
.prod-card-simple {
  display: flex;
  flex-direction: column;
}

/* 统一灰色图片背景容器 */
.prod-img-box {
  background-color: #F4F4F4; /* 同款浅灰底色 */
  height: 200px;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.prod-card-simple:hover .prod-img-box {
  transform: translateY(-3px);
}

.prod-img-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply; /* 去除白底图片白边，完美融进灰色背景 */
}

/* 卡片文字信息区 */
.prod-info-box {
  padding: 16px 0; /* 根据截图，文字和图片左边缘对齐，没有侧边距 */
}

.prod-info-box h3 {
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.4;
  margin: 0;
}

/* 移动端与平板响应式适配 */
@media (max-width: 960px) {
  .product-grid-4 {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .product-nav-tabs {
    flex-direction: column;
    gap: 15px;
    padding: 20px;
  }
}

@media (max-width: 600px) {
  .product-grid-4 {
    grid-template-columns: 1fr;
  }
  .category-banner {
    height: 140px;
  }
}

/* ==========================================================================
   图1 / 图3 / 图5 - 统一图集展示区 1:1 视觉复刻 (Gallery Sections)
   ========================================================================== */

.section-gallery-v2 {
  padding: 80px 0;
  background-color: #F8F6F2; /* 统一下沉底色 */
}

/* 浅色背景切换（用于区分相邻的模块） */
.section-bg-light {
  background-color: #ffffff;
}

/* 头部居中文案排版 */
.gallery-header-v2 {
  text-align: center;
  margin-bottom: 40px;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

.eyebrow-v2 {
  display: block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #E75515; /* 品牌橙色 */
  text-transform: uppercase;
  margin-bottom: 16px;
}

.title-v2 {
  font-size: 38px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
}

.subtitle-v2 {
  font-size: 15px;
  color: #666666;
  line-height: 1.6;
  margin: 0;
}

/* ================= 图集网格排版核心 ================= */
.gallery-grid-v2 {
  display: grid;
  gap: 20px;
}

/* 图1：工厂实力 (3列等宽) */
.grid-factory {
  grid-template-columns: repeat(3, 1fr);
}

/* 图3：应用场景 (修改为图1效果：上排左1大右1小，下排3小，总共3列) */
.grid-application {
  grid-template-columns: repeat(3, 1fr);
}
/* 第1张大图，占据2列，高度自动适应对齐同行 */
.grid-application .gallery-item-v2:nth-child(1) {
  grid-column: span 2;
  aspect-ratio: auto; /* 取消固定比例，让CSS Grid自动拉伸高度对齐 */
  height: 100%;
}
/* 其他图恢复默认，占据1列 */
.grid-application .gallery-item-v2:nth-child(n+2) {
  grid-column: span 1;
}

/* 图5：发货装柜 (左1大，右2小，总共4等分) */
.grid-shipping {
  grid-template-columns: repeat(4, 1fr);
}
/* 第1张图，占 2/4 (即 1/2 宽度) */
.grid-shipping .gallery-item-v2:nth-child(1) {
  grid-column: span 2;
}
/* 后面的图，每张占 1/4 宽度 */
.grid-shipping .gallery-item-v2:nth-child(n+2) {
  grid-column: span 1;
}

/* ================= 卡片细节设计 ================= */
.gallery-item-v2 {
  position: relative;
  border-radius: 16px; /* 大圆角 */
  overflow: hidden;
  background-color: #2b3945; /* 占位深色底 */
  aspect-ratio: 4 / 3; /* 基础卡片比例 */
}

/* 仅针对发货装柜的第一张超宽大图限制长宽比，避免过高 */
.grid-shipping .gallery-item-v2:nth-child(1) {
  aspect-ratio: 16 / 9;
}

/* 图片铺满与悬浮动效 */
.gallery-item-v2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.gallery-item-v2:hover img {
  transform: scale(1.05); /* 悬浮时图片微幅放大，提升高级感 */
}

/* 暗色渐变遮罩层 (文字区域) */
.gallery-overlay-v2 {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 50px 24px 20px;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 60%, transparent 100%);
  pointer-events: none; /* 防止遮罩阻挡图片上的右键等操作 */
}

/* 暗金色标签 */
.gallery-tag-v2 {
  display: block;
  font-size: 10px;
  font-weight: 800;
  color: #DDA343;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

/* 白色标题 */
.gallery-caption-v2 {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
  letter-spacing: 0.02em;
}

/* 底部按钮居中容器 */
.gallery-action-center {
  text-align: center;
  margin-top: 40px;
}

/* ================= 移动端与平板响应式 ================= */
@media (max-width: 960px) {
  /* 平板端强制转为2列网格 */
  .grid-factory, .grid-application, .grid-shipping {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .gallery-item-v2 {
    grid-column: span 1 !important;
    aspect-ratio: 4 / 3 !important;
  }
}

@media (max-width: 600px) {
  /* 手机端强制转为单列瀑布流 */
  .grid-factory, .grid-application, .grid-shipping {
    grid-template-columns: 1fr !important;
  }
  .title-v2 { font-size: 30px; }
}

/* ==========================================================================
   图1 / 图3 / 图5 - 统一图集展示区 1:1 视觉复刻 (Gallery Sections)
   ========================================================================== */

.section-gallery-v2 {
  padding: 80px 0;
  background-color: #F8F6F2; /* 统一下沉底色 */
}

/* 浅色背景切换（用于区分相邻的模块） */
.section-bg-light {
  background-color: #ffffff;
}

/* 头部居中文案排版 */
.gallery-header-v2 {
  text-align: center;
  margin-bottom: 40px;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

.eyebrow-v2 {
  display: block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #E75515; /* 品牌橙色 */
  text-transform: uppercase;
  margin-bottom: 16px;
}

.title-v2 {
  font-size: 38px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
}

.subtitle-v2 {
  font-size: 15px;
  color: #666666;
  line-height: 1.6;
  margin: 0;
}

/* ================= 图集网格排版核心 ================= */
.gallery-grid-v2 {
  display: grid;
  gap: 20px;
}

/* 图1：工厂实力 (3列等宽) */
.grid-factory {
  grid-template-columns: repeat(3, 1fr);
}

/* 图3：应用场景 (上3下2，总共6等分) */
.grid-application {
  grid-template-columns: repeat(6, 1fr);
}
/* 前3张图，每张占 2/6 (即 1/3 宽度) */
.grid-application .gallery-item-v2:nth-child(1),
.grid-application .gallery-item-v2:nth-child(2),
.grid-application .gallery-item-v2:nth-child(3) {
  grid-column: span 2;
}
/* 第4、5张图，每张占 3/6 (即 1/2 宽度) */
.grid-application .gallery-item-v2:nth-child(n+4) {
  grid-column: span 3;
}

/* 图5：发货装柜 (左1大，右2小，总共4等分) */
.grid-shipping {
  grid-template-columns: repeat(4, 1fr);
}
/* 第1张图，占 2/4 (即 1/2 宽度) */
.grid-shipping .gallery-item-v2:nth-child(1) {
  grid-column: span 2;
}
/* 后面的图，每张占 1/4 宽度 */
.grid-shipping .gallery-item-v2:nth-child(n+2) {
  grid-column: span 1;
}

/* ================= 卡片细节设计 ================= */
.gallery-item-v2 {
  position: relative;
  border-radius: 16px; /* 大圆角 */
  overflow: hidden;
  background-color: #2b3945; /* 占位深色底 */
  aspect-ratio: 4 / 3; /* 基础卡片比例 */
}

/* 让宽度较大的卡片变成 16:9 比例，避免过高 */
.grid-application .gallery-item-v2:nth-child(n+4),
.grid-shipping .gallery-item-v2:nth-child(1) {
  aspect-ratio: 16 / 9;
}

/* 图片铺满与悬浮动效 */
.gallery-item-v2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.gallery-item-v2:hover img {
  transform: scale(1.05); /* 悬浮时图片微幅放大，提升高级感 */
}

/* 暗色渐变遮罩层 (文字区域) */
.gallery-overlay-v2 {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 50px 24px 20px;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 60%, transparent 100%);
  pointer-events: none; /* 防止遮罩阻挡图片上的右键等操作 */
}

/* 暗金色标签 */
.gallery-tag-v2 {
  display: block;
  font-size: 10px;
  font-weight: 800;
  color: #DDA343;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

/* 白色标题 */
.gallery-caption-v2 {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
  letter-spacing: 0.02em;
}

/* 底部按钮居中容器 */
.gallery-action-center {
  text-align: center;
  margin-top: 40px;
}

/* ================= 移动端与平板响应式 ================= */
@media (max-width: 960px) {
  /* 平板端强制转为2列网格 */
  .grid-factory, .grid-application, .grid-shipping {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .gallery-item-v2 {
    grid-column: span 1 !important;
    aspect-ratio: 4 / 3 !important;
  }
}

@media (max-width: 600px) {
  /* 手机端强制转为单列瀑布流 */
  .grid-factory, .grid-application, .grid-shipping {
    grid-template-columns: 1fr !important;
  }
  .title-v2 { font-size: 30px; }
}

/* ==========================================================================
   图 10-11：底部黑底表单 & 极简尾部 1:1 视觉复刻
   ========================================================================== */

/* ---------------- 底部表单区 ---------------- */
.section-final-form-v3 {
  background-color: #2D2D2D; /* 对应截图的高级深灰背景 */
  padding: 90px 0 100px;
}

.form-container-v3 {
  max-width: 900px;
  margin: 0 auto;
}

.form-header-v3 {
  text-align: center;
  margin-bottom: 40px;
}

.eyebrow-v3 {
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: #F15A24; /* 截图同款亮橙色 */
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.title-v3 {
  font-size: 42px;
  font-weight: 700;
  line-height: 1.2;
  color: #ffffff;
  letter-spacing: -0.03em;
  margin: 0 0 16px;
}

.desc-v3 {
  font-size: 15px;
  color: #B3B3B3; /* 浅灰色文字 */
  line-height: 1.6;
  margin: 0;
}

/* 表单网格布局 */
.form-grid-v3 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px; /* 输入框之间的间距 */
  margin-bottom: 16px;
}

.form-row-full-v3 {
  margin-bottom: 24px;
}

/* 统一输入框质感 (大尺寸、微圆角) */
.input-field-v3 {
  width: 100%;
  padding: 20px 24px;
  font-size: 15px;
  background-color: #ffffff;
  border: none;
  border-radius: 4px;
  color: #333333;
  outline: none;
  font-family: inherit;
  box-sizing: border-box;
  transition: box-shadow 0.2s ease;
  -webkit-appearance: none; /* 移除默认下拉箭头，让 select 看起来和图里的文本框一样 */
  appearance: none;
}

.input-field-v3:focus {
  box-shadow: 0 0 0 3px rgba(241, 90, 36, 0.4); /* 聚焦时的橙色光晕 */
}

.input-field-v3::placeholder {
  color: #888888;
}

/* 提交按钮 */
.btn-submit-v3 {
  width: 100%;
  background-color: #F15A24;
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
  padding: 22px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn-submit-v3:hover {
  background-color: #D94D1D;
}

/* ---------------- 极简尾部 (Footer) ---------------- */
.site-footer-v3 {
  background-color: #1A1A1A; /* 更深的纯黑色底，形成视觉层次 */
  padding: 40px 0;
  border-top: 1px solid #222222;
}

.footer-flex-v3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-logo-v3 {
  font-size: 26px;
  font-weight: 900;
  color: #F15A24;
  letter-spacing: 0.02em;
}

.footer-links-v3 {
  font-size: 14px;
  color: #999999;
}

.footer-copyright-v3 {
  text-align: right;
  font-size: 13px;
  color: #999999;
  line-height: 1.8;
}

.footer-line-1 {
  display: block;
  color: #CCCCCC;
}

.footer-line-2 {
  display: block;
}

/* 移动端与平板响应式适配 */
@media (max-width: 768px) {
    .lp-header-logo-img {
        height: 32px !important;
        max-width: 120px !important;
    }
}

  .footer-flex-v3 {
    flex-direction: column;
    text-align: center;
  }

  .footer-copyright-v3 {
    text-align: center;
  }

  .title-v3 {
    font-size: 32px;
  }
}

/* ==========================================================================
   图 1：底部黑底表单 & 极简尾部 1:1 视觉复刻
   ========================================================================== */

/* ---------------- 底部表单区 ---------------- */
.section-final-form-v4 {
  background-color: #2b2b2b; /* 还原图中的深炭灰底色 */
  padding: 100px 0 110px;
}

.form-container-v4 {
  max-width: 960px; /* 图中表单略宽 */
  margin: 0 auto;
}

.form-header-v4 {
  text-align: center;
  margin-bottom: 50px;
}

.eyebrow-v4 {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: #e75515; /* 品牌橙色 */
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.title-v4 {
  font-size: 42px;
  font-weight: 700;
  line-height: 1.2;
  color: #ffffff;
  letter-spacing: -0.03em;
  margin: 0 0 16px;
}

.desc-v4 {
  font-size: 15px;
  color: #b3b3b3;
  line-height: 1.6;
  margin: 0;
}

/* 表单网格布局 */
.form-grid-v4 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px; /* 还原图中间距 */
  margin-bottom: 20px;
}

.form-row-full-v4 {
  margin-bottom: 30px;
}

/* 统一输入框质感 (大尺寸、微圆角、全部等高) */
.input-field-v4 {
  width: 100%;
  padding: 22px 24px;
  font-size: 15px;
  background-color: #ffffff;
  border: none;
  border-radius: 4px;
  color: #333333;
  outline: none;
  font-family: inherit;
  box-sizing: border-box;
  transition: box-shadow 0.2s ease;
  -webkit-appearance: none; /* 移除默认下拉箭头 */
  appearance: none;
}

.input-field-v4:focus {
  box-shadow: 0 0 0 3px rgba(231, 85, 21, 0.4);
}

.input-field-v4::placeholder {
  color: #888888;
}

/* 提交按钮 */
.btn-submit-v4 {
  width: 100%;
  background-color: #e75515;
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
  padding: 24px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn-submit-v4:hover {
  background-color: #cf4c13;
}

/* ---------------- 极简尾部 (Footer) ---------------- */
.site-footer-v4 {
  background-color: #1a1a1a; /* 极暗的纯黑底色 */
  padding: 40px 0;
}

.footer-flex-v4 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-logo-v4 {
  font-size: 28px;
  font-weight: 900;
  color: #e75515;
  letter-spacing: 0.02em;
}

.footer-links-v4 {
  font-size: 14px;
  color: #a0a0a0;
}

.footer-copyright-v4 {
  text-align: right;
  font-size: 13px;
  line-height: 1.8;
}

.footer-line-1 {
  display: block;
  color: #e0e0e0;
}

.footer-line-2 {
  display: block;
  color: #a0a0a0;
}

/* 移动端与平板响应式适配 */
@media (max-width: 900px) {
  .footer-flex-v4 {
    flex-direction: column;
    text-align: center;
  }
  .footer-copyright-v4 {
    text-align: center;
  }
}

@media (max-width: 600px) {
  .form-grid-v4 {
    grid-template-columns: 1fr;
  }
  .title-v4 {
    font-size: 32px;
  }
}

/* ==========================================================================
   图1/图2/图3 新增区块 1:1 视觉复刻
   ========================================================================== */

/* ---------------- 图1：OUR SERVICE ---------------- */
.section-service-v5 {
  padding: 80px 0;
  background-color: #fbfbfb; /* 极浅灰底色 */
}

.service-container-v5 {
  display: flex;
  align-items: center;
  gap: 60px;
}

.service-left-v5 {
  flex: 1.2;
}

.title-v5 {
  font-size: 42px;
  font-weight: 800;
  color: #1a1a1a;
  margin: 0 0 20px;
  letter-spacing: -0.02em;
}

.service-intro {
  font-size: 14.5px;
  color: #444;
  line-height: 1.7;
  margin-bottom: 30px;
}

.service-list-v5 {
  list-style: none;
  padding: 0;
  margin: 0 0 40px;
}

.service-list-v5 li {
  font-size: 13.5px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 12px;
  position: relative;
  padding-left: 14px;
}

.service-list-v5 li::before {
  content: '•';
  color: #e75515;
  font-size: 18px;
  position: absolute;
  left: 0;
  top: -2px;
}

.highlight-text {
  color: #e75515;
  font-weight: 600;
}

.btn-orange-solid-v5 {
  display: inline-block;
  background-color: #e75515;
  color: #fff !important;
  font-size: 13px;
  font-weight: 700;
  padding: 14px 32px;
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.2s;
}

.btn-orange-solid-v5:hover {
  background-color: #cf4c13;
}

.service-right-v5 {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}

.service-watermark {
  font-size: 100px;
  font-weight: 900;
  color: #f0f0f0; /* 极浅的水印色 */
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  line-height: 1;
  margin-right: 20px;
  letter-spacing: 0.1em;
}

.service-img-wrapper img {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* ---------------- 图2：WHY CHOOSE US ---------------- */
.section-why-v5 {
  background-color: #333333;
  padding: 90px 0;
  color: #ffffff;
}

.why-header-v5 {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 60px;
}

.why-header-v5 h2 {
  font-size: 38px;
  color: #ffffff;
  margin-bottom: 20px;
}

.why-header-v5 p {
  font-size: 14px;
  color: #b3b3b3;
  line-height: 1.7;
}

.why-body-v5 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.why-col-left, .why-col-right {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.why-col-center {
  flex: 1.5;
  text-align: center;
}

.why-col-center img {
  width: 100%;
  max-width: 600px;
  filter: drop-shadow(0 20px 30px rgba(0,0,0,0.5));
}

.why-feature-item {
  margin-bottom: 40px;
}

.align-right { text-align: right; }
.align-left { text-align: left; }

.feature-icon-v5 {
  font-size: 32px;
  color: #e75515;
  margin-bottom: 12px;
}

.why-feature-item h4 {
  font-size: 18px;
  color: #ffffff;
  margin: 0 0 10px;
}

.why-feature-item p {
  font-size: 13.5px;
  color: #999999;
  line-height: 1.6;
  margin: 0;
}

/* ---------------- 图3：ABOUT US & TRADING DETAILS ---------------- */
.section-about-trading-v5 {
  background-color: #ffffff;
}

.about-top-v5 {
  padding: 80px 0;
}

.about-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eeeeee;
  padding-bottom: 30px;
  margin-bottom: 40px;
}

.about-title-v5 {
  font-size: 32px;
  font-weight: 900;
  line-height: 1.1;
  color: #1a1a1a;
  margin: 0;
}

.about-stats-v5 {
  display: flex;
  gap: 40px;
}

.stat-box-v5 {
  text-align: center;
}

.stat-num {
  display: block;
  font-size: 32px;
  font-weight: 800;
  color: #e75515;
}

.stat-num small {
  font-size: 14px;
  color: #999;
  font-weight: 600;
  margin-left: 4px;
}

.stat-label {
  display: block;
  font-size: 12px;
  color: #1a1a1a;
  font-weight: 700;
  margin-top: 4px;
}

.about-content-row {
  display: flex;
  gap: 50px;
  align-items: flex-start;
}

.about-img-box-v5 {
  flex: 1;
}

.about-img-box-v5 img {
  width: 100%;
  border-radius: 4px;
}

.about-text-box-v5 {
  flex: 1.5;
}

.about-text-box-v5 p {
  font-size: 14px;
  color: #555;
  line-height: 1.7;
  margin-bottom: 20px;
}

.about-actions-v5 {
  margin-top: 30px;
}

/* 交易细节 (蓝底区) */
.trading-bottom-v5 {
  background-color: #003b95; /* 深沉企业蓝 */
  padding: 80px 0;
  color: #ffffff;
}

.trading-header-v5 {
  text-align: center;
  margin-bottom: 60px;
}

.eyebrow-blue-v5 {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #8bb4f0;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
}

.title-white-v5 {
  font-size: 32px;
  color: #ffffff;
  margin: 0 0 20px;
  letter-spacing: 0.05em;
}

.yellow-divider-v5 {
  width: 60px;
  height: 3px;
  background-color: #f1b92e;
  margin: 0 auto;
}

.trading-grid-v5 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

.trade-card-v5 {
  text-align: center;
}

.trade-icon-v5 {
  font-size: 36px;
  color: #f1b92e;
  margin-bottom: 20px;
}

.trade-card-v5 h4 {
  font-size: 16px;
  color: #ffffff;
  margin: 0 0 14px;
}

.trade-card-v5 p {
  font-size: 13px;
  color: #a8c6f0;
  line-height: 1.6;
  margin: 0;
}

/* ---------------- 响应式适配 ---------------- */
@media (max-width: 992px) {
  .service-container-v5 { flex-direction: column; }
  .service-watermark { display: none; } /* 手机端隐藏水印以节省空间 */

  .why-body-v5 { flex-direction: column; }
  .align-right, .align-left { text-align: center; }

  .about-header-row { flex-direction: column; gap: 30px; text-align: center; }
  .about-content-row { flex-direction: column; }

  .trading-grid-v5 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .about-stats-v5 { flex-direction: column; gap: 20px; }
  .trading-grid-v5 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   图 1 风格：浅色背景 + 线框表单 + 居中按钮 1:1 视觉复刻
   ========================================================================== */

.section-final-form-light {
  background-color: #f5f6f8; /* 浅灰底色 */
  /* 添加世界地图点阵底纹占位 (建议替换为你实际的 world-map.png 图片路径) */
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MDAiIGhlaWdodD0iNDAwIj48ZyBmaWxsPSIjZTZlOGVhIiBvcGFjaXR5PSIwLjUiPjxjaXJjbGUgY3g9IjQwMCIgY3k9IjIwMCIgcj0iMjAwIi8+PC9nPjwvc3ZnPg==');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 800px auto;
  padding: 90px 0 100px;
  position: relative;
}

.form-container-light {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.form-header-light {
  text-align: center;
  margin-bottom: 40px;
}

.eyebrow-light {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: #e75515;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.title-light {
  font-size: 42px;
  font-weight: 700;
  line-height: 1.2;
  color: #1a1a1a; /* 变为深色标题 */
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}

.desc-light {
  font-size: 15px;
  color: #666666; /* 变为深灰副标题 */
  line-height: 1.6;
  margin: 0;
}

.form-grid-light {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.form-row-full-light {
  margin-bottom: 30px;
}

/* 浅色线框输入框 */
.input-field-light {
  width: 100%;
  padding: 16px 20px; /* 图1的输入框高度适中 */
  font-size: 14.5px;
  background-color: transparent; /* 图1是透出底色的 */
  border: 1px solid #d1d1d1; /* 浅灰细边框 */
  border-radius: 4px;
  color: #333333;
  outline: none;
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}

.input-field-light:focus {
  border-color: #e75515;
  background-color: #ffffff; /* 聚焦时变白，凸显输入区域 */
}

.input-field-light::placeholder {
  color: #999999;
}

/* 匹配图1的超大文本域样式 */
.textarea-light {
  height: 140px;
  resize: vertical;
}

/* 居中的按钮容器 */
.form-submit-center-light {
  text-align: center;
}

/* 按钮：非全宽，居中 */
.btn-submit-light {
  background-color: #e75515;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  padding: 15px 40px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  display: inline-block;
}

.btn-submit-light:hover {
  background-color: #cf4c13;
}

/* 移动端与平板响应式适配 */
@media (max-width: 768px) {
  .form-grid-light {
    grid-template-columns: 1fr;
  }
  .title-light {
    font-size: 32px;
  }
  .section-final-form-light {
    padding: 60px 0 80px;
    background-size: cover;
  }
}

/* ==========================================================================
   图 1 风格：多列高级灰底 Footer 1:1 视觉复刻
   ========================================================================== */

.site-footer-v5 {
  background-color: #303030; /* 还原图中的深灰底色 */
  padding: 60px 0 30px;
  color: #cccccc;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

.footer-main-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr; /* 第一列略宽，后三列等宽 */
  gap: 40px;
  margin-bottom: 40px;
}

/* 第一列：品牌区 */
.footer-logo-text {
  font-size: 28px;
  font-weight: 900;
  color: #ffffff;
  margin-bottom: 15px;
  letter-spacing: 0.02em;
}

.brand-desc {
  font-size: 14px;
  line-height: 1.6;
  color: #aaaaaa;
  margin: 0 0 25px;
  max-width: 280px;
}

/* 蓝色按钮 */
.btn-send-inquiry {
  display: inline-block;
  background-color: #0056b3; /* 图中的亮蓝色 */
  color: #ffffff !important;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 14px 32px;
  border: none;
  border-radius: 2px;
  text-decoration: none;
  transition: background-color 0.2s;
}

.btn-send-inquiry:hover {
  background-color: #004494;
}

/* 标题与列表 */
.footer-heading {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 24px;
}

.footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-list li {
  margin-bottom: 14px;
  font-size: 14px;
  color: #aaaaaa;
}

.footer-list a {
  color: #aaaaaa;
  text-decoration: none;
  transition: color 0.2s;
}

.footer-list a:hover {
  color: #ffffff;
}

/* 分割线 */
.footer-divider {
  height: 1px;
  background-color: #4a4a4a;
  margin-bottom: 25px;
}

/* 底部版权与社交图标 */
.footer-bottom-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.copyright {
  font-size: 14px;
  color: #ffffff;
}

.social-icons {
  display: flex;
  gap: 12px;
}

/* 灰色圆形社交图标 */
.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background-color: #4a4a4a;
  color: #ffffff !important;
  border-radius: 50%;
  text-decoration: none;
  font-weight: bold;
  font-size: 14px;
  transition: background-color 0.2s;
}

.social-icon:hover {
  background-color: #666666;
}

/* 移动端与平板响应式适配 */
@media (max-width: 992px) {
  .footer-main-grid {
    grid-template-columns: repeat(2, 1fr); /* 平板变两列 */
  }
}

@media (max-width: 600px) {
  .footer-main-grid {
    grid-template-columns: 1fr; /* 手机端变单列 */
  }
  .footer-bottom-bar {
    flex-direction: column;
    text-align: center;
  }
}

/* ==========================================================================
   Certificates 证书静态展示模块 (1:1 视觉保留，改为4列静态网格)
   ========================================================================== */

.section-certificates-hf {
  background-color: #ffffff !important;
  padding: 70px 0 80px;
}

.cert-main-container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* 标题样式 */
.cert-heading {
  font-size: 32px;
  font-weight: 600;
  color: #222222;
  text-align: center;
  letter-spacing: -0.01em;
  margin: 0 0 50px;
}

/* 静态网格布局：桌面端直接排4列 */
.cert-static-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 10px 0 25px; /* 上下留出投影空间，防止阴影被截断 */
}

/* 单张卡片容器 */
.cert-card-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* 证书实体纸张卡片：保留原本的A4比例与高级投影 */
.cert-paper-box {
  width: 100%;
  aspect-ratio: 1 / 1.414; /* A4 经典纸张比例 */
  background-color: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
  border-radius: 2px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cert-paper-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);
}

.cert-paper-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* 底部文字标签 */
.cert-caption {
  font-size: 14px;
  font-weight: 500;
  color: #444444;
  margin: 18px 0 0;
  text-align: center;
}

/* ---------------- 移动端与平板响应式 ---------------- */
@media (max-width: 992px) {
  /* 平板端自动折行为 2 列展示 */
  .cert-static-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  /* 手机端自动折行为 1 列展示 */
  .cert-static-grid {
    grid-template-columns: 1fr;
  }
  .cert-heading {
    font-size: 26px;
    margin-bottom: 30px;
  }
}

/* ---------------- 移动端与平板响应式 ---------------- */
@media (max-width: 992px) {
  /* 平板端展示 2 张 */
  .cert-card-item {
    flex: 0 0 calc((100% - 24px) / 2);
    max-width: calc((100% - 24px) / 2);
  }
}

@media (max-width: 576px) {
  /* 手机端展示 1 张 */
  .cert-card-item {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .cert-heading {
    font-size: 26px;
    margin-bottom: 30px;
  }
}

/* ==========================================================================
   三列联系与支持模块 1:1 视觉复刻
   ========================================================================== */

.section-contact-info-v7 {
  background-color: #ffffff;
  padding: 70px 0;
  border-top: 3px solid #004b9a; /* 还原截图顶部的深蓝色细边框 */
}

.contact-grid-v7 {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}

.contact-col-v7 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 40px;
  position: relative;
}

/* 列之间的垂直灰色分割线 */
.contact-col-v7:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 15%;
  height: 70%;
  width: 1px;
  background-color: #e5e5e5;
}

/* SVG 矢量图标 (还原深蓝色) */
.contact-icon-v7 {
  width: 44px;
  height: 44px;
  margin-bottom: 20px;
}

.contact-icon-v7 svg {
  width: 100%;
  height: 100%;
  fill: #004b9a; /* 深蓝色 */
}

/* 标题样式 */
.contact-title-v7 {
  font-size: 22px;
  font-weight: 500;
  color: #1a1a1a;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}

/* 描述文本 */
.contact-desc-v7 {
  font-size: 14px;
  color: #444444;
  line-height: 1.7;
  margin: 0 0 16px;
}

/* 底部强调信息 (电话/黑点/链接) */
.contact-dot-v7 {
  font-size: 14px;
  color: #444444;
  margin-top: auto;
}

.contact-highlight-v7 {
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
  margin-top: auto;
}

.contact-link-v7 {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  text-decoration: underline;
  text-underline-offset: 4px;
  margin-top: auto;
  transition: color 0.2s ease;
}

.contact-link-v7:hover {
  color: #004b9a;
}

/* 移动端与平板响应式适配 */
@media (max-width: 900px) {
  .contact-grid-v7 {
    flex-direction: column;
    gap: 50px;
  }

  .contact-col-v7 {
    padding: 0 20px;
  }

  /* 手机端隐藏垂直分割线，改为底部横向分割线 */
  .contact-col-v7:not(:last-child)::after {
    right: auto;
    bottom: -25px;
    top: auto;
    height: 1px;
    width: 60%;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* ==========================================================================
   FAQ 常见问题区 1:1 视觉复刻
   ========================================================================== */

.section-faq-v8 {
  background-color: #fbfbfb; /* 还原图中的极浅灰白底色 */
  padding: 90px 0;
}

.faq-container-v8 {
  display: flex;
  gap: 80px;
  align-items: flex-start;
  max-width: 1100px;
  margin: 0 auto;
}

/* ---------------- 左侧文本与按钮 ---------------- */
.faq-left-v8 {
  flex: 1;
  padding-top: 15px; /* 让标题和右侧第一根横线视觉对齐 */
}

.faq-title-v8 {
  font-size: 34px;
  font-weight: 800;
  color: #111111;
  margin: 0 0 24px;
  letter-spacing: -0.01em;
}

.faq-desc-v8 {
  font-size: 15px;
  color: #444444; /* 深灰色文本增强阅读体验 */
  line-height: 1.8;
  margin: 0 0 30px;
}

/* 还原图中的黄色按钮 */
.btn-yellow-v8 {
  display: inline-block;
  background-color: #fabc2a; /* 精准提取黄橙色 */
  color: #ffffff !important;
  font-size: 15px;
  font-weight: 500;
  padding: 12px 32px;
  border-radius: 4px;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.btn-yellow-v8:hover {
  background-color: #e5a71a;
}

/* ---------------- 右侧折叠列表 ---------------- */
.faq-right-v8 {
  flex: 1.3; /* 右边内容较多，分配比例稍大 */
  border-top: 1px solid #222222; /* 顶部第一根黑色横线 */
}

.faq-item-v8 {
  border-bottom: 1px solid #222222; /* 列表间的黑色分割线 */
}

.faq-question-v8 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 0;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  color: #111111;
  transition: color 0.2s ease;
}

.faq-question-v8:hover {
  color: #e75515; /* 鼠标悬停时给点提示色 */
}

.faq-icon-v8 {
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
  color: #111111;
}

/* 隐藏的答案区 */
.faq-answer-v8 {
  display: none;
  padding-bottom: 24px;
  font-size: 15px;
  color: #444444;
  line-height: 1.8;
}

/* 激活展开状态 */
.faq-item-v8.active .faq-answer-v8 {
  display: block; /* 展开时显示答案 */
  animation: fadeIn 0.3s ease; /* 简易渐显动画 */
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------------- 移动端与平板响应式 ---------------- */
@media (max-width: 900px) {
  .faq-container-v8 {
    flex-direction: column;
    gap: 50px;
  }

  .faq-right-v8 {
    width: 100%;
  }
}

/* ==========================================================================
   图 2 风格：全屏视频首屏 + 底部黄条 1:1 视觉复刻
   ========================================================================== */

.hero-video-section {
  position: relative;
  width: 100%;
  height: 100vh; /* 视频全屏高度 */
  min-height: 650px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4); /* 暗色半透明遮罩 */
  z-index: 2;
}

/* 居中按钮区 */
.hero-center-content {
  position: relative;
  z-index: 3;
  text-align: center;
  transform: translateY(-40px); /* 向上偏移一点，以免被底部黄条遮挡 */
}

.btn-get-quote-yellow {
  display: inline-block;
  background-color: #ffcc00; /* 标志性亮黄色 */
  color: #111111 !important;
  font-size: 22px;
  font-weight: 800;
  padding: 16px 48px;
  border-radius: 999px; /* 胶囊形状 */
  text-decoration: none;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease, background-color 0.2s ease;
  letter-spacing: -0.02em;
}

.btn-get-quote-yellow:hover {
  background-color: #e6b800;
  transform: scale(1.05); /* 鼠标悬停微微放大 */
}

/* 视频暂停竖线图标 */
.video-pause-icon {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 20px;
  cursor: pointer;
}
.video-pause-icon span {
  display: block;
  width: 6px;
  height: 24px;
  background-color: #ffffff;
  border-radius: 2px;
}

/* 底部黄色特性栏 */
.hero-bottom-features {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #ffcc00; /* 底部通栏亮黄 */
  z-index: 3;
  padding: 24px 0;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #111111;
}

/* 列与列之间的暗色分割线 */
.has-divider {
  border-left: 1px solid rgba(0, 0, 0, 0.15);
  padding-left: 20px;
}

.feature-icon {
  flex-shrink: 0;
}

.feature-text h4 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.feature-text p {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: #222222;
}

/* 移动端与平板响应式适配 */
@media (max-width: 992px) {
  .hero-video-section {
    height: auto;
    min-height: 100vh;
    padding-bottom: 250px; /* 留出底部垂直排列的特征栏空间 */
  }
  .features-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .has-divider {
    border-left: none; /* 手机端取消左竖线 */
    border-top: 1px solid rgba(0, 0, 0, 0.15); /* 改为顶部横线分割 */
    padding-left: 0;
    padding-top: 20px;
  }
}

/* ==========================================================================
   图 2 风格：全屏视频首屏 + 底部黄条 1:1 视觉复刻
   ========================================================================== */

.hero-video-section {
  position: relative;
  width: 100%;
  height: 100vh; /* 视频全屏高度 */
  min-height: 650px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4); /* 暗色半透明遮罩 */
  z-index: 2;
}

/* 居中按钮区 */
.hero-center-content {
  position: relative;
  z-index: 3;
  text-align: center;
  transform: translateY(-40px); /* 向上偏移一点，以免被底部黄条遮挡 */
}

.btn-get-quote-yellow {
  display: inline-block;
  background-color: #ffcc00; /* 标志性亮黄色 */
  color: #111111 !important;
  font-size: 22px;
  font-weight: 800;
  padding: 16px 48px;
  border-radius: 999px; /* 胶囊形状 */
  text-decoration: none;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease, background-color 0.2s ease;
  letter-spacing: -0.02em;
}

.btn-get-quote-yellow:hover {
  background-color: #e6b800;
  transform: scale(1.05); /* 鼠标悬停微微放大 */
}

/* 视频暂停竖线图标 */
.video-pause-icon {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 20px;
  cursor: pointer;
}
.video-pause-icon span {
  display: block;
  width: 6px;
  height: 24px;
  background-color: #ffffff;
  border-radius: 2px;
}

/* 底部黄色特性栏 */
.hero-bottom-features {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #ffcc00; /* 底部通栏亮黄 */
  z-index: 3;
  padding: 24px 0;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #111111;
}

/* 列与列之间的暗色分割线 */
.has-divider {
  border-left: 1px solid rgba(0, 0, 0, 0.15);
  padding-left: 20px;
}

.feature-icon {
  flex-shrink: 0;
}

.feature-text h4 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.feature-text p {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: #222222;
}

/* 移动端与平板响应式适配 */
@media (max-width: 992px) {
  .hero-video-section {
    height: auto;
    min-height: 100vh;
    padding-bottom: 250px; /* 留出底部垂直排列的特征栏空间 */
  }
  .features-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .has-divider {
    border-left: none; /* 手机端取消左竖线 */
    border-top: 1px solid rgba(0, 0, 0, 0.15); /* 改为顶部横线分割 */
    padding-left: 0;
    padding-top: 20px;
  }
}

/* ==========================================================================
   图 1 效果：PRODUCTION & APPLICATION 网格排版 1:1 还原
   (直接复制到 style.css 最底部即可，傻瓜式覆盖原有样式)
   ========================================================================== */

/* 1. 调整标题字体大小并控制换行，使其与图1完全一致 */
#application .title-v2 {
  font-size: 42px !important;
  max-width: 650px !important; /* 压缩宽度强制 "finished..." 换行 */
  margin-left: auto !important;
  margin-right: auto !important;
  line-height: 1.2 !important;
}

/* 2. 桌面端网格重排：上排左1大、右1小，下排3小 */
@media (min-width: 961px) {
  /* 将总列数重置为 3 列 */
  .grid-application {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* 第1张图 (Machine manufacturing)：跨2列 */
  .grid-application .gallery-item-v2:nth-child(1) {
    grid-column: span 2 !important;
    aspect-ratio: 2.74 / 1 !important; /* 精确计算大图比例，确保与右侧小图高度完美平齐 */
  }

  /* 第2到5张图：各占1列，恢复默认的 4:3 比例 */
  .grid-application .gallery-item-v2:nth-child(n+2) {
    grid-column: span 1 !important;
    aspect-ratio: 4 / 3 !important;
  }
}

/* ==========================================================================
   图 1 效果：PACKING & SHIPMENT 发货装柜网格排版 1:1 还原
   (直接复制到 style.css 最底部即可，傻瓜式覆盖原有样式)
   ========================================================================== */

/* 桌面端网格重排：3列布局，上排左1大(占2列) + 右1小，下排各占1列 */
@media (min-width: 961px) {
  /* 将发货装柜的总列数重置为 3 列 */
  .grid-shipping {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* 第1张图 (大图)：跨2列，取消固定比例，让高度自动拉伸与右侧小图完美平齐 */
  .grid-shipping .gallery-item-v2:nth-child(1) {
    grid-column: span 2 !important;
    aspect-ratio: auto !important;
    height: 100% !important;
  }

  /* 其余所有图片：各占1列，恢复默认的 4:3 比例 */
  .grid-shipping .gallery-item-v2:nth-child(n+2) {
    grid-column: span 1 !important;
    aspect-ratio: 4 / 3 !important;
  }
}

/* ==========================================================================
   发货装柜 (PACKING & SHIPMENT) 8图错落高级网格 1:1 完美还原
   (直接复制到 style.css 最底部即可，傻瓜式覆盖原有样式)
   ========================================================================== */

@media (min-width: 961px) {
  /* 1. 将总网格划分为 12 列，以便实现精细的错落比例 */
  .grid-shipping {
    grid-template-columns: repeat(12, 1fr) !important;
  }

  /* 2. 第一行：左1大(占6列) + 右2小(各占3列) */
  .grid-shipping .gallery-item-v2:nth-child(1) {
    grid-column: span 6 !important;
    aspect-ratio: auto !important; /* 取消固定比例，跟随同行小图的高度 */
    height: 100% !important;
  }
  .grid-shipping .gallery-item-v2:nth-child(2),
  .grid-shipping .gallery-item-v2:nth-child(3) {
    grid-column: span 3 !important;
    aspect-ratio: 4 / 3 !important; /* 小图决定整行的高度 */
  }

  /* 3. 第二行：3个中等大小 (各占4列，4+4+4=12) */
  .grid-shipping .gallery-item-v2:nth-child(4),
  .grid-shipping .gallery-item-v2:nth-child(5),
  .grid-shipping .gallery-item-v2:nth-child(6) {
    grid-column: span 4 !important;
    aspect-ratio: 4 / 3 !important;
  }

  /* 4. 第三行：左1超大(占8列) + 右1中等(占4列) */
  .grid-shipping .gallery-item-v2:nth-child(7) {
    grid-column: span 8 !important;
    aspect-ratio: auto !important; /* 取消固定比例，跟随右侧图片的高度 */
    height: 100% !important;
  }
  .grid-shipping .gallery-item-v2:nth-child(8) {
    grid-column: span 4 !important;
    aspect-ratio: 4 / 3 !important; /* 右侧小图决定整行的高度 */
  }
}

/* ==========================================================================
   发货装柜 (PACKING & GLOBAL SHIPMENT) 8图布局 1:1 完美还原
   (直接粘贴到 style.css 最底部即可，覆盖原有冲突样式)
   ========================================================================== */

/* 1. 标题与副标题字号、行距及居中强制折行（与目标图一致） */
#shipping .title-v2 {
  font-size: 42px !important;
  font-weight: 700 !important;
  line-height: 1.18 !important;
  max-width: 680px !important; /* 限制宽度让标题在 careful 处精准折行 */
  margin-left: auto !important;
  margin-right: auto !important;
  color: #1a1a1a !important;
}

#shipping .subtitle-v2 {
  font-size: 15px !important;
  color: #666666 !important;
  line-height: 1.6 !important;
  max-width: 820px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 2. 桌面端 3 列网格排版核心 */
@media (min-width: 961px) {
  /* 划分为 3 列等宽网格 */
  .grid-shipping {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
  }

  /* 第1张图（大图）：跨 2 列，精准计算 2.74:1 比例与右侧小图严格等高 */
  .grid-shipping .gallery-item-v2:nth-child(1) {
    grid-column: span 2 !important;
    aspect-ratio: 2.74 / 1 !important;
    height: 100% !important;
  }

  /* 第2到第8张图：各占 1 列，统一维持标准 4:3 比例 */
  .grid-shipping .gallery-item-v2:nth-child(n+2) {
    grid-column: span 1 !important;
    aspect-ratio: 4 / 3 !important;
  }
}

/* ==========================================================================
   图 6：智能选型与产能匹配中心 (1:1 视觉复刻)
   ========================================================================== */

/* ==========================================================================
   恢复选型模块原本的版心宽度 (对齐图2标准宽度)
   ========================================================================== */
.model-configurator-box {
  max-width: var(--max-width, 1180px) !important; /* 恢复网站原本的 1180px 容器宽度 */
  width: calc(100% - 48px) !important;            /* 保证屏幕较小时左右保留 24px 呼吸间距 */
  margin-left: auto !important;                   /* 水平居中 */
  margin-right: auto !important;                  /* 水平居中 */
  box-sizing: border-box !important;
}

/* 顶部黑色 + 亮黄选项卡 */
.model-tabs-bar {
  display: flex;
  background-color: #0c0d0e;
  width: 100%;
}

.model-tabs-bar .tab-btn {
  flex: 1;
  padding: 18px 10px;
  border: none;
  background-color: #0c0d0e;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  letter-spacing: 0.05em;
  transition: all 0.25s ease;
  outline: none;
}

.model-tabs-bar .tab-btn:hover {
  background-color: #1a1b1e;
  color: #ffcc00;
}

.model-tabs-bar .tab-btn.active {
  background-color: #f7b52c !important; /* 图6同款金黄色 */
  color: #111111 !important;
}

/* 主体内容：左右排版 */
.model-body-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  background-color: #111215; /* 纯黑高级底色 */
}

/* 左侧参数面板 */
.model-spec-panel {
  padding: 45px 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid #222327;
}

.model-name-title {
  font-size: 46px;
  font-weight: 900;
  color: #ffffff;
  margin: 0 0 14px;
  letter-spacing: -0.02em;
}

/* 标志性黄色小胶囊标签 */
.model-badge {
  align-self: flex-start;
  background-color: #f7b52c;
  color: #111111;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 6px 14px;
  border-radius: 4px;
  margin-bottom: 28px;
  text-transform: uppercase;
}

/* 参数条目 */
.model-spec-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 30px;
}

.spec-row {
  display: flex;
  align-items: baseline;
  gap: 20px;
}

.spec-label {
  width: 130px;
  font-size: 14px;
  font-weight: 600;
  color: #8e929a;
}

.spec-value {
  font-size: 14.5px;
  font-weight: 700;
  color: #ffffff;
}

/* 价格区间 */
.model-price-tag {
  font-size: 26px;
  font-weight: 800;
  color: #f7b52c;
  margin-bottom: 28px;
  letter-spacing: -0.01em;
}

/* 转化按钮 */
.btn-get-quote-block {
  display: inline-block;
  text-align: center;
  background-color: #f7b52c;
  color: #111111 !important;
  font-size: 16px;
  font-weight: 700;
  padding: 14px 36px;
  border-radius: 4px;
  text-decoration: none;
  width: fit-content;
  transition: all 0.25s ease;
  box-shadow: 0 4px 15px rgba(247, 181, 44, 0.25);
}

.btn-get-quote-block:hover {
  background-color: #e5a420;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(247, 181, 44, 0.4);
}

/* 右侧视频区域 */
.model-media-panel {
  display: flex;
  flex-direction: column;
  background-color: #0d0e10;
}

.video-container-wrap {
  padding: 0 !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: stretch !important;
}

.video-mock-box {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}


.video-mock-box img,
.video-mock-box iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border: none !important;
  display: block !important;
  margin: 0 !important;
}

.model-media-panel {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

.video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 48px;
  background-color: #ff0000;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.video-mock-box:hover .video-play-btn {
  transform: translate(-50%, -50%) scale(1.1);
  background-color: #cc0000;
}

.youtube-mark {
  position: absolute;
  bottom: 12px;
  right: 14px;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  background: rgba(0,0,0,0.7);
  padding: 4px 8px;
  border-radius: 4px;
}

.youtube-mark span {
  color: #ff4e4e;
}

/* 底部 ISO 资质横条 */
.cert-gold-footer {
  background-color: #f7b52c;
  color: #111111;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  padding: 14px 20px;
  letter-spacing: 0.02em;
}

/* 底部 4 种砖型产能卡片 */
.model-yield-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 40px 30px;
  background-color: #ffffff;
  border-top: 1px solid #f0f0f0;
}

.yield-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 10px;
}

.brick-img-box {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
}

.brick-name {
  font-size: 14px;
  font-weight: 700;
  color: #222222;
  margin: 0 0 8px;
  line-height: 1.4;
  height: 38px; /* 保证两行对齐 */
}

.brick-output {
  font-size: 24px;
  font-weight: 900;
  color: #f7b52c;
  line-height: 1.2;
}

.brick-output small {
  font-size: 13px;
  color: #666666;
  font-weight: 600;
  display: block;
}

/* 移动端与平板响应式适配 */
@media (max-width: 992px) {
  .model-body-grid {
    grid-template-columns: 1fr;
  }
  .model-spec-panel {
    border-right: none;
    border-bottom: 1px solid #222327;
    padding: 35px 25px;
  }
  .model-yield-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 15px;
  }
}

@media (max-width: 600px) {
  .model-tabs-bar {
    flex-wrap: wrap;
  }
  .model-tabs-bar .tab-btn {
    flex: 1 0 50%;
    font-size: 14px;
    padding: 14px 8px;
  }
  .model-yield-grid {
    grid-template-columns: 1fr;
  }
  .model-name-title {
    font-size: 34px;
  }
  .model-price-tag {
    font-size: 22px;
  }
}

/* ==========================================================================
   首屏 Get Free Quote 按钮 1:1 视觉复刻 (图1/图2效果)
   (直接粘贴到 style.css 最底部即可，覆盖原有样式)
   ========================================================================== */

/* 1. 调整按钮在视频可视区的位置（垂直精确居中于黄条之上） */
.hero-center-content {
  position: relative;
  z-index: 3;
  text-align: center;
  transform: translateY(-48px) !important; /* 向上微调，使按钮处于上方视频画面的正中心 */
}

/* 2. 按钮颜色、尺寸、圆角与字体精准还原 */
.btn-get-quote-yellow {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #ffba00 !important; /* 图1同款温暖饱满的工业金黄色 */
  color: #000000 !important;           /* 纯黑字体 */
  font-size: 20px !important;           /* 精准字号 */
  font-weight: 800 !important;          /* 纯正特粗体 */
  line-height: 1 !important;
  letter-spacing: -0.01em !important;   /* 字间距微收紧 */
  padding: 18px 52px !important;        /* 丰满的胶囊长宽比例 */
  border-radius: 999px !important;      /* 完美胶囊圆角 */
  border: none !important;
  text-decoration: none !important;
  box-shadow: none !important;          /* 去除厚重脏阴影，还原干净通透感 */
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

/* 鼠标悬停微交互 */
.btn-get-quote-yellow:hover {
  background-color: #e5a700 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

/* 移动端/平板端自适应 */
@media (max-width: 768px) {
  .btn-get-quote-yellow {
    font-size: 18px !important;
    padding: 15px 38px !important;
  }
  .hero-center-content {
    transform: translateY(-20px) !important;
  }
}

/* ==========================================================================
   落地页极简头部 (Logo + Email + WhatsApp) 1:1 视觉复刻
   ========================================================================== */

.lp-header-v1 {
  position: sticky !important;
  top: 0 !important;
  z-index: 999 !important;
  background-color: #ffffff !important;
  border-bottom: 1px solid #eeeeee !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
  padding: 0 !important;
}

.lp-header-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 72px !important;
}

/* 左侧 Logo 区域 */
.lp-logo-group {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.lp-logo-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.lp-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.lp-brand-name {
  font-size: 20px;
  font-weight: 900;
  color: #1a1a1a;
  letter-spacing: 0.04em;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

.lp-brand-sub {
  font-size: 12px;
  font-weight: 700;
  color: #444444;
  letter-spacing: 0.18em;
}

/* 右侧联系信息区域 */
.lp-header-contacts {
  display: flex;
  align-items: center;
  gap: 36px; /* 两个联系项之间的间距 */
}

.lp-contact-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  font-size: 13.5px;
  color: #222222;
  transition: opacity 0.2s ease;
}

.lp-contact-item:hover {
  opacity: 0.8;
}

.lp-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.lp-label {
  font-weight: 600;
  color: #333333;
}

.lp-value {
  font-weight: 700;
  color: #111111;
}

/* 移动端/平板端自适应 */
@media (max-width: 768px) {
  .lp-header-inner {
    height: auto !important;
    padding: 12px 16px !important;
    flex-direction: column;
    gap: 10px;
  }

  .lp-header-contacts {
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .lp-contact-item {
    font-size: 12px;
  }
}

/* ==========================================================================
   图 1：综合方案区 (HF 风格版面 + 动态数字 + 蓝图图例) 1:1 复刻
   ========================================================================== */

.section-solutions-hf {
  background-color: #f4f6fa !important; /* 图1清爽浅蓝灰底色 */
  padding: 85px 0 95px !important;
  position: relative;
  overflow: hidden;
}

.solutions-hf-container {
  display: grid !important;
  grid-template-columns: 1.05fr 1.25fr !important; /* 左右黄金比例 */
  gap: 55px !important;
  align-items: center !important;
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  box-sizing: border-box !important;
}

/* ---------------- 左侧排版 ---------------- */
.solutions-hf-left {
  display: flex;
  flex-direction: column;
}

/* 大标题 */
.solutions-hf-title {
  font-size: 38px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  color: #1a1a1a !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 35px 0 !important;
}

/* 统计数据横排 3 列 */
.solutions-hf-stats {
  display: flex !important;
  gap: 35px !important;
  margin-bottom: 35px !important;
}

.stat-hf-item {
  flex: 1;
}

.stat-hf-num {
  font-size: 50px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  line-height: 1 !important;
  margin-bottom: 12px !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
}

.stat-hf-suffix {
  font-size: 46px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
}

.stat-hf-desc {
  font-size: 13px !important;
  color: #555555 !important;
  line-height: 1.45 !important;
  margin: 0 !important;
}

/* 说明正文段落 */
.solutions-hf-desc {
  font-size: 14.5px !important;
  line-height: 1.65 !important;
  color: #444444 !important;
  margin: 0 0 35px 0 !important;
  max-width: 530px !important;
}

/* 黄色矩形 CTA 按钮 */
.btn-hf-yellow {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #ffaa00 !important; /* 图1明快工业暖黄 */
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 14px 34px !important;
  border-radius: 2px !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease, transform 0.2s ease !important;
  width: fit-content !important;
}

.btn-hf-yellow:hover {
  background-color: #e69900 !important;
  transform: translateY(-2px) !important;
}

/* ---------------- 右侧地图与标语 ---------------- */
.solutions-hf-right {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.map-wrapper-hf {
  width: 100%;
  position: relative;
}

.hf-world-map-img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  filter: drop-shadow(0 8px 18px rgba(100, 130, 190, 0.12));
}

/* 地图右下角图例 */
.map-legend-hf {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 25px !important;
  margin-top: 15px !important;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.legend-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
}

.legend-icon.orange-icon {
  background-color: #f7a600;
}

.legend-icon.blue-icon {
  color: #2b5fb8;
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.legend-text {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #333333 !important;
  letter-spacing: 0.05em !important;
}

/* 底部深蓝大字标语 */
.map-slogan-hf {
  font-size: 18px !important;
  font-weight: 900 !important;
  color: #0f3575 !important; /* 图1同款经典海军蓝 */
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  text-align: right !important;
  margin-top: 25px !important;
}

/* ---------------- 移动端与平板响应式 ---------------- */
@media (max-width: 992px) {
  .solutions-hf-container {
    grid-template-columns: 1fr !important;
    gap: 45px !important;
  }
  .solutions-hf-title {
    font-size: 30px !important;
  }
  .map-legend-hf, .map-slogan-hf {
    text-align: center !important;
    justify-content: center !important;
  }
}

@media (max-width: 600px) {
  .solutions-hf-stats {
    flex-direction: column !important;
    gap: 20px !important;
  }
  .stat-hf-num {
    font-size: 40px !important;
  }
  .map-slogan-hf {
    font-size: 14px !important;
  }
}

/* ==========================================================================
   图 2 风格：选型匹配中心 1:1 精准还原 + 左上角向右下角过渡动画
   ========================================================================== */

/* 1. 核心动画：从左上角向右下角平滑滑入展开 */
@keyframes animFromTopLeftToBottomRight {
  0% {
    opacity: 0;
    transform: translate(-36px, -28px) scale(0.98);
    filter: blur(2px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
    filter: blur(0);
  }
}

.model-animated-wrapper.anim-diagonal-active {
  animation: animFromTopLeftToBottomRight 0.42s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 2. 外部大容器 */
.model-configurator-box {
  width: 100% !important;
  background-color: #ffffff !important;
  border-radius: 4px !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08) !important;
  overflow: hidden !important;
  margin-bottom: 70px !important;
}

/* 3. 顶部黑黄 Tab 切换条 */
.model-tabs-bar {
  display: flex !important;
  background-color: #000000 !important;
  width: 100% !important;
  border-bottom: 1px solid #1a1a1a !important;
}

.model-tabs-bar .tab-btn {
  flex: 1 !important;
  padding: 16px 10px !important;
  border: none !important;
  background-color: #000000 !important;
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  text-align: center !important;
  cursor: pointer !important;
  letter-spacing: 0.04em !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
}

.model-tabs-bar .tab-btn:hover {
  background-color: #1a1a1a !important;
  color: #f7b52c !important;
}

.model-tabs-bar .tab-btn.active {
  background-color: #f7b52c !important; /* 图2亮黄色高亮 */
  color: #000000 !important;
}

/* 4. 中间暗色网格主体 */
.model-body-grid {
  display: grid !important;
  grid-template-columns: 1fr 1.28fr !important;
  background-color: #0e1013 !important;
}

/* 左侧参数区：内嵌世界地图半透明底纹 */
.model-spec-panel {
  padding: 46px 52px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  background-color: #0e1013 !important;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="600" height="350" viewBox="0 0 600 350" fill="none"><path d="M120,70 Q160,50 200,80 T240,160 T160,260 Z M320,60 Q400,40 460,80 T480,180 T390,260 Z M500,120 Q560,100 590,140 T570,220 Z" fill="%23ffffff" opacity="0.04"/></svg>') !important;
  background-repeat: no-repeat !important;
  background-position: right center !important;
  background-size: cover !important;
  border-right: 1px solid #1c1f24 !important;
}

/* 标题 */
.model-name-title {
  font-size: 48px !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  margin: 0 0 14px 0 !important;
  letter-spacing: -0.02em !important;
}

/* 黄底黑字圆角胶囊标签 */
.model-badge {
  align-self: flex-start !important;
  background-color: #f7b52c !important;
  color: #000000 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  padding: 6px 18px !important;
  border-radius: 999px !important;
  margin-bottom: 30px !important;
  text-transform: uppercase !important;
}

/* 参数条目：标签统一金黄色，数值纯白色 */
.model-spec-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 13px !important;
  margin-bottom: 26px !important;
}

.spec-row {
  display: flex !important;
  align-items: baseline !important;
  gap: 20px !important;
}

.spec-label {
  width: 145px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #f7b52c !important; /* 图2同款金黄标签色 */
}

.spec-value {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: #ffffff !important; /* 纯白数值色 */
}

/* 价格区间 */
.model-price-tag {
  font-size: 26px !important;
  font-weight: 900 !important;
  color: #f7b52c !important;
  margin-bottom: 28px !important;
  letter-spacing: -0.01em !important;
}

/* 黄色圆角胶囊询价按钮 */
.btn-get-quote-block {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #f7b52c !important;
  color: #000000 !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  padding: 13px 38px !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  width: fit-content !important;
  box-shadow: 0 4px 14px rgba(247, 181, 44, 0.3) !important;
  transition: transform 0.2s ease, background-color 0.2s ease !important;
}

.btn-get-quote-block:hover {
  background-color: #e2a220 !important;
  transform: translateY(-2px) !important;
}

/* 5. 右侧视频区与底部黄标 */
.model-media-panel {
  display: flex !important;
  flex-direction: column !important;
  background-color: #090a0c !important;
}

.video-container-wrap {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 30px !important;
}

.video-mock-box {
  position: relative !important;
  width: 100% !important;
  max-width: 560px !important;
  aspect-ratio: 16 / 10 !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7) !important;
  cursor: pointer !important;
}

.video-mock-box img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.video-play-btn {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 66px !important;
  height: 46px !important;
  background-color: #ff0000 !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

.youtube-mark {
  position: absolute !important;
  bottom: 12px !important;
  right: 14px !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  background: rgba(0, 0, 0, 0.75) !important;
  padding: 4px 8px !important;
  border-radius: 3px !important;
}

.youtube-mark span {
  color: #ff3333 !important;
}

/* 视频下方金色横条 */
.cert-gold-footer {
  background-color: #f7b52c !important;
  color: #111111 !important;
  text-align: center !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 13px 20px !important;
  line-height: 1.4 !important;
}

/* 6. 底部 4 种砖型产能卡片 (图2白底 + 金黄色大数字) */
.model-yield-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  padding: 38px 24px 34px !important;
  background-color: #ffffff !important;
  border-top: 1px solid #f0f0f0 !important;
}

.yield-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

.brick-img-box {
  height: 80px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 12px !important;
}

.brick-name {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  margin: 0 0 8px 0 !important;
  line-height: 1.35 !important;
  height: 38px !important; /* 确保标题换行高度严格平齐 */
}

.brick-output {
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
}

.brick-output .out-num {
  font-size: 28px !important;
  font-weight: 900 !important;
  color: #f7b52c !important; /* 图2亮黄色大字 */
  line-height: 1 !important;
}

.brick-output .out-unit {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important; /* 纯黑单位后缀 */
}

/* 移动端与平板自适应 */
@media (max-width: 992px) {
  .model-body-grid {
    grid-template-columns: 1fr !important;
  }
  .model-spec-panel {
    border-right: none !important;
    border-bottom: 1px solid #1c1f24 !important;
    padding: 35px 24px !important;
  }
  .model-yield-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px 16px !important;
  }
}

@media (max-width: 600px) {
  .model-tabs-bar .tab-btn {
    font-size: 13px !important;
    padding: 12px 6px !important;
  }
  .model-name-title {
    font-size: 36px !important;
  }
  .model-yield-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   图 2 风格：选型模块 1:1 视觉复刻与左上到右下动画
   ========================================================================== */

/* 核心外框容器 */
.model-configurator-box {
  width: 100%;
  background-color: #ffffff;
  margin: 40px 0 70px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  overflow: hidden;
}

/* 1. 顶部 Tab 条 */
.model-tabs-bar {
  display: flex;
  background-color: #000000;
  width: 100%;
}

.model-tabs-bar .tab-btn {
  flex: 1;
  padding: 16px 10px;
  border: none;
  background-color: #000000;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  outline: none;
}

.model-tabs-bar .tab-btn.active {
  background-color: #f7b52c !important; /* 图2纯正明黄色 */
  color: #000000 !important;
}

/* 2. 中间黑底主体区域 */
.model-body-grid {
  display: grid;
  grid-template-columns: 1.05fr 1.25fr;
  background-color: #000000; /* 纯黑背景 */
  position: relative;
  overflow: hidden;
}

/* 从左上角到右下角的平滑切入动画 (0.38秒流畅缓动) */
.animate-diagonal-entry {
  animation: slideTopLeftToBottomRight 0.38s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}

@keyframes slideTopLeftToBottomRight {
  0% {
    opacity: 0;
    transform: translate(-32px, -32px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

/* 3. 左侧规格与报价面板 */
.model-spec-panel {
  padding: 50px 45px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  /* 背景带有淡淡的世界地图网点纹理 (图2效果) */
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 18px 18px;
}

.model-name-title {
  font-size: 52px;
  font-weight: 900;
  color: #ffffff;
  margin: 0 0 16px;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* 胶囊状小副标 */
.model-badge {
  align-self: flex-start;
  background-color: #f7b52c;
  color: #000000;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 30px;
  text-transform: uppercase;
}

/* 参数条目 */
.model-spec-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 26px;
}

.spec-row {
  display: flex;
  align-items: baseline;
  font-size: 15px;
}

/* 参数标签：金黄色，带微小右边距 */
.spec-label {
  width: 140px;
  font-weight: 700;
  color: #f7b52c;
}

/* 参数数值：白色，粗体 */
.spec-value {
  font-weight: 700;
  color: #ffffff;
}

/* 价格区间 */
.model-price-tag {
  font-size: 26px;
  font-weight: 800;
  color: #f7b52c;
  margin-bottom: 28px;
  letter-spacing: -0.01em;
}

/* 椭圆胶囊状按钮 (Get Free Quote) */
.btn-get-quote-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #f7b52c;
  color: #000000 !important;
  font-size: 16px;
  font-weight: 800;
  padding: 13px 40px;
  border-radius: 999px;
  text-decoration: none;
  width: fit-content;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.btn-get-quote-pill:hover {
  background-color: #e5a420;
  transform: translateY(-2px);
}

/* 4. 右侧视频预览与背书横条 */
.model-media-panel {
  display: flex;
  flex-direction: column;
  background-color: #000000;
}

.video-container-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 40px;
}

.video-mock-box {
  position: relative;
  width: 100%;
  max-width: 580px;
  aspect-ratio: 16 / 10;
  border-radius: 6px;
  overflow: hidden;
  background-color: #0d0e10;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.8);
  cursor: pointer;
}

.video-mock-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 44px;
  background-color: #ff0000;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.video-mock-box:hover .video-play-btn {
  transform: translate(-50%, -50%) scale(1.1);
  background-color: #d60000;
}

.youtube-mark {
  position: absolute;
  bottom: 12px;
  right: 14px;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.7);
  padding: 3px 8px;
  border-radius: 4px;
}

.youtube-mark span {
  color: #ff4444;
}

/* 底部黄色资质横条 */
.cert-gold-footer {
  background-color: #f7b52c;
  color: #000000;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  padding: 13px 20px;
  letter-spacing: 0.01em;
}

/* 5. 底部 4 种砖型产能计算卡片 (图2标准) */
.model-yield-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 35px 30px;
  background-color: #ffffff;
  border-top: 1px solid #eeeeee;
}

.yield-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.brick-img-box {
  height: 75px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.brick-name {
  font-size: 14px;
  font-weight: 800;
  color: #111111;
  margin: 0 0 10px;
  line-height: 1.35;
  height: 38px;
}

/* 产能数字：大号明黄色；单位：小号黑色 */
.brick-output {
  display: flex;
  align-items: baseline;
  gap: 5px;
  line-height: 1;
}

.yield-num {
  font-size: 26px;
  font-weight: 900;
  color: #f7b52c;
}

.yield-unit {
  font-size: 13px;
  font-weight: 700;
  color: #111111;
}

/* 移动端与平板响应式适配 */
@media (max-width: 992px) {
  .model-body-grid {
    grid-template-columns: 1fr;
  }
  .model-spec-panel {
    padding: 35px 25px;
  }
  .video-container-wrap {
    padding: 20px;
  }
  .model-yield-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 15px;
  }
}

@media (max-width: 600px) {
  .model-tabs-bar {
    flex-wrap: wrap;
  }
  .model-tabs-bar .tab-btn {
    flex: 1 0 50%;
    font-size: 14px;
    padding: 12px 6px;
  }
  .model-yield-grid {
    grid-template-columns: 1fr;
  }
  .model-name-title {
    font-size: 38px;
  }
}

/* ==========================================================================
   Tab 选项卡长标题排版优化
   ========================================================================== */
.model-tabs-bar .tab-btn {
  font-size: 13.5px !important;
  line-height: 1.35 !important;
  padding: 14px 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  min-height: 58px !important;
}

@media (max-width: 900px) {
  .model-tabs-bar .tab-btn {
    font-size: 12px !important;
    padding: 10px 4px !important;
  }
}

/* ==========================================================================
   恢复产品系列模块原本的版心宽度 (对齐 1180px 居中排版)
   ========================================================================== */

/* 1. 限制每个产品分类板块的内容宽度并自动居中 */
.section-products-jiusheng .product-category-group {
  max-width: var(--max-width, 1180px) !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
}

/* 2. 灰色 Banner 通栏视觉补偿 (如果希望 Banner 横向铺满但文字居中) */
.section-products-jiusheng .category-banner {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* 3. 确保 4 列卡片网格完全锁定在容器内部尺寸 */
.section-products-jiusheng .product-grid-4 {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* 4. 右侧 CONTACT US 链接与版心右边界平齐 */
.section-products-jiusheng .category-contact-link {
  width: 100% !important;
  padding-right: 0 !important;
}


/* ==========================================================================
   修复产品系列板块宽度：严格对齐网站 1180px 版心，使两端与上下完全对齐
   ========================================================================== */

/* 1. 限制每个产品分类板块容器的最大宽度并居中对齐 */
.section-products-jiusheng .product-category-group {
  max-width: var(--max-width, 1180px) !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
}

/* 2. 让中间的灰色 Banner 撑满全屏，但里面的文字保持在 1180px 版心内 */
.section-products-jiusheng .category-banner {
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  box-sizing: border-box !important;
}

/* 3. 右侧 CONTACT US 链接与版心右边界完美平齐 */
.section-products-jiusheng .category-contact-link {
  max-width: var(--max-width, 1180px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
  text-align: right !important;
  width: 100% !important;
}

/* 4. 确保 4 列卡片网格锁定在容器内部尺寸 */
.section-products-jiusheng .product-grid-4 {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   HOT SALES PRODUCT 标题栏 1:1 视觉复刻
   ========================================================================== */

.hot-sales-header {
  max-width: var(--max-width, 1180px) !important;
  width: calc(100% - 48px) !important;
  margin: 60px auto 25px auto !important; /* 距离上方和下方选型模块的间距 */
  text-align: center;
  box-sizing: border-box;
}

.hot-sales-title {
  font-size: 36px !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 16px 0 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
}

/* 左侧黄色文字 */
.hot-sales-title .text-yellow {
  color: #ffcc00 !important; /* 图1同款醒目黄色 */
}

/* 右侧黑色文字 */
.hot-sales-title .text-black {
  color: #111111 !important; /* 纯黑粗体 */
}

/* 中间带高亮中心点的灰黑双细线分割条 */
.hot-sales-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.hot-sales-divider .line-left,
.hot-sales-divider .line-right {
  flex: 1;
  height: 1px;
  background-color: #d1d5db; /* 浅灰色长细线 */
}

.hot-sales-divider .line-center {
  width: 85px; /* 中间黄色高亮段的长度 */
  height: 4px;
  background-color: #ffcc00; /* 核心高亮黄色短条 */
  border-radius: 2px;
  margin: 0 15px;
}

/* 响应式适配 */
@media (max-width: 768px) {
  .hot-sales-title {
    font-size: 28px !important;
  }
  .hot-sales-divider .line-center {
    width: 60px;
    margin: 0 10px;
  }
}

/* ==========================================================================
   图 2 风格：高级深蓝底 Footer 1:1 视觉复刻
   ========================================================================== */

.site-footer-v5 {
  background-color: #0b2545 !important; /* 还原图2的高级深蓝色 */
  padding: 70px 0 30px !important;
  color: #b0c4de !important; /* 柔和的浅蓝灰色正文 */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
}

/* 三列网格布局：左侧略宽，中间与右侧等宽 */
.footer-main-grid.footer-grid-v2 {
  display: grid !important;
  grid-template-columns: 1.2fr 1.3fr 1fr !important;
  gap: 50px !important;
  margin-bottom: 45px !important;
}

/* 第1列：品牌名称 */
.footer-logo-text {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin-bottom: 16px !important;
  letter-spacing: 0.03em !important;
}

.brand-desc {
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: #b0c4de !important;
  margin: 0 !important;
  max-width: 360px !important;
}

/* 列标题样式 */
.footer-heading {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 0 18px !important;
}

/* 列表文本与间距 */
.footer-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.footer-list li {
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  color: #b0c4de !important;
}

.footer-list li strong {
  color: #ffffff !important;
  font-weight: 600 !important;
}

.footer-list a {
  color: #b0c4de !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.footer-list a:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
}

/* 分割线颜色调整 */
.footer-divider {
  height: 1px !important;
  background-color: rgba(255, 255, 255, 0.15) !important;
  margin-bottom: 25px !important;
}

/* 底部版权与社交图标 */
.footer-bottom-bar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
}

.copyright {
  font-size: 13.5px !important;
  color: #b0c4de !important;
}

.social-icons {
  display: flex !important;
  gap: 12px !important;
}

/* 圆形社交图标 */
.social-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border-radius: 50% !important;
  text-decoration: none !important;
  font-weight: bold !important;
  font-size: 14px !important;
  transition: background-color 0.2s ease !important;
}

.social-icon:hover {
  background-color: rgba(255, 255, 255, 0.25) !important;
}

/* 响应式适配：平板与手机端 */
@media (max-width: 992px) {
  .footer-main-grid.footer-grid-v2 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 35px !important;
  }
}

@media (max-width: 650px) {
  .footer-main-grid.footer-grid-v2 {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }
  .footer-bottom-bar {
    flex-direction: column !important;
    text-align: center !important;
  }
}

/* ==========================================================================
   图1、图2、图3：产品矩阵卡片 1:1 高级视觉复刻
   ========================================================================== */

/* 1. 调整横幅 Banner (背景变大、字体变大对齐目标图) */
.section-products-jiusheng .category-banner {
  height: 220px !important;
  margin-top: 50px !important;
}
.section-products-jiusheng .category-banner h2 {
  font-size: 36px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

/* 2. CONTACT US 链接 1:1 调整为品牌橙色 */
.section-products-jiusheng .category-contact-link {
  padding: 16px 24px 20px 0 !important;
}
.section-products-jiusheng .category-contact-link a {
  color: #f39800 !important; /* 图中的明亮工业橙色 */
  font-size: 14px !important;
  font-weight: 700 !important;
  text-decoration: none !important; /* 去除默认下划线 */
}
.section-products-jiusheng .category-contact-link a:hover {
  opacity: 0.8 !important;
  text-decoration: underline !important;
}

/* 3. 卡片整体结构：去除边框，依靠底部灰块塑形，增加悬浮投影 */
.section-products-jiusheng .prod-card-simple {
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  cursor: pointer !important;
}
.section-products-jiusheng .prod-card-simple:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08) !important;
}

/* 4. 图片展示区域：改为纯白底，去掉之前的灰色，图片自适应居中 */
.section-products-jiusheng .prod-img-box {
  background-color: #ffffff !important; /* 纯白底色，凸显产品 */
  height: 230px !important; /* 调高图片区域尺寸 */
  padding: 15px !important;
  transition: none !important;
}
.section-products-jiusheng .prod-card-simple:hover .prod-img-box {
  transform: none !important; /* 移除旧版的内部跳动，改为上面整卡跳动 */
}
.section-products-jiusheng .prod-img-box img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important; /* 确保机器图片完整无裁剪显示 */
  mix-blend-mode: normal !important; /* 解除旧版的背景融合模式 */
}

/* 5. 底部文字信息区：1:1 还原浅灰底色方块 */
.section-products-jiusheng .prod-info-box {
  background-color: #f2f3f5 !important; /* 目标图同款高级浅灰底色 */
  padding: 18px 20px !important;
  min-height: 80px !important; /* 统一高度，避免文字长短导致参差不齐 */
  display: flex !important;
  align-items: center !important;
}
.section-products-jiusheng .prod-info-box h3 {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #111111 !important;
  line-height: 1.45 !important;
  margin: 0 !important;
}

/* ==========================================================================
   Product 板块卡片样式覆盖 — 对齐参考站 jiushengmachine.com（图1/2/3）
   同时满足：①名称框长度与选型模块(model-tabs-bar)等宽处理方式保持一致
             ②名称与对应图片一一对应、居中对齐
   粘贴到 style.css 最底部即可覆盖原有 .prod-* 样式
   ========================================================================== */

/* 图片容器：浅灰底、等高、图片居中，与参考站一致 */
.prod-img-box {
  background-color: #F4F4F4;
  height: 200px;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.prod-img-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* 名称框：不再左对齐随意起排，而是像 model-tabs-bar 的 tab-btn 一样
   用固定 min-height + flex 居中，保证无论文字长短，框的“长度”（占位高度/宽度）
   在四张卡片之间完全一致，且文字与其正上方的图片严格居中对齐 */
.prod-info-box {
  padding: 16px 4px;
  min-height: 58px;               /* 与 .model-tabs-bar .tab-btn 保持一致 */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
}
.prod-info-box h3 {
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.35;              /* 与 tab-btn 的 line-height 保持一致 */
  margin: 0;
  text-align: center;
}

/* 卡片本身：确保四列严格等宽，图片框与名称框才能真正对齐 */
.prod-card-simple {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* 响应式下（2列/1列）同样保持居中与等宽逻辑 */
@media (max-width: 960px) {
  .prod-img-box { height: 190px; }
}
@media (max-width: 600px) {
  .prod-img-box { height: 180px; }
}

/* ==========================================================================
   修复：model-configurator-box（图7选型模块）底部与
   product-category-group（Brick Making Machine 灰色 Banner）之间
   出现的大段空白，导致上下两个红框区域不对齐、版式不紧凑
   直接粘贴到 style.css 最底部覆盖即可
   ========================================================================== */

/* 原来 .model-configurator-box 自带 margin-bottom: 70px !important;
   再加上外层 section 的 padding，叠加出了截图里那一整块空白，
   这里把它收紧，让选型模块和下面的产品分类 Banner 紧接着排列 */
.model-configurator-box {
  margin-bottom: 0 !important;
}

/* 产品分类板块（Brick Making Machine / Crushing Equipment / Concrete Mixing）
   紧跟在选型模块后面，去掉多余的顶部留白，只保留分类之间必要的间距 */
.section-products-jiusheng {
  padding-top: 0 !important;
}
.product-category-group:first-of-type {
  margin-top: 0 !important;
}

/* 分类之间的间距统一用这个值控制，不再依赖各元素自身残留的 margin/padding
   叠加，避免同类问题在其他分类之间重复出现 */
.product-category-group {
  margin-top: 40px;
}

/* ==========================================================================
   产品卡片全面升级 — 1:1 对齐参考站 chuanqimachinery.com（图1红框卡片）
   这是一次结构性升级，会完全替换之前 jiusheng 风格的简化卡片样式
   （之前"名称居中、min-height:58px"那版覆盖可以不用了，被这份取代）
   粘贴到 style.css 最底部即可
   ========================================================================== */

/* 网格：Brick Making Machine 是4个产品能填满4列没问题；
   但 Crushing Equipment / Concrete Mixing 只有2个产品，
   用 repeat(4,1fr) 会导致右侧出现一大片空白（就是你截图里红框旁边的空区）。
   改成 auto-fit + minmax，2个产品时会自动只占该占的宽度，不再拉出空白列 */
.product-grid-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-bottom: 50px;
}

/* 卡片外观：白底、圆角、细边框、轻投影，悬浮时上浮 */
.prod-card-simple {
  background-color: #ffffff;
  border: 1px solid var(--color-border, #e2dccf);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 3px rgba(28, 26, 23, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.prod-card-simple:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px -12px rgba(28, 26, 23, 0.18);
}

/* 图片区：暖米色底，图片居中留白，不再是灰底 */
.prod-img-box {
  background-color: var(--color-bg-alt, #efe9df);
  height: 210px;
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.prod-img-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* 文字信息区：左对齐、纵向排列，靠 margin-top:auto 把链接推到卡片底部对齐 */
.prod-info-box {
  padding: 24px 22px 26px;
  display: flex;
  flex-direction: column;
  text-align: left;
  flex: 1;
}

/* 顶部小徽章（BEST SELLER / RECOMMENDED / ECONOMICAL / HIGHER OUTPUT） */
.prod-badge {
  align-self: flex-start;
  background-color: #fbe6d8;
  color: var(--color-accent, #c8531f);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 5px;
  margin-bottom: 14px;
}

/* 产品标题 */
.prod-info-box h3 {
  font-size: 20px;
  font-weight: 800;
  color: var(--color-dark, #1c1a17);
  line-height: 1.3;
  margin: 0 0 10px;
}

/* 一句话简介 */
.prod-desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-text-muted, #6b6558);
  margin: 0 0 18px;
  min-height: 66px; /* 固定三行高度，四张卡片描述长短不一时底部仍能对齐 */
}

/* 细分隔线，上下各用一条 */
.prod-divider {
  border: none;
  border-top: 1px solid var(--color-border, #e2dccf);
  margin: 0 0 16px;
}

/* 产能行：左边灰色标签，右边加粗橙色数值 */
.prod-output-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 18px;
}
.prod-output-label {
  font-size: 13.5px;
  color: var(--color-text-muted, #6b6558);
}
.prod-output-value {
  font-size: 15px;
  font-weight: 800;
  color: var(--color-accent, #c8531f);
  white-space: nowrap;
}

/* 底部两个链接：View Details（橙）+ Ask on WhatsApp（绿点+绿字） */
.prod-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
}
.prod-link-details {
  color: var(--color-accent, #c8531f);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}
.prod-link-details:hover { opacity: 0.8; }

.prod-link-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #167A53;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}
.prod-link-whatsapp:hover { opacity: 0.8; }
.prod-link-whatsapp .wa-dot {
  font-size: 9px;
  color: #167A53;
  line-height: 1;
}

/* 移动端与平板响应式 */
@media (max-width: 960px) {
  .product-grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
  .prod-img-box { height: 190px; }
}
@media (max-width: 600px) {
  .product-grid-4 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   产品卡片参数区：统一左对齐 + 对齐高度，避免因内容多少不一而显乱
   直接粘贴到 style.css 最底部覆盖即可
   ========================================================================== */

/* 1. 卡片内部整体强制左对齐、纵向排列 */
.product-grid-4 .prod-info-box {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
}

.product-grid-4 .prod-badge {
  align-self: flex-start !important;
}

.product-grid-4 .prod-info-box h3 {
  text-align: left !important;
  width: 100%;
  min-height: 54px; /* 统一标题占位高度，防止两行/一行标题导致参数区起点不齐 */
  display: flex;
  align-items: flex-start;
}

.product-grid-4 .prod-desc {
  text-align: left !important;
  width: 100%;
  min-height: 84px; /* 统一描述占位高度，四张卡片描述再长短不一，参数区都从同一水平线开始 */
}

/* 2. 参数行：左对齐，标签+数值紧凑排列，而不是撑满整行居中或两端对齐 */
.product-grid-4 .prod-output-row {
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  align-items: baseline !important;
  text-align: left !important;
  width: 100%;
  gap: 8px;
  margin-bottom: 12px !important;
}

.product-grid-4 .prod-output-label {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 13.5px;
  color: var(--color-text-muted, #6b6558);
}

.product-grid-4 .prod-output-value {
  white-space: nowrap;
  font-size: 14px;
  font-weight: 800;
  color: var(--color-accent, #c8531f);
}

/* 3. 分隔线也统一靠左满宽，避免视觉断层 */
.product-grid-4 .prod-divider {
  width: 100%;
  margin: 0 0 16px !important;
}

/* 移动端：取消固定最小高度，避免小屏留白过多 */
@media (max-width: 768px) {
  .product-grid-4 .prod-info-box h3,
  .product-grid-4 .prod-desc {
    min-height: 0;
  }
}

/* ==========================================================================
   产品卡片：强制等高对齐，避免参数条数不同导致卡片高度参差不齐
   直接粘贴到 style.css 最底部覆盖即可
   ========================================================================== */

/* 1. 网格本身默认就会让同一行的单元格等高，这里显式声明确保生效 */
.product-grid-4 {
  align-items: stretch !important;
}

/* 2. 卡片撑满网格单元格高度，并用 flex 纵向布局 */
.product-grid-4 .prod-card-simple {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

/* 3. 图片区保持原有高度，不参与拉伸 */
.product-grid-4 .prod-img-box {
  flex: 0 0 auto !important;
}

/* 4. 文字信息区占据剩余全部空间，这样卡片底部边框才能对齐 */
.product-grid-4 .prod-info-box {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
}

/* 移动端不受影响（本来就是单列，不存在对齐问题），但保留统一逻辑 */
@media (max-width: 960px) {
  .product-grid-4 {
    align-items: stretch !important;
  }
}

.why-col-center img {
  width: 100%;
  max-width: 600px;         /* 限制最大宽度 */
  aspect-ratio: 4 / 3;      /* 强制比例与图2占位框一致 */
  object-fit: cover;        /* 智能裁剪，填满边框且不拉伸 */
  object-position: center;  /* 焦点保持在正中心的主办公楼 */
  border-radius: 8px;       /* 增加微圆角提升质感 */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); /* 增加悬浮阴影，契合图2深色背景 */
}

/* ==========================================================================
   顶部左上角 Logo 图片尺寸放大与高清优化
   ========================================================================== */

/* 针对顶部导航栏 Logo 容器对齐 */
.site-header .logo,
.lp-logo-group,
.lp-logo-icon {
  display: flex !important;
  align-items: center !important;
  padding: 5px 0; /* 增加一点上下呼吸空间 */
}

/* 直接放大图片，并开启抗锯齿 */
.site-header .logo img,
.lp-logo-group img,
.lp-logo-icon img {
  /* 核心尺寸调整：此处调大数值即可放大 Logo，建议在 60px - 85px 之间 */
  height: 75px !important;
  width: auto !important;
  max-width: none !important;
  object-fit: contain;

  /* 强制浏览器开启抗锯齿渲染，防止放大后边缘变虚或出现锯齿 */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  transform: translateZ(0);
}

/* 移动端自适应：防止手机端 Logo 过大导致换行或遮挡导航栏 */
@media (max-width: 768px) {
  .site-header .logo img,
  .lp-logo-group img,
  .lp-logo-icon img {
    height: 50px !important; /* 手机端适中大小 */
  }
}

/* ==========================================================================
   选型模块：点击切换产品时的扫光动画 + 内容淡入淡出
   直接粘贴到 style.css 最底部即可
   ========================================================================== */

/* 让扫光覆盖层能够定位在 model-body-grid 内部，且不溢出边界 */
.model-body-grid {
  position: relative;
  overflow: hidden;
}

/* 扫光覆盖层：默认隐藏在左上角外侧 */
.diagonal-sweep {
  position: absolute;
  top: -60%;
  left: -60%;
  width: 220%;
  height: 220%;
  background: linear-gradient(
          135deg,
          transparent 42%,
          rgba(247, 181, 44, 0.35) 50%,
          transparent 58%
  );
  transform: translate(-100%, -100%);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}

/* 触发动画：从左上角滑向右下角，同时淡入淡出 */
.diagonal-sweep.sweep-active {
  animation: diagonalSweepMove 0.6s ease forwards;
}

@keyframes diagonalSweepMove {
  0% {
    transform: translate(-100%, -100%);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  100% {
    transform: translate(100%, 100%);
    opacity: 0;
  }
}

/* 切换产品时，左右两侧内容先淡出再淡入，配合扫光效果更顺滑 */
.model-body-grid .model-spec-panel,
.model-body-grid .model-media-panel {
  opacity: 1;
  transition: opacity 0.25s ease;
}

.model-body-grid.content-fading .model-spec-panel,
.model-body-grid.content-fading .model-media-panel {
  opacity: 0;
}

/* 修复:播放按钮点击后 YouTube iframe 未铺满黑色播放框的问题 */
.video-mock-box iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  border: none;
  display: block;
}

/* iframe 是绝对定位铺满,需要给父容器一个相对定位基准 */
.video-mock-box {
  position: relative;
}

/* ==========================================================================
   修复:视频播放后未能铺满整个红框区域(model-media-panel)
   ========================================================================== */

/* 1. 播放区外层容器:去掉内边距,让内部盒子可以顶到红框边缘 */
.video-container-wrap {
  padding: 0 !important;
}

/* 2. 视频盒子本体:取消宽度上限与固定比例锁定，改为完全撑满父容器 */
.video-mock-box {
  max-width: 100% !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: unset !important;
  border-radius: 0 !important; /* 如需保留圆角，把这行删掉或改成你要的数值 */
  position: relative;
  overflow: hidden;
}

/* 3. img 缩略图与 iframe 播放器都强制铺满这个撑满后的盒子 */
.video-mock-box img,
.video-mock-box iframe {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border: none;
  display: block;
}

/* 4. 防止 flex 高度塌陷，让视频区能被拉伸到父容器实际可用高度 */
.model-media-panel {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}
.video-container-wrap {
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

/* ==========================================================================
   产量卡片(model-yield-grid)图标由SVG示意图替换为真实图片后的适配样式
   ========================================================================== */
.brick-img-box img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.footer-bottom-bar {
  justify-content: center;
  text-align: center;
}

/* ==========================================================
   手机端 Header 高度优化
   Logo + 联系方式紧凑显示
   ========================================================== */

@media (max-width: 768px) {

  /* Header 整体 */
  .lp-header-v1 {
    padding: 0 !important;
    min-height: 0 !important;
  }

  /* Header 内部改为横向排列 */
  .lp-header-inner {
    height: 58px !important;
    min-height: 58px !important;
    padding: 6px 14px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  /* Logo */
  .lp-header-logo-img {
    width: auto !important;
    height: 48px !important;
    max-width: 160px !important;
    object-fit: contain !important;
    display: block !important;
}

  /* 联系方式 */
  .lp-header-contacts {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    min-width: 0 !important;
  }

  /* 联系方式字体 */
  .lp-contact-item {
    font-size: 10px !important;
    gap: 3px !important;
    white-space: nowrap !important;
  }

  /* 联系图标 */
  .lp-contact-item svg {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
  }

  /* Email / WhatsApp 文字 */
  .lp-label {
    font-size: 10px !important;
  }

  .lp-value {
    font-size: 10px !important;
  }
}