/* ============================================
   Yantai Chemical - Main Stylesheet
   B2B Industrial Theme - Brand Red #C8102E
   ============================================ */

:root {
  --brand: #C8102E;
  --brand-dark: #A00D25;
  --brand-light: #FDECEF;
  --ink-900: #1A1A1A;
  --ink-700: #3D3D3D;
  --ink-500: #6B6B6B;
  --ink-300: #C9C9C9;
  --ink-100: #F2F2F2;
  --bg: #FFFFFF;
  --bg-warm: #FAFAF8;
  --max-width: 1440px;
  --radius-card: 6px;
  --radius-btn: 4px;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Source Han Sans CN", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-700);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); text-decoration: none; transition: color 0.15s ease; }
a:hover { color: var(--brand-dark); }

h1, h2, h3, h4, h5, h6 {
  color: var(--ink-900);
  font-weight: 700;
  line-height: 1.3;
}

h1 { font-size: clamp(28px, 4vw, 48px); }
h2 { font-size: clamp(24px, 3vw, 32px); }
h3 { font-size: clamp(18px, 2.5vw, 22px); }

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

/* ========== BUTTONS ========== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: var(--radius-btn);
  font-weight: 500;
  font-size: 15px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
  line-height: 1.2;
}

.btn-primary {
  background: var(--brand);
  color: #fff;
}
.btn-primary:hover {
  background: var(--brand-dark);
  color: #fff;
  transform: translateY(-1px);
}

.btn-outline {
  background: transparent;
  border-color: var(--brand);
  color: var(--brand);
}
.btn-outline:hover {
  background: var(--brand);
  color: #fff;
}

.btn-ghost {
  background: #fff;
  border: 1px solid var(--ink-300);
  color: var(--ink-700);
}
.btn-ghost:hover {
  border-color: var(--ink-500);
  color: var(--ink-900);
}

.btn-sm { padding: 8px 16px; font-size: 14px; }
.btn-lg { padding: 14px 32px; font-size: 16px; }

/* ========== RESET WP DEFAULT ========== */
html { margin-top: 0 !important; }
body { margin: 0; }
* { box-sizing: border-box; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6 { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* WP Admin bar fix */
.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
}

/* ========== HEADER ========== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--ink-100);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  gap: 24px;
}

.site-logo {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink-900);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}
.site-logo .logo-image {
  height: 44px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
}
.site-logo .logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--brand);
  color: #fff;
  border-radius: 4px;
  margin-right: 10px;
  font-size: 14px;
  font-weight: 700;
  vertical-align: middle;
}
.site-logo .logo-text {
  font-size: 18px;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  justify-content: center;
}
.main-nav a {
  padding: 8px 14px;
  color: var(--ink-700);
  font-weight: 500;
  font-size: 15px;
  border-radius: 4px;
  transition: all 0.15s;
}
.main-nav a:hover,
.main-nav a.current-menu-item {
  color: var(--brand);
  background: var(--brand-light);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lang-switcher {
  display: flex;
  border: 1px solid var(--ink-300);
  border-radius: 4px;
  overflow: hidden;
}
.lang-switcher button {
  padding: 6px 12px;
  border: none;
  background: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-500);
  transition: all 0.15s;
}
.lang-switcher button.active {
  background: var(--brand);
  color: #fff;
}
.lang-switcher button:hover:not(.active) {
  background: var(--ink-100);
  color: var(--ink-700);
}

.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  padding: 8px;
  color: var(--ink-700);
}

/* Mobile nav */
.mobile-nav {
  display: none;
  padding: 16px 20px;
  border-top: 1px solid var(--ink-100);
  background: #fff;
}
.mobile-nav.open { display: block; }
.mobile-nav a {
  display: block;
  padding: 12px 0;
  color: var(--ink-700);
  border-bottom: 1px solid var(--ink-100);
}
.mobile-nav a:last-child { border-bottom: none; }

/* ========== HERO ========== */
.hero {
  position: relative;
  background: linear-gradient(135deg, var(--brand-light) 0%, #fff 60%, #fff 100%);
  padding: 80px 0 100px;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(200,16,46,0.06) 0%, transparent 70%);
  border-radius: 50%;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}

.hero h1 {
  margin-bottom: 20px;
  letter-spacing: -0.5px;
  font-size: clamp(28px, 4.5vw, 52px);
  line-height: 1.15;
}
.hero h1 .highlight {
  color: var(--brand);
}

.hero-subtitle {
  font-size: clamp(15px, 1.8vw, 18px);
  color: var(--ink-500);
  margin-bottom: 40px;
  line-height: 1.7;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.hero-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

.hero-search {
  max-width: 680px;
  margin: 0 auto;
}

.search-box {
  display: flex;
  background: #fff;
  border: 2px solid var(--ink-300);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.15s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.search-box:focus-within {
  border-color: var(--brand);
  box-shadow: 0 2px 12px rgba(200,16,46,0.15);
}
.search-box input {
  flex: 1;
  padding: 14px 18px;
  border: none;
  outline: none;
  font-size: 15px;
  font-family: inherit;
}
.search-box button {
  padding: 0 28px;
  background: var(--brand);
  color: #fff;
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  transition: background 0.15s;
}
.search-box button:hover { background: var(--brand-dark); }

.hero-trust {
  margin-top: 40px;
  display: flex;
  gap: 32px;
  justify-content: center;
  flex-wrap: wrap;
  color: var(--ink-500);
  font-size: 14px;
}
.hero-trust span { display: flex; align-items: center; gap: 6px; }
.hero-trust .dot { color: var(--brand); }

/* ========== SECTION COMMON ========== */
.section {
  padding: 80px 0;
}
.section-sm { padding: 50px 0; }
.section-bg { background: var(--bg-warm); }

.section-header {
  text-align: center;
  margin-bottom: 56px;
}
.section-header h2 {
  font-size: clamp(24px, 3vw, 36px);
  margin-bottom: 12px;
}
.section-header p {
  color: var(--ink-500);
  max-width: 680px;
  margin: 0 auto;
  font-size: 16px;
}

/* ========== PRODUCT GRID ========== */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}

.product-card {
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
}
.product-card:hover {
  transform: translateY(-2px);
  border-color: var(--ink-300);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.product-card-img {
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, var(--brand-light), #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-300);
  font-size: 13px;
}

.product-card-body {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.product-tag {
  display: inline-block;
  padding: 3px 8px;
  background: var(--brand-light);
  color: var(--brand);
  font-size: 12px;
  border-radius: 3px;
  font-weight: 500;
}
.product-tag.gray {
  background: var(--ink-100);
  color: var(--ink-500);
}

.product-card h3 {
  font-size: 18px;
  margin-bottom: 8px;
  font-weight: 600;
}
.product-card h3 a { color: var(--ink-900); }
.product-card h3 a:hover { color: var(--brand); }

.product-card-desc {
  color: var(--ink-500);
  font-size: 14px;
  margin-bottom: 16px;
  flex: 1;
}

.product-card-actions {
  display: flex;
  gap: 8px;
}
.product-card-actions .btn { flex: 1; }

/* ========== DOCUMENT GRID ========== */
.doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

.doc-card {
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-card);
  padding: 28px 24px;
  transition: all 0.2s;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: block;
}
.doc-card:hover {
  border-color: var(--brand);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(200,16,46,0.08);
  color: inherit;
}
.doc-icon {
  width: 48px;
  height: 48px;
  background: var(--brand-light);
  color: var(--brand);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  font-size: 24px;
  font-weight: 700;
}
.doc-card h3 {
  font-size: 16px;
  margin-bottom: 8px;
}
.doc-card p {
  font-size: 13px;
  color: var(--ink-500);
}

/* ========== BREADCRUMB ========== */
.breadcrumb {
  background: var(--bg-warm);
  padding: 14px 0;
  border-bottom: 1px solid var(--ink-100);
  font-size: 13px;
}
.breadcrumb ol {
  display: flex;
  list-style: none;
  flex-wrap: wrap;
  gap: 6px;
}
.breadcrumb li + li::before {
  content: '/';
  color: var(--ink-300);
  margin-right: 6px;
}
.breadcrumb a { color: var(--ink-500); }
.breadcrumb a:hover { color: var(--brand); }
.breadcrumb .current { color: var(--ink-900); font-weight: 500; }

/* ========== PAGE HEADER ========== */
.page-header {
  background: linear-gradient(135deg, var(--brand-light) 0%, #fff 100%);
  padding: 60px 0;
  text-align: center;
  border-bottom: 1px solid var(--ink-100);
}
.page-header h1 { margin-bottom: 12px; }
.page-header p {
  color: var(--ink-500);
  max-width: 600px;
  margin: 0 auto;
}

/* ========== PRODUCT CATEGORIES ========== */
.category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.category-card {
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-card);
  padding: 28px;
  transition: all 0.2s;
  text-decoration: none;
  color: inherit;
}
.category-card:hover {
  border-color: var(--brand);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(200,16,46,0.08);
  color: inherit;
}
.category-card-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}
.category-icon {
  width: 52px;
  height: 52px;
  background: var(--brand-light);
  color: var(--brand);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  flex-shrink: 0;
}
.category-card h3 {
  font-size: 18px;
  margin: 0;
}
.category-card p {
  color: var(--ink-500);
  font-size: 13px;
  margin-bottom: 14px;
}
.category-products {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.category-product-tag {
  font-size: 12px;
  padding: 3px 8px;
  background: var(--ink-100);
  color: var(--ink-500);
  border-radius: 3px;
}

/* ========== INDUSTRY GRID ========== */
.industry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 28px;
}

.industry-card {
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: all 0.2s;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}
.industry-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.08);
  color: inherit;
}
.industry-img {
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, #F5F0E8, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-300);
  font-size: 40px;
}
.industry-card-body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.industry-card h3 {
  margin-bottom: 10px;
  font-size: 20px;
}
.industry-card p {
  color: var(--ink-500);
  font-size: 14px;
  margin-bottom: 16px;
  flex: 1;
}
.industry-card .arrow {
  color: var(--brand);
  font-weight: 600;
  font-size: 14px;
}

/* ========== SPEC TABLE ========== */
.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.spec-table th,
.spec-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--ink-100);
}
.spec-table th {
  background: var(--bg-warm);
  color: var(--ink-500);
  font-weight: 500;
  width: 35%;
}
.spec-table tr:last-child th,
.spec-table tr:last-child td {
  border-bottom: none;
}

/* ========== PRODUCT DETAIL ========== */
.product-detail {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 48px;
}
.product-detail-gallery {
  aspect-ratio: 1;
  background: linear-gradient(135deg, var(--brand-light), #fff);
  border-radius: var(--radius-card);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-300);
  border: 1px solid var(--ink-100);
}
.product-detail-info h1 {
  font-size: 32px;
  margin-bottom: 8px;
}
.product-detail-cas {
  font-size: 16px;
  color: var(--brand);
  font-weight: 500;
  margin-bottom: 20px;
}
.product-detail-desc {
  color: var(--ink-500);
  margin-bottom: 24px;
  line-height: 1.7;
}

.product-content-section {
  margin-top: 56px;
}
.product-content-section h2 {
  font-size: 24px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--brand);
  display: inline-block;
}

/* ========== FAQ ========== */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item {
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.faq-question {
  padding: 18px 24px;
  cursor: pointer;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  color: var(--ink-900);
  transition: background 0.15s;
}
.faq-question:hover { background: var(--bg-warm); }
.faq-question .toggle { color: var(--brand); font-size: 20px; font-weight: 400; }
.faq-answer {
  padding: 0 24px;
  max-height: 0;
  overflow: hidden;
  transition: all 0.2s ease;
  color: var(--ink-500);
}
.faq-item.open .faq-answer {
  padding: 0 24px 20px;
  max-height: 400px;
}

/* ========== FORM ========== */
.form-group {
  margin-bottom: 20px;
}
.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: var(--ink-700);
  font-size: 14px;
}
.form-group label .required { color: var(--brand); }
.form-control {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--ink-300);
  border-radius: var(--radius-btn);
  font-size: 15px;
  font-family: inherit;
  color: var(--ink-900);
  background: #fff;
  transition: border-color 0.15s;
}
.form-control:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(200,16,46,0.1);
}
textarea.form-control {
  resize: vertical;
  min-height: 100px;
}

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

.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.checkbox-group label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 400;
  margin-bottom: 0;
  cursor: pointer;
}

.form-success {
  padding: 20px;
  background: #E6F7ED;
  color: #0D8A4F;
  border-radius: var(--radius-card);
  text-align: center;
  font-weight: 500;
  margin-bottom: 24px;
}

/* ========== RFQ SIDEBAR STICKY ========== */
.detail-sidebar {
  position: sticky;
  top: 88px;
}
.rfq-card {
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-card);
  padding: 28px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}
.rfq-card h3 {
  margin-bottom: 12px;
  font-size: 20px;
}
.rfq-card p {
  color: var(--ink-500);
  font-size: 14px;
  margin-bottom: 20px;
}
.rfq-card .btn { width: 100%; }

/* ========== FOOTER ========== */
.site-footer {
  background: var(--ink-900);
  color: var(--ink-300);
  padding: 60px 0 0;
  font-size: 14px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.footer-brand h3 {
  color: #fff;
  font-size: 20px;
  margin-bottom: 16px;
}
.footer-brand p {
  color: var(--ink-500);
  line-height: 1.7;
  margin-bottom: 20px;
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--ink-500);
  font-size: 13px;
}
.footer-contact span { display: flex; gap: 8px; }
.footer-contact strong { color: var(--ink-300); font-weight: 500; min-width: 70px; }

.footer-col h4 {
  color: #fff;
  font-size: 16px;
  margin-bottom: 20px;
}
.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-col a {
  color: var(--ink-500);
  text-decoration: none;
  transition: color 0.15s;
}
.footer-col a:hover { color: #fff; }

.footer-bottom {
  padding: 24px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  color: var(--ink-500);
}

/* ========== FLOATING BUTTON ========== */
.floating-wa {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;
  width: 56px;
  height: 56px;
  background: #25D366;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow: 0 4px 20px rgba(37,211,102,0.4);
  text-decoration: none;
  transition: transform 0.15s;
}
.floating-wa:hover { transform: scale(1.1); color: #fff; }

/* ========== TWO COLUMN LAYOUT ========== */
.two-col {
  display: grid;
  grid-template-columns: 1.8fr 1fr;
  gap: 48px;
  align-items: start;
}

/* ========== ABOUT SECTIONS ========== */
.about-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.about-section h2 { margin-bottom: 20px; }
.about-section p {
  color: var(--ink-500);
  line-height: 1.8;
  margin-bottom: 16px;
}
.about-visual {
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, var(--brand-light), #fff);
  border-radius: var(--radius-card);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-300);
  border: 1px solid var(--ink-100);
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
  margin-top: 40px;
}
.stat-item {
  padding: 24px;
  background: #fff;
  border-radius: var(--radius-card);
  border: 1px solid var(--ink-100);
}
.stat-number {
  font-size: 36px;
  font-weight: 700;
  color: var(--brand);
  line-height: 1;
  margin-bottom: 8px;
}
.stat-label {
  font-size: 13px;
  color: var(--ink-500);
}

.timeline {
  position: relative;
  padding-left: 32px;
  border-left: 2px solid var(--ink-100);
}
.timeline-item {
  position: relative;
  padding-bottom: 32px;
}
.timeline-item::before {
  content: '';
  position: absolute;
  left: -41px;
  top: 4px;
  width: 16px;
  height: 16px;
  background: var(--brand);
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--brand);
}
.timeline-year {
  font-size: 18px;
  font-weight: 700;
  color: var(--brand);
  margin-bottom: 4px;
}
.timeline-title {
  font-weight: 600;
  color: var(--ink-900);
  margin-bottom: 6px;
}
.timeline-desc {
  color: var(--ink-500);
  font-size: 14px;
}

/* ========== PROCESS NODES ========== */
.process-list {
  display: grid;
  gap: 16px;
}
.process-item {
  display: flex;
  gap: 20px;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-card);
  transition: all 0.2s;
}
.process-item:hover {
  border-color: var(--brand);
}
.process-num {
  width: 40px;
  height: 40px;
  background: var(--brand-light);
  color: var(--brand);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}
.process-item h4 {
  margin-bottom: 6px;
  font-size: 16px;
}
.process-item p {
  color: var(--ink-500);
  font-size: 13px;
  margin: 0;
}

/* ========== INDUSTRIES STRIP ========== */
.industries-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 40px;
}
.industry-mini {
  text-align: center;
  padding: 24px 16px;
  background: #fff;
  border-radius: var(--radius-card);
  border: 1px solid var(--ink-100);
  text-decoration: none;
  color: var(--ink-700);
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s;
}
.industry-mini:hover {
  border-color: var(--brand);
  color: var(--brand);
  transform: translateY(-2px);
}
.industry-mini .emoji { font-size: 28px; margin-bottom: 8px; display: block; }

/* ========== RESPONSIVE ========== */
@media (max-width: 900px) {
  .category-grid { grid-template-columns: repeat(2, 1fr); }
  .industries-strip { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .product-detail { grid-template-columns: 1fr; gap: 32px; }
  .about-section { grid-template-columns: 1fr; gap: 32px; }
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .two-col { grid-template-columns: 1fr; }
  .form-grid, .form-grid-3 { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .main-nav { display: none; }
  .mobile-menu-btn { display: block; }
  .header-actions .btn { display: none; }
  .hero { padding: 50px 0 60px; }
  .section { padding: 50px 0; }
  .category-grid { grid-template-columns: 1fr; }
  .industries-strip { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .hero-actions .btn { flex: 1; min-width: 140px; }
}

@media (max-width: 480px) {
  .product-grid { grid-template-columns: 1fr; }
  .stats-row { grid-template-columns: 1fr; }
  .industries-strip { grid-template-columns: 1fr; }
}

/* ========== NEW HERO V2 (Next.js style) ========== */
.hero-v2 {
  position: relative;
  overflow: hidden;
  padding: 120px 0 100px;
  background: linear-gradient(135deg, #FDECEF 0%, #ffffff 100%);
}

.hero-v2::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 55%; height: 100%;
  background-image: var(--hero-bg, url(''));
  background-size: cover;
  background-position: center;
  opacity: 0.9;
}

.hero-v2::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, #ffffff 0%, rgba(255,255,255,0.7) 30%, rgba(255,255,255,0) 70%);
  z-index: 1;
}

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

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #FDECEF;
  border: 1px solid rgba(200,16,46,0.2);
  border-radius: 100px;
  font-size: 13px;
  font-weight: 500;
  color: #C8102E;
  margin-bottom: 24px;
}

.hero-badge .dot {
  width: 6px; height: 6px;
  background: #C8102E;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.hero-title {
  font-size: clamp(28px, 4.5vw, 56px);
  font-weight: 700;
  line-height: 1.15;
  color: #1A1A1A;
  margin: 0 0 20px;
  max-width: 900px;
}

.hero-title .highlight {
  color: #C8102E;
  position: relative;
}

.hero-subtitle {
  font-size: clamp(15px, 1.8vw, 18px);
  line-height: 1.7;
  color: #6B6B6B;
  margin: 0 0 32px;
  max-width: 700px;
}

.hero-search-box {
  display: flex;
  align-items: center;
  max-width: 720px;
  height: 56px;
  background: #fff;
  border: 1.5px solid #E8E8E8;
  border-radius: 12px;
  padding: 4px 4px 4px 20px;
  margin-bottom: 28px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.hero-search-box:focus-within {
  border-color: #C8102E;
  box-shadow: 0 4px 20px rgba(200,16,46,0.12);
}

.hero-search-box svg {
  flex-shrink: 0;
  color: #999;
  width: 20px; height: 20px;
}

.hero-search-box input {
  flex: 1;
  border: none;
  outline: none;
  padding: 0 12px;
  font-size: 15px;
  background: transparent;
  color: #1A1A1A;
  height: 100%;
}

.hero-search-box input::placeholder { color: #999; }

.hero-search-box button {
  height: 44px;
  padding: 0 28px;
  background: #C8102E;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

.hero-search-box button:hover {
  background: #A80D25;
}

.hero-quick-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 48px;
  max-width: 700px;
}

.hero-quick-btns .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.15s;
  cursor: pointer;
  border: 1px solid transparent;
}

.hero-quick-btns .btn svg {
  width: 16px; height: 16px;
}

.hero-quick-btns .btn-primary {
  background: #C8102E;
  color: #fff;
}
.hero-quick-btns .btn-primary:hover { background: #A80D25; }

.hero-quick-btns .btn-outline {
  background: #fff;
  color: #3D3D3D;
  border-color: #D9D9D9;
}
.hero-quick-btns .btn-outline:hover {
  border-color: #C8102E;
  color: #C8102E;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  max-width: 650px;
  padding-top: 28px;
  border-top: 1px solid #E8E8E8;
}

.hero-stats .stat {
  padding: 0 16px;
  border-right: 1px solid #E8E8E8;
}
.hero-stats .stat:first-child { padding-left: 0; }
.hero-stats .stat:last-child { border-right: none; padding-right: 0; }

.hero-stats .stat-num {
  font-size: 28px;
  font-weight: 700;
  color: #1A1A1A;
  line-height: 1;
}
.hero-stats .stat-num .accent { color: #C8102E; }
.hero-stats .stat-num .plus {
  color: #C8102E;
  font-weight: 600;
}
.hero-stats .stat-label {
  font-size: 13px;
  color: #6B6B6B;
  margin-top: 8px;
  line-height: 1.4;
}

/* ========== SECTION UPDATES ========== */
.section { padding: 80px 0; }
.section-header { text-align: center; margin-bottom: 48px; }
.section-header .eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  color: #C8102E;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}
.section-header h2 {
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 700;
  color: #1A1A1A;
  margin: 0 0 12px;
  line-height: 1.3;
}
.section-header p {
  font-size: 16px;
  color: #6B6B6B;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

.section-alt {
  background: #FAFAF8;
}

/* ========== PRODUCT CARD V2 ========== */
.product-card {
  background: #fff;
  border: 1px solid #E8E8E8;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.2s ease-out;
  display: flex;
  flex-direction: column;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.08);
  border-color: #C8102E;
}

.product-card-img {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #FAFAF8;
}

.product-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease-out;
}

.product-card:hover .product-card-img img {
  transform: scale(1.05);
}

.product-card-body {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product-card-tag {
  display: inline-block;
  font-size: 12px;
  color: #C8102E;
  background: #FDECEF;
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 12px;
  font-weight: 500;
  width: fit-content;
}

.product-card-title {
  font-size: 18px;
  font-weight: 600;
  color: #1A1A1A;
  margin: 0 0 8px;
  line-height: 1.4;
}

.product-card-apps {
  font-size: 13px;
  color: #6B6B6B;
  margin: 0 0 16px;
  line-height: 1.5;
}

.product-card-footer {
  margin-top: auto;
  display: flex;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid #F0F0F0;
}

.product-card-footer .btn-card {
  flex: 1;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.15s;
  border: 1px solid #E8E8E8;
  color: #3D3D3D;
  background: #fff;
  cursor: pointer;
}

.product-card-footer .btn-card:hover {
  border-color: #C8102E;
  color: #C8102E;
}

.product-card-footer .btn-card.primary {
  background: #C8102E;
  color: #fff;
  border-color: #C8102E;
}

.product-card-footer .btn-card.primary:hover {
  background: #A80D25;
}

/* ========== DOCUMENTS GRID V2 ========== */
.doc-card {
  background: #fff;
  border: 1px solid #E8E8E8;
  border-radius: 8px;
  padding: 24px;
  text-align: center;
  transition: all 0.2s;
  text-decoration: none;
  color: inherit;
  display: block;
}

.doc-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  border-color: #C8102E;
}

.doc-card-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  background: #FDECEF;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #C8102E;
  font-size: 24px;
  font-weight: 700;
  transition: all 0.2s;
}

.doc-card:hover .doc-card-icon {
  background: #C8102E;
  color: #fff;
}

.doc-card h4 {
  font-size: 15px;
  font-weight: 600;
  color: #1A1A1A;
  margin: 0 0 6px;
}

.doc-card p {
  font-size: 12px;
  color: #6B6B6B;
  margin: 0;
  line-height: 1.5;
}

/* ========== CATEGORY GRID V2 ========== */
.cat-card {
  position: relative;
  background: #fff;
  border: 1px solid #E8E8E8;
  border-radius: 8px;
  padding: 24px;
  transition: all 0.2s;
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.cat-card:hover {
  border-color: #C8102E;
  box-shadow: 0 4px 16px rgba(200,16,46,0.08);
}

.cat-card-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: #FDECEF;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #C8102E;
  font-size: 20px;
  font-weight: 700;
  transition: all 0.2s;
}

.cat-card:hover .cat-card-icon {
  background: #C8102E;
  color: #fff;
}

.cat-card-content h4 {
  font-size: 16px;
  font-weight: 600;
  color: #1A1A1A;
  margin: 0 0 6px;
}

.cat-card-content p {
  font-size: 13px;
  color: #6B6B6B;
  margin: 0;
  line-height: 1.5;
}

/* ========== PAGE HERO BANNER ========== */
.page-hero-banner {
  position: relative;
  height: 320px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.page-hero-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--banner-bg, linear-gradient(135deg, #FDECEF, #fff));
  background-size: cover;
  background-position: center;
}

.page-hero-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0.2) 100%);
}

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

.page-hero-banner h1 {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  color: #1A1A1A;
  margin: 0 0 12px;
}

.page-hero-banner .subtitle {
  font-size: 16px;
  color: #6B6B6B;
  max-width: 600px;
  line-height: 1.6;
  margin: 0;
}

/* ========== BREADCRUMB ========== */
.breadcrumb {
  font-size: 13px;
  color: #6B6B6B;
  padding: 16px 0;
  border-bottom: 1px solid #F0F0F0;
}

.breadcrumb a {
  color: #6B6B6B;
  text-decoration: none;
  transition: color 0.15s;
}

.breadcrumb a:hover { color: #C8102E; }
.breadcrumb .sep { margin: 0 8px; color: #C9C9C9; }
.breadcrumb .current { color: #1A1A1A; font-weight: 500; }

/* ========== RESPONSIVE UPDATES ========== */
@media (max-width: 1024px) {
  .hero-v2 { padding: 100px 0 80px; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .hero-stats .stat { border: none; padding: 0; }
}

@media (max-width: 768px) {
  .hero-v2 { padding: 80px 0 60px; }
  .hero-v2::before { width: 100%; opacity: 0.15; }
  .hero-v2::after { display: none; }
  .hero-quick-btns .btn { flex: 1; min-width: calc(50% - 6px); justify-content: center; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .section { padding: 50px 0; }
  .page-hero-banner { height: 220px; }
}

@media (max-width: 480px) {
  .hero-stats { grid-template-columns: 1fr 1fr; }
  .hero-stats .stat-num { font-size: 22px; }
  .hero-quick-btns .btn { padding: 8px 12px; font-size: 13px; }
}

/* Logo only image mode */
.logo-image-only {
    height: 44px;
    width: auto;
    display: block;
}

@media (max-width: 768px) {
    .logo-image-only {
        height: 36px;
    }
}

/* ============================================
   V2 HOME PAGE STYLES (Tailwind-like utilities + components)
   ============================================ */

/* Utility classes */
.relative { position: relative; }
.absolute { position: absolute; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.overflow-hidden { overflow: hidden; }
.h-full { height: 100%; }
.w-full { width: 100%; }
.object-cover { object-fit: cover; }
.opacity-0\.03,
.opacity-\[0\.03\] { opacity: 0.03; }
.flex-shrink-0 { flex-shrink: 0; }
.h-4 { height: 16px; }
.h-5 { height: 20px; }
.w-4 { width: 16px; }
.w-5 { width: 20px; }
.ml-2 { margin-left: 8px; }
.mt-0\.5 { margin-top: 2px; }
.bg-white { background-color: #ffffff; }
.bg-gray-50 { background-color: #f9fafb; }
.text-brand { color: var(--brand); }

/* Button styles */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 4px;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.btn-primary {
  background-color: var(--brand);
  color: white;
  border-color: var(--brand);
}
.btn-primary:hover {
  background-color: var(--brand-dark);
  border-color: var(--brand-dark);
  color: white;
}
.btn-primary-outline {
  background-color: transparent;
  color: var(--brand);
  border-color: var(--brand);
}
.btn-primary-outline:hover {
  background-color: var(--brand);
  color: white;
}
.btn-outline {
  background-color: transparent;
  color: var(--ink-700);
  border-color: var(--ink-300);
}
.btn-outline:hover {
  border-color: var(--brand);
  color: var(--brand);
}
.btn-ghost {
  background-color: transparent;
  color: var(--ink-700);
  border-color: transparent;
}
.btn-ghost:hover {
  color: var(--brand);
  background-color: var(--brand-light);
}
.btn-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--brand);
  cursor: pointer;
  font-size: inherit;
}
.btn-link:hover { text-decoration: underline; }
.btn-lg {
  padding: 14px 28px;
  font-size: 15px;
}
.btn-sm {
  padding: 6px 14px;
  font-size: 13px;
}

/* Hero Section V2 */
.hero-section.hero-v2 {
  min-height: 540px;
  display: flex;
  align-items: center;
  padding: 100px 0 80px;
  background-color: #fafafa;
}
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
}
.hero-overlay {
  background: linear-gradient(90deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.7) 45%, rgba(255,255,255,0.2) 100%);
}
.hero-blobs { pointer-events: none; }
.blob {
  position: absolute;
  border-radius: 50%;
  background: var(--brand);
  filter: blur(60px);
}
.blob-1 {
  width: 400px;
  height: 400px;
  top: -100px;
  right: 10%;
}
.blob-2 {
  width: 300px;
  height: 300px;
  bottom: -80px;
  right: 30%;
}

.hero-content-v2 {
  max-width: 620px;
  position: relative;
  z-index: 2;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: white;
  border-radius: 999px;
  font-size: 13px;
  color: var(--ink-700);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  margin-bottom: 24px;
  border: 1px solid var(--ink-100);
}
.hero-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-light);
}
.hero-title {
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink-900);
  margin: 0 0 20px;
  letter-spacing: -0.5px;
}
.hero-title .text-brand {
  background: linear-gradient(135deg, var(--brand) 0%, #E83A54 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-subtitle {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-500);
  margin: 0 0 32px;
  max-width: 560px;
}

/* Hero Search */
.hero-search {
  display: flex;
  align-items: center;
  background: white;
  border: 2px solid var(--ink-200);
  border-radius: 8px;
  padding: 4px;
  max-width: 560px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  transition: border-color 0.2s;
}
.hero-search:focus-within {
  border-color: var(--brand);
  box-shadow: 0 4px 24px rgba(200,16,46,0.12);
}
.hero-search-input {
  flex: 1;
  padding: 12px 16px;
  border: none;
  outline: none;
  font-size: 15px;
  color: var(--ink-900);
  background: transparent;
}
.hero-search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 24px;
  background: var(--brand);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.hero-search-btn:hover {
  background: var(--brand-dark);
}

/* Hero CTAs */
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* Hero Stats */
.hero-stats {
  display: flex;
  gap: 36px;
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--ink-100);
  max-width: 520px;
}
.hero-stats .stat-item {
  text-align: left;
}
.hero-stats .stat-number {
  font-size: 28px;
  font-weight: 700;
  color: var(--brand);
  line-height: 1;
  margin-bottom: 6px;
}
.hero-stats .stat-label {
  font-size: 13px;
  color: var(--ink-500);
}

/* Hero Image Grid */
.hero-image-grid {
  display: none;
}

/* Popular Products section */
.products-section {
  padding: 80px 0;
  background-color: white;
}
.section-header {
  text-align: center;
  margin-bottom: 48px;
}
.section-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--brand);
  margin-bottom: 12px;
}
.section-title {
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  color: var(--ink-900);
  margin: 0 0 12px;
}
.section-subtitle {
  font-size: 16px;
  color: var(--ink-500);
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.6;
}
.view-all-link {
  text-align: center;
  margin-top: 40px;
}
.view-all-link a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
}
.view-all-link a:hover {
  text-decoration: underline;
}

/* Product Cards Grid */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}
.product-card {
  background: white;
  border: 1px solid var(--ink-100);
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
}
.product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  border-color: var(--ink-300);
}
.product-card-image {
  width: 100%;
  height: 220px;
  background: var(--ink-50);
  overflow: hidden;
}
.product-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.product-card:hover .product-card-image img {
  transform: scale(1.05);
}
.product-card-body {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.product-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.product-card-cas {
  font-size: 12px;
  color: var(--brand);
  background: var(--brand-light);
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 500;
  font-family: monospace;
}
.product-card-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink-900);
  margin: 0 0 8px;
  line-height: 1.4;
}
.product-card-desc {
  font-size: 13px;
  color: var(--ink-500);
  line-height: 1.5;
  margin: 0 0 12px;
  flex: 1;
}
.product-card-apps {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 14px;
}
.app-tag {
  font-size: 11px;
  color: var(--ink-500);
  background: var(--ink-50);
  padding: 3px 8px;
  border-radius: 3px;
}
.product-card-actions {
  display: flex;
  gap: 8px;
}
.product-card-actions .btn {
  flex: 1;
  padding: 8px 12px;
  font-size: 13px;
}

/* Docs Section */
.docs-section {
  padding: 80px 0;
  background-color: var(--bg-warm);
}
.docs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}
.doc-card {
  background: white;
  border: 1px solid var(--ink-100);
  border-radius: 8px;
  padding: 28px 24px;
  transition: all 0.2s ease;
  text-decoration: none;
  color: inherit;
  display: block;
}
.doc-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  border-color: var(--brand);
}
.doc-icon {
  width: 48px;
  height: 48px;
  background: var(--brand-light);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
  margin-bottom: 16px;
}
.doc-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-900);
  margin: 0 0 6px;
}
.doc-desc {
  font-size: 13px;
  color: var(--ink-500);
  line-height: 1.5;
  margin: 0;
}
.docs-notice {
  text-align: center;
  margin-top: 32px;
  padding: 16px 20px;
  background: white;
  border-radius: 8px;
  border: 1px dashed var(--ink-300);
  font-size: 13px;
  color: var(--ink-500);
}

/* Page Banner */
.page-banner {
  padding: 100px 0 60px;
  background-size: cover;
  background-position: center;
  position: relative;
}
.page-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.8) 100%);
}
.page-banner .container {
  position: relative;
  z-index: 1;
}
.breadcrumbs {
  font-size: 13px;
  color: var(--ink-500);
  margin-bottom: 16px;
}
.breadcrumbs a {
  color: var(--ink-500);
  text-decoration: none;
}
.breadcrumbs a:hover {
  color: var(--brand);
}
.breadcrumbs .sep {
  margin: 0 8px;
  color: var(--ink-300);
}
.page-banner h1 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  color: var(--ink-900);
  margin: 0 0 12px;
}
.page-banner p {
  font-size: 16px;
  color: var(--ink-500);
  max-width: 640px;
  line-height: 1.6;
  margin: 0;
}


/* ============================================
   V3 HEADER & HOME PAGE REDESIGN (align with Next.js version)
   ============================================ */

/* CSS Variables for easy reference */
:root {
  --brand: #C8102E;
  --brand-dark: #A00D25;
  --brand-light: #FDECEF;
  --ink-900: #1A1A1A;
  --ink-700: #3D3D3D;
  --ink-500: #6B6B6B;
  --ink-300: #C9C9C9;
  --ink-200: #E5E5E5;
  --ink-100: #F2F2F2;
  --ink-50: #F9FAFB;
  --bg: #FFFFFF;
  --bg-warm: #FAFAF8;
}

/* ===== Site Header V2 (with top bar + search) ===== */
.site-header-v2 {
  position: sticky;
  top: 0;
  z-index: 50;
  background: white;
  transition: box-shadow 0.2s;
}

/* Top bar */
.top-bar {
  border-bottom: 1px solid var(--ink-100);
  background: rgba(249, 250, 251, 0.5);
  font-size: 13px;
}
.top-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 36px;
}
.top-bar-left {
  display: flex;
  align-items: center;
  gap: 24px;
  color: var(--ink-500);
}
.top-bar-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.top-bar-icon { font-size: 12px; }

.top-bar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}
.top-bar-hide-mobile { display: flex; }

@media (max-width: 768px) {
  .top-bar-hide-mobile { display: none; }
}

/* Language switcher in top bar */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 2px;
}
.lang-switcher button {
  padding: 2px 8px;
  border: none;
  background: transparent;
  font-size: 13px;
  color: var(--ink-500);
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.15s;
  font-weight: 500;
}
.lang-switcher button:hover { color: var(--brand); }
.lang-switcher button.active {
  color: var(--brand);
  background: var(--brand-light);
}

/* Main nav bar */
.main-nav-bar {
  border-bottom: 1px solid transparent;
}
.main-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

/* Logo V2 (with text) */
.site-logo-v2 {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
}
.logo-mark-v2 {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 6px;
}
.logo-mark-v2:not(img) {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand);
  color: white;
  font-weight: bold;
  font-size: 14px;
}
.logo-text-v2 {
  line-height: 1.2;
}
.logo-name-v2 {
  font-weight: 700;
  font-size: 15px;
  color: var(--ink-900);
}
.logo-slogan-v2 {
  font-size: 11px;
  color: var(--ink-500);
  margin-top: 2px;
}

@media (max-width: 1024px) {
  .logo-slogan-v2 { display: none; }
}

/* Desktop nav */
.main-nav-desktop {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-item-v2 {
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-700);
  text-decoration: none;
  border-radius: 6px;
  transition: color 0.15s;
}
.nav-item-v2:hover { color: var(--brand); }
.nav-item-v2.active { color: var(--brand); }

@media (max-width: 1024px) {
  .main-nav-desktop { display: none; }
}

/* Nav actions */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Nav search */
.nav-search {
  position: relative;
  width: 250px;
}
.nav-search-form {
  position: relative;
  display: flex;
  align-items: center;
}
.nav-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--ink-500);
  pointer-events: none;
}
.nav-search-input {
  width: 100%;
  height: 36px;
  padding: 0 100px 0 34px;
  border: 1px solid var(--ink-200);
  border-radius: 6px;
  background: var(--ink-50);
  font-size: 13px;
  color: var(--ink-900);
  outline: none;
  transition: all 0.15s;
}
.nav-search-input:focus {
  background: white;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.1);
}

@media (max-width: 768px) {
  .nav-search { display: none; }
}

.nav-rfq-btn {
  display: inline-flex;
}

@media (max-width: 640px) {
  .nav-rfq-btn { display: none; }
}

/* Mobile menu toggle */
.mobile-menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
  position: relative;
}
@media (max-width: 1024px) {
  .mobile-menu-toggle { display: flex; }
}

.hamburger {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink-700);
  position: relative;
  margin: auto;
  transition: all 0.2s;
}
.hamburger::before,
.hamburger::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--ink-700);
  transition: all 0.2s;
}
.hamburger::before { top: -7px; }
.hamburger::after { top: 7px; }
.mobile-menu-toggle.open .hamburger { background: transparent; }
.mobile-menu-toggle.open .hamburger::before {
  top: 0;
  transform: rotate(45deg);
}
.mobile-menu-toggle.open .hamburger::after {
  top: 0;
  transform: rotate(-45deg);
}

/* Mobile nav panel */
.mobile-nav-panel {
  display: none;
  border-top: 1px solid var(--ink-100);
  background: white;
}
.mobile-nav-panel.open {
  display: block;
}
.mobile-search-form {
  position: relative;
  margin: 16px 0;
}
.mobile-search-form input {
  width: 100%;
  height: 40px;
  padding: 0 12px 0 36px;
  border: 1px solid var(--ink-200);
  border-radius: 6px;
  background: var(--ink-50);
  font-size: 14px;
  outline: none;
}
.mobile-nav-list {
  display: flex;
  flex-direction: column;
}
.mobile-nav-list a {
  padding: 14px 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-700);
  text-decoration: none;
  border-bottom: 1px solid var(--ink-100);
}
.mobile-nav-list a:hover { color: var(--brand); }
.mobile-rfq-btn {
  display: block;
  margin: 20px 0 24px;
  padding: 12px;
  text-align: center;
  background: var(--brand);
  color: white !important;
  font-weight: 600;
  text-decoration: none;
  border-radius: 6px;
}
.mobile-rfq-btn:hover { background: var(--brand-dark); }

/* ===== Hero Section V3 (align with Next.js) ===== */
.hero-section.hero-v3 {
  min-height: 600px;
  padding: 100px 0 80px;
  display: flex;
  align-items: center;
  position: relative;
}
.hero-gradient {
  background: linear-gradient(90deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.8) 45%, rgba(255,255,255,0.4) 100%);
}
.hero-pattern-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
}
.blob-red {
  width: 600px;
  height: 600px;
  top: -200px;
  left: -200px;
  background: var(--brand);
  opacity: 0.04;
}
.blob-gray {
  width: 500px;
  height: 500px;
  bottom: -150px;
  right: -150px;
  background: #9CA3AF;
  opacity: 0.04;
}

.hero-content-v3 {
  max-width: 880px;
  position: relative;
  z-index: 2;
}
.hero-badge-v3 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: white;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-500);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  margin-bottom: 24px;
  border: 1px solid var(--ink-100);
}
.hero-badge-dot-v3 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22C55E;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.hero-title-v3 {
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink-900);
  margin: 0 0 20px;
  letter-spacing: -0.5px;
}
.hero-subtitle-v3 {
  font-size: clamp(15px, 2vw, 18px);
  line-height: 1.7;
  color: var(--ink-500);
  margin: 0 0 36px;
  max-width: 640px;
}

/* Hero search V3 */
.hero-search-v3 {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 680px;
  margin-bottom: 36px;
}
.hero-search-icon-v3 {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--ink-500);
  pointer-events: none;
  z-index: 1;
}
.hero-search-input-v3 {
  flex: 1;
  height: 52px;
  padding: 0 120px 0 48px;
  border: 1px solid var(--ink-200);
  border-radius: 8px;
  background: white;
  font-size: 15px;
  color: var(--ink-900);
  outline: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
  transition: all 0.15s;
}
.hero-search-input-v3:focus {
  border-color: var(--brand);
  box-shadow: 0 4px 20px rgba(200, 16, 46, 0.1);
}
.hero-search-btn-v3 {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  height: 40px;
  padding: 0 20px;
  background: var(--brand);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.hero-search-btn-v3:hover { background: var(--brand-dark); }

/* Hero CTAs V3 */
.hero-ctas-v3 {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 36px;
}

/* Hero stats V3 */
.hero-stats-v3 {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}
.stat-item-v3 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.stat-number-v3 {
  font-size: 28px;
  font-weight: 700;
  color: var(--brand);
  line-height: 1;
}
.stat-label-v3 {
  font-size: 14px;
  color: var(--ink-500);
}

@media (max-width: 640px) {
  .hero-section.hero-v3 { padding: 80px 0 60px; min-height: auto; }
  .hero-stats-v3 { gap: 20px; }
  .stat-number-v3 { font-size: 24px; }
}

/* ===== Generic Section Styles ===== */
.home-section {
  padding: 80px 0;
}
.section-alt { background: var(--bg-warm); }

.section-heading {
  text-align: center;
  margin-bottom: 48px;
}
.section-title-v2 {
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  color: var(--ink-900);
  margin: 0 0 12px;
}
.section-subtitle-v2 {
  font-size: 15px;
  color: var(--ink-500);
  margin: 0 auto;
  max-width: 640px;
  line-height: 1.6;
}
.section-eyebrow-v2 {
  font-size: 13px;
  font-weight: 600;
  color: var(--brand);
  margin: 0 0 8px;
}
.section-note-v2 {
  font-size: 14px;
  color: var(--ink-500);
  max-width: 720px;
  margin: 8px auto 0;
  line-height: 1.6;
}
.section-cta {
  text-align: center;
  margin-top: 48px;
}

/* ===== Hot Products Grid V2 (Next.js style) ===== */
.hot-products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 20px;
}
@media (min-width: 768px) {
  .hot-products-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .hot-products-grid { grid-template-columns: repeat(4, 1fr); }
}

.hp-card {
  display: block;
  background: white;
  border: 1px solid var(--ink-200);
  border-radius: 6px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease;
}
.hp-card:hover {
  border-color: var(--ink-300);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  transform: translateY(-1px);
}
.hp-card-img {
  width: 100%;
  aspect-ratio: 4/3;
  background: var(--ink-100);
  overflow: hidden;
}
.hp-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.hp-card:hover .hp-card-img img { transform: scale(1.05); }

.hp-card-body {
  padding: 14px 16px;
}
.hp-card-cas {
  font-size: 11px;
  color: var(--ink-500);
  font-family: monospace;
  margin-bottom: 6px;
}
.hp-card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-900);
  margin: 0 0 6px;
  line-height: 1.4;
  min-height: 2.8em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.15s;
}
.hp-card:hover .hp-card-title { color: var(--brand); }
.hp-card-grade {
  font-size: 12px;
  color: var(--ink-500);
  margin-bottom: 12px;
}
.hp-card-apps {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 12px;
}
.hp-app-tag {
  font-size: 11px;
  padding: 2px 8px;
  background: var(--ink-100);
  color: var(--ink-500);
  border-radius: 3px;
}
.hp-card-action {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--brand);
  text-decoration: none;
  transition: gap 0.2s;
}
.hp-card:hover .hp-card-action { gap: 8px; }
.hp-card-imglink { display: block; text-decoration: none; }
.hp-card-btns {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-top: 12px;
}
.hp-wa-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: #C8102E;
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 10px;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.2s ease-out, transform 0.2s ease-out;
}
.hp-wa-btn:hover {
  background: #A80D25;
  color: #ffffff;
  transform: translateY(-1px);
}

/* ===== Product Categories Grid ===== */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 16px;
}
@media (min-width: 768px) {
  .cat-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}

.cat-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  background: white;
  border: 1px solid var(--ink-200);
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease;
}
.cat-card:hover {
  border-color: rgba(200, 16, 46, 0.3);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.cat-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 6px;
  background: var(--brand-light);
  color: var(--brand);
  font-weight: 700;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.cat-card:hover .cat-icon {
  background: var(--brand);
  color: white;
}
.cat-info { flex: 1; min-width: 0; }
.cat-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-900);
  margin: 0 0 4px;
  transition: color 0.15s;
}
.cat-card:hover .cat-name { color: var(--brand); }
.cat-desc {
  font-size: 12px;
  color: var(--ink-500);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== Documents Grid V2 (icon-only circle cards) ===== */
.docs-grid-v2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 16px;
}
@media (min-width: 640px) {
  .docs-grid-v2 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .docs-grid-v2 { grid-template-columns: repeat(5, 1fr); }
}
@media (min-width: 1280px) {
  .docs-grid-v2 { grid-template-columns: repeat(6, 1fr); }
}

.doc-card-v2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 16px;
  background: white;
  border: 1px solid var(--ink-200);
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  text-align: center;
  transition: all 0.2s ease;
}
.doc-card-v2:hover {
  border-color: rgba(200, 16, 46, 0.3);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.doc-icon-v2 {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--ink-50);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--ink-500);
  transition: all 0.2s;
}
.doc-card-v2:hover .doc-icon-v2 {
  background: var(--brand-light);
  color: var(--brand);
}
.doc-label-v2 {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-700);
  line-height: 1.4;
  transition: color 0.15s;
}
.doc-card-v2:hover .doc-label-v2 { color: var(--brand); }

/* ===== Industries Grid (bottom of home page) ===== */
.industry-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 16px;
}
@media (min-width: 768px) {
  .industry-grid { grid-template-columns: repeat(5, 1fr); gap: 16px; }
}

.industry-card {
  position: relative;
  display: block;
  aspect-ratio: 3/4;
  overflow: hidden;
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  background: var(--ink-200);
}
@media (min-width: 768px) {
  .industry-card { aspect-ratio: 4/5; }
}

.industry-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7;
  transition: all 0.3s ease;
}
.industry-card:hover .industry-card-img {
  opacity: 0.5;
  transform: scale(1.05);
}
.industry-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 50%, transparent 100%);
}
.industry-card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
}
.industry-card-title {
  font-size: 15px;
  font-weight: 600;
  color: white;
  margin: 0 0 6px;
  line-height: 1.4;
}
.industry-card-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  transition: all 0.2s;
}
.industry-card:hover .industry-card-more {
  color: white;
  gap: 8px;
}

/* Utility classes (additional) */
.z-10 { z-index: 10; }
.aspect-\[4\/3\] { aspect-ratio: 4/3; }
.aspect-\[3\/4\] { aspect-ratio: 3/4; }
.aspect-\[4\/5\] { aspect-ratio: 4/5; }


/* ===== CTA Band (bottom of home page) ===== */
.home-cta-band {
  background: var(--brand);
  color: white;
  padding: 48px 0;
}
.cta-band-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
@media (min-width: 768px) {
  .cta-band-inner {
    flex-direction: row;
    align-items: center;
  }
}
.cta-band-text h2 {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 8px;
  color: white;
}
@media (min-width: 768px) {
  .cta-band-text h2 { font-size: 26px; }
}
.cta-band-text p {
  font-size: 14px;
  color: rgba(255,255,255,0.8);
  margin: 0;
}
@media (min-width: 768px) {
  .cta-band-text p { font-size: 15px; }
}
.cta-band-actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}
.btn-cta-primary {
  background: white;
  color: var(--brand);
  border: 1px solid white;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.15s;
}
.btn-cta-primary:hover {
  background: #f5f5f5;
  color: var(--brand-dark);
}
.btn-cta-outline {
  background: transparent;
  color: white;
  border: 1px solid rgba(255,255,255,0.5);
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.15s;
}
.btn-cta-outline:hover {
  background: rgba(255,255,255,0.1);
  border-color: white;
  color: white;
}

/* Logo image style */
.site-logo-img {
  gap: 0;
}
.logo-image {
  height: 42px;
  width: auto;
  max-width: 220px;
  display: block;
  object-fit: contain;
}
@media (max-width: 640px) {
  .logo-image { height: 36px; max-width: 190px; }
}

/* Fix: SVG arrow icon size */
.hp-card-action svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}
.section-cta svg,
.view-all-link svg,
.cat-card svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.hero-search-icon-v3 svg,
.nav-search-icon svg {
  width: 16px;
  height: 16px;
}

/* Additional SVG icon utility sizes */
.w-3 { width: 12px; }
.h-3 { height: 12px; }
.w-4 { width: 16px; }
.h-4 { height: 16px; }
.w-5 { width: 20px; }
.h-5 { height: 20px; }
.ml-2 { margin-left: 8px; }

/* Hot product card action alignment - align to bottom right */
.hp-card-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
}
.hp-card-action {
  margin-top: auto;
  padding-top: 8px;
}

/* Image fallback for products without thumbnails */
.hp-card-img img[src=""],
.hp-card-img img:not([src]) {
  display: none;
}

/* ===== Nav search submit button ===== */
.nav-search-submit {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border: none;
  background: var(--brand);
  color: white;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  flex-shrink: 0;
}
.nav-search-submit:hover {
  background: var(--brand-dark);
}
.nav-search-submit svg {
  width: 14px;
  height: 14px;
}

/* Hero search icon SVG size fix */
.hero-search-icon-v3 svg {
  width: 20px;
  height: 20px;
}

/* Ensure all inline SVGs inherit color properly */
svg {
  flex-shrink: 0;
}

/* ===== Ensure search input has proper padding for button ===== */
.nav-search-input {
  padding-right: 38px !important;
}

/* Logo 增大尺寸
.logo-image {
  height: 56px !important;
}
@media (max-width: 640px) {
  .logo-image { height: 44px !important; }
}

/* Logo 尺寸调整 (桌面70px / 移动56px) */
.site-logo-v2 .logo-image {
  height: 70px !important;
}
@media (max-width: 640px) {
  .site-logo-v2 .logo-image {
    height: 56px !important;
  }
}

/* 同步调整导航栏高度适应更大的logo */
.main-nav-inner {
  height: 88px !important;
}
@media (max-width: 640px) {
  .main-nav-inner {
    height: 72px !important;
  }
}

/* ===== Nav search redesign (single complete button) ===== */
.nav-search {
  position: relative;
  width: 240px;
}
.nav-search-form {
  display: flex;
  align-items: center;
  height: 40px;
  border: 1px solid var(--ink-200);
  border-radius: 6px;
  background: var(--ink-50);
  overflow: hidden;
  transition: all 0.15s;
}
.nav-search-form:focus-within {
  background: white;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.1);
}
.nav-search-input {
  flex: 1;
  height: 100%;
  padding: 0 10px 0 14px !important;
  border: none !important;
  background: transparent !important;
  font-size: 13px;
  color: var(--ink-900);
  outline: none;
  min-width: 0;
}
.nav-search-submit {
  position: static;
  transform: none;
  width: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  margin-right: 5px;
  padding: 0 12px;
  white-space: nowrap;
  background: var(--brand);
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  transition: background 0.15s;
  flex-shrink: 0;
}
.nav-search-submit:hover {
  background: var(--brand-dark);
}
.nav-search-submit svg {
  width: 13px !important;
  height: 13px !important;
  display: block;
}
.nav-search-btn-text {
  display: inline;
}
@media (max-width: 1200px) {
  .nav-search-btn-text { display: none; }
  .nav-search-submit { padding: 0 9px; }
  .nav-search-input { padding-right: 48px; }
  .nav-search { width: 200px; }
}

/* Mobile search icon size fix */
.mobile-search-form .nav-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px !important;
  height: 16px !important;
  color: var(--ink-500);
  pointer-events: none;
}
.mobile-search-form {
  position: relative;
}
.mobile-search-form input {
  padding-left: 38px !important;
}

/* 旧装饰图标类兜底（防止其他地方残留未定义尺寸的 svg） */
.nav-search-icon {
  width: 16px;
  height: 16px;
}

/* ============================================
   产品中心页（/products/）— 与静态版设计一致
   ============================================ */
.pc-hero {
  position: relative;
  background-size: cover;
  background-position: center;
  padding: 88px 20px 72px;
}
.pc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.82) 55%, rgba(255,255,255,0.45) 100%);
}
.pc-hero-inner {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.pc-hero-title {
  font-size: 34px;
  font-weight: 700;
  color: #1A1A1A;
  margin: 0 0 12px;
  letter-spacing: 0.5px;
}
.pc-hero-sub {
  font-size: 16px;
  color: #6B6B6B;
  margin: 0 0 28px;
}
.pc-search {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 560px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #C9C9C9;
  border-radius: 8px;
  height: 50px;
  padding: 0 16px;
  transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
}
.pc-search:focus-within {
  border-color: #C8102E;
  box-shadow: 0 0 0 3px rgba(200,16,46,0.08);
}
.pc-search-icon {
  flex: none;
  color: #9A9A9A;
  margin-right: 10px;
}
.pc-search input[type="search"] {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 15px;
  color: #1A1A1A;
  height: 100%;
}
.pc-search input[type="search"]::placeholder { color: #9A9A9A; }
.pc-search-count {
  margin-top: 14px;
  font-size: 13px;
  color: #6B6B6B;
}

/* Tabs */
.pc-main { padding: 48px 20px 72px; }
.pc-tabs {
  display: flex;
  justify-content: center;
  gap: 4px;
  background: #F2F2F2;
  border-radius: 8px;
  padding: 4px;
  width: fit-content;
  margin: 0 auto 48px;
}
.pc-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: transparent;
  color: #6B6B6B;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 22px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.18s ease-out, color 0.18s ease-out, box-shadow 0.18s ease-out;
}
.pc-tab-btn:hover { color: #1A1A1A; }
.pc-tab-btn.active {
  background: #fff;
  color: #1A1A1A;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.pc-tab-btn.active svg { color: #C8102E; }
.pc-tab-panel { display: none; }
.pc-tab-panel.active { display: block; }

/* 分区 */
.pc-section { margin-bottom: 56px; }
.pc-section-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 22px;
}
.pc-section-icon {
  flex: none;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #C8102E;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  border-radius: 10px;
}
.pc-section-icon-soft {
  background: #FDECEF;
  color: #C8102E;
}
.pc-section-title {
  font-size: 22px;
  font-weight: 700;
  color: #1A1A1A;
  margin: 0 0 4px;
  line-height: 1.3;
}
.pc-section-desc {
  font-size: 14px;
  color: #6B6B6B;
  margin: 0;
}

/* 产品网格 */
.pc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 1024px) {
  .pc-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .pc-grid { grid-template-columns: repeat(2, 1fr); }
  .pc-hero { padding: 56px 20px 48px; }
  .pc-hero-title { font-size: 26px; }
  .pc-section-title { font-size: 19px; }
}

/* 无结果 */
.pc-empty {
  text-align: center;
  padding: 64px 20px;
  color: #6B6B6B;
}
.pc-empty-icon { font-size: 40px; margin-bottom: 12px; }
.pc-empty-title { font-size: 16px; margin: 0 0 16px; }
.pc-empty-link {
  color: #C8102E;
  font-size: 14px;
  text-decoration: none;
  font-weight: 500;
}
.pc-empty-link:hover { text-decoration: underline; }

/* 底部 CTA */
.pc-cta {
  margin-top: 24px;
  background: #FAFAF8;
  border: 1px solid #ECECEA;
  border-radius: 8px;
  text-align: center;
  padding: 44px 24px;
}
.pc-cta-title {
  font-size: 22px;
  font-weight: 700;
  color: #1A1A1A;
  margin: 0 0 8px;
}
.pc-cta-sub {
  font-size: 14px;
  color: #6B6B6B;
  margin: 0 0 22px;
}
.pc-cta-btn {
  display: inline-block;
  background: #C8102E;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  padding: 12px 32px;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.18s ease-out;
}
.pc-cta-btn:hover { background: #A00D25; }

/* ============================================
   资讯中心页（/insights/）— 与静态版设计一致
   ============================================ */
.in-hero {
  position: relative;
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid #F2F2F2;
  padding: 72px 20px;
}
.in-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.8) 55%, rgba(255,255,255,0.5) 100%);
}
.in-hero-inner {
  position: relative;
}
.in-hero-title {
  font-size: 32px;
  font-weight: 700;
  color: #1A1A1A;
  margin: 0 0 12px;
}
.in-hero-sub {
  font-size: 16px;
  color: #6B6B6B;
  margin: 0;
  max-width: 640px;
}
.in-main { padding: 56px 20px 72px; }
.in-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 1024px) {
  .in-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .in-grid { grid-template-columns: 1fr; }
  .in-hero { padding: 52px 20px; }
  .in-hero-title { font-size: 26px; }
}

/* 文章卡片 */
.in-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #ECECEA;
  border-radius: 6px;
  overflow: hidden;
  text-decoration: none;
  transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out, transform 0.2s ease-out;
}
.in-card:hover {
  border-color: #C9C9C9;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}
.in-card-img {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #F2F2F2, #E4E4E4);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.in-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.in-card-img-ph {
  color: #B5B5B5;
  font-size: 13px;
}
.in-card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.in-card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.in-card-cat {
  font-size: 11px;
  padding: 2px 8px;
  background: #FDECEF;
  color: #C8102E;
  border-radius: 3px;
  font-weight: 500;
}
.in-card-date {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #9A9A9A;
}
.in-icon { flex: none; }
.in-card-title {
  font-size: 17px;
  font-weight: 600;
  color: #1A1A1A;
  line-height: 1.45;
  margin: 0 0 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.9em;
  transition: color 0.2s ease-out;
}
.in-card:hover .in-card-title { color: #C8102E; }
.in-card-excerpt {
  font-size: 14px;
  color: #6B6B6B;
  line-height: 1.7;
  margin: 0 0 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}
.in-card-more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 500;
  color: #C8102E;
}
.in-card:hover .in-card-more svg { transform: translateX(2px); }
.in-card-more svg { transition: transform 0.2s ease-out; }
.in-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: #6B6B6B;
  padding: 48px 0;
}

/* CTA */
.in-cta {
  background: #FAFAF8;
  border-top: 1px solid #F2F2F2;
  padding: 64px 20px;
}
.in-cta-inner {
  text-align: center;
}
.in-cta-title {
  font-size: 22px;
  font-weight: 700;
  color: #1A1A1A;
  margin: 0 0 10px;
}
.in-cta-sub {
  font-size: 14px;
  color: #6B6B6B;
  margin: 0 0 24px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.in-cta-btn {
  display: inline-block;
  background: #C8102E;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  padding: 13px 34px;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.18s ease-out;
}
.in-cta-btn:hover { background: #A00D25; }

/* ============================================
   联系我们页（/contact/）— 与静态版设计一致
   ============================================ */
.ct-hero {
  position: relative;
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid #F2F2F2;
  padding: 72px 20px;
}
.ct-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.82) 55%, rgba(255,255,255,0.5) 100%);
}
.ct-hero-inner { position: relative; }
.ct-hero-title {
  font-size: 32px;
  font-weight: 700;
  color: #1A1A1A;
  margin: 0 0 12px;
}
.ct-hero-sub {
  font-size: 16px;
  color: #6B6B6B;
  margin: 0;
}
.ct-main { padding: 56px 20px 72px; }
.ct-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 900px) {
  .ct-grid { grid-template-columns: 1fr; gap: 40px; }
  .ct-hero { padding: 52px 20px; }
  .ct-hero-title { font-size: 26px; }
}
.ct-col-title {
  font-size: 22px;
  font-weight: 700;
  color: #1A1A1A;
  margin: 0 0 24px;
}

/* 联系卡片 */
.ct-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ct-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid #ECECEA;
  border-radius: 6px;
  text-decoration: none;
  transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
}
.ct-card:hover {
  border-color: #C9C9C9;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.ct-card-icon {
  flex: none;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FDECEF;
  color: #C8102E;
  border-radius: 6px;
  transition: background 0.2s ease-out, color 0.2s ease-out;
}
.ct-card:hover .ct-card-icon {
  background: #C8102E;
  color: #fff;
}
.ct-card-label {
  display: block;
  font-size: 13px;
  color: #6B6B6B;
  margin-bottom: 3px;
}
.ct-card-value {
  display: block;
  font-size: 15px;
  font-weight: 500;
  color: #1A1A1A;
  line-height: 1.5;
}
.ct-card:hover .ct-card-value { color: #C8102E; }

/* 社媒 */
.ct-social {
  margin-top: 28px;
  padding: 20px;
  background: #FAFAF8;
  border-radius: 6px;
}
.ct-social-title {
  font-size: 15px;
  font-weight: 600;
  color: #1A1A1A;
  margin: 0 0 14px;
}
.ct-social-links { display: flex; gap: 12px; }
.ct-social-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #ECECEA;
  border-radius: 6px;
  color: #6B6B6B;
  text-decoration: none;
  transition: border-color 0.2s ease-out, color 0.2s ease-out;
}
.ct-social-btn:hover { border-color: #C8102E; color: #C8102E; }
.ct-social-txt { font-weight: 700; font-size: 14px; }

/* 留言表单卡 */
.ct-form-card {
  background: #fff;
  border: 1px solid #ECECEA;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}
.ct-form-head {
  background: linear-gradient(135deg, #C8102E, #A00D25);
  padding: 22px 28px;
}
.ct-form-title {
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 6px;
}
.ct-form-sub {
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  margin: 0;
}
.ct-form { padding: 26px 28px 28px; }
.ct-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 520px) {
  .ct-form-row { grid-template-columns: 1fr; }
}
.ct-form-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 4px;
}

/* 快捷操作卡 */
.ct-action {
  display: block;
  margin-top: 20px;
  padding: 22px 26px;
  background: #fff;
  border: 1px solid #ECECEA;
  border-radius: 8px;
  text-decoration: none;
  transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
}
.ct-action:hover {
  border-color: #C9C9C9;
  box-shadow: 0 3px 10px rgba(0,0,0,0.06);
}
.ct-action-title {
  font-size: 16px;
  font-weight: 700;
  color: #1A1A1A;
  margin: 0 0 6px;
}
.ct-action-desc {
  font-size: 13px;
  color: #6B6B6B;
  line-height: 1.65;
  margin: 0 0 10px;
}
.ct-action-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #C8102E;
}
.ct-action:hover .ct-action-link svg { transform: translateX(2px); }
.ct-action-link svg { transition: transform 0.2s ease-out; }

/* 地图占位 */
.ct-map {
  height: 260px;
  background: #E9E9E7;
  border-top: 1px solid #ECECEA;
  border-bottom: 1px solid #ECECEA;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ct-map-inner {
  text-align: center;
  color: #9A9A9A;
}
.ct-map-inner svg { margin: 0 auto 8px; display: block; }
.ct-map-inner p { font-size: 13px; margin: 0; }

/* ============================================
   全局容器（1200px 居中）— 所有区块统一
   ============================================ */
.container-yantai {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
  box-sizing: border-box;
}

/* CTA 红色横幅排版微调 */
.cta-band-text { max-width: 640px; }
.cta-band-text h2 { letter-spacing: 0.3px; }
.cta-band-text p { max-width: 560px; }
.cta-band-actions .btn-cta-primary,
.cta-band-actions .btn-cta-outline {
  padding: 12px 28px;
  font-size: 15px;
}

/* ============================================
   网站地图页（/sitemap/）
   ============================================ */
.sm-main { padding: 56px 20px 72px; }
.sm-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
@media (max-width: 800px) {
  .sm-grid { grid-template-columns: 1fr; }
}
.sm-section {
  background: #fff;
  border: 1px solid #ECECEA;
  border-radius: 6px;
  padding: 24px 26px;
}
.sm-section--full { grid-column: 1 / -1; }
.sm-title {
  font-size: 17px;
  font-weight: 700;
  color: #1A1A1A;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #F2F2F2;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sm-title::before {
  content: "";
  width: 3px;
  height: 15px;
  background: #C8102E;
  border-radius: 2px;
}
.sm-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 20px;
}
@media (max-width: 520px) {
  .sm-links { grid-template-columns: 1fr; }
}
.sm-links a {
  display: block;
  font-size: 14px;
  color: #3D3D3D;
  text-decoration: none;
  padding: 5px 0;
  transition: color 0.18s ease-out;
}
.sm-links a:hover { color: #C8102E; }
.sm-links-sm a { font-size: 13px; color: #6B6B6B; }
.sm-note {
  margin-top: 12px;
  font-size: 12px;
  color: #9A9A9A;
}

/* footer 底部链接 */
.footer-bottom-links {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.footer-bottom-links a {
  color: var(--ink-500);
  text-decoration: none;
  transition: color 0.18s ease-out;
}
.footer-bottom-links a:hover { color: var(--brand); }
.footer-bottom-sep { color: var(--ink-300); }

/* 网站地图页 — 实际模板类名对齐 */
.sm-section-title {
  font-size: 17px;
  font-weight: 700;
  color: #1A1A1A;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #F2F2F2;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sm-section-title::before {
  content: "";
  flex: none;
  width: 3px;
  height: 15px;
  background: #C8102E;
  border-radius: 2px;
}
.sm-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sm-list > li { margin: 0 0 10px; }
.sm-list a {
  font-size: 14px;
  color: #3D3D3D;
  text-decoration: none;
  transition: color 0.18s ease-out;
}
.sm-list a:hover { color: #C8102E; }
.sm-cats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 28px;
}
@media (max-width: 640px) {
  .sm-cats { grid-template-columns: 1fr; }
}
.sm-cat-link {
  font-weight: 600;
  color: #1A1A1A;
}
.sm-cat-link:hover { color: #C8102E; }
.sm-sublist {
  list-style: none;
  margin: 6px 0 0;
  padding: 0 0 0 14px;
  border-left: 2px solid #F2F2F2;
}
.sm-sublist li { margin: 0 0 5px; }
.sm-sublist a {
  font-size: 13px;
  color: #6B6B6B;
}
.sm-wide { grid-column: 1 / -1; }

/* ===== Industry Detail (ai-) ===== */
.ai-hero { position: relative; background-size: cover; background-position: center; color: #fff; padding: 72px 0 64px; }
.ai-crumbs { font-size: 13px; color: rgba(255,255,255,.75); margin-bottom: 18px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ai-crumbs a { color: rgba(255,255,255,.85); text-decoration: none; }
.ai-crumbs a:hover { color: #fff; text-decoration: underline; }
.ai-crumbs strong { color: #fff; font-weight: 600; }
.ai-hero-title { font-size: 40px; font-weight: 700; letter-spacing: .5px; margin: 0 0 6px; }
.ai-hero-en { font-size: 16px; color: rgba(255,255,255,.8); margin: 0 0 14px; }
.ai-hero-desc { font-size: 16px; color: rgba(255,255,255,.9); max-width: 560px; line-height: 1.7; margin: 0 0 22px; }
.ai-hero-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.ai-hero-cta { background: var(--brand); color: #fff; padding: 11px 26px; border-radius: 4px; font-weight: 600; font-size: 15px; text-decoration: none; transition: background .2s; }
.ai-hero-cta:hover { background: var(--brand-dark); }
.ai-hero-wa { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.45); color: #fff; padding: 10px 22px; border-radius: 4px; font-weight: 600; font-size: 15px; text-decoration: none; transition: background .2s; }
.ai-hero-wa:hover { background: rgba(255,255,255,.25); }
.ai-grid { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 28px; padding: 40px 20px 56px; align-items: start; }
.ai-main { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.ai-sec { background: #fff; border: 1px solid var(--ink-300); border-radius: 6px; padding: 26px 26px 28px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.ai-sec-accent { background: var(--bg-warm); }
.ai-sec-title { font-size: 22px; font-weight: 700; color: var(--ink-900); margin: 0 0 4px; }
.ai-sec-title-sm { font-size: 17px; font-weight: 700; color: var(--ink-900); margin: 0 0 12px; }
.ai-sec-sub { font-size: 14px; color: var(--ink-500); margin: 0 0 20px; }
.ai-nodes { display: flex; flex-direction: column; gap: 18px; }
.ai-node { display: flex; gap: 16px; padding: 18px; border: 1px solid var(--ink-300); border-radius: 6px; background: #fff; }
.ai-node-num { font-size: 30px; font-weight: 700; color: var(--brand); line-height: 1; min-width: 52px; font-variant-numeric: tabular-nums; }
.ai-node-body { flex: 1; min-width: 0; }
.ai-node-title { font-size: 17px; font-weight: 700; color: var(--ink-900); margin: 0 0 6px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ai-node-en { font-size: 12px; color: var(--ink-500); font-weight: 500; letter-spacing: .4px; text-transform: uppercase; }
.ai-node-desc { font-size: 14.5px; color: var(--ink-700); line-height: 1.7; margin: 0 0 12px; }
.ai-node-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-chip { display: inline-block; font-size: 12.5px; padding: 4px 12px; border-radius: 999px; background: var(--ink-100); color: var(--ink-700); border: 1px solid var(--ink-300); }
.ai-chip-link { background: var(--brand-light); border-color: #f3c1cb; color: var(--brand); font-weight: 600; text-decoration: none; transition: background .15s; }
.ai-chip-link:hover { background: #fbdde3; }
.ai-mat-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
.ai-more-mats { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--ink-300); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ai-more-label { font-size: 13px; color: var(--ink-500); font-weight: 600; margin-right: 4px; }
.ai-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ai-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ai-checklist li { position: relative; padding-left: 24px; font-size: 14.5px; color: var(--ink-700); line-height: 1.6; }
.ai-checklist li::before { content: ''; position: absolute; left: 0; top: 7px; width: 14px; height: 14px; border-radius: 50%; background: var(--brand-light); border: 2px solid var(--brand); }
.ai-support-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px 24px; }
.ai-support-item { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--ink-700); line-height: 1.6; }
.ai-support-item svg { color: var(--brand); flex-shrink: 0; margin-top: 3px; }
.ai-faqs { display: flex; flex-direction: column; gap: 10px; }
.ai-faq { border: 1px solid var(--ink-300); border-radius: 6px; background: #fff; overflow: hidden; }
.ai-faq summary { cursor: pointer; padding: 14px 18px; font-size: 15px; font-weight: 600; color: var(--ink-900); list-style: none; position: relative; padding-right: 40px; }
.ai-faq summary::-webkit-details-marker { display: none; }
.ai-faq summary::after { content: '+'; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 20px; color: var(--brand); font-weight: 600; transition: transform .2s; }
.ai-faq[open] summary::after { content: '\2212'; }
.ai-faq-a { padding: 0 18px 16px; font-size: 14.5px; color: var(--ink-700); line-height: 1.8; }
.ai-side { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 84px; }
.ai-side-card { background: #fff; border: 1px solid var(--ink-300); border-radius: 6px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.ai-side-head { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%); color: #fff; font-weight: 700; font-size: 16px; padding: 14px 20px; }
.ai-side-head-plain { background: #fff; color: var(--ink-900); border-bottom: 1px solid var(--ink-300); font-size: 15px; }
.ai-side-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 12px; }
.ai-side-text { font-size: 14px; color: var(--ink-700); line-height: 1.7; margin: 0; }
.ai-side-btn { display: block; text-align: center; background: var(--brand); color: #fff; padding: 11px; border-radius: 4px; font-weight: 600; font-size: 14.5px; text-decoration: none; transition: background .2s; }
.ai-side-btn:hover { background: var(--brand-dark); }
.ai-wa-btn { display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--brand); color: #fff; padding: 10px; border-radius: 4px; font-weight: 600; font-size: 14.5px; text-decoration: none; transition: background .2s; }
.ai-wa-btn:hover { background: var(--brand-dark); }
.ai-ind-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ai-ind-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: 4px; font-size: 14px; color: var(--ink-700); text-decoration: none; transition: background .15s, color .15s; }
.ai-ind-item:hover { background: var(--ink-100); }
.ai-ind-item.active { background: var(--brand-light); color: var(--brand); font-weight: 600; }
.ai-contact p { font-size: 13.5px; color: var(--ink-700); line-height: 1.7; margin: 0; }
.ai-contact strong { color: var(--ink-900); font-size: 13px; }
.ai-cta { background: linear-gradient(135deg, #C8102E 0%, #A00D25 100%); padding: 52px 0; }
.ai-cta-inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.ai-cta-title { color: #fff; font-size: 26px; font-weight: 700; margin: 0 0 8px; }
.ai-cta-text { color: rgba(255,255,255,.85); font-size: 15px; margin: 0; }
.ai-cta-btns { display: flex; gap: 12px; }
.ai-cta-main { background: #fff; color: var(--brand); padding: 12px 28px; border-radius: 4px; font-weight: 700; font-size: 15px; text-decoration: none; transition: opacity .2s; }
.ai-cta-main:hover { opacity: .92; }
.ai-cta-wa { border: 1px solid rgba(255,255,255,.6); color: #fff; padding: 12px 24px; border-radius: 4px; font-weight: 600; font-size: 15px; text-decoration: none; transition: background .2s; }
.ai-cta-wa:hover { background: rgba(255,255,255,.12); }
@media (max-width: 960px) {
  .ai-grid { grid-template-columns: 1fr; }
  .ai-side { position: static; }
  .ai-hero-title { font-size: 30px; }
  .ai-mat-grid { grid-template-columns: 1fr; }
  .ai-two-col { grid-template-columns: 1fr; }
  .ai-support-grid { grid-template-columns: 1fr; }
  .ai-cta-inner { flex-direction: column; text-align: center; }
}

/* ============ Applications Page (app-) ============ */
.app-hero { background: var(--bg-warm, #FAFAF8); border-bottom: 1px solid var(--ink-100, #F2F2F2); padding: 44px 0 40px; }
.app-hero-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; align-items: end; }
.app-eyebrow { display: inline-block; font-size: 12px; letter-spacing: 0.18em; font-weight: 600; color: var(--brand, #C8102E); background: var(--brand-light, #FDECEF); padding: 4px 12px; border-radius: 3px; margin-bottom: 14px; }
.app-hero-copy h1 { font-size: 34px; font-weight: 700; color: var(--ink-900, #1A1A1A); line-height: 1.25; margin: 0 0 12px; }
.app-hero-copy p { font-size: 15px; color: var(--ink-500, #6B6B6B); line-height: 1.75; margin: 0 0 20px; max-width: 620px; }
.app-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-outline-wa { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--wa, #25D366); color: var(--wa, #128C7E); background: #fff; padding: 10px 20px; border-radius: 4px; font-size: 14px; font-weight: 600; text-decoration: none; transition: all 0.15s ease-out; }
.btn-outline-wa:hover { background: #E9FBF0; border-color: #128C7E; color: #0E6B5E; }
.app-hero-stats { display: grid; gap: 10px; }
.app-stat { background: #fff; border: 1px solid var(--ink-300, #C9C9C9); border-left: 3px solid var(--brand, #C8102E); border-radius: 6px; padding: 14px 18px; display: flex; align-items: baseline; gap: 10px; }
.app-stat strong { font-size: 26px; font-weight: 700; color: var(--brand, #C8102E); line-height: 1; }
.app-stat span { font-size: 13px; color: var(--ink-500, #6B6B6B); }

.app-list { display: grid; gap: 28px; }
.app-card { display: grid; grid-template-columns: 1fr 1.15fr; background: #fff; border: 1px solid var(--ink-300, #C9C9C9); border-radius: 6px; overflow: hidden; transition: box-shadow 0.18s ease-out, transform 0.18s ease-out, border-color 0.18s ease-out; }
.app-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,0.10); border-color: var(--ink-500, #6B6B6B); }
.app-card-alt .app-card-media { order: 2; }
.app-card-alt .app-card-body { order: 1; }
.app-card-media { position: relative; min-height: 320px; }
.app-card-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.35s ease-out; }
.app-card:hover .app-card-bg { transform: scale(1.03); }
.app-card-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,26,26,0.05) 30%, rgba(26,26,26,0.62) 100%); }
.app-card-no { position: absolute; top: 18px; left: 22px; font-size: 40px; font-weight: 700; color: rgba(255,255,255,0.9); line-height: 1; letter-spacing: 0.02em; }
.app-card-en { position: absolute; left: 22px; bottom: 52px; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; color: rgba(255,255,255,0.85); text-transform: uppercase; }
.app-card-badge { position: absolute; left: 22px; bottom: 20px; display: inline-block; background: rgba(200,16,46,0.92); color: #fff; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 3px; }
.app-card-body { padding: 30px 32px 28px; display: flex; flex-direction: column; }
.app-card-body h2 { font-size: 24px; font-weight: 700; margin: 0 0 10px; line-height: 1.3; }
.app-card-body h2 a { color: var(--ink-900, #1A1A1A); text-decoration: none; }
.app-card-body h2 a:hover { color: var(--brand, #C8102E); }
.app-card-body > p { font-size: 14.5px; color: var(--ink-500, #6B6B6B); line-height: 1.8; margin: 0 0 16px; }
.app-card-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.app-card-chips span { font-size: 12.5px; color: var(--ink-700, #3D3D3D); background: var(--bg-warm, #FAFAF8); border: 1px solid var(--ink-300, #C9C9C9); padding: 4px 11px; border-radius: 3px; }
.app-card-actions { margin-top: auto; display: flex; gap: 12px; flex-wrap: wrap; }

@media (max-width: 960px) {
  .app-hero-grid { grid-template-columns: 1fr; gap: 24px; align-items: start; }
  .app-hero-copy h1 { font-size: 26px; }
  .app-hero-stats { grid-template-columns: repeat(3, 1fr); }
  .app-stat { flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px; }
  .app-stat strong { font-size: 22px; }
  .app-card, .app-card.app-card-alt { grid-template-columns: 1fr; }
  .app-card-alt .app-card-media { order: 0; }
  .app-card-media { min-height: 220px; }
  .app-card-body { padding: 22px 20px; }
  .app-card-body h2 { font-size: 20px; }
  .app-card-no { font-size: 30px; top: 14px; left: 16px; }
  .app-card-en { left: 16px; bottom: 46px; }
  .app-card-badge { left: 16px; bottom: 16px; }
}
@media (max-width: 560px) {
  .app-hero-stats { grid-template-columns: 1fr; }
}

.btn-brand { background: var(--brand, #C8102E); color: #fff; font-size: 14px; padding: 10px 20px; border-radius: 4px; font-weight: 600; }
.btn-brand:hover { background: var(--brand-dark, #A00D25); color: #fff; }

.about-fig { margin: 24px 0 0; }
.about-fig img { width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--ink-300); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
@media (max-width: 960px) { .about-fig { margin-top: 16px; } }

/* ========== PAGE HEADER / APP HERO WITH BG IMAGE (v1.2.10) ========== */
.page-header--img {
  position: relative;
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid var(--ink-100);
}
.page-header--img::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.93) 0%, rgba(255,255,255,0.85) 55%, rgba(255,255,255,0.62) 100%);
}
.page-header--img .container { position: relative; }

.app-hero--img {
  position: relative;
  background-size: cover;
  background-position: center;
}
.app-hero--img::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(250,250,248,0.94) 0%, rgba(250,250,248,0.86) 55%, rgba(250,250,248,0.66) 100%);
}
.app-hero--img .container { position: relative; z-index: 1; }

/* ========== DARK INDUSTRIAL BANNER STYLE (v1.2.12) ========== */
.page-header--img::before, .in-hero::before, .ct-hero::before, .pc-hero::before, .app-hero--img::before {
  background: linear-gradient(105deg, rgba(17,24,39,0.88) 0%, rgba(17,24,39,0.72) 45%, rgba(17,24,39,0.30) 100%);
}
.page-header--img .container h1, .page-header--img .container p { color: #fff; }
.in-hero-title, .in-hero-sub, .ct-hero-title, .ct-hero-sub, .pc-hero-title, .pc-hero-sub { color: #fff !important; }
.pc-search { background: rgba(255,255,255,0.96); border-radius: 4px; }
.pc-search input { background: transparent; color: #1a1a1a; }
.pc-search-icon { color: #6B6B6B; }
.app-hero--img .app-hero-copy h1, .app-hero--img .app-hero-copy > p { color: #fff; }
.app-hero--img .app-stat { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.22); border-left-color: var(--brand, #C8102E); }
.app-hero--img .app-stat strong { color: #fff; }
.app-hero--img .app-stat span { color: rgba(255,255,255,0.78); }
.app-hero--img .btn-outline-wa { color: #fff; border-color: rgba(255,255,255,0.65); background: rgba(255,255,255,0.10); }
.app-hero--img .btn-outline-wa:hover { background: rgba(255,255,255,0.20); color: #fff; border-color: rgba(255,255,255,0.85); }

/* ========== PRIVACY PAGE + COOKIE BAR (v1.2.13) ========== */
.privacy-wrap { background: var(--bg-warm, #FAFAF8); padding: 48px 0 72px; }
.privacy-body {
  background: #fff;
  border: 1px solid var(--ink-300, #C9C9C9);
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  padding: 40px 48px;
  max-width: 900px;
}
.privacy-intro { font-size: 16px; font-weight: 500; color: var(--ink-900, #1A1A1A); background: var(--brand-light, #FDECEF); border-left: 3px solid var(--brand, #C8102E); padding: 14px 18px; border-radius: 4px; }
.privacy-body h2 { font-size: 22px; font-weight: 700; color: var(--ink-900, #1A1A1A); margin: 32px 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--ink-100, #F2F2F2); }
.privacy-body h3 { font-size: 17px; font-weight: 600; color: var(--ink-900, #1A1A1A); margin: 22px 0 10px; }
.privacy-body p, .privacy-body li { font-size: 15px; line-height: 1.85; color: var(--ink-700, #3D3D3D); }
.privacy-body ul { padding-left: 22px; margin: 10px 0 14px; }
.privacy-body li { list-style: disc; margin-bottom: 6px; }
.privacy-body a { color: var(--brand, #C8102E); }
.privacy-table-wrap { overflow-x: auto; margin: 14px 0 18px; }
.privacy-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.privacy-table th, .privacy-table td { border: 1px solid var(--ink-300, #C9C9C9); padding: 10px 14px; text-align: left; vertical-align: top; }
.privacy-table th { background: var(--ink-100, #F2F2F2); font-weight: 600; color: var(--ink-900, #1A1A1A); }
.privacy-table td { color: var(--ink-700, #3D3D3D); }
.privacy-contact { background: var(--bg-warm, #FAFAF8); border: 1px solid var(--ink-300, #C9C9C9); border-radius: 6px; padding: 18px 20px; line-height: 2; }

.yt-cookie-bar {
  position: fixed; left: 16px; right: auto; bottom: 16px;
  z-index: 9999;
  display: none;
  flex-direction: row; align-items: center; justify-content: space-between; gap: 18px;
  max-width: 760px;
  background: rgba(17,24,39,0.96);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.28);
  padding: 16px 20px;
}
.yt-cookie-text { margin: 0; font-size: 13.5px; line-height: 1.7; color: rgba(255,255,255,0.92); }
.yt-cookie-text a { color: #ff8f9d; text-decoration: underline; white-space: nowrap; }
.yt-cookie-actions { flex-shrink: 0; }
.yt-cookie-accept {
  background: var(--brand, #C8102E); color: #fff;
  border: none; border-radius: 4px;
  font-size: 14px; font-weight: 600;
  padding: 9px 22px; cursor: pointer;
  transition: background 0.15s ease-out;
}
.yt-cookie-accept:hover { background: var(--brand-dark, #A00D25); }
@media (max-width: 640px) {
  .yt-cookie-bar { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px 16px; }
  .yt-cookie-actions { text-align: right; }
  .privacy-body { padding: 24px 20px; }
}

/* ========== HOME HERO DARK INDUSTRIAL + COOKIE LEFT (v1.2.14) ========== */
.hero-v3 .hero-gradient {
  background: linear-gradient(105deg, rgba(17,24,39,0.88) 0%, rgba(17,24,39,0.72) 45%, rgba(17,24,39,0.30) 100%);
}
.hero-v3 .hero-badge-v3 {
  background: rgba(200,16,46,0.92);
  border-color: rgba(255,255,255,0.28);
  color: #fff;
}
.hero-v3 .hero-badge-dot-v3 { background: #fff; }
.hero-v3 .hero-title-v3 { color: #fff; }
.hero-v3 .hero-subtitle-v3 { color: rgba(255,255,255,0.85); }
.hero-v3 .hero-search-v3 {
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 4px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.25);
}
.hero-v3 .hero-search-v3 input { color: #1a1a1a; }
.hero-v3 .hero-search-icon-v3 { color: #6B6B6B; }

/* ========== HERO DEEP-BG CONTRAST FIX (v1.2.15) ========== */
.hero-v3 .hero-ctas-v3 .btn-outline {
  color: #fff;
  border-color: rgba(255,255,255,0.65);
  background: rgba(255,255,255,0.05);
}
.hero-v3 .hero-ctas-v3 .btn-outline:hover {
  background: rgba(255,255,255,0.15);
  border-color: #fff;
}
.hero-v3 .hero-ctas-v3 .btn-ghost {
  color: #fff;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.45);
}
.hero-v3 .hero-ctas-v3 .btn-ghost:hover {
  background: rgba(255,255,255,0.15);
  border-color: #fff;
}
.hero-v3 .stat-number-v3 { color: #FF5A6E; }
.hero-v3 .stat-label-v3 { color: rgba(255,255,255,0.9); }

/* ========== ABOUT PAGE PHOTO CARDS (v1.2.17) ========== */
.about-visual-imgs { display: grid; gap: 16px; }
.about-photo {
  margin: 0;
  border: 1px solid var(--ink-300, #C9C9C9);
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  transition: box-shadow 0.18s ease-out, transform 0.18s ease-out;
}
.about-photo:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.10); transform: translateY(-2px); }
.about-photo img { width: 100%; height: auto; display: block; }
.about-photo figcaption {
  font-size: 13px;
  color: var(--ink-500, #6B6B6B);
  padding: 9px 14px;
  border-top: 1px solid var(--ink-100, #F2F2F2);
  background: var(--bg-warm, #FAFAF8);
}



/* ========== ABOUT VISUAL NATURAL STACK (v1.2.23) ========== */
.about-section .about-visual { height: auto; display: block; }
.about-section .about-photo { display: block; height: auto; }
.about-section .about-photo img { height: auto; min-height: 0; object-fit: fill; }



/* ========== INTRO VISUAL FIXED STACK (v1.2.25) ========== */
.about-section .about-visual-imgs {
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.about-section .about-visual-imgs .about-photo {
  flex: none;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
@media (max-width: 960px) {
  .about-section .about-visual-imgs .about-photo img { height: 200px; }
}

/* ========== ABOUT PAGE REDESIGN (v1.2.26) ========== */
/* 简介导语段 */
.about-section .about-lead {
  font-size: 17px;
  line-height: 1.9;
  color: var(--ink-700);
  border-left: 3px solid var(--brand);
  padding-left: 16px;
  margin-bottom: 20px;
}
/* CTA */
.about-cta { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
/* 深色工业数据条 */
.stats-row--dark {
  margin-top: 48px;
  background: #111827;
  border-radius: 6px;
  padding: 40px 24px;
  gap: 0;
}
.stats-row--dark .stat-item {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0 20px;
}
.stats-row--dark .stat-item + .stat-item { border-left: 1px solid rgba(255,255,255,.10); }
.stats-row--dark .stat-number { color: #FF5A6E; font-size: 40px; }
.stats-row--dark .stat-label { color: rgba(255,255,255,.72); }
/* 灰底内四版块统一分隔 */
.about-block--split {
  margin-top: 72px;
  padding-top: 72px;
  border-top: 1px solid var(--ink-300);
}
/* 两列要点卡 */
.about-points {
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}
.about-points li {
  position: relative;
  background: var(--bg-warm);
  border: 1px solid var(--ink-100);
  border-radius: 6px;
  padding: 10px 14px 10px 34px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-700);
}
.about-points li::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 17px;
  width: 8px;
  height: 8px;
  background: var(--brand);
  border-radius: 2px;
}
/* 里程碑卡片化 */
.timeline-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.timeline-card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: 6px;
  padding: 22px 18px 20px;
  transition: box-shadow .18s ease-out, transform .18s ease-out;
}
.timeline-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 3px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease-out;
}
.timeline-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.10); transform: translateY(-2px); }
.timeline-card:hover::before { transform: scaleX(1); }
.timeline-card .timeline-year { font-size: 20px; margin-bottom: 6px; }
.timeline-card .timeline-title { font-size: 15px; margin-bottom: 6px; }
.timeline-card .timeline-desc { font-size: 13px; line-height: 1.7; }
@media (max-width: 1100px) { .timeline-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 960px) {
  .stats-row--dark { grid-template-columns: repeat(2, 1fr); gap: 24px 0; }
  .stats-row--dark .stat-item + .stat-item { border-left: 0; }
  .about-points { grid-template-columns: 1fr; }
  .about-block--split { margin-top: 56px; padding-top: 56px; }
}
@media (max-width: 640px) {
  .timeline-grid { grid-template-columns: 1fr; }
  .stats-row--dark { grid-template-columns: 1fr; }
  .stats-row--dark .stat-item { padding: 0; }
}

/* ========== INTRO TWO-BLOCK (v1.2.27) ========== */
.about-intro-block--more {
  margin-top: 56px;
  padding-top: 56px;
  border-top: 1px solid var(--ink-300);
}
@media (max-width: 960px) {
  .about-intro-block--more { margin-top: 40px; padding-top: 40px; }
}
/* ========== ABOUT UNIFORM IMGS (v1.2.30) ========== */
/* 全页图片统一显示高度 300px，cover 裁切 */
.about-section .about-photo img,
.about-intro-duo .about-photo img { height: 450px; object-fit: cover; }
/* 简介区改上文下图：图组横向并排，适配 450px 高度 */
.about-intro-main { display: block; }
.about-intro-main > div:first-child { max-width: 860px; }
.about-intro-main .about-visual-imgs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  height: auto;
  margin-top: 28px;
}
.about-intro-main .about-visual-imgs .about-photo { flex: none; }
/* 简介块1 行距微调，使左栏文字与 3 图组更贴合 */
.about-intro-main p { line-height: 1.75; margin-bottom: 14px; }
/* 英文块2：文字在上（限宽），双图并排在下 */
.about-intro-block--more {
  display: block;
  margin-top: 56px;
  padding-top: 56px;
  border-top: 1px solid var(--ink-300);
}
.about-intro-more-text { max-width: 860px; }
.about-intro-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 28px;
}
@media (max-width: 960px) {
  .about-intro-duo { grid-template-columns: 1fr; }
}

/* ========== INTRO V3 UNIFIED (v1.2.34) ========== */
/* 企业简介整体图文模块：中英文按文字量分列设计 */
.about-intro-v2 { display: grid; align-items: center; gap: 48px; }
.intro-zh { grid-template-columns: 1.25fr 1fr; }
.intro-en { grid-template-columns: 2.4fr 1fr; }
.about-intro-v2 .about-visual-imgs {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: auto;
  margin-top: 0;
}
.about-intro-v2 .about-visual-imgs .about-photo { flex: none; }
.about-intro-v2 p { line-height: 1.8; margin-bottom: 15px; }
.intro-zh .about-photo img { height: 310px; }
.intro-en .about-photo img { height: 410px; }
@media (max-width: 960px) {
  .about-intro-v2, .intro-zh, .intro-en { grid-template-columns: 1fr; gap: 28px; }
  .intro-zh .about-photo img, .intro-en .about-photo img { height: 220px; }
}

/* ==================== PRODUCT SUB-SERIES + INDUSTRY SUBSECTORS (v1.2.36) ==================== */
.pc-sub-title {
  font-size: 17px; font-weight: 600; color: #1A1A1A;
  margin: 26px 0 14px; padding-left: 12px;
  border-left: 3px solid #C8102E; line-height: 1.35;
}
.ai-subsector { padding-top: 12px; border-top: 1px solid #E5E5E5; }
@media (max-width: 768px) {
  .pc-sub-title { font-size: 15px; }
}

/* ==================== NAV DROPDOWN + FOOTER GALLERY (v1.2.38) ==================== */
.nav-drop-wrap { position: relative; }
.nav-caret { font-size: 10px; opacity: .55; margin-left: 2px; display: inline-block; transition: transform .18s ease-out; }
.nav-drop-wrap:hover .nav-caret { transform: rotate(180deg); }
.nav-drop-panel {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px);
  min-width: 560px; max-width: 90vw;
  background: #fff; border: 1px solid #E8E8E8; border-radius: 6px;
  box-shadow: 0 14px 36px rgba(0,0,0,.12);
  padding: 14px 16px 16px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease-out, transform .18s ease-out, visibility .18s;
  z-index: 9999;
}
.nav-drop-wrap:hover .nav-drop-panel,
.nav-drop-wrap:focus-within .nav-drop-panel {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-drop-panel--ind { min-width: 560px; }
.nav-drop-panel--ind .nav-drop-item { white-space: normal; }
.nav-drop-item {
  display: block; padding: 8px 12px; font-size: 14px; line-height: 1.4;
  color: #374151; border-radius: 4px; white-space: nowrap;
  transition: background .15s ease-out, color .15s ease-out;
}
.nav-drop-item:hover { background: #FDECEF; color: #C8102E; }
.nav-drop-group {
  grid-column: 1 / -1;
  margin: 8px 0 2px; padding: 10px 12px 2px;
  border-top: 1px solid #EFEFEF;
  font-size: 12px; font-weight: 600; color: #9A9A9A; letter-spacing: .5px;
}
.nav-drop-sub { padding-left: 26px; position: relative; }
.nav-drop-sub::before { content: '·'; position: absolute; left: 14px; color: #C8102E; font-weight: 700; }
@media (max-width: 960px) { .nav-drop-panel { display: none !important; } }

/* ================================================================
   NEWS SINGLE（新闻详情页）
================================================================ */
.nsw { background: var(--bg, #fff); }

/* ---- Hero ---- */
.nsw-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 420px;
  padding: 0;
  background-color: #23272B;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.nsw-hero-mask {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,17,20,0.38) 0%, rgba(15,17,20,0.52) 55%, rgba(15,17,20,0.84) 100%);
}
.nsw-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 72px 20px 56px;
}
.nsw-crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255,255,255,0.78);
  margin-bottom: 20px;
}
.nsw-crumb a { color: rgba(255,255,255,0.78); text-decoration: none; }
.nsw-crumb a:hover { color: #fff; }
.nsw-crumb-sep { color: rgba(255,255,255,0.4); }
.nsw-hero-tags {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.nsw-cat {
  display: inline-block;
  padding: 4px 12px;
  background: var(--brand, #C8102E);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 3px;
  text-decoration: none;
  letter-spacing: 0.3px;
}
.nsw-date { color: rgba(255,255,255,0.72); font-size: 13.5px; }
.nsw-title {
  margin: 0;
  max-width: 880px;
  color: #fff;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: 0.2px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.25);
}
.nsw-hero-plain {
  background: linear-gradient(135deg, #23272B 0%, #3A3F45 100%);
}

/* ---- 正文 ---- */
.nsw-body-wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 56px 20px 64px;
}
.nsw-body {
  font-size: 16.5px;
  line-height: 1.95;
  color: var(--ink-700, #3D3D3D);
}
.nsw-body p { margin: 0 0 22px; }
.nsw-body h2 {
  font-size: 26px;
  font-weight: 700;
  color: var(--ink-900, #1A1A1A);
  margin: 44px 0 18px;
  padding-left: 14px;
  border-left: 4px solid var(--brand, #C8102E);
  line-height: 1.4;
}
.nsw-body h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--ink-900, #1A1A1A);
  margin: 34px 0 14px;
  line-height: 1.5;
}
.nsw-body ul, .nsw-body ol {
  margin: 0 0 22px;
  padding-left: 26px;
}
.nsw-body li { margin-bottom: 8px; }
.nsw-body img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
  margin: 28px auto;
}
.nsw-body blockquote {
  margin: 28px 0;
  padding: 16px 22px;
  background: var(--bg-warm, #FAFAF8);
  border-left: 4px solid var(--brand, #C8102E);
  color: var(--ink-700, #3D3D3D);
  font-size: 15.5px;
}
.nsw-body blockquote p { margin: 0 0 8px; }
.nsw-body blockquote p:last-child { margin-bottom: 0; }
.nsw-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 26px 0;
  font-size: 15px;
}
.nsw-body th, .nsw-body td {
  border: 1px solid var(--ink-300, #C9C9C9);
  padding: 10px 14px;
  text-align: left;
}
.nsw-body th { background: var(--ink-100, #F2F2F2); font-weight: 600; color: var(--ink-900, #1A1A1A); }
.nsw-body a { color: var(--brand, #C8102E); text-decoration: none; }
.nsw-body a:hover { text-decoration: underline; }

/* ---- 上 / 下一篇 ---- */
.nsw-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 48px;
  padding-top: 36px;
  border-top: 1px solid var(--ink-300, #C9C9C9);
}
.nsw-nav-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px;
  background: var(--bg-warm, #FAFAF8);
  border: 1px solid var(--ink-300, #C9C9C9);
  border-radius: 6px;
  text-decoration: none;
  transition: border-color 0.18s ease-out, background 0.18s ease-out;
}
.nsw-nav-card:hover { border-color: var(--brand, #C8102E); background: #fff; }
.nsw-nav-right { text-align: right; }
.nsw-nav-dir { font-size: 12.5px; font-weight: 600; color: var(--brand, #C8102E); letter-spacing: 0.5px; }
.nsw-nav-t {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-900, #1A1A1A);
  line-height: 1.5;
}
.nsw-nav-empty { visibility: hidden; }

/* ---- 推荐产品 ---- */
.nsw-rel { padding: 0 0 64px; }
.nsw-sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}
.nsw-sec-title {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  color: var(--ink-900, #1A1A1A);
}
.nsw-sec-all {
  font-size: 14px;
  font-weight: 600;
  color: var(--brand, #C8102E);
  text-decoration: none;
  white-space: nowrap;
}
.nsw-sec-all:hover { text-decoration: underline; }
.nsw-rel-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.nsw-rel-grid .product-card h3 { font-size: 16px; line-height: 1.5; }

/* ================================================================
   全局修复：footer 底部链接移动端溢出 + Cookie 弹窗移动端
================================================================ */
.footer-bottom-links {
  flex-wrap: wrap;
  row-gap: 6px;
}
@media (max-width: 640px) {
  .nsw-hero { min-height: 320px; }
  .nsw-hero-inner { padding: 56px 20px 40px; }
  .nsw-title { font-size: 27px; }
  .nsw-body-wrap { padding: 36px 20px 48px; }
  .nsw-body { font-size: 15.5px; }
  .nsw-body h2 { font-size: 22px; margin: 34px 0 14px; }
  .nsw-body h3 { font-size: 18px; }
  .nsw-nav { grid-template-columns: 1fr; }
  .nsw-nav-empty { display: none; }
  .nsw-nav-right { text-align: left; }
  .nsw-sec-title { font-size: 21px; }
  .nsw-rel-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .nsw-rel-grid .product-card-body { padding: 14px; }
  .nsw-rel-grid .product-card h3 { font-size: 14.5px; }

  /* Cookie 弹窗移动端贴底，不再大面积遮挡正文 */
  .yt-cookie-bar {
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 100%;
    border-radius: 8px 8px 0 0;
    padding: 12px 16px;
  }
  .yt-cookie-text { font-size: 12.5px; }
}
@media (max-width: 420px) {
  .nsw-rel-grid { grid-template-columns: 1fr; }
  .cta-band-actions { flex-wrap: wrap; max-width: 100%; }
}

/* 产品详情页 hero 两列布局：移动端收敛为单列 */
.sp-hero-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; }
@media (max-width: 900px) {
  .sp-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
/* 产品详情页其余网格：移动端 2 列（覆盖 inline style） */
@media (max-width: 640px) {
  .sp-apps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .sp-docs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .sp-rel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ===== Home: Documents & Certifications (dch-) ===== */
.dch-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.dch-card{background:#fff;border:1px solid var(--ink-200,#E2E2E2);border-radius:6px;padding:18px 18px 16px;display:flex;flex-direction:column;gap:10px;transition:all .2s ease;}
.dch-card:hover{border-color:rgba(200,16,46,.35);box-shadow:0 4px 12px rgba(0,0,0,.07);transform:translateY(-2px);}
.dch-badge-row{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;}
.dch-badge{font-size:11px;font-weight:700;letter-spacing:.6px;color:var(--brand);background:var(--brand-light);border-radius:3px;padding:4px 8px;}
.dch-scope{font-size:11px;color:var(--ink-500,#6B6B6B);border:1px solid var(--ink-300,#C9C9C9);border-radius:3px;padding:3px 7px;}
.dch-name{font-size:15px;font-weight:600;color:var(--ink-900,#1A1A1A);line-height:1.35;}
.dch-meta{font-size:12.5px;color:var(--ink-500,#6B6B6B);line-height:1.55;}
.dch-meta b{color:var(--ink-700,#3D3D3D);font-weight:600;}
.dch-valid{margin-top:auto;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-700,#3D3D3D);border-top:1px dashed var(--ink-200,#E2E2E2);padding-top:10px;}
.dch-dot{width:7px;height:7px;border-radius:50%;background:#1E9E5A;flex:none;}
.dch-iso{margin-top:16px;background:var(--bg-warm,#FAFAF8);border:1px solid var(--ink-200,#E2E2E2);border-radius:6px;padding:14px 18px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.dch-iso-label{font-size:12px;font-weight:700;letter-spacing:.5px;color:var(--ink-500,#6B6B6B);text-transform:uppercase;flex:none;}
.dch-iso-items{display:flex;gap:10px;flex-wrap:wrap;}
.dch-iso-pill{font-size:12.5px;font-weight:600;color:var(--ink-700,#3D3D3D);background:#fff;border:1px solid var(--ink-300,#C9C9C9);border-radius:3px;padding:6px 12px;}
.dch-iso-pill small{font-weight:500;color:var(--ink-500,#6B6B6B);margin-left:5px;}
.dch-iso-org{margin-left:auto;font-size:12px;color:var(--ink-500,#6B6B6B);}
.dch-band{margin-top:16px;border:1px solid var(--ink-200,#E2E2E2);border-radius:6px;background:#fff;padding:18px 22px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;}
.dch-band-note{font-size:13px;color:var(--ink-500,#6B6B6B);line-height:1.6;max-width:640px;margin:0;}
.dch-band-note b{color:var(--ink-700,#3D3D3D);font-weight:600;}
.dch-btn{flex:none;display:inline-flex;align-items:center;gap:8px;background:var(--brand);color:#fff;font-size:14px;font-weight:600;padding:11px 22px;border-radius:4px;transition:background .15s;}
.dch-btn:hover{background:var(--brand-dark);color:#fff;}
.dch-btn svg{width:16px;height:16px;}
/* ZH compliant variant */
.dch-zh{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:20px;align-items:start;}
.dch-lics{display:flex;flex-direction:column;gap:14px;}
.dch-lic-card{background:#fff;border:1px solid var(--ink-200,#E2E2E2);border-radius:6px;padding:16px 18px;}
.dch-lic-rows{display:flex;flex-direction:column;gap:8px;margin-top:12px;}
.dch-lic-row{display:flex;gap:10px;font-size:12.5px;line-height:1.5;}
.dch-lic-row .k{flex:none;min-width:96px;color:var(--ink-500,#6B6B6B);}
.dch-lic-row .v{color:var(--ink-700,#3D3D3D);font-weight:500;word-break:break-all;}
.dch-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.dch-check-item{display:flex;gap:12px;background:var(--bg-warm,#FAFAF8);border:1px solid var(--ink-200,#E2E2E2);border-radius:6px;padding:14px 16px;}
.dch-check-ico{flex:none;width:22px;height:22px;border-radius:50%;background:#E8F6EE;color:#1E9E5A;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.dch-check-item b{display:block;font-size:14px;font-weight:600;color:var(--ink-900,#1A1A1A);margin-bottom:3px;}
.dch-check-item span{display:block;font-size:12.5px;color:var(--ink-500,#6B6B6B);line-height:1.55;}
@media(max-width:1080px){
  .dch-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .dch-zh{grid-template-columns:minmax(0,1fr);}
  .dch-iso-org{margin-left:0;}
}
@media(max-width:640px){
  .dch-grid{grid-template-columns:minmax(0,1fr);}
  .dch-checks{grid-template-columns:minmax(0,1fr);}
  .dch-band{padding:16px;}
}
/* ===== Home mobile overflow fixes ===== */
.cat-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
.cat-card{min-width:0;}
@media(min-width:768px){.cat-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
html,body{overflow-x:hidden;}