/* ============================================================
   Industrial Equipment — Foreign Trade Static Website
   Combination framework of kafan-finishing.com & toptiontech.com
   ============================================================ */

/* ---------- CSS Variables ---------- */
:root {
  /* unified dropdown tint (item 7) */
  --dropdown-bg: rgba(223, 238, 252, .96);
  --dropdown-border: rgba(11, 46, 79, .10);
  --primary: #0e5ca6;
  --primary-dark: #0b2e4f;
  --primary-darker: #081f35;
  --accent: #ff7a00;
  --accent-dark: #e56e00;
  --text: #2b3a4a;
  --text-light: #5f7387;
  --text-soft: #5f7387;
  --bg: #ffffff;
  --bg-alt: #f4f7fa;
  --bg-dark: #0b2e4f;
  --border: #e3e9ef;
  --radius: 12px;
  --shadow: 0 10px 30px rgba(11, 46, 79, .08);
  --shadow-lg: 0 20px 50px rgba(11, 46, 79, .14);
  --container: 1200px;
  --font-body: Arial, Helvetica, 'Segoe UI', sans-serif;
  --font-head: Arial, Helvetica, 'Segoe UI', sans-serif;
}

/* ---------- Reset & Base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  font-family: var(--font-body);
  color: var(--text);
  font-size: 16px;
  line-height: 1.7;
  background: var(--bg);
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; transition: color .25s; }
ul { list-style: none; }
h1, h2, h3, h4 { font-family: var(--font-head); color: var(--primary-dark); line-height: 1.2; }
h1 { font-size: clamp(2rem, 4.2vw, 3.2rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 700; }
h3 { font-size: 1.18rem; font-weight: 700; }
p { color: var(--text-light); }
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.icon { width: 18px; height: 18px; flex-shrink: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 28px; border-radius: 6px; font-weight: 700; font-size: .95rem;
  cursor: pointer; border: 2px solid transparent; transition: all .25s; white-space: nowrap;
}
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-dark); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255,122,0,.35); }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); transform: translateY(-2px); }
.btn-outline { border-color: rgba(255,255,255,.6); color: #fff; }
.btn-outline:hover { background: #fff; color: var(--primary-dark); }
.btn-outline-dark { border-color: var(--primary); color: var(--primary); }
.btn-outline-dark:hover { background: var(--primary); color: #fff; }
.btn-lg { padding: 15px 36px; font-size: 1.02rem; }
.btn-block { width: 100%; }

/* ---------- Top Bar ---------- */
.topbar { background: var(--primary-darker); color: #b9c8d8; font-size: .83rem; }
.topbar-inner { display: flex; justify-content: space-between; align-items: center; min-height: 40px; gap: 12px; flex-wrap: wrap; }
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 14px; }
.topbar a { display: inline-flex; align-items: center; gap: 7px; }
.topbar a:hover { color: #fff; }
.topbar .icon { width: 18px; height: 18px; }
.topbar-right { gap: 10px; }
.topbar-right a {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.4);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; transition: transform .25s, background .25s, border-color .25s;
}
.topbar-right a .icon { width: 17px; height: 17px; }
.topbar-right a:hover { transform: translateY(-2px); background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 1000;
  background: #fff; box-shadow: 0 2px 12px rgba(11,46,79,.07);
}
.site-header.scrolled { box-shadow: 0 4px 20px rgba(11,46,79,.12); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 80px; }
.logo { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
/* Header logo = horizontal lockup: emblem + the brand's own ANVORE wordmark */
.logo-img { height: 46px; width: auto; display: block; }
.logo-word { height: clamp(16px, 1.55vw, 23px); width: auto; display: block; }
/* Option A: official stacked lockup — emblem on top, ANVORE wordmark below */
.logo-stacked { height: 62px; width: auto; display: block; }

.main-nav > ul { display: flex; align-items: center; gap: clamp(12px, 1.7vw, 28px); }
.main-nav a {
  font-weight: 600; font-size: .96rem; color: var(--text); position: relative; padding: 6px 0;
  white-space: nowrap;
}
.main-nav a::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 2px;
  background: var(--accent); transition: width .25s;
}
.main-nav a:hover, .main-nav a.active { color: var(--primary); }
.main-nav a:hover::after, .main-nav a.active::after { width: 100%; }

.header-cta { padding: 10px 22px; }

/* 导航里的 Submit Requirements：做成醒目按钮，避免被当成普通菜单而看不见 */
.main-nav a.nav-cta {
  padding: 9px 20px; border-radius: 24px; background: var(--accent); color: #fff;
  box-shadow: 0 4px 14px rgba(0, 122, 204, .25);
}
.main-nav a.nav-cta:hover, .main-nav a.nav-cta.active { color: #fff; opacity: .92; }
.main-nav a.nav-cta::after { display: none; }

/* 锚点跳转时给吸顶头部留出空间 */
h2[id], h3[id], section[id], div[id] { scroll-margin-top: 110px; }

/* ---------- Nav Search ---------- */
/* shrinkable so the placeholder shows in full whenever there is room */
.nav-search { position: relative; display: flex; align-items: center; flex: 0 1 auto; min-width: 100px; }
.nav-search form { display: flex; align-items: center; width: 100%; }
.nav-search input {
  width: 176px; max-width: 100%; padding: 8px 34px 8px 14px; border-radius: 20px;
  border: 1px solid var(--border); background: var(--bg-alt);
  font-family: var(--font-body); font-size: .85rem; color: var(--text);
  transition: width .3s, border-color .25s, background .25s;
}
.nav-search input:focus {
  outline: none; border-color: var(--primary); background: #fff;
  width: 210px; max-width: 100%;
  box-shadow: 0 0 0 3px rgba(14,92,166,.1);
}
.nav-search button {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border: 0; border-radius: 50%; cursor: pointer;
  background: transparent; color: var(--primary); display: grid; place-items: center;
}
.nav-search button:hover { background: var(--bg-alt); color: var(--accent); }
.nav-search button .icon { width: 16px; height: 16px; }
.nav-search-results {
  position: absolute; top: calc(100% + 8px); right: 0; width: 300px; max-height: 300px;
  overflow-y: auto; background: #fff; border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow-lg); padding: 8px; display: none; z-index: 200;
}
.nav-search-results.show { display: block; }
.nav-search-results a {
  display: block; padding: 9px 12px; border-radius: 8px; font-size: .86rem;
  font-weight: 600; color: var(--text); border-bottom: 1px solid var(--border);
}
.nav-search-results a:last-child { border-bottom: 0; }
.nav-search-results a:hover { background: var(--bg-alt); color: var(--primary); }
.nav-search-results .no-result { padding: 12px; font-size: .85rem; color: var(--text-light); }
@media (max-width: 768px) { .nav-search { display: none; } }
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { width: 26px; height: 3px; background: var(--primary-dark); border-radius: 2px; transition: all .3s; }
.nav-toggle.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative; color: #fff;
  min-height: 600px; padding: 70px 0;
  display: flex; align-items: center;
  background-size: cover; background-position: center; background-color: var(--primary-dark);
}
.hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(8,31,53,.92) 0%, rgba(11,46,79,.75) 55%, rgba(11,46,79,.35) 100%); }
.hero-inner { position: relative; max-width: 720px; margin-left: 200px; }
.hero-tag {
  display: inline-block; padding: 6px 16px; border-radius: 30px; margin-bottom: 20px;
  background: rgba(255,122,0,.16); border: 1px solid rgba(255,122,0,.5); color: #ffb26b;
  font-size: .85rem; font-weight: 600; letter-spacing: .5px;
}
.hero h1 { color: #fff; margin-bottom: 20px; }
.hero h1 .accent { color: var(--accent); }
.hero p { color: #cdd9e6; font-size: 1.08rem; margin-bottom: 32px; max-width: 620px; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 36px; }
.hero-points { display: flex; gap: 26px; flex-wrap: wrap; }
.hero-points li { display: flex; align-items: center; gap: 8px; color: #e8eef5; font-size: .92rem; }
.hero-points .icon { color: #4cd964; }

/* ---------- Hero Slider ---------- */
.hero-slider { overflow: hidden; }
.hero-slider::before { z-index: 2; }
.hero-slider .hero-inner { z-index: 3; }
.hero-slides { position: absolute; inset: 0; }
.hero-slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center; background-color: var(--primary-dark);
  opacity: 0; transform: scale(1.1);
  transition: opacity 1s ease, transform 7s ease-out;
}
.hero-slide.active { opacity: 1; transform: scale(1); }
.slider-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%; padding: 0;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.35);
  color: #fff; display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 5; transition: background .25s, border-color .25s;
}
.slider-arrow:hover { background: var(--accent); border-color: var(--accent); }
.slider-prev { left: 26px; }
.slider-next { right: 26px; }
.slider-dots {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 10px; z-index: 5;
}
.slider-dots .dot {
  width: 12px; height: 12px; border-radius: 30px; padding: 0;
  background: rgba(255,255,255,.35); border: 1px solid rgba(255,255,255,.6);
  cursor: pointer; transition: background .25s, width .3s, border-color .25s;
}
.slider-dots .dot.active { width: 30px; background: var(--accent); border-color: var(--accent); }
@media (max-width: 640px) {
  .slider-arrow { width: 38px; height: 38px; }
  .slider-prev { left: 12px; }
  .slider-next { right: 12px; }
  .slider-dots { bottom: 20px; }
}

/* ---------- Stats ---------- */
.stats {
  background: var(--bg-alt); border-bottom: 1px solid var(--border);
  margin-top: -70px; position: relative; z-index: 2;
}
.stats-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px;
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 34px 30px;
}
.stat-item { text-align: center; }
.stat-item p { font-size: .9rem; color: var(--text-light); margin-top: 4px; }
.stat-num { font-family: var(--font-head); font-size: 2.5rem; font-weight: 700; color: var(--primary); }
.stat-unit, .stat-plus, .stat-percent { font-family: var(--font-head); font-size: 1.5rem; font-weight: 700; color: var(--accent); }

/* ---------- Sections ---------- */
.section { padding: 90px 0; }
.section-alt { background: var(--bg-alt); }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 50px; }
.section-eyebrow {
  display: inline-block; color: var(--accent); font-weight: 700; font-size: .82rem;
  letter-spacing: 3px; text-transform: uppercase; margin-bottom: 12px;
}
.section-head h2 { margin-bottom: 14px; }
.section-foot { text-align: center; margin-top: 44px; }
.section-foot p { margin-bottom: 18px; font-size: 1.02rem; }

/* ---------- Card Grid (Products) ---------- */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
/* 前端分页的网格：翻页时滚回网格顶部，给固定头部留出空间 */
.card-grid[data-paginate] { scroll-margin-top: 110px; }
/* 只有一页时 {page:bar} 会吐出空壳，别留一个空框在页面上 */
.pager:empty { display: none; }
.card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; transition: all .3s;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.card-img { position: relative; overflow: hidden; aspect-ratio: 4/3; }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.card:hover .card-img img { transform: scale(1.06); }
.card-badge {
  position: absolute; top: 14px; left: 14px; background: var(--accent); color: #fff;
  font-size: .75rem; font-weight: 700; padding: 4px 12px; border-radius: 20px; letter-spacing: .4px;
}
.card-body { padding: 22px; }
.card-body h3 { margin-bottom: 8px; }
.card-body p { font-size: .93rem; margin-bottom: 12px; }
.card-link { color: var(--primary); font-weight: 700; font-size: .92rem; }
.card-link:hover { color: var(--accent); }

/* ---------- Product Categories (new taxonomy) ---------- */
.product-category { padding: 36px 0 28px; border-top: 1px solid var(--border); }
.product-category:first-of-type { border-top: none; padding-top: 0; }
.product-category .section-head { margin-bottom: 14px; }
.product-category .section-head h2 { font-size: 1.85rem; }
.category-intro {
  font-size: 1rem; color: var(--text-soft); max-width: 880px; margin: 0 0 24px;
  line-height: 1.7;
}
.sub-model-list {
  margin: 22px 0 8px; padding: 20px; background: var(--bg-soft);
  border-left: 4px solid var(--primary); border-radius: 6px;
}
.sub-model-title {
  font-size: 1rem; color: var(--primary-dark); margin-bottom: 14px;
  font-weight: 700; letter-spacing: .2px;
}
.sub-model-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.sub-model-card {
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  padding: 16px; transition: all .25s; color: var(--text);
}
.sub-model-card:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow); }
.sub-model-card h6 {
  font-size: .92rem; color: var(--primary-dark); margin-bottom: 6px;
  font-weight: 700; line-height: 1.35;
}
.sub-model-card p { font-size: .82rem; color: var(--text-soft); margin: 0; line-height: 1.5; }
.card-grid-wrap { padding-bottom: 30px; }

/* ---------- Features / Solutions ---------- */
.feature-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.feature {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 30px; transition: all .3s; position: relative; overflow: hidden;
}
.feature:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: transparent; }
.feature:hover h3 { color: var(--primary); }
.feature-num {
  font-family: var(--font-head); font-size: 2.6rem; font-weight: 700; color: var(--border);
  line-height: 1; margin-bottom: 14px; transition: color .3s;
}
.feature:hover .feature-num { color: var(--accent); }
.feature h3 { margin-bottom: 10px; transition: color .3s; }
.feature p { font-size: .94rem; margin-bottom: 14px; }

/* ---------- CTA Banner ---------- */
.cta-banner {
  margin-top: 44px; padding: 42px 46px; border-radius: var(--radius);
  background: linear-gradient(120deg, var(--primary-dark), var(--primary));
  display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap;
  box-shadow: var(--shadow-lg);
}
.cta-banner h3 { color: #fff; font-size: 1.6rem; margin-bottom: 8px; }
.cta-banner p { color: #c3d2e1; max-width: 640px; }

/* ---------- Applications ---------- */
.app-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.app-grid-home { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) { .app-grid-home { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .app-grid-home { grid-template-columns: 1fr; } }
.app-item {
  position: relative; border-radius: var(--radius); overflow: hidden; display: block;
  aspect-ratio: 4/3; box-shadow: var(--shadow);
}
.app-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.app-item:hover img { transform: scale(1.07); }
.app-name {
  position: absolute; inset: auto 0 0 0; padding: 16px; color: #fff;
  background: linear-gradient(transparent, rgba(8,31,53,.9)); font-weight: 700; font-size: .95rem;
}

/* ---------- About ---------- */
.section-about { background: var(--bg-alt); }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; }
.about-img { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); }
.about-content h2 { margin-bottom: 18px; }
.about-content p { margin-bottom: 18px; }
.about-list { margin-bottom: 26px; }
.about-list li { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; color: var(--text); font-size: .96rem; }
.about-list .icon { color: var(--accent); width: 20px; height: 20px; margin-top: 3px; }

/* ---------- Process ---------- */
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.process-item {
  background: #fff; border-radius: var(--radius); padding: 30px 26px;
  border-top: 4px solid var(--primary); box-shadow: var(--shadow); text-align: center;
  transition: all .3s;
}
.process-item:hover { border-top-color: var(--accent); transform: translateY(-5px); }
.process-step {
  display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--bg-alt); color: var(--primary); font-family: var(--font-head);
  font-weight: 700; font-size: 1.2rem; margin-bottom: 16px; border: 2px solid var(--border);
}
.process-item h3 { font-size: 1.05rem; margin-bottom: 10px; }
.process-item p { font-size: .9rem; }

/* ---------- Resources ---------- */
.resource-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.resource-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 28px;
  transition: all .3s;
}
.resource-card:hover { box-shadow: var(--shadow); transform: translateY(-4px); }
.resource-card h3 { margin-bottom: 10px; }
.resource-card p { font-size: .9rem; margin-bottom: 14px; }
.resource-faq { grid-column: span 2; background: var(--bg-alt); }
.faq-item { border-top: 1px solid var(--border); }
.faq-item:first-of-type { border-top: 0; }
.faq-q {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 14px 0; font-weight: 600; font-size: .95rem; color: var(--primary-dark);
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-family: var(--font-body);
}
.faq-q::after { content: '+'; font-size: 1.3rem; color: var(--accent); font-weight: 700; transition: transform .3s; }
.faq-item.open .faq-q::after { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.faq-a p { font-size: .88rem; padding-bottom: 14px; }

/* ---------- Blog ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.blog-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  transition: all .3s;
}
.blog-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.blog-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.blog-body { padding: 22px; }
.blog-date { color: var(--accent); font-size: .8rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.blog-body h3 { font-size: 1.08rem; margin: 8px 0 10px; }
.blog-body h3 a:hover { color: var(--primary); }
.blog-body p { font-size: .92rem; margin-bottom: 12px; }

/* ---------- Contact ---------- */
.contact { background: var(--bg-dark); }
.contact .section-eyebrow { color: var(--accent); }
.contact h2 { color: #fff; }
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 54px; }
.contact-info p { color: #aebfd0; margin-bottom: 28px; }
.contact-list li { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; color: #d5e0ea; font-size: .96rem; }
.contact-list .icon { color: var(--accent); }
.contact-form {
  background: #fff; border-radius: var(--radius); padding: 36px; box-shadow: var(--shadow-lg);
}
.contact-head { text-align: center; max-width: 720px; margin: 0 auto 38px; }
.contact-head p { color: #aebfd0; margin-top: 12px; }
.contact-form-wide { max-width: 880px; margin: 0 auto; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: 7px; color: var(--primary-dark); }
.form-group input, .form-group textarea, .form-group select {
  width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px;
  font-family: var(--font-body); font-size: .95rem; color: var(--text); transition: border-color .25s, box-shadow .25s;
  background: #fbfcfd;
}
.form-group select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%235f7387' d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; cursor: pointer; }
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(14,92,166,.12); background: #fff;
}
.contact-form .btn { border: 0; }

/* ---------- Footer ---------- */
.site-footer { background: var(--bg-dark); color: #9fb0c0; padding-top: 70px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 40px; padding-bottom: 46px; }
.footer-col h4 { color: #fff; font-size: 1.05rem; margin-bottom: 18px; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul a:hover { color: #fff; padding-left: 4px; }
.footer-about p { margin: 18px 0; font-size: .92rem; }
.footer-contact { list-style: none; margin: 0 0 18px; padding: 0; }
.footer-contact li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: .88rem; line-height: 1.5; margin-bottom: 9px; color: #b7c6d4;
}
.footer-contact .icon { color: var(--accent); width: 17px; height: 17px; margin-top: 2px; flex-shrink: 0; }
.footer-contact a { color: #b7c6d4; }
.footer-contact a:hover { color: #fff; }
.footer-contact-btn { padding: 9px 18px; font-size: .85rem; margin-bottom: 20px; }
.footer-social { display: flex; gap: 12px; }
.footer-social a {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: transparent; border: 1px solid rgba(255,255,255,.38); color: #fff;
  transition: background .25s, border-color .25s, color .25s, transform .25s;
}
.footer-social a .icon { width: 16px; height: 16px; }
.footer-social a:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-3px); }
/* same row on a light background (contact page) */
.contact-info .footer-social a { border-color: var(--border); color: var(--primary-dark); }
.contact-info .footer-social a:hover { border-color: var(--accent); color: #fff; }
/* third social icon: the 'You Tube' wordmark supplied in the client's document.
   Out-specifies the generic ".icon" sizing so the artwork keeps its ratio. */
.footer-social a.s-yt .social-yt { width: auto; height: 19px; }
.topbar-right a.s-yt .social-yt { width: auto; height: 15px; }
.newsletter-form { display: flex; gap: 8px; margin-top: 14px; }
.newsletter-form input {
  flex: 1; padding: 11px 14px; border-radius: 6px; border: 1px solid rgba(255,255,255,.4);
  background: rgba(255,255,255,.1); color: #fff; font-family: var(--font-body); font-size: .9rem;
  transition: border-color .25s, background .25s;
}
.newsletter-form input::placeholder { color: #aebfd0; }
.newsletter-form input:focus { outline: none; border-color: var(--accent); background: rgba(255,255,255,.16); }
.newsletter-form .btn { padding: 11px 18px; font-size: .88rem; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); padding: 20px 0; font-size: .85rem; }
.footer-bottom a:hover { color: #fff; }

/* ---------- Back to top ---------- */
.back-top {
  position: fixed; right: 24px; bottom: 24px; width: 46px; height: 46px; border-radius: 10px;
  background: var(--primary); color: #fff; border: 0; cursor: pointer; z-index: 900;
  display: grid; place-items: center; opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: all .3s; box-shadow: 0 8px 20px rgba(14,92,166,.35);
}
.back-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.back-top:hover { background: var(--accent); }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .card-grid, .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .app-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
  .cert-grid { grid-template-columns: repeat(2, 1fr); }
  .process-grid { grid-template-columns: repeat(2, 1fr); }
  .resource-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .about-grid, .contact-grid { grid-template-columns: 1fr; }
  .sub-model-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Nav collapses at 1024 (matches the <=1024 mega-menu accordion).
   The wide brand lockup + 6 nav items + search + CTA no longer fit below ~1025px. */
@media (max-width: 1024px) {
  .main-nav {
    position: fixed; top: 80px; left: 0; right: 0; background: #fff;
    box-shadow: 0 12px 24px rgba(11,46,79,.12); padding: 18px 24px 26px;
    transform: translateY(-120%); transition: transform .35s ease; z-index: 999;
  }
  .main-nav.open { transform: translateY(0); }
  .main-nav > ul { flex-direction: column; align-items: stretch; gap: 6px; }
  .main-nav a { display: block; padding: 10px 0; border-bottom: 1px solid var(--border); }
  .nav-toggle { display: flex; }
  .header-cta { display: none; }
  /* with the nav out of flow, keep search + burger grouped at the right */
  .nav-search { margin-left: auto; }
  .nav-search input { width: clamp(130px, 20vw, 210px); }
  .nav-search input:focus { width: clamp(160px, 24vw, 250px); }
}

@media (max-width: 768px) {
  .topbar-right { display: none; }
  .header-inner { min-height: 68px; }
  .main-nav {
    position: fixed; top: 68px; left: 0; right: 0; background: #fff;
    box-shadow: 0 12px 24px rgba(11,46,79,.12); padding: 18px 24px 26px;
    transform: translateY(-120%); transition: transform .35s ease; z-index: 999;
  }
  .main-nav.open { transform: translateY(0); }
  .main-nav > ul { flex-direction: column; align-items: stretch; gap: 6px; }
  .main-nav a { display: block; padding: 10px 0; border-bottom: 1px solid var(--border); }
  .nav-toggle { display: flex; }
  .header-cta { display: none; }
  .hero { min-height: 520px; padding: 60px 0; }
  .hero-inner { margin-left: 0; padding: 0 20px; }
  .hero-actions .btn { width: 100%; }
  .feature-list { grid-template-columns: 1fr; }
  .card-grid, .blog-grid { grid-template-columns: 1fr; }
  .sub-model-grid { grid-template-columns: 1fr; }
  .app-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 26px 12px; }
  .section { padding: 64px 0; }
  .cta-banner { padding: 30px 24px; }
  .form-row { grid-template-columns: 1fr; }
  .resource-grid { grid-template-columns: 1fr; }
  .resource-faq { grid-column: span 1; }
  .contact-form { padding: 26px 20px; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .newsletter-form { flex-direction: column; }
  .cert-grid { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: 1fr; }
  .logo-img { height: 38px; }
  .logo-word { height: 20px; }
}

@media (max-width: 480px) {
  .app-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .hero-points { gap: 12px; flex-direction: column; }
  .topbar-left { gap: 12px; font-size: .78rem; }
}

/* ============================================================
   Multi-page additions (page hero, breadcrumb, etc.)
   ============================================================ */

/* ---------- Inner Page Hero ---------- */
.page-hero {
  position: relative; color: #fff; padding: 84px 0 96px;
  background-size: cover; background-position: center; background-color: var(--primary-dark);
}
.page-hero::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(8,31,53,.93) 0%, rgba(11,46,79,.8) 60%, rgba(11,46,79,.45) 100%);
}
.page-hero-inner { position: relative; }
.page-hero h1 { color: #fff; font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 12px; }
.page-hero p { color: #cdd9e6; font-size: 1.05rem; max-width: 680px; }
.breadcrumb { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: .86rem; }
.breadcrumb a { color: #9db4ca; }
.breadcrumb a:hover { color: #fff; }
.breadcrumb .sep { color: #6e87a0; }
.breadcrumb .current { color: var(--accent); font-weight: 600; }

/* ---------- Sub tabs (page product categories) ---------- */
.subtabs { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: -26px auto 46px; position: relative; z-index: 3; }
.subtab {
  padding: 10px 22px; border-radius: 30px; background: #fff; color: var(--text);
  font-weight: 600; font-size: .92rem; border: 1px solid var(--border); box-shadow: var(--shadow);
  transition: all .25s;
}
.subtab:hover, .subtab.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ---------- Downloads ---------- */
.download-list { max-width: 860px; margin: 0 auto; }
.download-item {
  display: flex; align-items: center; gap: 18px; padding: 22px 26px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  margin-bottom: 14px; transition: all .25s;
}
.download-item:hover { box-shadow: var(--shadow); transform: translateX(6px); border-color: var(--primary); }
.download-icon {
  width: 54px; height: 54px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0;
  background: var(--bg-alt); color: var(--primary); font-family: var(--font-head); font-weight: 700;
  border: 1px solid var(--border);
}
.download-item h4 { font-size: 1.02rem; margin-bottom: 2px; }
.download-item p { font-size: .85rem; }
.download-meta { margin-left: auto; text-align: right; flex-shrink: 0; }
.download-meta .size { font-size: .8rem; color: var(--text-light); display: block; margin-bottom: 6px; }
.download-btn {
  display: inline-block; padding: 8px 18px; border-radius: 6px; background: var(--primary);
  color: #fff; font-weight: 700; font-size: .85rem; transition: all .25s;
}
.download-btn:hover { background: var(--accent); color: #fff; }

/* ---------- Videos ---------- */
.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.video-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  transition: all .3s;
}
.video-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-5px); }
.video-thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; }
.video-thumb img { width: 100%; height: 100%; object-fit: cover; }
.video-play {
  position: absolute; inset: 0; display: grid; place-items: center; background: rgba(8,31,53,.35);
}
.video-play span {
  width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: #fff; font-size: 1.3rem; box-shadow: 0 8px 20px rgba(255,122,0,.4);
  transition: transform .3s;
}
.video-card:hover .video-play span { transform: scale(1.12); }
.video-body { padding: 20px; }
.video-body h3 { font-size: 1.02rem; margin-bottom: 6px; }
.video-body p { font-size: .85rem; }

/* ---------- Pagination ---------- */
.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 44px; }
.page-num {
  width: 42px; height: 42px; display: grid; place-items: center; border-radius: 8px;
  border: 1px solid var(--border); background: #fff; color: var(--text); font-weight: 600; font-size: .92rem;
  transition: all .25s;
}
.page-num:hover, .page-num.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ---------- Industry detail cards (applications page) ---------- */
.industry-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.industry-card {
  display: flex; gap: 22px; background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 26px; align-items: center; transition: all .3s;
}
.industry-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); border-color: transparent; }
.industry-img { width: 130px; height: 100px; border-radius: 10px; overflow: hidden; flex-shrink: 0; }
.industry-img img { width: 100%; height: 100%; object-fit: cover; }
.industry-card h3 { margin-bottom: 8px; }
.industry-card p { font-size: .9rem; }

/* ---------- Map placeholder (contact page) ---------- */
.map-placeholder {
  height: 320px; border-radius: var(--radius); overflow: hidden; position: relative;
  background: linear-gradient(135deg, var(--bg-alt), #e6eef5); display: grid; place-items: center;
  border: 1px solid var(--border); text-align: center;
}
.map-placeholder .map-pin {
  width: 54px; height: 54px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: var(--accent); display: grid; place-items: center; margin: 0 auto 12px;
  box-shadow: 0 8px 20px rgba(255,122,0,.4);
}
.map-placeholder .map-pin .icon { transform: rotate(45deg); width: 26px; height: 26px; color: #fff; }
.map-placeholder h4 { color: var(--primary-dark); margin-bottom: 4px; }
.map-placeholder p { font-size: .88rem; }

/* ---------- News list rows (news page) ---------- */
.news-list { max-width: 900px; margin: 0 auto; }
.news-row {
  display: flex; gap: 24px; background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px; margin-bottom: 18px; transition: all .3s;
}
.news-row:hover { box-shadow: var(--shadow); transform: translateX(6px); }
.news-row-thumb { width: 220px; flex-shrink: 0; border-radius: 8px; overflow: hidden; }
.news-row-thumb img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16/10; }
.news-row h3 { font-size: 1.08rem; margin: 6px 0 8px; }
.news-row h3 a:hover { color: var(--primary); }
.news-row p { font-size: .9rem; margin-bottom: 8px; }

/* ---------- Responsive for new components ---------- */
@media (max-width: 1024px) {
  .video-grid { grid-template-columns: repeat(2, 1fr); }
  .value-grid, .mile-grid { grid-template-columns: repeat(2, 1fr); }
  .industry-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .download-item { flex-wrap: wrap; }
  .download-meta { margin-left: 0; text-align: left; }
  .news-row { flex-direction: column; }
  .news-row-thumb { width: 100%; }
  .industry-card { flex-direction: column; align-items: flex-start; }
  .industry-img { width: 100%; height: 150px; }
}
@media (max-width: 640px) {
  .video-grid { grid-template-columns: 1fr; }
  .value-grid, .mile-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Dropdown Navigation
   ============================================================ */
.main-nav > ul > li { position: relative; }
.main-nav li.has-dropdown > a { display: flex; align-items: center; gap: 5px; }
.nav-arrow { width: 12px; height: 12px; flex-shrink: 0; transition: transform .25s; }
.has-dropdown:hover .nav-arrow { transform: rotate(180deg); }
.dropdown {
  display: block; flex-direction: unset; gap: 0;
  position: absolute; top: 100%; left: 50%; transform: translate(-50%, 8px);
  min-width: 240px; background: var(--dropdown-bg); border-radius: 12px; box-shadow: var(--shadow-lg);
  border: 1px solid var(--dropdown-border); padding: 8px; opacity: 0; visibility: hidden;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: opacity .25s, transform .25s, visibility .25s; z-index: 100; list-style: none;
}
.has-dropdown:hover > .dropdown { opacity: 1; visibility: visible; transform: translate(-50%, 4px); }
.dropdown li { margin: 0; }
.dropdown a {
  display: block; padding: 10px 14px; border-radius: 8px; font-weight: 600;
  font-size: .9rem; color: var(--text); white-space: nowrap;
}
.dropdown a::after { display: none; }
.dropdown a:hover, .dropdown a.active { background: rgba(255,255,255,.85); color: var(--primary); }

/* ============================================================
   Mega Menu (Products — three levels)
   L1 = vertical column on the left / L2 = panel to the right
   L3 = further-right flyout
   ============================================================ */
.has-mega { position: relative; }
.mega {
  position: absolute; top: 100%; left: 50%; transform: translate(-50%, 8px);
  display: flex; z-index: 120;
  opacity: 0; visibility: hidden;
  transition: opacity .25s, transform .25s, visibility .25s;
}
.has-mega:hover > .mega, .has-mega.open > .mega {
  opacity: 1; visibility: visible; transform: translate(-50%, 4px);
}
/* invisible bridge so the panel does not close crossing the gap */
.mega::before { content: ''; position: absolute; top: -16px; left: 0; right: 0; height: 16px; }

/* ---------- Level 1: vertical column ---------- */
.mega-l1 {
  position: relative; width: 252px; flex-shrink: 0;
  list-style: none; margin: 0; padding: 10px 0;
  background: var(--dropdown-bg);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
/* while a second-level panel is open the shared edge becomes square */
.mega-l1:hover { border-radius: 12px 0 0 12px; }
.mega-l1 > li { position: relative; margin: 0; }
.mega-l1 > li > a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 20px; color: var(--primary-dark); font-size: .92rem; font-weight: 700;
  border-bottom: 1px solid var(--dropdown-border); transition: background .2s, color .2s;
}
.mega-l1 > li:last-child > a { border-bottom: 0; }
.mega-l1 > li > a::after { display: none; }
.mega-l1 > li > a .icon { width: 12px; height: 12px; flex-shrink: 0; opacity: .65; transform: rotate(-90deg); }
.mega-l1 > li > a:hover, .mega-l1 > li.active > a { background: var(--primary); color: #fff; }
.mega-l1 > li > a:hover .icon { opacity: 1; }

/* ---------- Level 2: panel right of the L1 column ---------- */
.mega-sub {
  position: absolute; top: 0; left: 100%;
  min-width: 330px; padding: 22px 26px;
  background: var(--dropdown-bg); border-radius: 0 12px 12px 0;
  box-shadow: var(--shadow-lg); border-left: 1px solid var(--dropdown-border);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.mega-l2 { list-style: none; margin: 0; padding: 0; }
.mega-l2 > li { position: relative; margin: 0; }
.mega-l2 > li > a {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 40px 10px 0; color: var(--primary-dark); font-size: .9rem; font-weight: 600;
  white-space: nowrap; transition: color .2s;
}
.mega-l2 > li > a::after { display: none; }
.mega-l2 > li > a .icon {
  width: 11px; height: 11px; flex-shrink: 0; opacity: .7; transition: transform .2s;
}
.mega-l2 > li > a:hover { color: var(--accent); }
.mega-l2 > li > a:hover .icon { transform: translateX(3px); opacity: 1; }

/* ---------- Level 3: flyout further right ---------- */
.mega-l3 {
  position: absolute; top: 0; left: 100%;
  min-width: 310px; list-style: none; margin: 0; padding: 14px 18px;
  background: var(--dropdown-bg); border: 1px solid var(--dropdown-border); border-radius: 10px;
  box-shadow: var(--shadow-lg);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.mega-l3 a {
  display: block; padding: 9px 12px; border-radius: 7px;
  color: var(--text); font-size: .86rem; font-weight: 600; white-space: nowrap;
  transition: background .2s, color .2s;
}
.mega-l3 a::after { display: none; }
.mega-l3 a:hover { background: rgba(255,255,255,.85); color: var(--primary); }

/* Desktop: opening "Products" shows the first-level categories only.
   The second-level panel appears once a category itself is hovered. */
@media (min-width: 1025px) {
  .mega-l1 > li > .mega-sub { display: none; }
  .mega-l1:hover > li:not(:hover) > .mega-sub { display: none; }
  .mega-l1 > li:hover > .mega-sub { display: block; }
  .mega-l2 > li:hover > .mega-l3 { display: block; }
  .mega-l2 > li > .mega-l3 { display: none; }
}

/* ---------- Mega menu: mobile accordion ---------- */
@media (max-width: 1024px) {
  .mega {
    position: static; transform: none; opacity: 1; visibility: visible;
    display: none; flex-direction: column; box-shadow: none; margin: 6px 0 10px;
  }
  .mega::before { display: none; }
  .has-mega.open > .mega { display: flex; transform: none; }
  .mega-l1 {
    width: 100%; padding: 4px 0; background: var(--dropdown-bg);
    border-radius: 8px; box-shadow: none;
  }
  .mega-l1 > li > a {
    color: var(--primary-dark); padding: 12px 16px;
    border-bottom: 1px solid var(--border);
  }
  .mega-l1 > li > a:hover, .mega-l1 > li.active > a { background: rgba(14,92,166,.09); color: var(--primary); }
  .mega-l1 > li > a .icon { display: none; }
  .mega-sub {
    position: static; display: none; min-width: 0; padding: 6px 0 10px 16px;
    background: transparent; border-radius: 0; box-shadow: none;
  }
  .mega-l1 > li.open > .mega-sub { display: block; }
  .mega-l1 > li:first-child > .mega-sub { display: none; }
  .mega-l1 > li:first-child.open > .mega-sub { display: block; }
  .mega-l2 > li > a { color: var(--text); padding: 9px 0; }
  .mega-l2 > li > a:hover { color: var(--primary); }
  .mega-l2 > li > a .icon { display: none; }
  .mega-l3 {
    position: static; display: none; min-width: 0; padding: 2px 0 6px 14px;
    background: transparent; border: 0; border-radius: 0; box-shadow: none;
  }
  .mega-l2 > li.open > .mega-l3 { display: block; }
  .mega-l3 a { color: var(--text-light); padding: 7px 0; }
  .mega-l3 a:hover { background: transparent; color: var(--primary); }
}

/* ============================================================
   Product Detail Page
   ============================================================ */
.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.pd-gallery { position: sticky; top: 100px; }
.pd-main-img { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/3; }
.pd-main-img img { width: 100%; height: 100%; object-fit: cover; }
.pd-thumbs { display: flex; gap: 10px; margin-top: 12px; }
.pd-thumb { width: 72px; height: 54px; border-radius: 8px; overflow: hidden; border: 2px solid transparent; cursor: pointer; }
.pd-thumb.active, .pd-thumb:hover { border-color: var(--primary); }
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pd-tag {
  display: inline-block; padding: 5px 14px; border-radius: 20px; margin-bottom: 14px;
  background: rgba(255,122,0,.12); color: var(--accent); font-weight: 700; font-size: .8rem; letter-spacing: .4px;
}
.pd-info h2 { margin-bottom: 14px; }
.pd-info > p { margin-bottom: 20px; }
.pd-points { margin-bottom: 24px; }
.pd-points li { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 10px; }
.pd-points .icon { color: var(--accent); width: 18px; height: 18px; margin-top: 3px; flex-shrink: 0; }
.pd-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.pd-cert { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 18px; border-top: 1px solid var(--border); }
.cert-mini {
  padding: 4px 12px; border-radius: 6px; background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff; font-family: var(--font-head); font-weight: 700; font-size: .75rem;
}
.cert-note { font-size: .85rem; color: var(--text-light); width: 100%; margin-top: 4px; }

.spec-wrap { max-width: 760px; margin: 0 auto; box-shadow: var(--shadow); border-radius: var(--radius); overflow: hidden; }
.spec-table { width: 100%; border-collapse: collapse; background: #fff; }
.spec-table th, .spec-table td { padding: 14px 22px; text-align: left; border-bottom: 1px solid var(--border); }
.spec-table th { background: var(--bg-alt); color: var(--primary-dark); font-weight: 700; width: 42%; }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }
.spec-table tr:hover td { background: #f7faff; }

/* ============================================================
   Article (News Detail) Page
   ============================================================ */
.article { padding: 50px 0 70px; }
/* 正文容器居中对齐（faq.html / privacy.html 原来贴在左边，右侧留一大片空白） */
.article-container { max-width: 820px; margin-left: auto; margin-right: auto; }
.article-meta { display: flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--text-light); margin-bottom: 12px; }
.meta-sep { color: var(--border); }
.meta-cat { color: var(--accent); font-weight: 700; }
.article-title { font-size: clamp(1.6rem, 3vw, 2.3rem); margin-bottom: 24px; }
.article-featured { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); margin-bottom: 30px; aspect-ratio: 16/9; }
.article-featured img { width: 100%; height: 100%; object-fit: cover; }
.article-body { font-size: 1.05rem; line-height: 1.85; color: #333; }
.article-body p { margin-bottom: 18px; }
.article-body h2 { font-size: 1.35rem; margin: 30px 0 14px; color: var(--primary-dark); }
.article-list { margin: 0 0 20px; padding-left: 22px; }
.article-list li { margin-bottom: 8px; }
.article-body blockquote {
  margin: 24px 0; padding: 18px 24px; border-left: 4px solid var(--accent);
  background: var(--bg-alt); border-radius: 0 8px 8px 0; font-style: italic; color: var(--text);
}
.article-body blockquote p { margin: 0; }
.article-share { display: flex; align-items: center; gap: 14px; margin: 30px 0 22px; padding-top: 22px; border-top: 1px solid var(--border); }
.article-share span { font-weight: 700; color: var(--primary-dark); }
.article-share a { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--bg-alt); color: var(--primary); transition: all .25s; }
.article-share a:hover { background: var(--primary); color: #fff; }
.article-share .icon { width: 16px; height: 16px; }
.article-back { margin-top: 10px; }

/* ---------- Dropdown / Detail responsive ---------- */
@media (max-width: 1024px) {
  .product-detail { grid-template-columns: 1fr; gap: 32px; }
  .pd-gallery { position: static; }
}
@media (max-width: 768px) {
  .has-dropdown > a { justify-content: space-between; }
  .dropdown {
    position: static; opacity: 1; visibility: visible; transform: none;
    max-height: 0; overflow: hidden; transition: max-height .35s ease;
    box-shadow: none; border: 0; padding: 0 0 0 14px; min-width: 0;
  }
  .has-dropdown:hover > .dropdown { max-height: 0; }
  .has-dropdown.open > .dropdown { max-height: 460px; }
  .dropdown a { padding: 10px 6px; border-bottom: 1px solid var(--border); border-radius: 0; }
}
@media (max-width: 480px) {
  .spec-table th, .spec-table td { padding: 11px 14px; font-size: .9rem; }
  .spec-table th { width: 45%; }
  .pd-actions .btn { width: 100%; }
}

/* ============================================================
   Sidebar / Sub-Navigation Layout
   ============================================================ */
.page-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 30px;
  align-items: start;
}
.page-content { min-width: 0; }
.side-nav {
  position: sticky;
  top: 90px;
  align-self: start;
}
.side-nav-box {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(11,46,79,.06);
}
.side-nav-box > h3 {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--primary-dark);
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--accent);
}
.side-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.side-nav-list li { margin: 0; }
.side-nav-list a {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--text);
  transition: background .2s, color .2s, padding-left .2s;
}
.side-nav-list a:hover {
  background: var(--bg-alt);
  color: var(--primary);
  padding-left: 18px;
}
.side-nav-list a.active {
  background: var(--primary);
  color: #fff;
}
.side-cta {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
  color: #fff;
  border-radius: 12px;
  padding: 22px 20px;
  text-align: center;
}
.side-cta h3 { color: #fff; font-size: 1.05rem; margin-bottom: 6px; }
.side-cta p { font-size: .82rem; opacity: .88; margin-bottom: 14px; }
.side-cta .btn { width: 100%; }
.side-contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .85rem;
  color: var(--text);
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.side-contact-item:last-child { border-bottom: 0; }
.side-contact-item .icon { width: 18px; height: 18px; color: var(--primary); flex-shrink: 0; }

@media (max-width: 900px) {
  .page-layout { grid-template-columns: 1fr; gap: 20px; }
  .side-nav { position: static; }
}

/* ============================================================
   Client Revision Additions (Home page)
   ============================================================ */

/* ---------- Floating side buttons (email / WhatsApp) ---------- */
.float-side {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%);
  z-index: 950; display: flex; flex-direction: column; gap: 2px;
}
.float-side a {
  width: 52px; height: 52px; display: grid; place-items: center;
  color: #fff; transition: width .25s, background .25s;
}
.float-side a .icon { width: 24px; height: 24px; }
.float-side .float-mail { background: var(--primary); border-radius: 8px 0 0 0; }
.float-side .float-wa { background: #25d366; border-radius: 0 0 0 8px; }
.float-side a:hover { width: 62px; }
.float-side .float-wa:hover { background: #1ebe5b; }
@media (max-width: 768px) {
  .float-side { top: auto; bottom: 84px; transform: none; }
  .float-side a { width: 44px; height: 44px; }
  .float-side a .icon { width: 20px; height: 20px; }
}

/* ---------- Company intro below banner ---------- */
.intro-band { background: #fff; padding: 70px 0; }
.intro-band .about-grid { gap: 46px; }
.intro-lead { font-size: 1.05rem; }
.intro-more {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 10px;
  background: var(--primary); color: #fff; padding: 12px 30px; border-radius: 6px;
  font-weight: 700; font-size: .95rem; transition: all .25s;
}
.intro-more:hover { background: var(--primary-dark); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(14,92,166,.3); }

/* ---------- Company highlights ---------- */
.why-partner .about-grid { gap: 60px; }
.why-eyebrow { color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .82rem; display: inline-flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.why-eyebrow::after { content: ''; width: 46px; height: 3px; background: var(--accent); }
.why-copy h2 { font-size: 2.15rem; line-height: 1.2; margin-bottom: 22px; }
.why-copy p { color: var(--text-light); margin-bottom: 18px; }
.why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.why-item { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 30px 28px; transition: all .3s; }
.why-item:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: transparent; }
.why-item .icon { width: 30px; height: 30px; color: var(--primary); margin-bottom: 18px; }
.why-item h3 { font-size: 1.08rem; margin-bottom: 10px; }
.why-item p { font-size: .9rem; color: var(--text-light); }
@media (max-width: 900px) { .why-grid { grid-template-columns: 1fr; } }

/* ---------- Support entries (Downloads / FAQ) ---------- */
.support-section {
  background-image: url('../images/support-bg.jpg');
  background-size: cover; background-position: center; background-repeat: no-repeat;
  background-color: #fbfdff;
}
.support-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.support-grid-3 { grid-template-columns: repeat(3, 1fr); }
.support-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 34px 32px; transition: all .3s; display: flex; gap: 22px; align-items: flex-start;
}
.support-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); border-color: transparent; }
.support-icon {
  width: 62px; height: 62px; border-radius: 14px; display: grid; place-items: center;
  background: var(--bg-alt); color: var(--primary); border: 1px solid var(--border); flex-shrink: 0;
}
.support-icon .icon { width: 28px; height: 28px; }
.support-card h3 { margin-bottom: 8px; }
.support-card p { font-size: .92rem; margin-bottom: 14px; }
.support-card-feature { background: var(--primary-dark); border-color: transparent; color: #fff; }
.support-card-feature .support-icon { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.2); }
.support-card-feature h3 { color: #fff; }
.support-card-feature p { color: #c3d2e1; }
.support-card-feature .card-link { color: #fff; }
@media (max-width: 1024px) { .support-grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 768px) { .support-grid { grid-template-columns: 1fr; } }

/* ---------- Custom solution band ---------- */
@media (max-width: 768px) { .custom-band { padding: 32px 24px; } }

/* ---------- Light strip before footer ---------- */
.pre-footer {
  background: var(--bg-alt); border-bottom: 1px solid var(--border);
  padding: 26px 0;
}
.pre-footer-inner {
  display: flex; align-items: center; justify-content: center; gap: 26px; flex-wrap: wrap;
  font-size: .95rem; color: var(--text-light);
}
.pre-footer-inner strong { color: var(--primary-dark); }
.pre-footer-inner .btn { padding: 9px 22px; font-size: .88rem; }

/* ---------- Requirement form page ---------- */
.req-intro { max-width: 760px; margin: 0 auto 40px; text-align: center; }

/* ---------- Anchor scroll offset (below sticky header) ---------- */
#applications, #products, section[id], .industry-card[id], h2[id], h3[id] { scroll-margin-top: 120px; }

/* ============================================================
   Homepage revision — 网站首页修改.docx
   ============================================================ */

/* ---------- 1. Hero: per-slide copy (3-slide rotating banner) ---------- */
.hero-slider { min-height: 620px; }
.hero-copy { display: none; }
.hero-copy.active { display: block; animation: heroCopyIn .8s ease both; }
@keyframes heroCopyIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-copy h1 { max-width: 680px; }
.hero-copy p { min-height: 60px; }
.hero-actions { margin-bottom: 0; }
@media (max-width: 768px) {
  .hero-copy p { min-height: 0; }
  .hero-slider { min-height: 560px; }
}

/* ---------- 2. Stats: 4 items ---------- */
.stats-grid-4 { grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stats-grid-4 .stat-item p { line-height: 1.35; }
@media (max-width: 1024px) { .stats-grid-4 { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; } }
@media (max-width: 600px)  { .stats-grid-4 { grid-template-columns: repeat(2, 1fr); gap: 24px 10px; } }

/* ---------- 3. Company intro: stacked paragraphs ---------- */
.intro-band .about-content p + p { margin-top: 14px; color: var(--text-soft); }
.intro-band .about-list { margin-top: 22px; }

/* ---------- 4. Products: exactly 5 cards in one row ---------- */
.home-products { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.home-product {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.home-product:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.home-product-img { position: relative; overflow: hidden; aspect-ratio: 1 / 1; background: var(--bg-alt); }
.home-product-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.home-product:hover .home-product-img img { transform: scale(1.07); }
.home-product-more {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 0; text-align: center;
  background: rgba(255, 122, 0, .93); color: #fff; font-weight: 700; font-size: .84rem;
  letter-spacing: .6px; transform: translateY(100%); transition: transform .32s ease;
}
.home-product:hover .home-product-more { transform: translateY(0); }
.home-product-body { padding: 16px 16px 20px; flex: 1; }
.home-product-body h3 { font-size: 1rem; line-height: 1.35; margin-bottom: 8px; }
.home-product-body p { font-size: .84rem; line-height: 1.55; color: var(--text-light); margin: 0; }
@media (max-width: 1024px) { .home-products { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
@media (max-width: 640px)  { .home-products { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (max-width: 420px)  { .home-products { grid-template-columns: 1fr; } }

/* ---------- 5. Solutions: 6 image + text application blocks ---------- */
.solution-list { display: flex; flex-direction: column; gap: 54px; }
.solution-item { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: center; }
.solution-img { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); }
.solution-img img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .6s; }
.solution-item:hover .solution-img img { transform: scale(1.04); }
.solution-item:nth-child(even) .solution-img { order: 2; }
.solution-num {
  display: block; font-family: var(--font-head); font-size: 1.9rem; font-weight: 700;
  color: var(--accent); opacity: .3; line-height: 1; margin-bottom: 6px; letter-spacing: 1px;
}
.solution-body h3 { margin-bottom: 12px; }
.solution-body p { color: var(--text-soft); font-size: .96rem; line-height: 1.75; margin: 0 0 16px; }
.solution-link { display: inline-flex; align-items: center; gap: 6px; color: var(--primary); font-weight: 700; font-size: .92rem; }
.solution-link .icon { width: 16px; height: 16px; transform: rotate(-90deg); transition: transform .25s; }
.solution-link:hover { color: var(--accent); }
.solution-link:hover .icon { transform: rotate(-90deg) translateY(3px); }
@media (max-width: 900px) {
  .solution-list { gap: 40px; }
  .solution-item { grid-template-columns: 1fr; gap: 20px; }
  .solution-item:nth-child(even) .solution-img { order: 0; }
}

/* ---------- 5b. Solutions grid: 3 across x 2 rows (homepage) ---------- */
.solution-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 28px; align-items: stretch; }
.solution-grid .solution-item {
  display: flex; flex-direction: column; gap: 0;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow);
  transition: transform .3s, box-shadow .3s;
}
.solution-grid .solution-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.solution-grid .solution-item:nth-child(even) .solution-img { order: 0; }
.solution-grid .solution-img { border-radius: 0; box-shadow: none; }
.solution-grid .solution-img img { aspect-ratio: 4 / 3; }
.solution-grid .solution-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1 1 auto; }
.solution-grid .solution-num { font-size: 1.35rem; margin-bottom: 2px; }
.solution-grid .solution-body h3 { font-size: 1.06rem; margin-bottom: 10px; }
.solution-grid .solution-body p { font-size: .9rem; line-height: 1.68; margin-bottom: 14px; }
.solution-grid .solution-link { margin-top: auto; padding-top: 4px; }
@media (max-width: 1024px) { .solution-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) {
  .solution-grid { grid-template-columns: 1fr; gap: 24px; }
  .solution-grid .solution-body { padding: 20px 20px 22px; }
}

/* ============================================================
   About page revision — about us页面修改.docx
   ============================================================ */

/* ---------- 1. Company Profile: mission callout ---------- */
.about-mission {
  margin: 18px 0 0; padding: 14px 18px;
  background: var(--bg-alt); border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .98rem; color: var(--text);
}
.about-mission strong { color: var(--primary); }

/* ---------- 2. Why Choose ANVORE: alternating image + text rows ----------
   Layout per client reference: full image on one side, large title + paragraph
   on the other, generous whitespace, image shown at its natural ratio (no crop). */
.wca-list { display: flex; flex-direction: column; gap: 68px; }
.wca-row { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.wca-row:nth-child(even) .wca-media { order: 2; }
.wca-media { margin: 0; }
.wca-media img {
  display: block; width: 100%; height: auto; border-radius: 10px;
  box-shadow: 0 20px 44px rgba(11,46,79,.16);
}
.wca-text h3 {
  color: var(--primary-dark); font-size: 1.8rem; line-height: 1.26;
  letter-spacing: -.2px; margin-bottom: 16px;
}
.wca-text p { color: var(--text-soft); font-size: 1rem; line-height: 1.85; margin: 0; }

@media (max-width: 1024px) {
  .wca-list { gap: 54px; }
  .wca-row { gap: 38px; }
  .wca-text h3 { font-size: 1.5rem; }
  .wca-text p { font-size: .94rem; }
}
@media (max-width: 768px) {
  .wca-list { gap: 44px; }
  .wca-row { grid-template-columns: 1fr; gap: 20px; }
  .wca-row:nth-child(even) .wca-media { order: 0; }
  .wca-text h3 { font-size: 1.32rem; margin-bottom: 12px; }
  .wca-text p { font-size: .92rem; line-height: 1.78; }
  /* keep the natural ratio but stop tall photos from dominating the screen */
  .wca-media img { width: auto; max-width: 100%; max-height: 360px; margin: 0 auto; box-shadow: 0 12px 26px rgba(11,46,79,.14); }
}

/* ---------- 3. Factory & Quality Control: text + 3-image carousel ---------- */
.factory-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: center; }
.factory-text p { color: var(--text-soft); font-size: .98rem; line-height: 1.8; }
.factory-text p + p { margin-top: 14px; }
.factory-list { margin-top: 22px; }
.factory-list li { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 11px; font-size: .96rem; }
.factory-list .icon { color: var(--accent); width: 20px; height: 20px; margin-top: 3px; }

.factory-slider {
  position: relative; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-lg); background: var(--bg-alt);
}
.factory-slides { position: relative; aspect-ratio: 4 / 3; }
.factory-slide {
  position: absolute; inset: 0; opacity: 0; transform: scale(1.04);
  transition: opacity .7s ease, transform 5s ease-out;
}
.factory-slide.active { opacity: 1; transform: scale(1); }
.factory-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.factory-slider .slider-arrow { background: rgba(8,31,53,.45); border-color: rgba(255,255,255,.45); }
.factory-slider .slider-arrow:hover { background: var(--accent); border-color: var(--accent); }
.factory-slider .slider-prev { left: 16px; }
.factory-slider .slider-next { right: 16px; }
.factory-slider .slider-dots { bottom: 16px; }
.factory-slider .slider-dots .dot { background: rgba(255,255,255,.4); border-color: rgba(255,255,255,.65); }
.factory-slider .slider-dots .dot.active { background: var(--accent); border-color: var(--accent); }
@media (max-width: 900px) {
  .factory-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ============================================================
   Product detail page (product-detail.html)
   ============================================================ */
/* white content card used by the product blocks */
.pdp-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 30px 32px;
}
.pdp-card + .pdp-related,
.pdp-related + .cta-banner,
.pdp-desc { margin-top: 26px; }

/* gallery + summary */
.pdp-top { display: grid; grid-template-columns: 1.02fr .98fr; gap: 40px; align-items: start; }
.pdp-main { border-radius: var(--radius); overflow: hidden; background: var(--bg-alt); box-shadow: var(--shadow); }
.pdp-main img { display: block; width: 100%; height: auto; }
.pdp-thumbs { display: flex; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.pdp-thumbs button {
  width: 84px; height: 64px; padding: 0; cursor: pointer; background: none;
  border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
  transition: border-color .25s, box-shadow .25s;
}
.pdp-thumbs img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pdp-thumbs button:hover { border-color: var(--accent); }
.pdp-thumbs button.active { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(255,122,0,.28); }

.pdp-summary h2 { font-size: 1.75rem; line-height: 1.25; margin-bottom: 14px; color: var(--primary-dark); }
.pdp-summary > p { color: var(--text-soft); line-height: 1.85; margin: 0 0 24px; }

/* Model / Brand rows, shown between the summary text and the actions */
.pdp-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 40px;
  margin: -4px 0 22px;
  padding: 14px 0 0;
  border-top: 1px solid var(--border);
}
.pdp-spec { display: flex; align-items: baseline; gap: 10px; }
.pdp-spec-k {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-light);
  white-space: nowrap;
}
.pdp-spec-v { font-size: 1.02rem; font-weight: 700; color: var(--primary-dark); }

.pdp-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* product description */
.pdp-desc h2 { font-size: 1.35rem; margin-bottom: 16px; color: var(--primary-dark); }
.pdp-desc p { color: var(--text-soft); line-height: 1.9; margin: 0 0 14px; }
.pdp-desc p:last-child { margin-bottom: 0; }

/* related products */
.pdp-related h2 { font-size: 1.35rem; margin-bottom: 16px; color: var(--primary-dark); }

/* left product navigation: category group labels */
.side-nav-list .nav-group {
  margin: 14px 0 4px; padding: 10px 12px 0; border-top: 1px dashed var(--border);
  font-size: .72rem; font-weight: 700; letter-spacing: .9px; text-transform: uppercase;
  color: var(--text-light);
}
.side-nav-list .nav-group:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

@media (max-width: 1100px) {
  .pdp-top { grid-template-columns: 1fr; gap: 26px; }
  .pdp-summary h2 { font-size: 1.5rem; }
}
@media (max-width: 700px) {
  .pdp-card { padding: 20px 18px; }
  .spec-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 560px) {
  .pdp-specs { gap: 8px 26px; padding-top: 12px; margin-bottom: 18px; }
  .pdp-actions .btn { width: 100%; text-align: center; }
}


/* ============================================================
   网站修改.docx — copy protection (item 3)
   Text cannot be selected and images cannot be dragged or
   right-click-saved. Form fields stay fully usable.
   ============================================================ */
body {
  -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
img,
.pdp-main img,
.about-img img,
.blog-card img,
.card-img img {
  -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; -o-user-drag: none;
  pointer-events: none;
}
input, textarea, select, [contenteditable="true"] {
  -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;
}

/* mobile: keep the stacked wordmark inside the shorter header */
@media (max-width: 768px) {
  .logo-stacked { height: 52px; }
}

/* ============================================================
   9.16 网站修改.docx — round 4
   ============================================================ */

/* ---------- items 1/2/5/7/11: inner-page banners ----------
   The artwork supplied for these pages is light and leaves an empty
   area on the left where the copy sits, so the default dark overlay
   would have buried it. This variant keeps the image visible and
   switches the copy to navy. */
.page-hero--light { color: var(--primary-dark); background-color: #eef4fa; }
.page-hero--light::before {
  background: linear-gradient(100deg,
    rgba(255,255,255,.97) 0%,
    rgba(255,255,255,.93) 38%,
    rgba(255,255,255,.68) 62%,
    rgba(255,255,255,.10) 100%);
}
.page-hero--light h1 { color: var(--primary-dark); }
.page-hero--light p { color: #4c637b; }
.page-hero--light .breadcrumb a { color: #6d8299; }
.page-hero--light .breadcrumb a:hover { color: var(--primary); }
.page-hero--light .breadcrumb .sep { color: #9fb0c2; }
.page-hero--light .breadcrumb .current { color: var(--accent); }

/* the lead line supplied for the Products / Solutions banners */
.page-hero .hero-lead {
  color: #fff; font-size: clamp(1rem, 1.5vw, 1.2rem); font-weight: 600;
  letter-spacing: .2px; margin: 0 0 10px;
}
.page-hero--light .hero-lead { color: var(--primary); }

@media (max-width: 780px) {
  /* on phones the artwork is cropped to its middle band, so hold the copy
     on a near-solid scrim to keep the contrast */
  .page-hero--light::before {
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.94));
  }
}

/* ---------- item 12: third social icon on a light background ----------
   The "You Tube" wordmark is a white PNG, so it disappeared wherever the
   row sits on white (the contact page). Darkening it there makes it read
   like the SVG icons next to it. */
.contact-info .footer-social a.s-yt .social-yt {
  filter: brightness(0) saturate(0) opacity(.82);
  transition: filter .25s;
}
.contact-info .footer-social a.s-yt:hover .social-yt {
  filter: brightness(0) saturate(0) invert(1);
}

/* ---------- item 13: contact page GET IN TOUCH panel ---------- */
.git-panel {
  background: linear-gradient(150deg, #0b2e4f 0%, #0a3d61 100%);
  border-radius: 16px; padding: 38px 34px 34px; color: #fff;
  box-shadow: var(--shadow-lg);
}
.git-brand {
  font-size: 1.22rem; font-weight: 800; letter-spacing: 5px;
  text-transform: uppercase; color: #fff; line-height: 1;
}
.git-brand::after {
  content: ''; display: block; width: 34px; height: 3px;
  background: var(--accent); border-radius: 2px; margin-top: 12px;
}
.git-panel h2 {
  color: #fff; text-transform: uppercase; font-weight: 800;
  font-size: clamp(2rem, 3.4vw, 2.75rem); line-height: 1.03;
  letter-spacing: 1px; margin: 24px 0 0;
}
.git-rule { display: block; width: 58px; height: 4px; border-radius: 2px; background: var(--accent); margin: 16px 0 20px; }
.git-panel p { color: #c7d6e5; margin: 0; line-height: 1.75; }

.git-list { list-style: none; margin: 26px 0 0; padding: 0; }
.git-list li { display: flex; gap: 15px; align-items: flex-start; margin-bottom: 20px; }
.git-list li:last-child { margin-bottom: 0; }
.git-ic {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  background: var(--primary-dark); display: grid; place-items: center;
  box-shadow: 0 6px 14px rgba(11,46,79,.2);
}
.git-ic .icon { width: 19px; height: 19px; color: var(--accent); }
.git-list strong { display: block; color: var(--primary-dark); font-size: 1.02rem; margin-bottom: 3px; }
.git-val { color: #52708c; font-size: .93rem; line-height: 1.55; }
a.git-val:hover { color: var(--accent); }

.git-caps {
  display: grid; grid-template-columns: 1fr 1fr; margin-top: 26px;
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  overflow: hidden; box-shadow: 0 3px 12px rgba(11,46,79,.07);
}
.git-caps span {
  padding: 15px 18px; font-size: .88rem; font-weight: 600;
  color: var(--primary-dark); line-height: 1.45;
}
.git-caps span:nth-child(odd) { border-right: 1px solid var(--border); }
.git-caps span:nth-child(-n+2) { border-bottom: 1px solid var(--border); }

@media (max-width: 1024px) {
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 560px) {
  .git-caps { grid-template-columns: 1fr; }
  .git-caps span:nth-child(odd) { border-right: 0; }
  .git-caps span:nth-child(-n+3) { border-bottom: 1px solid var(--border); }
  .git-panel { padding: 30px 24px 26px; }
}

/* ---------- item 14: real map on the contact page ---------- */
.map-card {
  border-radius: var(--radius); overflow: hidden; background: #fff;
  border: 1px solid var(--border); box-shadow: var(--shadow);
}
.map-frame { display: block; width: 100%; height: auto; border: 0; }
.map-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; padding: 18px 24px;
  border-top: 1px solid var(--border);
}
.map-bar strong { display: block; color: var(--primary-dark); font-size: 1rem; margin-bottom: 3px; }
.map-bar span { color: var(--text-soft); font-size: .9rem; }
@media (max-width: 560px) { .map-frame { height: 300px; } }

/* ---------- item 6: Solutions page — three cards per row ---------- */
.industry-grid { grid-template-columns: repeat(3, 1fr); gap: 26px; }
.industry-card {
  flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden;
}
.industry-img { width: 100%; height: auto; aspect-ratio: 16/10; border-radius: 0; }
.industry-card > div:last-child { padding: 22px 24px 26px; }
.industry-card h3 { font-size: 1.08rem; margin-bottom: 8px; }
.industry-card p { font-size: .9rem; margin: 0; }
@media (max-width: 992px) { .industry-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .industry-grid { grid-template-columns: 1fr; } }

/* ---------- item 3: product page sub-category drop-down ---------- */
.side-nav-list .cat-item > a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.side-nav-list .cat-item > a:hover { padding-left: 12px; }
.side-nav-list .cat-caret {
  width: 13px; height: 13px; flex-shrink: 0; opacity: .6;
  transition: transform .28s ease, opacity .2s;
}
.side-nav-list .cat-item.open > a .cat-caret { transform: rotate(180deg); opacity: 1; }
.side-nav-list .cat-item.open > a { background: var(--bg-alt); color: var(--primary); }
.side-nav-list .cat-sub {
  list-style: none; margin: 0; padding: 0; overflow: hidden;
  max-height: 0; transition: max-height .34s ease;
}
.side-nav-list .cat-item.open > .cat-sub { max-height: 460px; }
.side-nav-list .cat-sub a {
  padding: 8px 12px 8px 26px; font-size: .84rem; font-weight: 500;
  color: var(--text-soft); border-left: 2px solid var(--border);
  border-radius: 0; background: none;
}
.side-nav-list .cat-sub a:hover {
  color: var(--primary); border-left-color: var(--accent); padding-left: 30px; background: none;
}
.side-nav-list .cat-sub a.active { background: none; color: var(--primary); border-left-color: var(--accent); font-weight: 700; }

/* ============================================================
   Round 5 — search page, paged catalogue, product navigation
   ============================================================ */

/* ---------- catalogue listing ---------- */
.catalogue-head { margin-bottom: 26px; }
.catalogue-head h2 { font-size: 1.7rem; margin-bottom: 6px; }
.catalogue-head p { color: var(--text-soft); font-size: .94rem; margin: 0; }
.side-nav-list .nav-group a { color: var(--primary-dark); }
.side-nav-list .nav-group { padding: 10px 12px 2px; }

/* ---------- pagination ---------- */
.pager {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  justify-content: center; margin: 44px 0 8px;
}
.pager .page-link {
  min-width: 42px; height: 42px; padding: 0 14px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 10px; background: #fff;
  color: var(--text); font-weight: 700; font-size: .92rem;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.pager .page-link:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-2px); }
.pager .page-link.active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* PbootCMS 的 {page:bar} 输出的是 page-num / page-index / page-pre 这套类名，
   外观跟静态站的 .page-link 对齐，这样动态版翻页条不会跑版。 */
.pager .page-status {
  color: var(--text-soft); font-size: .88rem; font-weight: 600; margin-right: 6px;
}
.pager .page-num,
.pager .page-index > a,
.pager .page-pre > a,
.pager .page-next > a,
.pager .page-last > a {
  min-width: 42px; height: 42px; padding: 0 14px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 10px; background: #fff;
  color: var(--text); font-weight: 700; font-size: .92rem;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.pager .page-num:hover,
.pager .page-index > a:hover,
.pager .page-pre > a:hover,
.pager .page-next > a:hover,
.pager .page-last > a:hover {
  border-color: var(--primary); color: var(--primary); transform: translateY(-2px);
}
.pager .page-num-current { background: var(--primary); border-color: var(--primary); color: #fff; }
.pager a[href="javascript:;"] { opacity: .4; pointer-events: none; }

/* ---------- search page ---------- */
.search-page-form {
  display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap;
  max-width: 760px; margin: 0 auto 26px;
}
.search-page-form input[type="search"] {
  flex: 1 1 320px; min-width: 0; height: 52px; padding: 0 18px;
  border: 1px solid var(--border); border-radius: 10px; background: #fff;
  font-size: 1rem; color: var(--text);
}
.search-page-form input[type="search"]:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(11,46,79,.08); }
.search-page-form .btn { height: 52px; padding: 0 30px; }
.search-summary { text-align: center; color: var(--text-soft); font-size: .95rem; margin-bottom: 30px; }
.search-summary strong { color: var(--primary-dark); }
.search-suggest { max-width: 760px; margin: 46px auto 0; text-align: center; }
.search-suggest h3 { font-size: 1.05rem; margin-bottom: 14px; }
.search-suggest .chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.search-suggest .chips a {
  padding: 9px 18px; border-radius: 24px; background: #fff;
  border: 1px solid var(--border); color: var(--text); font-size: .88rem; font-weight: 600;
  transition: all .2s;
}
.search-suggest .chips a:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.search-help { margin-top: 22px; font-size: .92rem; color: var(--text-soft); }
.search-empty {
  grid-column: 1 / -1; text-align: center; padding: 40px 20px;
  background: #fff; border: 1px dashed var(--border); border-radius: var(--radius);
}
.search-empty h3 { margin-bottom: 10px; }
.search-empty p { color: var(--text-soft); margin-bottom: 18px; }
@media (max-width: 560px) {
  .search-page-form .btn { width: 100%; }
  .pager .page-link { min-width: 38px; height: 38px; padding: 0 11px; }
}

/* ============================================================
   Round 6 — three-level side navigation + paged news
   ============================================================ */

/* ---------- level-3 items nested under a level-2 product ---------- */
.side-nav-list .cat-sub li { margin: 0; }
.side-nav-list .cat-sub ul.cat-sub2 { list-style: none; margin: 0; padding: 0; }
.side-nav-list .cat-sub2 a {
  position: relative;
  padding: 7px 12px 7px 40px; font-size: .8rem; font-weight: 500;
  color: var(--text-soft); border-left: 2px solid var(--border);
  border-radius: 0; background: none;
}
.side-nav-list .cat-sub2 a::before {
  content: ''; position: absolute; left: 26px; top: 50%; width: 6px; height: 6px;
  margin-top: -3px; border-radius: 50%; background: var(--border);
}
.side-nav-list .cat-sub2 a:hover,
.side-nav-list .cat-sub2 a.active {
  color: var(--primary); border-left-color: var(--accent); font-weight: 700;
}
.side-nav-list .cat-sub2 a.active::before { background: var(--accent); }

/* a group with level-3 entries needs more room than a plain group */
.side-nav-list .cat-item.open > .cat-sub { max-height: 760px; }

/* ---------- caret is the expand control, the row still navigates ---------- */
.side-nav-list .cat-caret {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin-right: -6px; flex-shrink: 0;
  cursor: pointer; opacity: .6; transition: transform .28s ease, opacity .2s;
}
.side-nav-list .cat-caret:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.side-nav-list .cat-item.open > a .cat-caret { transform: rotate(180deg); opacity: 1; }

/* ---------- news list ---------- */
.news-head { margin-bottom: 26px; }
.news-head h2 { font-size: 1.7rem; margin-bottom: 6px; }
.news-head p { color: var(--text-soft); font-size: .94rem; margin: 0; }
.news-empty {
  padding: 46px 24px; text-align: center; background: #fff;
  border: 1px dashed var(--border); border-radius: var(--radius);
}
.news-empty h3 { margin-bottom: 10px; }
.news-empty p { color: var(--text-soft); margin-bottom: 18px; }
@media (max-width: 620px) {
  .news-row { grid-template-columns: 1fr; }
  .news-row-thumb { width: 100%; height: 190px; }
}

/* ============================================================
   Round 7 — the category arrow is a sibling of the category link
   (客户 9.16 修改项 1：点小图标只展开分组，不跳转页面)
   ============================================================ */
.side-nav-list .cat-head {
  display: flex; align-items: center; gap: 2px;
  border-radius: 8px; transition: background .2s;
}
.side-nav-list .cat-head > a { flex: 1 1 auto; min-width: 0; }
.side-nav-list .cat-head > a:hover { padding-left: 12px; }
.side-nav-list .cat-head .cat-caret { margin-right: 6px; }
.side-nav-list .cat-head > a.active { background: none; color: var(--primary); }
.side-nav-list .cat-item.open > .cat-head { background: var(--bg-alt); }
.side-nav-list .cat-item.open > .cat-head > a { color: var(--primary); background: none; }
.side-nav-list .cat-item.open > .cat-head .cat-caret { transform: rotate(180deg); opacity: 1; }

/* ============================================================
   Round 8 — solution detail pages (客户 xiugai.docx 第 3 项)
   ============================================================ */

/* title + summary beside the industry photo, as on the reference page */
.sol-head {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px;
  align-items: center; background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 36px 38px;
}
.sol-head h1 { font-size: 2rem; line-height: 1.25; color: var(--primary-dark); margin: 12px 0 16px; }
.sol-lead { color: var(--text-soft); line-height: 1.85; margin: 0 0 26px; font-size: 1.02rem; }
.sol-head-img { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--bg-alt); }
.sol-head-img img { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }

/* article body */
.sol-body {
  margin-top: 26px; background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 30px 32px;
}
.sol-body > p { color: var(--text-soft); line-height: 1.95; margin: 0 0 16px; }
.sol-body > p:last-child { margin-bottom: 0; }
.sol-body > p:first-child { font-size: 1.04rem; color: var(--text); }
.sol-sub {
  font-size: .82rem; font-weight: 800; letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--accent); margin: 28px 0 16px; padding-top: 22px;
  border-top: 1px solid var(--border);
}
.sol-body h2:not(.sol-sub) { font-size: 1.35rem; margin-bottom: 16px; color: var(--primary-dark); }

/* previous / all / next bar */
.sol-nav {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: stretch;
  margin-top: 26px;
}
.sol-nav a {
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 20px; color: var(--text-soft); text-decoration: none;
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.sol-nav a:hover { border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-2px); }
.sol-nav a em {
  font-style: normal; font-size: .72rem; font-weight: 800; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--text-light);
}
.sol-nav a span { color: var(--primary-dark); font-weight: 700; line-height: 1.4; }
.sol-nav a.r { text-align: right; align-items: flex-end; }
.sol-nav a.m {
  align-items: center; text-align: center; background: var(--primary);
  border-color: var(--primary); color: #fff; font-weight: 700; padding: 16px 26px;
}
.sol-nav a.m:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.sol-nav a.m span, .sol-nav a.m em { color: #fff; }

/* industry grid on applications.html */
a.industry-card { color: inherit; text-decoration: none; }
.industry-card .card-link { display: inline-block; margin-top: 10px; font-weight: 700; color: var(--accent); }

@media (max-width: 1100px) {
  .sol-head { grid-template-columns: 1fr; gap: 26px; padding: 26px 22px; }
  .sol-head h1 { font-size: 1.6rem; }
}
@media (max-width: 760px) {
  .sol-nav { grid-template-columns: 1fr; }
  .sol-nav a.r { text-align: left; align-items: flex-start; }
  .sol-body { padding: 22px 18px; }
}

/* ===== Round 9 (917.docx) =====
   第 7 条：Contact 页 banner 原来的浅色遮罩压得太白，改成和页面里
   GET IN TOUCH 面板同色系的深蓝，图片仍然可见。 */
.page-hero--navy { color: #fff; background-color: var(--primary-dark); }
.page-hero--navy::before {
  background: linear-gradient(100deg,
    rgba(9,36,60,.95) 0%,
    rgba(11,46,79,.88) 42%,
    rgba(10,61,97,.72) 100%);
}
.page-hero--navy h1 { color: #fff; }
.page-hero--navy p { color: #cfdbe8; }
.page-hero--navy .hero-lead { color: #fff; }
.page-hero--navy .breadcrumb a { color: #9db4ca; }
.page-hero--navy .breadcrumb a:hover { color: #fff; }
.page-hero--navy .breadcrumb .sep { color: #6f89a3; }
.page-hero--navy .breadcrumb .current { color: var(--accent); }

/* ===== Round 10 (xiu.docx) =====
   第 3 条：Contact 页按客户示意图重排 ——
   左边一整块深色 GET IN TOUCH 面板，右边是联系方式 + 能力卡 + 字标，
   左右等高；询盘表单移到下面整宽一块。
   （第 8 条的左右等高要求由这里的 align-items:stretch 一并满足） */
.git-wrap {
  display: grid; grid-template-columns: .82fr 1.18fr;
  align-items: stretch; overflow: hidden;
  border-radius: 18px; box-shadow: var(--shadow-lg); background: #eaf1f8;
}
.git-wrap .git-panel {
  border-radius: 0; box-shadow: none; height: 100%;
  padding: 46px 38px; display: flex; flex-direction: column;
}
.git-side {
  position: relative; height: 100%; padding: 44px 42px 58px;
  background:
    radial-gradient(circle at 16% 10%, rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 46%),
    linear-gradient(150deg, #eef5fb 0%, #dfeaf5 55%, #e9f2f9 100%);
}
/* 极淡的点阵，代替示意图里的世界地图底纹 */
.git-side::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(11,46,79,.075) 1px, transparent 1px);
  background-size: 22px 22px;
}
.git-side > * { position: relative; }
.git-side .git-list { margin-top: 0; }
.git-wordmark {
  position: absolute; right: 26px; bottom: 18px;
  font-size: .72rem; font-weight: 700; letter-spacing: 3.4px;
  text-transform: uppercase; color: rgba(11,46,79,.4);
}
/* 表单整宽，字段两列，跟上面的联系块留出间距 */
.contact-form { padding: 38px 42px; }
@media (max-width: 1024px) {
  .git-wrap { grid-template-columns: 1fr; }
  .git-side { padding: 34px 24px 54px; }
  .contact-form { padding: 26px 20px; }
}

/* ===== Round 12：requirements 页换成客户给的整幅横幅设计图 =====
   设计图里已经带了标题／副标题／三个标签，所以这一版 banner 不再压深色遮罩、
   也不重复显示 HTML 文字；高度按裁好的图（2848×1040）走，宽屏最多 620px。 */
.page-hero--banner {
  padding: 22px 0 0;
  aspect-ratio: 2848 / 1040;
  max-height: 620px;
  background-size: cover;
  background-position: center;
  color: #fff;
}
.page-hero--banner::before { content: none; }
.page-hero--banner .breadcrumb { margin-bottom: 0; }
.page-hero--banner .breadcrumb a { color: #cfe0ee; text-shadow: 0 1px 3px rgba(4,18,34,.8); }
.page-hero--banner .breadcrumb a:hover { color: #fff; }
.page-hero--banner .breadcrumb .sep { color: #8fa7bd; text-shadow: 0 1px 3px rgba(4,18,34,.8); }
.page-hero--banner .breadcrumb .current { color: var(--accent); text-shadow: 0 1px 3px rgba(4,18,34,.8); }
@media (max-width: 780px) {
  /* 窄屏用单独裁的横幅（只保留文字块），否则整幅图被 cover 会把标题切掉；
     页面上的 background-image 是写在行内 style 里的，这里必须 !important 才盖得住。
     这张横幅本来就只有一条文字，面包屑会压在上面，所以窄屏隐藏面包屑。 */
  .page-hero--banner {
    aspect-ratio: 1768 / 560;
    max-height: none;
    background-image: url('../images/banner-requirements-m.jpg') !important;
    background-position: center center;
    padding-top: 0;
  }
  .page-hero--banner .breadcrumb { display: none; }
}

/* 只给搜索引擎和读屏软件看的文字（横幅设计图已含标题时使用） */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- verification code row (PbootCMS message form) ---------- */
.form-code { display: flex; gap: 10px; align-items: center; }
.form-code input { flex: 1 1 auto; }
.form-code .code-img {
  height: 46px; min-width: 110px; border: 1px solid var(--border);
  border-radius: 10px; cursor: pointer; background: #fff;
}

/* ---------- form feedback message (English notices) ---------- */
.form-msg {
  margin: 14px 0 0; padding: 12px 16px; border-radius: 10px;
  font-size: .92rem; font-weight: 500; line-height: 1.6;
}
.form-msg.ok  { background: #eaf6ee; border: 1px solid #b6dfc4; color: #1d6f3f; }
.form-msg.err { background: #fdeceb; border: 1px solid #f3bdb9; color: #a32d2d; }

/* Submit Requirements 不出现在顶部导航里（栏目仍可通过 /requirements/ 与按钮访问） */
.main-nav > ul > li[data-scode="requirements"] { display: none !important; }

/* ============================================================
   Solution detail pages — the client's 18 technical documents
   Cards come from 总览内页页面.docx, article bodies from 内页详情页1-18.docx,
   both converted by _pboot/tools/docx_to_solution.py.
   ============================================================ */

/* the head photo is now one of the client's card images: keep its 16:10
   framing so object-fit:cover never crops the edge text of the infographics */
.sol-head-img img { aspect-ratio: 16/10; }

/* figures converted from the client's docx */
.sol-body .sol-fig {
  margin: 26px 0; background: var(--bg-alt);
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
.sol-body .sol-fig img { display: block; width: 100%; height: auto; }
.sol-body .sol-fig figcaption {
  padding: 12px 16px; font-size: .84rem; line-height: 1.6;
  color: var(--text-light); background: #fff; border-top: 1px solid var(--border);
}

/* tables straight out of the client's Word documents */
.sol-table-wrap { margin: 22px 0; overflow-x: auto; }
.sol-body table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.sol-body th, .sol-body td {
  border: 1px solid var(--border); padding: 11px 14px;
  text-align: left; vertical-align: top; line-height: 1.65;
}
.sol-body th {
  background: var(--bg-alt); color: var(--primary-dark); font-weight: 700;
  white-space: nowrap;
}
.sol-body tbody tr:nth-child(even) td { background: #fafcfe; }

/* bullet lists ("Higher purity." + continuation, equipment lists) */
.sol-body .sol-list { list-style: none; margin: 16px 0; padding: 0; }
.sol-body .sol-list li {
  position: relative; padding-left: 22px; margin-bottom: 10px;
  color: var(--text-soft); line-height: 1.9;
}
.sol-body .sol-list li::before {
  content: ""; position: absolute; left: 3px; top: .74em;
  width: 7px; height: 7px; border-radius: 2px; background: var(--accent);
}
.sol-body .sol-list li strong { color: var(--primary-dark); }

/* the "01 … 04" card strip that opens some sections */
.sol-body .sol-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.sol-body .sol-cards li {
  background: var(--bg-alt); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px 16px 14px 34px; margin: 0;
  font-weight: 700; color: var(--primary-dark);
}
.sol-body .sol-cards li::before { top: 1.35em; left: 15px; }

/* the closing call-to-action the client writes into a one-cell table */
.sol-body .sol-cta {
  margin: 26px 0 0; padding: 16px 20px;
  border-left: 4px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--bg-alt); color: var(--primary-dark); font-weight: 700;
}

/* process flow strip ("FEED → AROMA → CONCENTRATE → …") */
.sol-body .sol-flow {
  margin: 20px 0; padding: 14px 18px; text-align: center;
  font-size: .88rem; font-weight: 700; letter-spacing: .06em;
  color: var(--primary-dark); background: var(--bg-alt);
  border: 1px solid var(--border); border-radius: 10px;
}

/* subtitle line under a banner heading */
.sol-sub-note {
  display: block; margin-top: 6px; font-size: .9rem; font-weight: 600;
  letter-spacing: 0; text-transform: none; color: var(--text-soft);
}

@media (max-width: 640px) {
  .sol-body .sol-cards { grid-template-columns: 1fr; }
  .sol-body th { white-space: normal; }
}

/* ---------- Article body (News / Technical Resources) ---------- */
.article-body h3 { font-size: 1.15rem; margin: 26px 0 12px; color: var(--primary-dark); }
.article-body h4 {
  font-size: .95rem; margin: 22px 0 10px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent);
}
.article-body ul, .article-body ol { margin: 0 0 20px; padding-left: 22px; }
.article-body li { margin-bottom: 8px; }

/* 客户 docx 里的图 + 图注 */
.article-fig {
  margin: 26px 0; background: var(--bg-alt);
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
.article-fig img { display: block; width: 100%; height: auto; }
.article-fig figcaption {
  padding: 12px 16px; font-size: .84rem; line-height: 1.6;
  color: var(--text-light); background: #fff; border-top: 1px solid var(--border);
}

/* 客户 docx 里的对比表 */
.article-table-wrap { margin: 24px 0; overflow-x: auto; }
.article-body table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.article-body th, .article-body td {
  border: 1px solid var(--border); padding: 11px 14px;
  text-align: left; vertical-align: top; line-height: 1.65;
}
.article-body th { background: var(--bg-alt); color: var(--primary-dark); font-weight: 700; }

@media (max-width: 640px) {
  .article-body table { font-size: .86rem; }
  .article-body th, .article-body td { padding: 9px 10px; }
}

/* ===== H1 structure fix (2026-09-20): 每页只保留一个 H1 =====
   页头/轮播里降级成 .hero-title 的标题，视觉跟原来的 h1 完全一致 */
.hero .hero-title { color: #fff; margin: 0 0 20px; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.15; font-weight: 700; }
.hero .hero-title .accent { color: var(--accent); }
.page-hero .hero-title { color: #fff; font-size: clamp(2rem, 4vw, 3rem); margin: 0 0 12px; font-weight: 700; line-height: 1.15; }
.page-hero--light .hero-title { color: var(--primary-dark); }
.page-hero--navy .hero-title { color: #fff; }