/* ===== CSS Reset & Base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', 'Noto Sans SC', system-ui, -apple-system, sans-serif; background: #F5F2EB; color: #1A1A1A; line-height: 1.6; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { cursor: pointer; font-family: inherit; }

/* ===== CSS Variables ===== */
:root {
  --forest: #0D4D3C;
  --forest-light: #1A6B54;
  --amber: #E8A838;
  --amber-dark: #C88D2A;
  --cream: #F5F2EB;
  --white: #FFFFFF;
  --text: #1A1A1A;
  --text-light: #555555;
  --text-muted: #9B9B9B;
  --whatsapp: #25D366;
  --success: #2E7D32;
  --border: rgba(0,0,0,0.06);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.1);
}

/* ===== Typography ===== */
h1 { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 800; line-height: 1.15; color: var(--text); letter-spacing: -0.5px; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; line-height: 1.3; color: var(--text); margin-bottom: 1rem; }
h3 { font-size: clamp(1rem, 2vw, 1.25rem); font-weight: 600; line-height: 1.4; color: var(--text); margin-bottom: 0.5rem; }
p { color: var(--text-light); line-height: 1.7; }
.accent { color: var(--amber); }

/* ===== Buttons ===== */
.btn-primary {
  background: var(--amber); color: var(--white); font-weight: 700;
  padding: 14px 32px; border-radius: 8px; border: none;
  font-size: 1rem; display: inline-flex; align-items: center; gap: 8px;
  transition: all 0.2s ease; cursor: pointer; white-space: nowrap;
}
.btn-primary:hover { background: #d1942e; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(232,168,56,0.3); }

.btn-secondary {
  background: transparent; color: var(--forest); font-weight: 600;
  padding: 12px 28px; border-radius: 8px; border: 2px solid var(--forest);
  font-size: 0.95rem; display: inline-flex; align-items: center; gap: 8px;
  transition: all 0.2s ease; cursor: pointer; white-space: nowrap;
}
.btn-secondary:hover { background: var(--forest); color: var(--white); }

.btn-white {
  background: rgba(255,255,255,0.15); color: var(--white); font-weight: 600;
  padding: 12px 28px; border-radius: 8px; border: 2px solid rgba(255,255,255,0.3);
  font-size: 0.95rem; display: inline-flex; align-items: center; gap: 8px;
  transition: all 0.2s ease; cursor: pointer; white-space: nowrap;
  backdrop-filter: blur(4px);
}
.btn-white:hover { background: rgba(255,255,255,0.25); border-color: rgba(255,255,255,0.5); }

.btn-whatsapp {
  background: var(--whatsapp); color: var(--white); font-weight: 600;
  padding: 12px 24px; border-radius: 8px; border: none;
  font-size: 0.95rem; display: inline-flex; align-items: center; gap: 8px;
  transition: all 0.2s ease; cursor: pointer; white-space: nowrap;
}
.btn-whatsapp:hover { background: #1fa855; transform: translateY(-1px); }

/* ===== Navigation ===== */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  background: rgba(255,255,255,0.97); backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(0,0,0,0.06); padding: 0 64px;
  display: flex; align-items: center; justify-content: space-between; height: 72px;
  transition: box-shadow 0.3s ease;
}
.navbar.scrolled { box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
.nav-logo { font-size: 1.5rem; font-weight: 800; color: var(--forest); letter-spacing: -0.5px; }
.nav-logo span { color: var(--amber); }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links > a { font-size: 0.9rem; font-weight: 500; color: var(--text); transition: color 0.2s; position: relative; padding: 8px 12px; border-radius: 6px; }
.nav-links > a:hover { color: var(--amber); background: rgba(232,168,56,0.06); }

/* ===== Dropdown Menu ===== */
.nav-dropdown {
  position: relative;
}
.dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.dropdown-toggle:hover {
  color: var(--amber);
  background: rgba(232,168,56,0.06);
}
.dropdown-arrow {
  font-size: 0.7rem;
  transition: transform 0.2s ease;
  opacity: 0.5;
}
.nav-dropdown:hover .dropdown-arrow {
  transform: rotate(180deg);
  opacity: 1;
}
.dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: -12px;
  min-width: 220px;
  background: var(--white);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.25s ease;
  z-index: 9999;
  border: 1px solid rgba(0,0,0,0.06);
}
.nav-dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dropdown-menu a {
  display: block;
  padding: 10px 16px;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--text);
  border-radius: 6px;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.dropdown-menu a:hover {
  background: var(--cream);
  color: var(--amber);
  padding-left: 20px;
}
.nav-cta { display: flex; align-items: center; gap: 16px; }
.nav-whatsapp { font-size: 0.85rem; color: var(--whatsapp); font-weight: 600; display: flex; align-items: center; gap: 4px; }
.nav-menu { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 8px; }
.nav-menu span { display: block; width: 24px; height: 2px; background: var(--forest); border-radius: 2px; transition: all 0.3s ease; }

/* Mobile Menu */
.mobile-menu {
  display: none; position: fixed; top: 72px; left: 0; right: 0; bottom: 0;
  background: var(--white); z-index: 9998; padding: 24px 32px;
  flex-direction: column; gap: 8px; overflow-y: auto;
}
.mobile-menu.active { display: flex; }
.mobile-menu a {
  padding: 16px 20px; font-size: 1.1rem; font-weight: 500; color: var(--text);
  border-radius: 12px; transition: background 0.2s;
}
.mobile-menu a:hover { background: var(--cream); }
.mobile-menu .menu-cta {
  margin-top: 16px; display: flex; flex-direction: column; gap: 12px;
}
.mobile-menu .menu-cta a { text-align: center; border-radius: 8px; }

/* ===== Hero Carousel ===== */
.hero-carousel {
  position: relative; width: 100%; min-height: 100vh; overflow: hidden;
}
.hero-slide {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  display: flex; align-items: center;
  padding: 120px 64px 80px;
  opacity: 0; transition: opacity 1s ease-in-out, transform 1s ease-in-out;
  transform: scale(1.02); pointer-events: none; z-index: 1;
}
.hero-slide.active {
  opacity: 1; transform: scale(1); pointer-events: auto; z-index: 2;
}
/* Text panel: sits on left or right, semi-transparent */
.hero-text-panel {
  position: relative; z-index: 3;
  max-width: 580px;
  background: rgba(13,77,60,0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 16px;
  padding: 48px 44px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.25);
}
.hero-text-panel.panel-right {
  margin-left: auto;
}
.hero-slide::before {
  content: ''; position: absolute; top: -50%; right: -20%; width: 80%; height: 200%;
  background: radial-gradient(ellipse, rgba(232,168,56,0.06) 0%, transparent 70%);
  pointer-events: none;
}
.hero-slide h1 { color: var(--white); margin-bottom: 16px; font-size: clamp(1.6rem, 3.5vw, 2.6rem); line-height: 1.15; }
.hero-slide h1 .highlight { color: var(--amber); display: block; }
.hero-subtitle {
  font-size: 1.05rem; color: rgba(255,255,255,0.95); line-height: 1.7;
  margin-bottom: 28px; max-width: 480px;
}
.hero-text-panel.panel-right .hero-subtitle { margin-left: 0; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 36px; }
.hero-ctas .btn-primary { font-size: 1rem; padding: 14px 30px; }
.hero-stats {
  display: flex; gap: 32px; padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.hero-stat { text-align: left; }
.hero-stat-number { font-size: 1.9rem; font-weight: 800; color: var(--amber); font-variant-numeric: tabular-nums; line-height: 1.2; }
.hero-stat-name { font-size: 1.2rem; font-weight: 700; color: var(--amber); line-height: 1.2; }
.hero-stat-label { font-size: 0.8rem; color: rgba(255,255,255,0.6); margin-top: 2px; }

/* ===== Hero Slide: Full-Bleed (no text panel) ===== */
.hero-slide-bleed::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(135deg, rgba(8,52,40,0.70) 0%, rgba(8,52,40,0.35) 45%, rgba(8,52,40,0.15) 100%);
  pointer-events: none;
  z-index: 1;
}
.bleed-content {
  position: relative;
  z-index: 3;
  max-width: 680px;
  padding-top: 40px;
}
.bleed-slogan {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.08;
  margin-bottom: 20px;
  letter-spacing: -0.5px;
}
.bleed-highlight {
  color: var(--amber);
  display: block;
}
.bleed-sub {
  font-size: clamp(0.95rem, 1.3vw, 1.1rem);
  color: rgba(255,255,255,0.78);
  line-height: 1.6;
  margin-bottom: 32px;
  max-width: 520px;
}
.bleed-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 0;
}
.bleed-ctas .btn-primary {
  font-size: 1rem;
  padding: 14px 32px;
  border-radius: 8px;
  background: var(--amber);
  color: var(--forest);
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
}
.bleed-ctas .btn-primary:hover {
  background: #f5c842;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(232,168,56,0.35);
}
.bleed-ctas .btn-white {
  font-size: 1rem;
  padding: 14px 32px;
  border-radius: 8px;
  background: rgba(255,255,255,0.15);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border: 1.5px solid rgba(255,255,255,0.35);
  transition: all 0.3s ease;
}
.bleed-ctas .btn-white:hover {
  background: rgba(255,255,255,0.25);
  border-color: rgba(255,255,255,0.6);
}

/* Bottom stats bar (bleed slide) */
.bleed-stats {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 0;
  background: rgba(8,52,40,0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,255,255,0.08);
}
.bs-item {
  flex: 1;
  text-align: center;
  padding: 18px 12px;
  border-right: 1px solid rgba(255,255,255,0.08);
}
.bs-item:last-child { border-right: none; }
.bs-num {
  display: block;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 800;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.bs-label {
  display: block;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.55);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ===== Hero Slide: Contain mode (certificate full image) ===== */
.hero-slide-contain {
  background-color: rgb(8,52,40) !important;
}
.hero-slide-contain .hero-text-panel {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 90%;
  width: 90%;
  background: rgba(8,52,40,0.88);
}

/* Carousel Controls */
.carousel-prev, .carousel-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 10; width: 48px; height: 48px;
  border: 2px solid rgba(255,255,255,0.5); border-radius: 50%;
  background: rgba(13,77,60,0.6); backdrop-filter: blur(8px);
  color: var(--white); font-size: 1.2rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.3s ease; opacity: 0;
}
.hero-carousel:hover .carousel-prev,
.hero-carousel:hover .carousel-next { opacity: 1; }
.carousel-prev:hover, .carousel-next:hover {
  background: var(--amber); border-color: var(--amber); color: var(--forest); }
.carousel-prev { left: 24px; }
.carousel-next { right: 24px; }

/* Carousel Dots */
.carousel-dots {
  position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 12px; z-index: 10;
}
.dot {
  width: 40px; height: 4px; border-radius: 2px;
  background: rgba(255,255,255,0.35); cursor: pointer;
  transition: all 0.4s ease;
}
.dot.active { background: var(--amber); width: 56px; }

/* ===== Trust Bar ===== */
.trust-bar {
  background: var(--white); padding: 24px 64px;
  display: flex; justify-content: center; gap: 48px; flex-wrap: wrap;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  z-index: 100;
}
.trust-item { text-align: center; min-width: 100px; }
.trust-number { font-size: 2rem; font-weight: 800; color: var(--amber); font-variant-numeric: tabular-nums; }
.trust-label { font-size: 0.85rem; color: var(--text-light); margin-top: 2px; font-weight: 500; }

/* ===== Section Common ===== */
.section { padding: 80px 64px; }
.section-header { text-align: center; max-width: 640px; margin: 0 auto 48px; }
.section-header p { font-size: 1.05rem; margin-top: 12px; }
.bg-white { background: var(--white); }
.bg-cream { background: var(--cream); }
.bg-forest { background: linear-gradient(135deg, var(--forest) 0%, #0a3d30 100%); color: var(--white); }

/* ===== USP Grid ===== */
.usp-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; max-width: 1200px; margin: 0 auto; }
.usp-card {
  background: var(--white); border-radius: 12px; padding: 32px 24px; text-align: center;
  box-shadow: var(--shadow-sm); transition: all 0.3s ease;
  border: 1px solid rgba(0,0,0,0.04); position: relative; overflow: hidden;
}
.usp-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--amber);
}
.usp-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.usp-icon { font-size: 2.5rem; margin-bottom: 16px; display: block; }
.usp-card h3 { font-size: 1.1rem; margin-bottom: 8px; }
.usp-card p { font-size: 0.88rem; line-height: 1.6; }

/* ===== Products Grid ===== */
.products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; max-width: 1200px; margin: 0 auto; }
.product-card {
  background: var(--white); border-radius: 12px; overflow: hidden;
  box-shadow: var(--shadow-sm); transition: all 0.3s ease;
  border: 1px solid rgba(0,0,0,0.04);
}
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.product-card-img {
  height: 200px; background: var(--cream); display: flex; align-items: center; justify-content: center;
  font-size: 3rem; color: var(--forest); opacity: 0.6; position: relative; overflow: hidden;
}
.product-card-img::after {
  content: 'View Details'; position: absolute; bottom: 0; left: 0; right: 0;
  background: rgba(13,77,60,0.85); color: var(--white); text-align: center;
  padding: 8px; font-size: 0.85rem; font-weight: 600;
  transform: translateY(100%); transition: transform 0.3s ease;
}
.product-card:hover .product-card-img::after { transform: translateY(0); }
.product-card-body { padding: 24px; }
.product-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 16px; }
.product-card-tags span {
  background: var(--cream); color: var(--forest); font-size: 0.78rem; font-weight: 600;
  padding: 4px 10px; border-radius: 12px;
}
.product-card-link { color: var(--amber); font-weight: 600; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 4px; transition: gap 0.2s; }
.product-card-link:hover { gap: 8px; }

/* ===== Why Choose Grid ===== */
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1100px; margin: 0 auto 40px; }
.why-card {
  background: var(--white); border-left: 4px solid var(--amber); border-radius: 0 8px 8px 0;
  padding: 24px; box-shadow: var(--shadow-sm); transition: all 0.2s ease;
}
.why-card:hover { box-shadow: var(--shadow-md); }
.why-card h3 { font-size: 1.05rem; margin-bottom: 8px; }
.why-card p { font-size: 0.9rem; line-height: 1.6; }

/* ===== GEO / Knowledge Hub ===== */
.geo-section {
  background: var(--cream); padding: 80px 64px; display: flex;
  align-items: center; gap: 64px; max-width: 1200px; margin: 0 auto;
}
.geo-content { flex: 1; }
.geo-content h2 { margin-bottom: 16px; }
.geo-content p { margin-bottom: 12px; font-size: 1.05rem; }
.geo-content ul { margin: 16px 0 24px; }
.geo-content li { padding: 8px 0; font-size: 1rem; display: flex; align-items: center; gap: 10px; }
.geo-content li::before { content: '✓'; color: var(--amber); font-weight: 800; font-size: 1.2rem; }
.geo-visual {
  flex: 0 0 400px; background: var(--white); border-radius: 12px;
  padding: 32px; box-shadow: var(--shadow-md); text-align: center;
}
.geo-visual-icon { font-size: 4rem; margin-bottom: 16px; display: block; }
.geo-visual h3 { margin-bottom: 12px; }
.geo-visual p { font-size: 0.9rem; }

/* ===== OEM Process ===== */
.oem-section { max-width: 1000px; margin: 0 auto; }
.oem-steps { display: flex; gap: 16px; margin: 40px 0; overflow-x: auto; padding-bottom: 16px; }
.oem-step {
  flex: 1; min-width: 140px; text-align: center; position: relative;
  padding: 24px 16px; background: var(--white); border-radius: 12px;
  box-shadow: var(--shadow-sm); transition: all 0.2s ease;
}
.oem-step:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.oem-step-number {
  width: 40px; height: 40px; background: var(--amber); color: var(--white);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.1rem; margin: 0 auto 12px;
}
.oem-step h4 { font-size: 0.95rem; margin-bottom: 6px; }
.oem-step p { font-size: 0.82rem; }

/* ===== Certifications Wall ===== */
.cert-wall { display: flex; justify-content: center; gap: 32px; flex-wrap: wrap; margin: 40px 0; }
.cert-item {
  background: var(--white); border-radius: 12px; padding: 24px 32px;
  box-shadow: var(--shadow-sm); display: flex; align-items: center; gap: 16px;
  transition: all 0.2s ease; border: 1px solid rgba(0,0,0,0.04);
}
.cert-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.cert-icon { font-size: 2rem; }
.cert-item h4 { font-size: 0.95rem; margin-bottom: 2px; }
.cert-item p { font-size: 0.82rem; }

/* ===== CTA Section ===== */
.cta-section {
  background: linear-gradient(135deg, var(--forest) 0%, #0a3d30 100%);
  color: var(--white); padding: 80px 64px; text-align: center; position: relative; overflow: hidden;
}
.cta-section::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at 30% 50%, rgba(232,168,56,0.1) 0%, transparent 50%);
  pointer-events: none;
}
.cta-section h2 { color: var(--white); margin-bottom: 16px; position: relative; }
.cta-section p { color: rgba(255,255,255,0.7); margin-bottom: 32px; max-width: 540px; margin-left: auto; margin-right: auto; position: relative; }
.cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; position: relative; }

/* ===== Knowledge Teaser ===== */
.knowledge-teaser {
  background: var(--white); border-radius: 12px; padding: 48px;
  box-shadow: var(--shadow-sm); max-width: 1000px; margin: 0 auto;
  display: flex; align-items: center; gap: 48px;
}
.knowledge-teaser .teaser-text { flex: 1; }
.knowledge-teaser .teaser-visual {
  flex: 0 0 280px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.teaser-article {
  background: var(--cream); border-radius: 8px; padding: 16px;
  transition: all 0.2s ease; cursor: pointer;
}
.teaser-article:hover { background: #e8f5e9; }
.teaser-article h4 { font-size: 0.88rem; margin-bottom: 6px; line-height: 1.4; }
.teaser-article span { font-size: 0.78rem; color: var(--amber); font-weight: 600; }

/* ===== Stats Counter ===== */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; max-width: 900px; margin: 0 auto; }
.stat-item { text-align: center; }
.stat-item .stat-number { font-size: 2.5rem; font-weight: 800; color: var(--amber); font-variant-numeric: tabular-nums; line-height: 1.2; }
.stat-item .stat-label { font-size: 0.9rem; color: rgba(255,255,255,0.7); margin-top: 4px; }

/* ===== Testimonial / Social Proof ===== */
.proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1100px; margin: 0 auto; }
.proof-card {
  background: var(--white); border-radius: 12px; padding: 32px;
  box-shadow: var(--shadow-sm); border: 1px solid rgba(0,0,0,0.04);
}
.proof-card .proof-quote { font-size: 0.95rem; line-height: 1.7; margin-bottom: 20px; font-style: italic; }
.proof-card .proof-author { display: flex; align-items: center; gap: 12px; }
.proof-card .proof-avatar {
  width: 44px; height: 44px; border-radius: 50%; background: var(--cream);
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
}
.proof-card .proof-name { font-weight: 600; font-size: 0.9rem; }
.proof-card .proof-role { font-size: 0.82rem; color: var(--text-light); }

/* ===== FAQ Teaser ===== */
.faq-teaser { max-width: 800px; margin: 0 auto; }
.faq-item {
  background: var(--white); border-radius: 8px; margin-bottom: 12px;
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.faq-question {
  padding: 20px 24px; display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; font-weight: 600; font-size: 1rem; transition: background 0.2s;
}
.faq-question:hover { background: var(--cream); }
.faq-answer { padding: 0 24px 20px; font-size: 0.95rem; display: none; }
.faq-item.active .faq-answer { display: block; }

/* ===== Footer ===== */
.footer {
  background: var(--forest); color: rgba(255,255,255,0.8); padding: 64px 64px 32px;
}
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; }
.footer h4 { color: var(--white); font-size: 0.95rem; margin-bottom: 16px; }
.footer a { display: block; padding: 4px 0; font-size: 0.9rem; color: rgba(255,255,255,0.95); transition: color 0.2s; }
.footer a:hover { color: var(--amber); }
.footer-contact p { font-size: 0.88rem; padding: 4px 0; display: flex; align-items: center; gap: 8px;  color: rgba(255,255,255,0.95); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1); padding-top: 24px;
  display: flex; justify-content: space-between; font-size: 0.82rem; flex-wrap: wrap; gap: 16px;
}
.footer-bottom a { color: rgba(255,255,255,0.78); transition: color 0.2s; }
.footer-bottom a:hover { color: var(--amber); }

/* ===== WhatsApp Float ===== */
.whatsapp-float {
  position: fixed; bottom: 32px; right: 32px; z-index: 9990;
  background: var(--whatsapp); color: var(--white); border: none;
  border-radius: 50px; padding: 14px 24px; font-size: 0.95rem; font-weight: 600;
  display: flex; align-items: center; gap: 8px;
  box-shadow: 0 4px 16px rgba(37,211,102,0.4); transition: all 0.3s ease;
}
.whatsapp-float:hover { transform: scale(1.05); box-shadow: 0 6px 20px rgba(37,211,102,0.5); }

/* ===== Explore Grid ===== */
.explore-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; max-width: 1200px; margin: 0 auto; }


/* ===== Language Switcher ===== */
.lang-switch { position: relative; }
.lang-btn { 
  background: none; border: 1px solid var(--border); padding: 6px 12px; 
  border-radius: 6px; font-size: 0.85rem; cursor: pointer;
  color: var(--text); display: flex; align-items: center; gap: 4px;
  font-family: inherit; transition: all 0.2s ease;
}
.lang-btn:hover { background: var(--cream); border-color: var(--amber); }
.lang-dropdown {
  position: absolute; top: calc(100% + 4px); right: 0;
  min-width: 150px; background: var(--white); border-radius: 8px;
  box-shadow: var(--shadow-md); padding: 4px;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: all 0.2s ease; z-index: 9999; border: 1px solid var(--border);
}
.lang-switch:hover .lang-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-dropdown a {
  display: block; padding: 8px 14px; font-size: 0.85rem; border-radius: 6px;
  color: var(--text); transition: all 0.15s;
}
.lang-dropdown a:hover { background: var(--cream); color: var(--amber); }
.lang-dropdown a.active { color: var(--amber); font-weight: 600; }

/* ===== Who We Are (Homepage) ===== */
.who-section { padding: 80px 64px; max-width: 1100px; margin: 0 auto; }
.who-inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center; }
.who-text h2 { color: var(--forest); margin-bottom: 16px; font-size: 1.8rem; }
.who-text p { font-size: 0.98rem; line-height: 1.85; color: var(--text-light); margin-bottom: 16px; }
.who-text p strong { color: var(--text); }
.who-text .who-cta { margin-top: 24px; display: flex; gap: 16px; flex-wrap: wrap; }
.who-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.who-metric { background: var(--white); border-radius: 12px; padding: 24px 20px; text-align: center; box-shadow: var(--shadow-sm); border-top: 3px solid var(--amber); transition: transform 0.2s ease; }
.who-metric:hover { transform: translateY(-2px); }
.who-metric .wm-num { font-size: 2rem; font-weight: 800; color: var(--forest); line-height: 1.2; }
.who-metric .wm-unit { font-size: 0.95rem; font-weight: 400; color: var(--text-light); }
.who-metric .wm-label { font-size: 0.82rem; color: var(--text-light); margin-top: 6px; line-height: 1.4; }

/* ===== Factory Strength (Homepage) ===== */
.factory-section-hp { padding: 80px 64px; background: var(--forest); color: var(--white); position: relative; overflow: hidden; }
.factory-section-hp::before { content: ''; position: absolute; top: -30%; right: -10%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(232,168,56,0.06) 0%, transparent 70%); border-radius: 50%; pointer-events: none; }
.factory-section-hp .fs-inner { max-width: 1100px; margin: 0 auto; position: relative; }
.factory-section-hp .fs-header { text-align: center; margin-bottom: 48px; }
.factory-section-hp .fs-header .badge { display: inline-block; background: var(--amber); color: var(--white); font-size: 0.72rem; font-weight: 700; letter-spacing: 1.5px; padding: 4px 16px; border-radius: 20px; margin-bottom: 16px; text-transform: uppercase; }
.factory-section-hp .fs-header h2 { color: var(--white); margin-bottom: 8px; }
.factory-section-hp .fs-header p { color: rgba(255,255,255,0.6); font-size: 0.95rem; max-width: 600px; margin: 0 auto; }
.fs-photos { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; margin-bottom: 40px; }
.fs-photos .fs-main { grid-row: span 2; border-radius: 10px; overflow: hidden; background: rgba(255,255,255,0.06); aspect-ratio: auto; }
.fs-photos .fs-main img, .fs-photos .fs-sub img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fs-photos .fs-sub { border-radius: 10px; overflow: hidden; background: rgba(255,255,255,0.06); aspect-ratio: 4/3; }
.fs-photos .fs-sub:last-child { position: relative; }
.fs-photos .fs-sub:last-child::after { content: 'View All →'; position: absolute; bottom: 0; left: 0; right: 0; padding: 10px; background: rgba(0,0,0,0.7); color: var(--amber); font-weight: 600; font-size: 0.82rem; text-align: center; }
.fs-stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 36px; }
.fs-stat { background: rgba(255,255,255,0.07); border-radius: 10px; padding: 24px 16px; text-align: center; border-left: 3px solid var(--amber); backdrop-filter: blur(4px); transition: background 0.2s; }
.fs-stat:hover { background: rgba(255,255,255,0.12); }
.fs-stat .fss-num { font-size: 1.6rem; font-weight: 800; color: var(--amber); line-height: 1.2; }
.fs-stat .fss-label { font-size: 0.82rem; color: rgba(255,255,255,0.7); margin-top: 6px; }
.fs-cta-row { text-align: center; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .usp-grid { grid-template-columns: repeat(3, 1fr); }
  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .proof-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .geo-section { flex-direction: column; }
  .geo-visual { flex: 0 0 auto; width: 100%; }
  .explore-grid { grid-template-columns: repeat(2, 1fr); }
  .who-section { padding: 64px 32px; }
  .who-inner { grid-template-columns: 1fr; gap: 40px; }
  .factory-section-hp { padding: 64px 32px; }
  .fs-photos { grid-template-columns: 2fr 1fr; }
  .fs-stats-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  h1 { font-size: 1.8rem; }
  h2 { font-size: 1.4rem; }
  .section { padding: 56px 20px; }
  .navbar { padding: 0 20px; }
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-menu { display: flex; }
  .hero-carousel { min-height: 80vh; }
  .hero-slide { padding: 100px 20px 60px; }
  .hero-text-panel { padding: 28px 24px; max-width: 90%; }
  .hero-text-panel.panel-right { margin-left: auto; margin-right: 0; }
  .trust-bar { gap: 16px; padding: 16px 20px; display: grid; grid-template-columns: repeat(3, 1fr); }
  .usp-grid { grid-template-columns: repeat(2, 1fr); }
  .products-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .oem-steps { flex-direction: column; }
  .oem-step { min-width: auto; }
  .cert-wall { gap: 16px; }
  .cert-item { flex: 1 1 100%; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .proof-grid { grid-template-columns: 1fr; }
  .knowledge-teaser { flex-direction: column; padding: 32px 24px; }
  .knowledge-teaser .teaser-visual { flex: auto; width: 100%; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .whatsapp-float { bottom: 20px; right: 20px; padding: 12px 20px; font-size: 0.88rem; }
  .cta-buttons { flex-direction: column; align-items: center; }
  .bleed-slogan { font-size: clamp(1.6rem, 5vw, 2.4rem); }
  .bleed-stats { flex-wrap: wrap; }
  .bs-item { flex: 1 1 40%; padding: 14px 8px; }
  .hero-slide-contain .hero-text-panel { max-width: 95%; width: 95%; bottom: 16px; padding: 24px 20px; }
  .explore-grid { grid-template-columns: 1fr; }
  .who-section { padding: 56px 24px; }
  .who-inner { grid-template-columns: 1fr; gap: 32px; }
  .who-metrics { grid-template-columns: 1fr 1fr; }
  .factory-section-hp { padding: 56px 24px; }
  .fs-photos { grid-template-columns: 1fr 1fr; }
  .fs-photos .fs-main { grid-row: span 1; aspect-ratio: 16/10; }
  .fs-stats-row { grid-template-columns: repeat(2, 1fr); }
}


/* ===== Mobile Accordion Dropdowns ===== */
.m-dropdown { border-bottom: 1px solid rgba(0,0,0,0.05); }
.m-dropdown:last-of-type { border-bottom: none; }
.m-dropdown-toggle {
  padding: 16px 20px; font-size: 1.08rem; font-weight: 500; color: var(--text);
  cursor: pointer; display: flex; justify-content: space-between; align-items: center;
  border-radius: 12px; transition: background 0.2s; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.m-dropdown-toggle:active { background: var(--cream); }
.m-arrow {
  font-size: 0.7rem; transition: transform 0.3s ease; color: var(--text-muted);
  display: inline-block;
}
.m-dropdown.open > .m-dropdown-toggle { color: var(--amber); }
.m-dropdown.open > .m-dropdown-toggle .m-arrow { transform: rotate(180deg); color: var(--amber); }
.m-dropdown-sub {
  max-height: 0; overflow: hidden; transition: max-height 0.35s ease;
  display: flex; flex-direction: column; gap: 2px; padding: 0 0 0 0;
}
.m-dropdown.open > .m-dropdown-sub { max-height: 600px; padding: 4px 0 12px 0; }
.m-dropdown-sub a {
  padding: 11px 20px 11px 36px; font-size: 0.92rem; font-weight: 400; color: var(--text-light);
  border-radius: 8px; transition: all 0.2s;
}
.m-dropdown-sub a:hover { background: var(--cream); color: var(--amber); }

/* Anti-Copy Protection */
*:not(input):not(textarea):not([contenteditable]) {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

/* ===== Container & Breadcrumb ===== */
.container { max-width: 1200px; margin: 0 auto; width: 100%; }
.breadcrumb {
  padding: 88px 64px 16px; font-size: 0.88rem; color: var(--text-light);
  display: flex; align-items: center; gap: 4px;
}
.breadcrumb a { color: var(--text-light); transition: color 0.2s; }
.breadcrumb a:hover { color: var(--amber); }

/* ===== Section Title & Subtitle ===== */
.section-title {
  text-align: center; font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700; margin-bottom: 8px; line-height: 1.3;
}
.section-subtitle {
  text-align: center; font-size: 1.05rem; color: var(--text-light);
  max-width: 640px; margin: 0 auto 48px; line-height: 1.7;
}
.section-dark {
  background: var(--forest); color: var(--white);
}
/* ===== Dark Background Text Contrast Fix ===== */
.section-dark .section-subtitle { color: rgba(255,255,255,0.82); }
.section-dark .section-title { color: var(--white); }
.section-dark p { color: rgba(255,255,255,0.85); }
.section-dark .split-content h2 { color: var(--white); }
.section-dark .split-content p,
.section-dark .split-content li { color: rgba(255,255,255,0.85); }
.section-dark .qc-lab-note-text { color: rgba(255,255,255,0.85); }
.section-dark .qc-lab-note-text strong { color: var(--white); }
.section-dark .process-step-desc { color: rgba(255,255,255,0.85); }
.section-dark .test-card-body p { color: rgba(255,255,255,0.85); }
.section-dark .params-table { color: var(--white); }
.section-dark .params-table td { color: rgba(255,255,255,0.88); border-color: rgba(255,255,255,0.12); }
.cta-box p { color: rgba(255,255,255,0.9); }



/* ===== Hero (Generic — non-carousel) ===== */
.hero {
  position: relative; min-height: 420px; display: flex;
  align-items: center; overflow: hidden;
  background: linear-gradient(135deg, var(--forest) 0%, #0a3d30 100%);
}
.hero-bg {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1;
}
.hero-bg img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.hero-mask {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2;
  background: linear-gradient(135deg, rgba(13,77,60,0.80) 0%, rgba(13,77,60,0.50) 50%, rgba(13,77,60,0.25) 100%);
}
.hero-content {
  position: relative; z-index: 3; padding: 120px 64px 64px; max-width: 680px;
}
.hero-content h1 { color: var(--white); margin-bottom: 16px; }
.hero-content h1 .highlight { color: var(--amber); }
.hero-content p { color: rgba(255,255,255,0.92); font-size: 1.05rem; line-height: 1.85; margin-bottom: 24px; max-width: 580px; letter-spacing: 0.01em; }
.hero-tags { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-tag {
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25);
  color: var(--white); font-size: 0.88rem; font-weight: 600;
  padding: 8px 18px; border-radius: 30px;
  backdrop-filter: blur(4px);
}

/* ===== QC Three-Tier Cards ===== */
.qc-three-tier {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin: 40px 0 32px;
}
.qc-tier-card {
  background: var(--white); border-radius: 12px; overflow: hidden;
  box-shadow: var(--shadow-md); transition: all 0.3s ease;
  border-top: 4px solid var(--amber);
}
.qc-tier-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.qc-tier-head {
  padding: 24px 20px 16px; background: var(--cream);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.qc-tier-num {
  font-size: 1.8rem; font-weight: 800; color: var(--amber); line-height: 1;
  margin-bottom: 8px;
}
.qc-tier-head h3 { margin-bottom: 4px; color: var(--forest); }
.qc-tier-label {
  font-size: 0.82rem; color: var(--text-light); font-weight: 500;
  display: block;
}
.qc-tier-body { padding: 20px; }
.qc-tier-body ul { list-style: none; }
.qc-tier-body li {
  padding: 8px 0; font-size: 0.92rem; color: var(--text-light);
  line-height: 1.65; border-bottom: 1px solid rgba(0,0,0,0.04);
}
.qc-tier-body li:last-child { border-bottom: none; }
.qc-tier-body li strong { color: var(--text); }
.tier-incoming { border-top-color: var(--success); }
.tier-process { border-top-color: var(--amber); }
.tier-outgoing { border-top-color: var(--forest); }

/* QC Lab Note */
.qc-lab-note {
  display: flex; align-items: flex-start; gap: 20px;
  background: rgba(232,168,56,0.06); border-radius: 12px;
  padding: 24px; margin-top: 24px; border-left: 4px solid var(--amber);
}
.qc-lab-note-icon { font-size: 2rem; line-height: 1; flex-shrink: 0; }
.qc-lab-note-text { font-size: 0.95rem; color: var(--text-light); line-height: 1.7; }
.qc-lab-note-text strong { color: var(--text); }

/* QC Photo Strip */
.qc-photo-strip {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  margin-top: 24px;
}
.qc-photo-item { text-align: center; }

/* ===== Test Grid & Cards ===== */
.test-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  max-width: 1200px; margin: 0 auto;
}
.test-card {
  background: rgba(255,255,255,0.08); border-radius: 12px;
  padding: 28px 24px; border: 1px solid rgba(255,255,255,0.12);
  transition: all 0.3s ease; text-align: center;
  backdrop-filter: blur(4px);
}
.test-card:hover {
  background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.25);
  transform: translateY(-4px);
}
.test-icon { font-size: 2.2rem; margin-bottom: 12px; display: block; }
.test-card h3 { color: var(--white); font-size: 1.05rem; margin-bottom: 10px; }
.test-card p { color: rgba(255,255,255,0.75); font-size: 0.88rem; line-height: 1.65; }
.test-badge {
  display: inline-block; background: var(--amber); color: var(--forest);
  font-size: 0.72rem; font-weight: 700; padding: 4px 12px;
  border-radius: 20px; margin-top: 14px; letter-spacing: 0.5px;
}

/* ===== Split Section ===== */
.split-section {
  display: flex; align-items: center; gap: 48px;
  padding: 64px; max-width: 1200px; margin: 0 auto;
}
.split-image { flex: 0 0 45%; }
.split-image img { border-radius: 12px; width: 100%; display: block; }
.split-content { flex: 1; }
.split-content h2 { color: var(--forest); margin-bottom: 16px; }
.split-content p { font-size: 0.95rem; line-height: 1.7; margin-bottom: 12px; }
.split-content ul { margin: 16px 0; }
.split-content li {
  padding: 6px 0; font-size: 0.92rem; display: flex;
  align-items: center; gap: 8px; color: var(--text-light);
}
.split-content li::before { content: '✓'; color: var(--amber); font-weight: 800; }

/* ===== Parameters Table ===== */
.params-table-wrap {
  overflow-x: auto; border-radius: 12px; margin-top: 32px;
  box-shadow: var(--shadow-sm);
}
.params-table {
  width: 100%; border-collapse: collapse; font-size: 0.88rem;
  background: var(--white);
}
.params-table th {
  background: var(--forest); color: var(--white);
  padding: 14px 16px; text-align: left; font-weight: 600;
  font-size: 0.85rem; white-space: nowrap;
}
.params-table td {
  padding: 12px 16px; border-bottom: 1px solid rgba(0,0,0,0.06);
  color: var(--text-light); line-height: 1.5;
}
.params-table tr:hover td { background: rgba(232,168,56,0.04); }
.params-table td strong { color: var(--text); }
.pass-tag {
  display: inline-block; background: rgba(46,125,50,0.08);
  color: var(--success); font-weight: 600; font-size: 0.82rem;
  padding: 3px 10px; border-radius: 16px;
}
.ext-tag {
  display: inline-block; background: rgba(232,168,56,0.08);
  color: var(--amber); font-weight: 600; font-size: 0.82rem;
  padding: 3px 10px; border-radius: 16px;
}

/* ===== Process Flow ===== */
.process-flow {
  display: flex; align-items: flex-start; gap: 0;
  max-width: 1000px; margin: 0 auto; overflow-x: auto;
  padding-bottom: 8px;
}
.process-step {
  flex: 1; min-width: 140px; text-align: center;
  background: rgba(255,255,255,0.08); border-radius: 12px;
  padding: 24px 16px; border: 1px solid rgba(255,255,255,0.12);
  transition: all 0.2s ease;
}
.process-step:hover { background: rgba(255,255,255,0.14); }
.process-num {
  width: 36px; height: 36px; background: var(--amber); color: var(--forest);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1rem; margin: 0 auto 12px;
}
.process-step h4 { color: var(--white); font-size: 0.95rem; margin-bottom: 6px; }
.process-step p { color: rgba(255,255,255,0.7); font-size: 0.82rem; line-height: 1.5; }
.process-arrow {
  color: var(--amber); font-size: 1.4rem; font-weight: 800;
  display: flex; align-items: center; padding: 24px 8px;
  flex-shrink: 0;
}

/* ===== CTA Box ===== */
.cta-box {
  background: linear-gradient(135deg, var(--forest) 0%, #0a3d30 100%);
  border-radius: 16px; padding: 48px 40px; text-align: center;
  color: var(--white); position: relative; overflow: hidden;
  margin-bottom: 32px;
}
.cta-box::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at 30% 50%, rgba(232,168,56,0.08) 0%, transparent 50%);
  pointer-events: none;
}
.cta-box h3 { color: var(--white); font-size: 1.4rem; margin-bottom: 12px; position: relative; }
.cta-box p { color: rgba(255,255,255,0.7); font-size: 0.95rem; margin-bottom: 28px; max-width: 500px; margin-left: auto; margin-right: auto; position: relative; }
.cta-btn-primary {
  display: inline-block; background: var(--amber); color: var(--forest);
  font-weight: 700; font-size: 1rem; padding: 14px 32px;
  border-radius: 8px; border: none; cursor: pointer;
  transition: all 0.2s ease; text-decoration: none; position: relative;
}
.cta-btn-primary:hover { background: #f5c842; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(232,168,56,0.3); }
.cta-btn-secondary {
  display: inline-block; background: transparent; color: var(--white);
  font-weight: 600; font-size: 0.95rem; padding: 12px 28px;
  border-radius: 8px; border: 2px solid rgba(255,255,255,0.3);
  cursor: pointer; transition: all 0.2s ease; text-decoration: none; margin-left: 12px; position: relative;
}
.cta-btn-secondary:hover { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.5); }

/* OEM Bridge */
.oem-bridge {
  background: var(--cream); border-radius: 12px; padding: 32px;
  text-align: center; border: 1px solid rgba(0,0,0,0.06);
}
.oem-bridge h3 { color: var(--forest); font-size: 1.1rem; margin-bottom: 8px; }
.oem-bridge p { font-size: 0.92rem; color: var(--text-light); }
.oem-bridge a { color: var(--amber); font-weight: 600; }

/* ===== Responsive for Quality Page Components ===== */
@media (max-width: 1024px) {
  .qc-three-tier { grid-template-columns: repeat(2, 1fr); }
  .test-grid { grid-template-columns: repeat(2, 1fr); }
  .split-section { flex-direction: column; gap: 32px; padding: 40px 32px; }
  .split-section .split-image { flex: auto; width: 100%; }
  .process-flow { flex-wrap: wrap; justify-content: center; }
  .process-arrow { display: none; }
  .process-step { min-width: calc(50% - 12px); }
}

@media (max-width: 768px) {
  .breadcrumb { padding: 80px 20px 12px; }
  .hero-content { padding: 100px 20px 40px; }
  .hero-tags { flex-direction: column; }
  .qc-three-tier { grid-template-columns: 1fr; }
  .test-grid { grid-template-columns: 1fr; }
  .split-section { flex-direction: column; padding: 32px 20px; }
  .qc-photo-strip { grid-template-columns: repeat(2, 1fr); }
  .params-table { font-size: 0.78rem; }
  .params-table th, .params-table td { padding: 8px 10px; }
  .process-step { min-width: 100%; }
  .cta-box { padding: 32px 20px; }
  .cta-btn-secondary { margin-left: 0; margin-top: 12px; display: block; }
  .batch-control-grid { grid-template-columns: 1fr; }
}
/* ===== Article Card (Blog / Knowledge) ===== */
.article-card {
  background: var(--white); border-radius: 12px; overflow: hidden;
  box-shadow: var(--shadow-sm); transition: all 0.3s ease;
  border: 1px solid rgba(0,0,0,0.04);
}
.article-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.article-card .img, .article-card-image {
  height: 160px; display: flex; align-items: center; justify-content: center;
  font-size: 3rem; color: var(--white); position: relative; overflow: hidden;
}
.article-card .content, .article-card-content { padding: 20px 24px; }
.article-card .tag, .article-card-tag {
  display: inline-block; background: var(--cream); color: var(--amber);
  font-size: 0.72rem; font-weight: 600; padding: 4px 12px;
  border-radius: 20px; margin-bottom: 12px; letter-spacing: 0.5px;
}
.article-card .content h3, .article-card-content h3 { margin-bottom: 8px; }
.article-card .content p, .article-card-content p {
  font-size: 0.88rem; color: var(--text-light); line-height: 1.65; margin-bottom: 12px;
}
.article-card .meta {
  font-size: 0.78rem; color: var(--text-light); margin-bottom: 12px;
}
.article-card .btn-link, .article-card-link {
  color: var(--amber); font-weight: 600; font-size: 0.88rem;
  display: inline-flex; align-items: center; gap: 4px; transition: gap 0.2s;
}
.article-card .btn-link:hover, .article-card-link:hover { gap: 8px; }
.article-card .icon-wrapper {
  font-size: 2.5rem; line-height: 1; opacity: 0.9;
}

/* ===== Contact Form ===== */
.contact-form-wrap {
  background: var(--white); border-radius: 16px; padding: 40px;
  box-shadow: var(--shadow-md); max-width: 600px;
}
.contact-form-wrap h2 { color: var(--forest); margin-bottom: 8px; }
.contact-form-wrap > p { font-size: 0.95rem; color: var(--text-light); margin-bottom: 28px; }
.contact-form { display: flex; flex-direction: column; gap: 20px; }
.form-group label {
  display: block; font-size: 0.88rem; font-weight: 600; color: var(--text);
  margin-bottom: 6px;
}
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 12px 16px; border: 1px solid rgba(0,0,0,0.12);
  border-radius: 8px; font-size: 0.92rem; color: var(--text);
  background: var(--cream); transition: border-color 0.2s;
  font-family: 'Inter', 'Noto Sans SC', sans-serif;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(232,168,56,0.12);
}
.form-group textarea { min-height: 120px; resize: vertical; }
.submit-btn {
  background: var(--amber); color: var(--forest); font-weight: 700;
  font-size: 1rem; padding: 14px 32px; border-radius: 8px; border: none;
  cursor: pointer; transition: all 0.2s ease; width: 100%;
}
.submit-btn:hover { background: #f5c842; transform: translateY(-2px); }

/* ===== Guide Card (Resources) ===== */
.guide-card {
  background: var(--white); border-radius: 12px; padding: 28px 24px;
  box-shadow: var(--shadow-sm); transition: all 0.3s ease;
  border: 1px solid rgba(0,0,0,0.04); text-align: center;
}
.guide-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.guide-icon { font-size: 2.2rem; margin-bottom: 16px; display: block; }
.guide-card h3 { margin-bottom: 8px; font-size: 1rem; }
.guide-card p { font-size: 0.88rem; color: var(--text-light); line-height: 1.65; margin-bottom: 12px; }
.guide-meta { font-size: 0.78rem; color: var(--text-light); margin-bottom: 16px; }
.guide-card ul {
  list-style: none; padding: 0; margin: 16px 0;
}
.guide-card li {
  padding: 6px 0; font-size: 0.92rem; color: var(--text-light);
  position: relative; padding-left: 20px;
}
.guide-card li::before {
  content: '✓'; position: absolute; left: 0; color: var(--amber); font-weight: 800;
}

/* ===== Calculator (Resources) ===== */
.calc-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  margin-bottom: 20px;
}
.calc-field label {
  display: block; font-size: 0.88rem; font-weight: 600; color: var(--text);
  margin-bottom: 6px;
}
.calc-field input, .calc-field select {
  width: 100%; padding: 12px 16px; border: 1px solid rgba(0,0,0,0.12);
  border-radius: 8px; font-size: 0.92rem; background: var(--cream);
  transition: border-color 0.2s;
}
.calc-field input:focus, .calc-field select:focus {
  outline: none; border-color: var(--amber);
}
.calc-btn {
  background: var(--amber); color: var(--forest); font-weight: 700;
  padding: 14px 32px; border-radius: 8px; border: none; cursor: pointer;
  font-size: 1rem; transition: all 0.2s ease; width: 100%;
  margin-bottom: 24px;
}
.calc-btn:hover { background: #f5c842; }
.calc-result {
  background: var(--forest); border-radius: 12px; padding: 24px;
  color: var(--white);
}
.calc-result h3, .calc-result h4 { color: var(--white); margin-bottom: 16px; }
.calc-result-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
}
.calc-result-item {
  background: rgba(255,255,255,0.08); border-radius: 10px; padding: 16px;
  text-align: center;
}
.calc-result-item .label {
  font-size: 0.82rem; color: rgba(255,255,255,0.7); margin-bottom: 6px;
}
.calc-result-item .value {
  font-size: 1.4rem; font-weight: 800; color: var(--amber);
}
.calc-result p { color: rgba(255,255,255,0.8); font-size: 0.95rem; }

/* ===== Download Card (Resources) ===== */
.download-card {
  background: var(--white); border-radius: 12px; padding: 28px 24px;
  overflow-wrap: break-word;
  box-shadow: var(--shadow-sm); transition: all 0.3s ease;
  border: 1px solid rgba(0,0,0,0.04); text-align: center;
}
.download-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.download-icon { font-size: 2.2rem; margin-bottom: 16px; display: block; }
.download-card h3 { margin-bottom: 8px; font-size: 1rem; }
.download-card p { font-size: 0.88rem; color: var(--text-light); line-height: 1.65; margin-bottom: 12px; }
.download-meta { font-size: 0.78rem; color: var(--text-light); margin-bottom: 16px; }
.download-btn {
  background: var(--amber); color: var(--forest); font-weight: 700;
  font-size: 0.88rem; padding: 10px 24px; border-radius: 8px; border: none;
  cursor: pointer; transition: all 0.2s ease;
}
.download-btn:hover { background: #f5c842; }

/* ===== Solution Card ===== */
.solution-card {
  background: var(--white); border-radius: 12px; padding: 28px 24px;
  box-shadow: var(--shadow-sm); transition: all 0.3s ease;
  border: 1px solid rgba(0,0,0,0.04); position: relative; overflow: hidden;
}
.solution-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--amber);
}
.solution-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card-icon { font-size: 2rem; margin-bottom: 16px; display: block; }
.solution-card h3 { margin-bottom: 12px; color: var(--forest); }
.card-challenge {
  font-weight: 700; color: var(--text); font-size: 0.92rem;
  margin-bottom: 16px;
}
.solution-card ul { list-style: none; padding: 0; margin: 16px 0; }
.solution-card li {
  padding: 6px 0 6px 20px; font-size: 0.92rem; color: var(--text-light);
  position: relative; line-height: 1.6;
}
.solution-card li::before {
  content: ''; position: absolute; left: 0; top: 12px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--amber);
}
.card-link {
  color: var(--amber); font-weight: 600; font-size: 0.88rem;
  display: inline-flex; align-items: center; gap: 4px; transition: gap 0.2s;
}
.card-link:hover { gap: 8px; }

/* ===== Responsive for New Components ===== */
@media (max-width: 1024px) {
  .article-card-grid, .guide-card-grid, .download-card-grid, .solution-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .calc-row { grid-template-columns: 1fr; }
  .calc-result-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .article-card-grid, .guide-card-grid, .download-card-grid, .solution-card-grid {
    grid-template-columns: 1fr;
  }
  .calc-row { grid-template-columns: 1fr; }
  .calc-result-grid { grid-template-columns: 1fr; }
  .contact-form-wrap { padding: 24px 20px; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer { padding: 48px 20px 24px; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

/* ===== Footer ===== */
.footer {
  background: var(--forest); color: rgba(255,255,255,0.92); padding: 64px 64px 32px;
}
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; }
.footer h4 { color: var(--white); font-size: 0.95rem; margin-bottom: 16px; }
.footer a { display: block; padding: 4px 0; font-size: 0.9rem; color: rgba(255,255,255,0.95); transition: color 0.2s; }
.footer a:hover { color: var(--amber); }
.footer-contact p { font-size: 0.88rem; padding: 4px 0; display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.95); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1); padding-top: 24px;
  display: flex; justify-content: space-between; font-size: 0.82rem; flex-wrap: wrap; gap: 16px;
}
.footer-bottom a { color: rgba(255,255,255,0.85); display: inline; padding: 0; }
.footer-bottom a:hover { color: var(--amber); }

/* Social icons in footer */
.footer .footer-social-svg { display: flex; gap: 10px; margin-top: 16px; }
.footer .footer-social-svg a {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 6px;
  transition: all 0.2s ease;
}
.footer .footer-social-svg a:hover { transform: translateY(-2px); }
.footer .footer-social-svg svg { width: 18px; height: 18px; }


/* ═══════════════════════════════════════════════════════════════
   Round 3 Hero Fix — All missing hero type rules
   Generated: 20260711_120427
   ═══════════════════════════════════════════════════════════════ */

/* ── Pattern A: Heroes with .hero-bg + .hero-content children ── */
.calc-hero, .guides-hero, .faq-hero, .downloads-hero, .contact-hero,
.brand-hero, .importer-hero, .journey-hero, .petstore-hero,
.process-hero, .quality-hero, .quote-hero, .solutions-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--forest) 0%, #0a3d30 100%);
  padding: 80px 0; color: var(--white);
}

/* ── Pattern B: Direct-child heroes (no .hero-bg wrapper) ── */
.blog-hero, .hub-hero, .cert-hero {
  background: linear-gradient(135deg, var(--forest) 0%, #0a3d30 100%);
  padding: 80px 48px; color: var(--white);
}
.blog-hero h1, .hub-hero h1, .cert-hero h1 {
  color: var(--white); font-size: 2.4rem; line-height: 1.2; margin-bottom: 12px;
}
.blog-hero h1 span, .hub-hero h1 span, .cert-hero h1 span {
  color: var(--amber);
}
.blog-hero p, .hub-hero p, .cert-hero p {
  color: rgba(255,255,255,0.9); font-size: 1.05rem; line-height: 1.7;
  max-width: 640px;
}
.blog-hero .btn-primary, .hub-hero .btn-primary {
  display: inline-block; margin-top: 16px;
}

/* ── Pattern C: Policy/Terms with inner content wrapper ── */
.policy-hero, .terms-hero {
  background: linear-gradient(135deg, var(--forest) 0%, #0a3d30 100%);
  padding: 80px 0; color: var(--white);
}
.policy-hero-content, .terms-hero-content {
  max-width: 680px; margin: 0 auto; padding: 0 32px;
}
.policy-hero-content h1, .terms-hero-content h1 {
  color: var(--white); font-size: 2.4rem; line-height: 1.2; margin-bottom: 12px;
}
.policy-hero-content p, .terms-hero-content p {
  color: rgba(255,255,255,0.9); font-size: 1.05rem;
}

/* ── Pattern D: Factory hero (single instance) ── */
.factory-hero {
  background: linear-gradient(135deg, var(--forest) 0%, #0a3d30 100%);
  padding: 80px 48px; color: var(--white);
}
.factory-hero h1 { color: var(--white); }

/* ── Fix E: page-hero with direct children (no .hero-content) ── */
.page-hero {
  background: linear-gradient(135deg, var(--forest) 0%, #0a3d30 100%);
  padding: 64px 40px; color: var(--white);
}
.page-hero h1 {
  color: var(--white); font-size: 2.4rem; line-height: 1.25; margin-bottom: 10px;
}
.page-hero h1 .highlight { color: var(--amber); }
.page-hero p {
  color: rgba(255,255,255,0.9); font-size: 1.05rem; line-height: 1.7;
  max-width: 560px;
}

/* ── Fix F: Remaining 4 hero types (never fixed in R1/R2) ── */

/* guide-hero — has .hero-bg + .hero-content children */
.guide-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--forest) 0%, #0a3d30 100%);
  padding: 80px 0; color: var(--white);
}

/* sample-hero — has .hero-bg + .hero-content children */
.sample-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--forest) 0%, #0a3d30 100%);
  padding: 80px 0; color: var(--white);
}

/* thank-hero — direct children (checkmark + h1 + p) */
.thank-hero {
  background: linear-gradient(135deg, var(--forest) 0%, #0a3d30 100%);
  padding: 80px 48px; color: var(--white); text-align: center;
}
.thank-hero .checkmark {
  display: inline-block; width: 64px; height: 64px; line-height: 64px;
  border-radius: 50%; background: var(--amber); color: var(--forest);
  font-size: 2rem; font-weight: 700; margin-bottom: 16px;
}
.thank-hero h1 { color: var(--white); }
.thank-hero p { color: rgba(255,255,255,0.9); max-width: 560px; margin: 0 auto; }

/* why-hero — direct children */
.why-hero {
  background: linear-gradient(135deg, var(--forest) 0%, #0a3d30 100%);
  padding: 80px 48px; color: var(--white);
}
.why-hero h1 { color: var(--white); font-size: 2.4rem; line-height: 1.25; }
.why-hero h1 em { color: var(--amber); font-style: normal; }
.why-hero .subtitle { color: rgba(255,255,255,0.9); font-size: 1.05rem; }

/* ===== Global two-tone hero titles: highlighted keyword rendered in amber =====
   Ensures every hero H1 highlight (span.highlight / em.highlight) shows amber
   across ALL hero types, so titles read as amber + white. */
h1 .highlight,
h1 span.highlight,
h1 em.highlight { color: var(--amber) !important; }

/* ===== Global hero text readability =====
   Ensures all hero sections have readable paragraph text regardless of page type.
   Fixes faint subtitles and dense long-form hero copy. */
[class*="-hero"] p,
[class*="hero"] .subtitle,
[class*="hero"] .desc { line-height: 1.85 !important; }
[class*="-hero"] .subtitle { opacity: 0.88 !important; }
/* Global CTA readability: prevent faint text on dark backgrounds */
.bridge-section p,
.cta-section p,
section[class*="bridge"] p,
section[class*="cta"] p { opacity: 1 !important; color: rgba(255,255,255,0.95) !important; }

/* ===== Gormeet: migrated page-specific rules (deduped from inline <style>, P1b fix) ===== */
.menu-cta {margin-top: 16px; display: flex; flex-direction: column; gap: 12px;}
.menu-cta a {text-align: center; border-radius: 8px;}
.cert-hero {margin-top: 72px;
  background: linear-gradient(135deg, var(--forest) 0%, #1A6B55 100%);
  color: white; padding: 80px 64px; text-align: center;}
.cert-hero h1 {font-size: 2.4rem; font-weight: 800; margin-bottom: 16px; letter-spacing: -0.5px;}
.cert-hero p {font-size: 1.15rem; color: rgba(255,255,255,0.9); opacity: 0.88; max-width: 650px; margin: 0 auto; line-height: 1.7;}
.intro-bar {background: var(--cream); padding: 40px 64px; text-align: center;
  border-bottom: 1px solid rgba(0,0,0,0.06);}
.intro-bar p {max-width: 720px; margin: 0 auto; font-size: 1rem; color: var(--text-light); line-height: 1.75;}
.intro-bar p strong {color: var(--forest);}
.cert-section {padding: 64px 64px;}
.section-head {text-align: center; margin-bottom: 48px;}
.section-head h2 {font-size: 1.85rem; color: var(--forest); font-weight: 800; margin-bottom: 12px;}
.section-head p {color: var(--text-light); max-width: 600px; margin: 0 auto; font-size: 0.95rem;}
.cert-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; max-width: 1100px; margin: 0 auto;}
.cert-card {background: var(--white); border: 1px solid rgba(0,0,0,0.07); border-radius: 12px; overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;}
.cert-card:hover {transform: translateY(-4px); box-shadow: 0 12px 36px rgba(13,77,60,0.12);}
.cert-preview {background: var(--cream); height: 220px; display: flex; align-items: center; justify-content: center;
  padding: 20px; border-bottom: 1px solid rgba(0,0,0,0.05);}
.cert-preview img {max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; box-shadow: 0 2px 12px rgba(0,0,0,0.08);}
.cert-body {padding: 22px 24px 24px;}
.cert-badge {display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--amber); background: rgba(232,168,56,0.1); padding: 4px 10px; border-radius: 4px; margin-bottom: 10px;}
.cert-body h3 {font-size: 1.15rem; color: var(--forest); font-weight: 700; margin-bottom: 8px;}
.cert-body p.desc {font-size: 0.88rem; color: var(--text-light); line-height: 1.65; margin-bottom: 16px;}
.cert-actions {display: flex; gap: 10px;}
.cert-btn {flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 14px; border-radius: 6px; font-size: 0.82rem; font-weight: 600;
  text-decoration: none; transition: all 0.2s; cursor: pointer; text-align: center;}
.cert-btn-download {background: var(--forest); color: white;}
.cert-btn-download:hover {background: #093829;}
.cert-btn-view {background: transparent; color: var(--forest); border: 1.5px solid var(--forest);}
.cert-btn-view:hover {background: var(--forest); color: white;}
.benefits-section {background: var(--forest); color: white; padding: 64px 64px;}
.benefits-grid {display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; max-width: 1100px; margin: 0 auto;}
.benefit-item {text-align: center; padding: 28px 20px;}
.benefit-icon {font-size: 2.2rem; margin-bottom: 14px;}
.benefit-item h3 {font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; color: var(--amber);}
.benefit-item p {font-size: 0.88rem; color: rgba(255,255,255,0.95); line-height: 1.65;}
.cert-cta {background: var(--cream); padding: 64px 64px; text-align: center;}
.cert-cta h2 {font-size: 1.7rem; color: var(--forest); font-weight: 800; margin-bottom: 12px;}
.cert-cta p {color: var(--text-light); max-width: 550px; margin: 0 auto 28px; font-size: 0.95rem;}
.cert-cta-actions {display: flex; justify-content: center; gap: 16px; flex-wrap: wrap;}
.search-overlay {position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px); display: none; align-items: flex-start;
  justify-content: center; padding-top: 100px;}
.search-overlay.active {display: flex;}
.search-overlay-inner {background: var(--white); border-radius: 16px; width: 90%; max-width: 680px;
  max-height: 80vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.2);
  padding: 0; animation: searchSlideIn 0.2s ease;}
.search-ov-header {padding: 20px 24px; display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--border); position: sticky; top: 0;
  background: var(--white); border-radius: 16px 16px 0 0; z-index: 1;}
.search-ov-header input {flex: 1; border: none; outline: none; font-size: 1.05rem; font-family: inherit;
  color: var(--text); background: transparent;}
.search-ov-header input::placeholder {color: var(--text-muted);}
.search-ov-close {background: none; border: none; font-size: 1.5rem; color: var(--text-muted);
  cursor: pointer; padding: 4px 8px; border-radius: 6px; line-height: 1;
  transition: all 0.2s;}
.search-ov-close:hover {background: var(--cream); color: var(--text);}
.search-ov-icon {font-size: 1.2rem; color: var(--text-muted); flex-shrink: 0;}
.search-ov-body {padding: 8px 0;}
.search-ov-empty {padding: 40px 24px; text-align: center; color: var(--text-muted);}
.search-ov-result {display: flex; align-items: center; gap: 12px; padding: 14px 24px;
  text-decoration: none; color: inherit; transition: background 0.15s;
  border-bottom: 1px solid rgba(0,0,0,0.03);}
.search-ov-result:last-child {border-bottom: none;}
.search-ov-result:hover {background: var(--cream);}
.search-ov-result-icon {font-size: 1.2rem; flex-shrink: 0; opacity: 0.6;}
.search-ov-result-text {min-width: 0;}
.search-ov-result-title {font-size: 0.95rem; font-weight: 600; color: var(--forest); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.search-ov-result-desc {font-size: 0.8rem; color: var(--text-light); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.search-ov-result mark {background: rgba(232,168,56,0.25); color: inherit; padding: 1px 2px; border-radius: 2px;}
.nav-search-btn {background: none; border: none; font-size: 1.15rem; cursor: pointer;
  padding: 6px 10px; border-radius: 6px; color: var(--text); transition: all 0.2s;
  display: flex; align-items: center; justify-content: center;}
.nav-search-btn:hover {color: var(--amber); background: rgba(232,168,56,0.06);}
.lead-modal-overlay {display: none; position: fixed; inset: 0; z-index: 10001;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(4px);
  align-items: center; justify-content: center;}
.lead-modal-overlay.active {display: flex;}
.lead-modal {background: var(--white); border-radius: 20px; width: 90%; max-width: 480px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.25); overflow: hidden;
  animation: leadSlideIn 0.3s ease;
  margin: auto;}
.lead-modal-header {background: linear-gradient(135deg, var(--forest) 0%, #0A3D2E 50%, #1A6B55 100%);
  padding: 32px 28px 24px; text-align: center; color: var(--white);}
.lead-modal-icon {font-size: 2.5rem; margin-bottom: 8px;}
.lead-modal-header h3 {font-size: 1.25rem; margin-bottom: 4px; color: var(--white);}
.lead-modal-header .lm-subtitle {font-size: 0.85rem; color: rgba(255,255,255,0.8);}
.lead-modal-body {padding: 28px;}
.lead-modal-body .lm-field {margin-bottom: 16px;}
.lead-modal-body label {display: block; font-size: 0.85rem; font-weight: 600;
  color: var(--text); margin-bottom: 6px;}
.lead-modal-body label .required {color: #d32f2f;}
.lead-modal-body input {width: 100%; padding: 12px 14px; border: 1.5px solid var(--border);
  border-radius: 8px; font-size: 0.95rem; font-family: inherit;
  color: var(--text); transition: border-color 0.2s; background: var(--white);}
.lead-modal-body input:focus {outline: none; border-color: var(--forest); box-shadow: 0 0 0 3px rgba(26,107,85,0.1);}
.lead-modal-body input.error {border-color: #d32f2f;}
.lead-modal-body .lm-error-msg {color: #d32f2f; font-size: 0.78rem; margin-top: 4px; display: none;}
.lead-modal-body .lm-hint {font-size: 0.78rem; color: var(--text-muted); margin-top: 4px;}
.lead-modal-footer {padding: 0 28px 28px; display: flex; flex-direction: column; gap: 10px;}
.lead-modal-footer .btn-submit {width: 100%; padding: 14px; background: var(--amber); color: var(--white);
  border: none; border-radius: 8px; font-size: 1rem; font-weight: 700;
  cursor: pointer; transition: all 0.2s; font-family: inherit;}
.lead-modal-footer .btn-submit:hover {background: var(--amber-dark); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(232,168,56,0.35);}
.lead-modal-footer .btn-submit:disabled {opacity: 0.6; cursor: not-allowed; transform: none;}
.lead-modal-footer .lm-cancel {background: none; border: none; color: var(--text-muted); font-size: 0.85rem;
  cursor: pointer; padding: 8px; text-align: center; font-family: inherit;}
.lead-modal-footer .lm-cancel:hover {color: var(--text);}
.lm-download-info {font-size: 0.82rem; color: var(--text-muted); text-align: center;
  padding: 4px 0;}
.factory-intro {max-width: 900px; margin: 0 auto; padding: 48px 64px 24px;
  text-align: center;}
.factory-intro h2 {font-size: 1.7rem; color: var(--forest); margin-bottom: 16px;}
.factory-intro p {font-size: 1rem; color: var(--text-light); line-height: 1.7;}
.factory-data-strip {background: var(--forest); color: var(--white);
  padding: 36px 64px; display: flex; justify-content: center; gap: 64px; flex-wrap: wrap;}
.data-item {text-align: center; transition: transform 0.3s ease;}
.data-item:hover {transform: translateY(-3px);}
.data-number {font-size: 2rem; font-weight: 800; color: var(--amber); font-variant-numeric: tabular-nums; transition: color 0.3s;}
.data-item:hover .data-number {color: #f0c050;}
.data-label {font-size: 0.82rem; opacity: 0.8; margin-top: 2px;}
.factory-section {padding: 48px 64px; max-width: 1200px; margin: 0 auto;}
.factory-section h2 {font-size: 1.6rem; color: var(--forest); margin-bottom: 12px; text-align: center;}
.factory-section .section-subtitle {text-align: center; color: var(--text-light); max-width: 650px; margin: 0 auto 32px; font-size: 0.92rem; line-height: 1.6;}
.factory-grid {display: grid; gap: 20px;}
.factory-grid.cols-2 {grid-template-columns: 1fr 1fr;}
.factory-grid.cols-3 {grid-template-columns: 1fr 1fr 1fr;}
.factory-grid.cols-4 {grid-template-columns: 1fr 1fr 1fr 1fr;}
.factory-grid img {width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08); display: block; transition: transform 0.3s ease, box-shadow 0.3s ease;}
.factory-grid > div:hover img {transform: scale(1.03); box-shadow: 0 4px 16px rgba(0,0,0,0.12);}
.factory-grid .img-caption {text-align: center; font-size: 0.8rem; color: var(--text-light);
  margin-top: 6px;}
.factory-full-img {width: 100%; height: auto; object-fit: contain; border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12); margin: 0;}
.text-image-row {display: flex; gap: 40px; align-items: center;}
.text-image-row.reverse {flex-direction: row-reverse;}
.text-block {flex: 1;}
.text-block h3 {font-size: 1.4rem; color: var(--forest); margin-bottom: 16px;}
.text-block p {font-size: 0.95rem; color: var(--text-light); line-height: 1.8;}
.image-block {flex: 0 0 50%;}
.image-block img {width: 100%; height: auto; object-fit: contain; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08);}
.cta-btns {display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;}
ul, ol {list-style: none;}
.entity-table {width: 100%; border-collapse: collapse; margin: 16px 0;}
.entity-table th {background: var(--forest); color: white; padding: 12px 16px; text-align: left; font-weight: 600; font-size: 0.92rem;}
.entity-table td {padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 0.95rem;}
.entity-table tr:nth-child(even) td {background: #FAF8F4;}
.entity-card {background: white; border-radius: 12px; padding: 32px 28px; margin: 20px 0; box-shadow: var(--shadow-sm); border: 1px solid var(--border);}
.entity-card h2 {color: var(--forest); font-size: 1.4rem; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 2px solid var(--amber);}
.entity-card h3 {color: var(--forest); font-size: 1.1rem; margin: 20px 0 10px;}
.hero::before {content: ''; position: absolute; top: -50%; right: -10%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(232,168,56,0.08) 0%, transparent 70%); border-radius: 50%;}
.hero-inner {max-width: 900px; margin: 0 auto; position: relative;}
.hero .label {display: inline-block; font-size: 0.8rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--amber); margin-bottom: 24px; opacity: 0.9;}
.hero h1 {font-size: 3.6rem; font-weight: 800; line-height: 1.1; margin-bottom: 28px; color: var(--white);}
.hero h1 em {font-style: normal; color: var(--amber);}
.hero .subtitle {font-size: 1.1rem; color: rgba(255,255,255,0.78); max-width: 520px; line-height: 1.8;}
.overview {padding: 100px 64px; max-width: 1100px; margin: 0 auto;}
.overview-inner {display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: start;}
.overview-text h2 {font-size: 1.8rem; color: var(--forest); margin-bottom: 20px;}
.overview-text p {font-size: 1.02rem; line-height: 1.9; color: var(--text-light); margin-bottom: 20px;}
.overview-text p strong {color: var(--text);}
.overview-metrics {display: flex; flex-direction: column; gap: 20px;}
.metric-card {background: var(--white); border-radius: 12px; padding: 32px 28px; box-shadow: var(--shadow-sm); border-left: 4px solid var(--amber); text-align: center;}
.metric-card .number {font-size: 2.8rem; font-weight: 800; color: var(--forest); line-height: 1;}
.metric-card .unit {font-size: 1.1rem; font-weight: 400; color: var(--text-light);}
.metric-card .label {font-size: 0.9rem; color: var(--text-light); margin-top: 8px; line-height: 1.4;}
.metric-card .sub {font-size: 0.82rem; color: var(--amber); font-weight: 600; margin-top: 6px;}
.factory-showcase {padding: 0 64px 100px; max-width: 1100px; margin: 0 auto;}
.factory-showcase h2 {text-align: center; color: var(--forest); margin-bottom: 12px;}
.factory-showcase .sub {text-align: center; color: var(--text-light); font-size: 0.95rem; margin-bottom: 48px;}
.factory-card {background: var(--white); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm); transition: transform 0.25s ease, box-shadow 0.25s ease;}
.factory-card:hover {transform: translateY(-4px); box-shadow: var(--shadow-md);}
.factory-card .photo {width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: var(--cream);}
.factory-card .photo img {width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease;}
.factory-card:hover .photo img {transform: scale(1.03);}
.factory-card .caption {padding: 20px 24px;}
.factory-card .caption h3 {font-size: 1rem; color: var(--forest); margin-bottom: 4px;}
.factory-card .caption p {font-size: 0.85rem; color: var(--text-light);}
.categories {padding: 100px 64px; background: var(--white); text-align: center;}
.categories h2 {color: var(--forest); margin-bottom: 12px;}
.categories .sub {color: var(--text-light); font-size: 0.95rem; margin-bottom: 48px;}
.cat-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 960px; margin: 0 auto 40px;}
.cat-card {background: var(--cream); border-radius: 12px; padding: 36px 24px; text-align: center; transition: all 0.25s ease;}
.cat-card:hover {background: var(--white); box-shadow: var(--shadow-md); transform: translateY(-2px);}
.cat-card .icon {font-size: 2.4rem; margin-bottom: 16px;}
.cat-card h3 {color: var(--forest); margin-bottom: 6px;}
.cat-card .tag {display: inline-block; font-size: 0.75rem; font-weight: 600; color: var(--amber); background: rgba(232,168,56,0.12); padding: 3px 12px; border-radius: 20px; margin-bottom: 10px;}
.cat-card .desc {font-size: 0.88rem; color: var(--text-light); line-height: 1.6;}
.categories .footnote {max-width: 680px; margin: 0 auto; font-size: 0.9rem; color: var(--text-light); line-height: 1.7;}
.categories .footnote strong {color: var(--text);}
.rd-section {padding: 100px 64px; background: var(--white);}
.rd-inner {max-width: 1100px; margin: 0 auto;}
.rd-header {text-align: center; margin-bottom: 56px;}
.rd-header h2 {color: var(--forest); margin-bottom: 12px;}
.rd-header .sub {color: var(--text-light); font-size: 0.95rem; max-width: 650px; margin: 0 auto; line-height: 1.7;}
.rd-header .badge {display: inline-block; background: var(--amber); color: var(--white); font-size: 0.72rem; font-weight: 700; letter-spacing: 1.5px; padding: 4px 16px; border-radius: 20px; margin-bottom: 16px; text-transform: uppercase;}
.rd-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 24px;}
.rd-card {background: var(--cream); border-radius: 12px; padding: 36px 32px; transition: all 0.25s ease; border-left: 4px solid transparent; position: relative; overflow: hidden;}
.rd-card:hover {border-left-color: var(--amber); background: var(--white); box-shadow: var(--shadow-md); transform: translateY(-2px);}
.rd-card .rd-icon {font-size: 1.6rem; margin-bottom: 16px;}
.rd-card .rd-title {font-weight: 700; font-size: 1.05rem; color: var(--forest); margin-bottom: 8px; display: flex; align-items: center; gap: 8px;}
.rd-card .rd-title .tag {font-size: 0.7rem; background: var(--amber); color: var(--white); padding: 2px 10px; border-radius: 12px; font-weight: 600; white-space: nowrap;}
.rd-card .rd-desc {font-size: 0.9rem; color: var(--text-light); line-height: 1.75;}
.rd-card .rd-desc strong {color: var(--text);}
.rd-card .rd-stat {display: flex; gap: 20px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border);}
.rd-card .rd-stat-item {text-align: center;}
.rd-card .rd-stat-item .val {font-size: 1.5rem; font-weight: 800; color: var(--forest); line-height: 1;}
.rd-card .rd-stat-item .lbl {font-size: 0.75rem; color: var(--text-light); margin-top: 4px;}
.rd-highlight {margin-top: 28px; background: linear-gradient(135deg, var(--forest) 0%, #0a3d30 100%); border-radius: 12px; padding: 32px 36px; color: var(--white); display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center;}
.rd-highlight .hl-icon {font-size: 2.2rem;}
.rd-highlight .hl-text h3 {color: var(--amber); margin-bottom: 6px; font-size: 1.05rem;}
.rd-highlight .hl-text p {color: rgba(255,255,255,0.8); font-size: 0.92rem; line-height: 1.7;}
.manufacturing {padding: 100px 64px; max-width: 1100px; margin: 0 auto;}
.manufacturing h2 {text-align: center; color: var(--forest); margin-bottom: 12px;}
.manufacturing .sub {text-align: center; color: var(--text-light); font-size: 0.95rem; margin-bottom: 56px;}
.mfg-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 48px;}
.mfg-col h3 {color: var(--forest); font-size: 1.1rem; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 2px solid var(--amber); display: inline-block;}
.mfg-col ul {margin-bottom: 32px;}
.mfg-col li {font-size: 0.92rem; color: var(--text-light); margin-bottom: 14px; line-height: 1.7; padding-left: 16px; position: relative;}
.mfg-col li::before {content: '—'; position: absolute; left: 0; color: var(--amber);}
.mfg-col li strong {color: var(--text);}
.quality-strip {padding: 80px 64px; background: var(--white);}
.quality-inner {max-width: 960px; margin: 0 auto; display: grid; grid-template-columns: 160px 1fr; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-md);}
.quality-badge {background: var(--amber); color: var(--white); padding: 36px 24px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;}
.quality-badge .badge-icon {font-size: 2.2rem; margin-bottom: 12px;}
.quality-badge .badge-title {font-size: 0.75rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; line-height: 1.4;}
.quality-badge .badge-note {font-size: 0.8rem; margin-top: 8px; opacity: 0.8;}
.quality-body {background: var(--white); padding: 36px 40px; display: flex; flex-direction: column; justify-content: center;}
.quality-body h3 {color: var(--forest); margin-bottom: 10px;}
.quality-body p {font-size: 0.93rem; color: var(--text-light); line-height: 1.8;}
.team-section {padding: 100px 64px; background: var(--cream);}
.team-inner {max-width: 1100px; margin: 0 auto;}
.team-header {text-align: center; margin-bottom: 56px;}
.team-header h2 {color: var(--forest); margin-bottom: 12px;}
.team-header .sub {color: var(--text-light); font-size: 0.95rem;}
.team-grid {display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px;}
.team-card {background: var(--white); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm); text-align: center; transition: all 0.25s ease;}
.team-card:hover {transform: translateY(-4px); box-shadow: var(--shadow-md);}
.team-card .photo {width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: var(--cream);}
.team-card .photo img {width: 100%; height: 100%; object-fit: cover;}
.team-card .info {padding: 20px 16px 24px;}
.team-card .info .name {font-weight: 700; font-size: 1.05rem; color: var(--text); margin-bottom: 2px;}
.team-card .info .role {font-size: 0.82rem; color: var(--amber); font-weight: 600; margin-bottom: 8px;}
.team-card .info .bio {font-size: 0.8rem; color: var(--text-light); line-height: 1.6;}
.why-hero p {color: rgba(255,255,255,0.9);}
.adv-intro {max-width: 700px; margin: 0 auto; padding: 80px 64px 40px; text-align: center;}
.adv-intro .label {font-size: 0.75rem; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--amber); margin-bottom: 16px;}
.adv-intro h2 {font-size: 2rem; color: var(--forest); margin-bottom: 16px;}
.adv-intro p {font-size: 0.95rem; color: var(--text-light); line-height: 1.8;}
.adv-section {padding: 40px 64px 80px;}
.adv-grid {max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 48px;}
.adv-card {background: var(--white); border-radius: 16px;
  display: grid; grid-template-columns: 80px 1fr; gap: 0; overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  border-left: 5px solid var(--amber);}
.adv-num {background: var(--forest); color: var(--amber);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.8rem; font-weight: 800; font-variant-numeric: tabular-nums;}
.adv-body {padding: 40px 44px;}
.adv-body h3 {font-size: 1.35rem; color: var(--forest); margin-bottom: 12px;}
.adv-body .adv-tagline {font-size: 0.9rem; color: var(--amber); font-weight: 600; margin-bottom: 16px;}
.adv-body p {font-size: 0.95rem; color: var(--text-light); line-height: 1.8; margin-bottom: 16px;}
.adv-body ul {list-style: none;}
.adv-body ul li {font-size: 0.9rem; color: var(--text); padding: 8px 0 8px 24px; position: relative;
  border-bottom: 1px solid rgba(0,0,0,0.04);}
.adv-body ul li::before {content: '✓'; position: absolute; left: 0; color: var(--amber); font-weight: 700;}
.adv-body .adv-edge {margin-top: 20px; padding: 16px 20px; background: var(--cream); border-radius: 8px;
  font-size: 0.9rem; color: var(--forest); font-weight: 600;}
.team-section h2 {font-size: 2.2rem; color: var(--forest); text-align: center; margin-bottom: 12px;}
.team-section .sub {text-align: center; color: var(--text-light); margin-bottom: 64px; font-size: 0.95rem;}
.team-card .t-avatar {width: 72px; height: 72px; border-radius: 50%; background: var(--forest);
  color: var(--amber); font-size: 1.6rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 20px;}
.team-card .t-name {font-size: 1.1rem; font-weight: 700; color: var(--forest); margin-bottom: 4px;}
.team-card .t-title {font-size: 0.85rem; color: var(--amber); font-weight: 600; margin-bottom: 16px;}
.team-card .t-desc {font-size: 0.9rem; color: var(--text-light); line-height: 1.7; text-align: left;}
.team-card .t-desc strong {color: var(--text);}
.journey-hero {padding: 40px 64px 80px;
  position: relative;
  overflow: hidden; background: linear-gradient(135deg, var(--forest), #0a3d30); color: var(--white);}
.hero-bg::before {content: ''; position: absolute; top: -30%; right: -15%;
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232,168,56,0.12) 0%, transparent 70%);}
.hero-bg::after {content: ''; position: absolute; bottom: -20%; left: -10%;
  width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.04) 0%, transparent 70%);}
.hero-content h1 span {color: var(--amber);}
.vision-section {padding: 60px 64px; background: var(--white);}
.vision-grid {display: grid; grid-template-columns: 1fr; gap: 0; max-width: 800px; margin: 0 auto;}
.vision-text h2 {color: var(--text); margin-bottom: 16px;}
.vision-text p {margin-bottom: 16px;}
.timeline-section {padding: 56px 64px; background: var(--cream);}
.timeline-header {text-align: center; max-width: 700px; margin: 0 auto 36px;}
.timeline-header h2 {color: var(--text);}
.timeline-header p {margin-top: 8px; font-size: 0.95rem;}
.milestone-grid {display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 1000px; margin: 0 auto;}
.milestone-card {background: var(--white); border-radius: 12px; overflow: hidden;
  box-shadow: var(--shadow-sm); transition: all 0.3s ease;
  display: flex; flex-direction: column;}
.milestone-card:hover {transform: translateY(-3px); box-shadow: var(--shadow-md);}
.milestone-image {width: 100%; height: 280px; overflow: hidden; position: relative;}
.milestone-image img {width: 100%; height: 100%; object-fit: contain; transition: transform 0.4s ease;}
.milestone-card:hover .milestone-image img {transform: scale(1.05);}
.milestone-year-badge {position: absolute; top: 12px; left: 12px;
  background: var(--amber); color: var(--white); font-weight: 800; font-size: 0.8rem;
  padding: 4px 14px; border-radius: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.2);}
.milestone-body {padding: 18px 22px 20px;}
.milestone-body h3 {font-size: 1.05rem; color: var(--text); margin-bottom: 8px;}
.milestone-body p {font-size: 0.85rem; line-height: 1.6;}
.data-section {padding: 60px 64px; background: var(--white);}
.data-header {text-align: center; margin-bottom: 40px;}
.data-grid {display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; max-width: 1000px; margin: 0 auto;}
.data-card {background: var(--cream); border-radius: 12px; padding: 28px 16px; text-align: center; transition: all 0.2s ease;}
.data-card:hover {transform: translateY(-3px); box-shadow: var(--shadow-sm);}
.values-section {padding: 60px 64px; background: var(--cream);}
.values-header {text-align: center; max-width: 700px; margin: 0 auto 40px;}
.values-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; max-width: 1000px; margin: 0 auto;}
.value-card {background: var(--white); border-radius: 12px; padding: 32px 28px; text-align: center; transition: all 0.25s ease;}
.value-card:hover {transform: translateY(-3px); box-shadow: var(--shadow-md);}
.value-icon {font-size: 2.2rem; margin-bottom: 16px;}
.value-card h3 {color: var(--text); margin-bottom: 10px;}
.value-card p {font-size: 0.9rem;}
.mission-section {padding: 64px; text-align: center; background: var(--white);}
.mission-quote {font-size: clamp(1.3rem, 3vw, 1.6rem); font-weight: 600; color: var(--forest);
  max-width: 650px; margin: 0 auto 20px; line-height: 1.5;}
.mission-text {color: var(--text-light); max-width: 550px; margin: 0 auto;}
.team-header p {margin-top: 8px; font-size: 0.95rem;}
.team-photo {width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: var(--cream);}
.team-photo img {width: 100%; height: 100%; object-fit: cover;}
.team-card h3 {margin-top: 20px; font-size: 1.1rem; color: var(--text);}
.team-role {font-size: 0.85rem; color: var(--amber); font-weight: 600; margin: 4px 0 8px;}
.team-bio {font-size: 0.85rem; color: var(--text-light); padding: 0 20px 24px; line-height: 1.6;}
.article-container {background:#fff; padding:40px; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,0.06); max-width:920px; margin:0 auto;}
.article-container h1 {color:#0D4D3C; font-size:2.1em; line-height:1.3; margin-bottom:16px; border-bottom:3px solid #E8A838; padding-bottom:12px;}
.article-container h2 {color:#0D4D3C; font-size:1.45em; margin-top:32px; line-height:1.35; display:flex; align-items:flex-start; gap:12px;}
.article-container h3 {color:#0D4D3C; font-size:1.15em; margin-top:20px;}
.q-number {background:#E8A838; color:#fff; font-weight:700; padding:5px 12px; border-radius:4px; font-size:0.85em; flex-shrink:0; min-width:50px; text-align:center;}
.article-figure {margin:24px 0; text-align:center;}
.article-figure img {max-width:100%; max-height:480px; width:auto; height:auto; border-radius:6px; box-shadow:0 2px 6px rgba(0,0,0,0.1); object-fit:cover;}
.article-figure figcaption {font-size:0.85em; color:#666; text-align:center; margin-top:8px; font-style:italic;}
.qa-detail {background:#FFF8E8; border-left:4px solid #E8A838; padding:16px 20px; margin:16px 0; border-radius:4px;}
.qa-detail p {margin:0; color:#3a3a3a; font-size:0.95em; line-height:1.7;}
.cta-box h2 {color:#fff; justify-content:center; border:none;}
.cta-box ul {list-style:none; padding:0; display:inline-block; text-align:left;}
.cta-box li {padding:5px 0; color:rgba(255,255,255,0.95);}
.cta-box a.cta-button {display:inline-block; background:#E8A838; color:#fff; padding:14px 32px; border-radius:6px; text-decoration:none; font-weight:600; margin-top:16px;}
.cta-box a.cta-button:hover {background:#d49020;}
.faq-section {margin-top:48px; padding-top:32px; border-top:2px solid #eee;}
.faq-item h3 {margin:0 0 8px 0; font-size:1.05em;}
.inline-link {background:#F8F6F1; padding:10px 16px; border-radius:4px; font-size:0.92em;}
.related {margin-top:40px; padding:24px; background:#f0f7f5; border-radius:8px;}
.related h2 {margin-top:0; font-size:1.2em;}
.related ul {padding-left:0; list-style:none;}
.related li {background:#fafafa; padding:16px 20px; margin-bottom:12px; border-radius:6px; border-left:3px solid #E8A838;}
.related li small {display:block; color:#666; margin-top:4px; font-size:0.88em;}
.intro-box {background:#f0f7f5; padding:22px 26px; border-radius:6px; margin:24px 0; border-left:4px solid #0D4D3C;}
.intro-box p {margin:8px 0;}
.question-block {margin:28px 0; padding:26px; background:#fafafa; border-radius:8px; border-left:4px solid #0D4D3C;}
.question-block h2 {margin-top:0;}
.blog-hero {padding: 40px 64px 60px;
  background: linear-gradient(135deg, var(--forest) 0%, #0A3D2E 100%);
  color: var(--white); text-align: center; position: relative; overflow: hidden;}
.blog-hero::before {content: ''; position: absolute; top: -30%; right: -15%;
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232,168,56,0.12) 0%, transparent 70%);}
.blog-hero h1 {color: var(--white); margin-bottom: 16px; position: relative;}
.blog-hero p {font-size: 1.1rem; color: rgba(255,255,255,0.7); max-width: 800px; margin: 0 auto 32px; position: relative;}
.featured-section {padding: 60px 64px; max-width: 1200px; margin: 0 auto;}
.featured-article {display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
  background: var(--white); border-radius: 16px; padding: 48px;
  box-shadow: var(--shadow-md); border: 1px solid var(--border);}
.featured-image {background: linear-gradient(135deg, var(--forest) 0%, #1A6B52 100%);
  border-radius: 12px; display: flex; align-items: center; justify-content: center;
  min-height: 300px; overflow: hidden;}
.featured-image .icon-wrapper {width: 100px; height: 100px; background: rgba(255,255,255,0.15); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem; color: var(--white);}
.featured-text {display: flex; flex-direction: column;}
.featured-text .tag {display: inline-block; background: rgba(232,168,56,0.12); color: var(--amber);
  font-size: 0.78rem; font-weight: 700; padding: 4px 12px; border-radius: 12px;
  margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.5px;
  align-self: flex-start;}
.featured-text h2 {font-size: clamp(1.4rem, 3vw, 1.8rem); color: var(--forest); margin-bottom: 12px;}
.featured-text p {margin-bottom: 12px;}
.featured-text .meta {font-size: 0.85rem; color: var(--text-muted); margin-bottom: 16px;}
.featured-text .btn-link {color: var(--amber); font-weight: 700; font-size: 0.95rem; display: inline-flex;
  align-items: center; gap: 6px; transition: gap 0.2s ease;}
.featured-text .btn-link:hover {gap: 10px;}
.articles-section {padding: 0 64px 80px; max-width: 1200px; margin: 0 auto;}
.articles-section h2 {text-align: center; font-size: clamp(1.4rem, 3vw, 1.8rem); color: var(--forest); margin-bottom: 16px;}
.category-tabs {display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 48px;}
.category-tab {padding: 10px 24px; border-radius: 24px; border: 2px solid rgba(13,77,60,0.15);
  background: var(--white); color: var(--forest); font-weight: 600; font-size: 0.88rem;
  cursor: pointer; transition: all 0.2s ease; text-decoration: none;}
.category-tab:hover, .category-tab.active {background: var(--forest); color: var(--white); border-color: var(--forest);}
.articles-grid {display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;}
.article-card::before {content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--amber); transform: scaleY(0); transform-origin: center;
  transition: transform 0.3s ease;}
.article-card:hover::before {transform: scaleY(1);}
.article-card .card-head {display: flex; align-items: center; gap: 12px; margin-bottom: 14px;}
.article-card .card-icon {width: 44px; height: 44px; border-radius: 10px;
  background: linear-gradient(135deg, var(--forest) 0%, #1B6B53 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; color: var(--white); flex-shrink: 0;}
.article-card .tag {display: inline-block; background: rgba(232,168,56,0.14); color: #B07A1A;
  font-size: 0.7rem; font-weight: 700; padding: 4px 10px; border-radius: 6px;
  text-transform: uppercase; letter-spacing: 0.5px;}
.article-card h3 {font-size: 1.05rem; font-weight: 700; color: var(--forest); margin-bottom: 8px; line-height: 1.4;}
.article-card p {font-size: 0.88rem; color: var(--text-light); line-height: 1.6; margin-bottom: 14px; flex: 1;}
/* Blog flat cards (no .content wrapper): give direct children proper inset so text isn't flush-left */
.article-card > .card-head {padding: 22px 24px 0;}
.article-card > h3, .article-card > p, .article-card > .meta, .article-card > .btn-link {padding-left: 24px; padding-right: 24px;}
.article-card > .btn-link {padding-bottom: 24px;}
.article-card .meta .dot {width: 3px; height: 3px; background: var(--text-muted); border-radius: 50%;}
.article-card .btn-link {color: var(--forest); font-weight: 700; font-size: 0.85rem; display: inline-flex;
  align-items: center; gap: 6px; transition: gap 0.2s ease, color 0.2s ease;
  text-decoration: none;}
.article-card .btn-link:hover {gap: 10px; color: var(--amber);}
.cta-blog {padding: 80px 64px; background: var(--forest); color: var(--white);
  text-align: center; position: relative; overflow: hidden;}
.cta-blog::before {content: ''; position: absolute; top: -40%; right: -15%;
  width: 450px; height: 450px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232,168,56,0.1) 0%, transparent 70%);}
.cta-blog h2 {color: var(--white); font-size: clamp(1.6rem, 3.5vw, 2.2rem); margin-bottom: 16px; position: relative;}
.cta-blog p {color: rgba(255,255,255,0.95); font-size: 1.08rem; max-width: 700px;
  margin: 0 auto 36px; position: relative; line-height: 1.7;}
.section-alt {padding: 72px 64px; background: var(--white);}
.section h2, .section-alt h2 {text-align: center; font-size: clamp(1.4rem, 3vw, 1.8rem); color: var(--forest); margin-bottom: 12px;}
.section .subtitle, .section-alt .subtitle {text-align: center; color: var(--text-light); max-width: 700px; margin: 0 auto 40px; font-size: 0.95rem;}
.card {background: var(--cream); border-radius: 12px; padding: 28px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06); transition: transform 0.2s;}
.card:hover {transform: translateY(-4px);}
.card h3 {color: var(--forest); font-size: 1.1rem; margin-bottom: 10px;}
.card p {color: var(--text-light); font-size: 0.92rem; line-height: 1.65;}
.section-tint {padding: 72px 64px; background: rgba(13,77,60,0.03);}
.section-tint h2 {text-align: center; color: var(--forest); margin-bottom: 12px;}
.section-tint .subtitle {text-align: center; color: var(--text-light); max-width: 700px; margin: 0 auto 40px; font-size: 0.95rem;}
.icon-circle {width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; font-weight: 700;}
.icon-circle-amber {background: rgba(232,168,56,0.12); color: var(--amber);}
.icon-circle-forest {background: rgba(13,77,60,0.1); color: var(--forest);}
.stats-strip {display: flex; justify-content: center; gap: 56px; flex-wrap: wrap; padding: 48px 0 32px;}
.stats-item {text-align: center; min-width: 130px;}
.stats-num {font-size: clamp(2.2rem, 4vw, 2.8rem); font-weight: 800; color: var(--amber); line-height: 1.1;}
.stats-tag {font-size: 0.85rem; color: var(--text-light); margin-top: 4px;}
.card-accent-amber {border-left: 4px solid var(--amber);}
.card-accent-forest {border-left: 4px solid var(--forest);}
.result-badge {background: linear-gradient(135deg, var(--amber) 0%, #D4942A 100%); color: var(--white); padding: 16px 20px; border-radius: 8px; font-weight: 700; text-align: center; font-size: 0.95rem; margin-top: 12px;}
.cs-card {background: var(--white); border-radius: 12px; padding: 0; box-shadow: var(--shadow-sm); overflow: hidden; margin-bottom: 28px; transition: transform 0.2s;}
.cs-card:hover {transform: translateY(-3px); box-shadow: var(--shadow-md);}
.cs-card-header {display: flex; align-items: center; gap: 16px; padding: 24px 28px 16px;}
.cs-card-body {padding: 0 28px 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px;}
.cs-card-footer {padding: 16px 28px;}
.cs-section-label {font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 6px; font-weight: 600;}
.cs-section-text {font-size: 0.92rem; color: var(--text-light); line-height: 1.65;}
.cmp-table {width:100%; border-collapse:collapse; margin:24px 0; font-size:0.9rem; box-shadow:var(--shadow-sm); border-radius:12px; overflow:hidden;}
.cmp-table thead th {background:var(--forest); color:var(--white); padding:13px 14px; text-align:left; font-weight:600; font-size:0.85rem; white-space:nowrap;}
.cmp-table td {padding:12px 14px; border-bottom:1px solid var(--border); background:var(--white); vertical-align:top;}
.cmp-table tr:last-child td {border-bottom:none;}
.cmp-table tbody tr:nth-child(even) td {background:var(--cream);}
.cmp-table .rank {font-weight:800; color:var(--forest); font-size:1.05rem; width:36px;}
.cmp-table .us {color:var(--amber); font-weight:700;}
.cmp-note {font-size:0.82rem; color:var(--text-muted); margin-top:10px;}
.pros-cons {display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.pros-box, .cons-box {padding:18px 22px; border-radius:10px;}
.pros-box {background:#f0f9f4; border:1px solid #a7f3d0;}
.cons-box {background:#fef2f2; border:1px solid #fecaca;}
.pros-box h4 {color:#16a34a; margin-bottom:8px; font-size:0.95rem;}
.cons-box h4 {color:#dc2626; margin-bottom:8px; font-size:0.95rem;}
.pros-box li, .cons-box li {font-size:0.9rem; margin-bottom:4px;}
li {color: var(--text-light); line-height: 1.7;}
.article-hero {padding: 40px 64px 60px;
  background: linear-gradient(135deg, var(--forest) 0%, var(--forest-light) 100%);
  position: relative; overflow: hidden;}
.article-hero::before {content: ''; position: absolute; top: -50%; right: -20%;
  width: 600px; height: 600px; border-radius: 50%;
  background: rgba(232,168,56,0.08); pointer-events: none;}
.article-hero-inner {position: relative; z-index: 1; max-width: 900px;}
.article-hero .label {display: inline-block; background: rgba(232,168,56,0.2); color: var(--amber);
  padding: 6px 16px; border-radius: 20px; font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 20px;}
.article-hero h1 {color: var(--white); margin-bottom: 16px;}
.article-hero p {color: rgba(255,255,255,0.85); font-size: 1.1rem; max-width: 700px; margin-bottom: 24px;}
.article-meta {display: flex; align-items: center; gap: 24px; flex-wrap: wrap;}
.article-meta span {color: rgba(255,255,255,0.7); font-size: 0.85rem; display: flex; align-items: center; gap: 6px;}
.article-body {padding: 60px 64px; max-width: 900px; margin: 0 auto;}
.article-body h2 {margin-top: 48px; margin-bottom: 16px; padding-bottom: 12px;
  border-bottom: 3px solid var(--amber); display: inline-block;}
.article-body h3 {margin-top: 28px; margin-bottom: 12px;}
.article-body p {margin-bottom: 16px;}
.article-body ul, .article-body ol {margin-bottom: 16px; padding-left: 24px;}
.article-body ul li {position: relative; padding-left: 20px; margin-bottom: 8px;}
.article-body ul li::before {content: ''; position: absolute; left: 0; top: 10px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--amber);}
.article-body ol {counter-reset: checklist;}
.article-body ol > li {position: relative; padding-left: 44px; margin-bottom: 32px;
  counter-increment: checklist; list-style: none;}
.article-body ol > li::before {content: counter(checklist);

/* Wide layout for marketing pages (Quality, etc.) */
.article-body.wide {max-width: 1400px;}
  position: absolute; left: 0; top: 0;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--forest); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.9rem;}
.checkpoint-good {background: #f0f9f4; border-left: 4px solid #22c55e; padding: 16px 20px; border-radius: 0 8px 8px 0; margin: 12px 0;}
.checkpoint-bad {background: #fef2f2; border-left: 4px solid #ef4444; padding: 16px 20px; border-radius: 0 8px 8px 0; margin: 12px 0;}
.checkpoint-gormeet {background: #eff6ff; border-left: 4px solid var(--forest); padding: 16px 20px; border-radius: 0 8px 8px 0; margin: 12px 0;}
.checkpoint-good strong {color: #16a34a;}
.checkpoint-bad strong {color: #dc2626;}
.checkpoint-gormeet strong {color: var(--forest);}
.checkpoint-label {font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px;}
.article-body img {border-radius: 12px; margin: 24px auto; max-width: 720px; width: 100%; height: auto; object-fit: contain; display: block;}
.article-body .img-caption {font-size: 0.85rem; color: var(--text-muted); text-align: center; margin-top: -12px; margin-bottom: 24px;}
.checklist-box {background: linear-gradient(135deg, var(--forest) 0%, var(--forest-light) 100%);
  border-radius: 16px; padding: 40px; margin: 48px 0;
  display: flex; align-items: center; gap: 32px; flex-wrap: wrap;}
.checklist-box h3 {color: var(--white); margin-bottom: 8px;}
.checklist-box p {color: rgba(255,255,255,0.85); margin-bottom: 20px;}
.checklist-box .btn-primary {background: var(--amber);}
.checklist-box .btn-primary:hover {background: var(--amber-dark);}
.related-products {padding: 60px 64px; background: var(--white);}
.related-products h2 {text-align: center; margin-bottom: 40px;}
.product-card img {width: 100%; height: 180px; object-fit: contain; background: var(--white); padding: 16px;}
.product-card-body h3 {font-size: 1rem; margin-bottom: 8px;}
.product-card-body p {font-size: 0.85rem; margin-bottom: 16px;}
.product-card-body .btn-secondary {font-size: 0.85rem; padding: 10px 20px;}
footer {background: var(--forest); color: rgba(255,255,255,0.92); padding: 64px 64px 32px;}
.footer-logo {font-size: 1.5rem; font-weight: 800; color: var(--white); margin-bottom: 16px;}
.footer-logo span {color: var(--amber);}
.footer-desc {font-size: 0.85rem; color: rgba(255,255,255,0.7); margin-bottom: 20px; line-height: 1.6;}
.footer-col h4 {font-size: 0.9rem; font-weight: 700; color: var(--white); margin-bottom: 20px; text-transform: uppercase; letter-spacing: 0.5px;}
.footer-col a {display: block; font-size: 0.85rem; color: rgba(255,255,255,0.7); padding: 6px 0; transition: color 0.2s;}
.footer-col a:hover {color: var(--amber);}
.footer-bottom p {font-size: 0.8rem; color: rgba(255,255,255,0.85);}
.whatsapp-float svg {width: 28px; height: 28px;}
.quote-hero {padding: 50px 64px 65px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--forest) 0%, #0a3d30 100%);
  color: var(--white);}
.quote-hero h1 {color: var(--white);}
.quote-hero p {color: rgba(255,255,255,0.9);}
.quote-section {padding: 60px 64px; background: var(--white);}
.quote-form-wrap {max-width: 800px; margin: 0 auto;}
.quote-form-wrap h2 {color: var(--forest); margin-bottom: 8px; text-align: center;}
.quote-form-wrap > p {text-align: center; margin-bottom: 40px;}
.quote-form {background: var(--cream); border-radius: 16px; padding: 40px 36px;
  box-shadow: var(--shadow-sm); border: 1px solid var(--border);}
.form-row {display: grid; grid-template-columns: 1fr 1fr; gap: 20px;}
.form-group {margin-bottom: 20px;}
.form-section-title {font-size: 1.05rem; font-weight: 700; color: var(--forest); margin: 28px 0 16px; padding-bottom: 8px; border-bottom: 2px solid var(--amber);}
.form-section-title:first-child {margin-top: 0;}
.radio-group, .checkbox-group {display: flex; flex-wrap: wrap; gap: 12px 20px;}
.radio-label, .checkbox-label {display: inline-flex; align-items: center; gap: 6px; font-size: 0.92rem; font-weight: 500; color: var(--text); cursor: pointer;}
.radio-label input, .checkbox-label input {width: 18px; height: 18px; accent-color: var(--forest); cursor: pointer;}
.quote-info {padding: 60px 64px; background: var(--cream);}
.info-grid {display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px;
  max-width: 1000px; margin: 0 auto;}
.info-card {background: var(--white); border-radius: 16px; padding: 28px 24px;
  text-align: center; box-shadow: var(--shadow-sm); border: 1px solid var(--border);
  transition: all 0.25s ease;}
.info-card:hover {transform: translateY(-3px); box-shadow: var(--shadow-md);}
.info-icon {width: 56px; height: 56px; background: var(--forest); color: var(--white);
  border-radius: 14px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.4rem; margin-bottom: 16px;}
.info-card h3 {color: var(--forest); font-size: 1.05rem; margin-bottom: 10px;}
.info-card p {font-size: 0.9rem;}
.cta-quote {padding: 80px 64px; background: var(--forest); color: var(--white);
  text-align: center; position: relative; overflow: hidden;}
.cta-quote::before {content: ''; position: absolute; top: -40%; right: -15%;
  width: 450px; height: 450px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232,168,56,0.1) 0%, transparent 70%);}
.cta-quote h2 {color: var(--white); font-size: clamp(1.6rem, 3.5vw, 2.2rem); margin-bottom: 16px; position: relative;}
.cta-quote p {color: rgba(255,255,255,0.95); font-size: 1.08rem; max-width: 650px;
  margin: 0 auto 36px; position: relative; line-height: 1.7;}
.sample-section {padding: 60px 64px; background: var(--white);}
.sample-form-wrap {max-width: 800px; margin: 0 auto;}
.sample-form-wrap h2 {color: var(--forest); margin-bottom: 8px; text-align: center;}
.sample-form-wrap > p {text-align: center; margin-bottom: 40px;}
.sample-form {background: var(--cream); border-radius: 16px; padding: 40px 36px;
  box-shadow: var(--shadow-sm); border: 1px solid var(--border);}
.sample-info {padding: 60px 64px; background: var(--cream);}
.sample-info h2 {color: var(--forest); text-align: center; margin-bottom: 48px;}
.info-card ul {list-style: disc; padding-left: 20px;}
.info-card ul li {font-size: 0.9rem; color: var(--text-light); margin-bottom: 6px;}
.cta-sample {padding: 80px 64px; background: var(--forest); color: var(--white);
  text-align: center; position: relative; overflow: hidden;}
.cta-sample::before {content: ''; position: absolute; top: -40%; right: -15%;
  width: 450px; height: 450px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232,168,56,0.1) 0%, transparent 70%);}
.cta-sample h2 {color: var(--white); font-size: clamp(1.6rem, 3.5vw, 2.2rem); margin-bottom: 16px; position: relative;}
.cta-sample p {color: rgba(255,255,255,0.95); font-size: 1.08rem; max-width: 650px;
  margin: 0 auto 36px; position: relative; line-height: 1.7;}
.steps-section {padding: 60px 64px; background: var(--cream);}
.steps-section h2 {color: var(--forest); text-align: center; margin-bottom: 48px;}
.steps-grid {display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
  max-width: 1100px; margin: 0 auto;}
.step-card {background: var(--white); border-radius: 16px; padding: 32px 24px;
  text-align: center; box-shadow: var(--shadow-sm); border: 1px solid var(--border);
  transition: all 0.25s ease;}
.step-card:hover {transform: translateY(-4px); box-shadow: var(--shadow-md);}
.step-number {width: 56px; height: 56px; background: var(--amber); color: var(--white);
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.5rem; margin-bottom: 20px;}
.step-card h3 {color: var(--forest); font-size: 1.1rem; margin-bottom: 12px;}
.step-card p {font-size: 0.9rem;}
.cta-thank {padding: 80px 64px; background: var(--forest); color: var(--white);
  text-align: center; position: relative; overflow: hidden;}
.cta-thank::before {content: ''; position: absolute; top: -40%; right: -15%;
  width: 450px; height: 450px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232,168,56,0.1) 0%, transparent 70%);}
.cta-thank h2 {color: var(--white); font-size: clamp(1.6rem, 3.5vw, 2.2rem); margin-bottom: 16px; position: relative;}
.cta-thank p {color: rgba(255,255,255,0.95); font-size: 1.08rem; max-width: 650px;
  margin: 0 auto 36px; position: relative; line-height: 1.7;}
.contact-hero {padding: 40px 64px 60px;
  position: relative;
  overflow: hidden; background: linear-gradient(135deg, var(--forest), #0a3d30); color: var(--white);}
.contact-section {padding: 60px 64px; background: var(--white);}
.contact-layout {display: grid; grid-template-columns: 1fr 1fr; gap: 60px;
  max-width: 1200px; margin: 0 auto;}
.contact-info-wrap h2 {color: var(--forest); margin-bottom: 8px;}
.contact-info-wrap > p {margin-bottom: 32px;}
.info-card a {color: var(--amber); font-weight: 600;}
.map-section {padding: 0 64px 60px; background: var(--white);}
.map-section h2 {color: var(--forest); text-align: center; margin-bottom: 8px;}
.map-section > p {text-align: center; margin-bottom: 32px;}
.map-placeholder {border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-sm); border: 1px solid var(--border);
  max-width: 1200px; margin: 0 auto;
  height: 400px;}
.map-placeholder iframe {width: 100%; height: 100%; border: 0; display: block;}
.cta-contact {padding: 80px 64px; background: var(--forest); color: var(--white);
  text-align: center; position: relative; overflow: hidden;}
.cta-contact::before {content: ''; position: absolute; top: -40%; right: -15%;
  width: 450px; height: 450px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232,168,56,0.1) 0%, transparent 70%);}
.cta-contact h2 {color: var(--white); font-size: clamp(1.6rem, 3.5vw, 2.2rem); margin-bottom: 16px; position: relative;}
.cta-contact p {color: rgba(255,255,255,0.95); font-size: 1.08rem; max-width: 650px;
  margin: 0 auto 36px; position: relative; line-height: 1.7;}
.guide-hero .hero-bg {position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(135deg, var(--forest) 0%, #0A3D2E 50%, #1A6B55 100%);}
.content-section {padding: 60px 64px; max-width: 1200px; margin: 0 auto;}
.step-header {display: flex; align-items: center; gap: 16px; margin-bottom: 24px;}
.step-title {font-size: 1.5rem; font-weight: 700; color: var(--text);}
.comparison-table {width: 100%; border-collapse: collapse; margin: 24px 0; background: var(--white);
  border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm);}
.comparison-table thead {background: var(--forest); color: var(--white);}
.comparison-table th {padding: 16px 20px; text-align: left; font-weight: 600; font-size: 0.95rem;}
.comparison-table td {padding: 14px 20px; border-bottom: 1px solid var(--border);}
.comparison-table tbody tr:last-child td {border-bottom: none;}
.comparison-table tbody tr:nth-child(even) td {background: var(--cream);}
.pros-box h4, .cons-box h4 {margin-bottom: 12px; font-size: 1.05rem;}
.pros-box ul, .cons-box ul {padding-left: 0;}
.pros-box li {padding: 6px 0 6px 24px; position: relative; color: var(--text-light);}
.cons-box li {padding: 6px 0 6px 24px; position: relative; color: var(--text-light);}
.pros-box li::before {content: '+'; position: absolute; left: 0; color: #2E7D32; font-weight: bold;}
.cons-box li::before {content: '\2212'; position: absolute; left: 0; color: #C62828; font-weight: bold;}
.info-box {background: #E3F2FD; border-left: 4px solid #1976D2; padding: 16px 20px;
  border-radius: 8px; margin: 20px 0;}
.info-box strong {color: var(--text);}
.related-products-container {max-width: 1400px; margin: 0 auto;}
.related-products-title {text-align: center; font-size: 1.8rem; font-weight: 700; color: var(--forest); margin-bottom: 8px;}
.related-products-subtitle {text-align: center; color: var(--text-light); margin-bottom: 40px; font-size: 1rem;}
.related-products-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-bottom: 32px;}
.related-product-card {background: var(--cream);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid var(--border);}
.related-product-card:hover {transform: translateY(-4px); box-shadow: var(--shadow-lg);}
.related-product-card img {width: 100%; height: 200px; object-fit: cover;}
.related-product-info {padding: 20px;}
.related-product-info h3 {font-size: 1.1rem; font-weight: 700; color: var(--text); margin-bottom: 6px;}
.related-product-info p {font-size: 0.88rem; color: var(--text-light); margin-bottom: 16px; line-height: 1.5;}
.related-product-link {display: inline-flex; align-items: center; gap: 6px;
  color: var(--forest); font-weight: 600; font-size: 0.9rem;
  transition: color 0.2s ease;}
.related-product-link:hover {color: var(--amber);}
.related-products-cta {text-align: center; margin-top: 8px;}
.content-section ul.content-list {padding-left: 20px; color: var(--text-light); list-style: disc;}
.content-section ul.content-list li {padding: 4px 0;}
.warning-box {background: #FFF8E1; border-left: 4px solid #F57F17; padding: 16px 20px;
  border-radius: 8px; margin: 20px 0;}
.warning-box strong {color: var(--text);}
.article-meta .meta-sep {width: 1px; height: 14px; background: rgba(255,255,255,0.25);}
.article-meta strong {color: rgba(255,255,255,0.95);}
.content-section ol.content-list {padding-left: 20px; color: var(--text-light);}
.content-section ol.content-list li {padding: 4px 0;}
.section-card {background: var(--white); border-radius: 12px; padding: 40px; margin-bottom: 32px;
  box-shadow: var(--shadow-sm); border: 1px solid var(--border);}
.section-card h2 {color: var(--forest); margin-bottom: 16px;}
.section-card h3 {color: var(--text); margin: 24px 0 12px;}
.section-card p {margin-bottom: 14px;}
.article-img {width: 100%; border-radius: 10px; margin: 24px 0;
  box-shadow: var(--shadow-sm); border: 1px solid var(--border);}
.article-img-caption {text-align: center; font-size: 0.85rem; color: var(--text-muted);
  margin-top: -16px; margin-bottom: 24px; font-style: italic;}
.timeline {position: relative; padding-left: 40px; margin: 24px 0;}
.timeline::before {content: ''; position: absolute; left: 14px; top: 6px; bottom: 6px;
  width: 2px; background: var(--amber); border-radius: 1px;}
.timeline-item {position: relative; margin-bottom: 28px;}
.timeline-item:last-child {margin-bottom: 0;}
.timeline-dot {position: absolute; left: -34px; top: 4px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--amber); border: 3px solid var(--white);
  box-shadow: 0 0 0 2px var(--amber);}
.timeline-item h4 {font-size: 1rem; font-weight: 700; color: var(--forest); margin-bottom: 4px;}
.timeline-item .timeline-time {font-size: 0.82rem; color: var(--amber); font-weight: 600; margin-bottom: 4px;}
.timeline-item p {font-size: 0.92rem; color: var(--text-light);}
.two-col {display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin: 24px 0;}
.decision-table {width: 100%; border-collapse: collapse; margin: 24px 0; background: var(--white);
  border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm);}
.decision-table td {padding: 16px 20px; border-bottom: 1px solid var(--border); vertical-align: top; font-size: 0.93rem;}
.decision-table td:first-child {font-weight: 700; color: var(--forest); width: 30%;}
.decision-table td:last-child {color: var(--text-light);}
.decision-table tbody tr:last-child td {border-bottom: none;}
.checklist {margin: 16px 0;}
.checklist li {display: flex; align-items: flex-start; gap: 10px; padding: 8px 0;
  font-size: 0.95rem; color: var(--text-light);}
.checklist li::before {content: '☑'; color: var(--amber); font-weight: bold; flex-shrink: 0; margin-top: 1px;}
.footer-social-svg {display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap;}
.footer .footer .footer-social-svg a {display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; transition: all 0.2s ease; padding: 0;}
#toc ol a {color: var(--forest); font-weight: 500; transition: color 0.2s;}
#toc ol a:hover {color: var(--amber); text-decoration: underline;}
.content-list {padding-left: 20px; color: var(--text-light); list-style: disc;}
.content-list li {padding: 4px 0;}
.content-ol {padding-left: 20px; color: var(--text-light);}
.content-ol li {padding: 4px 0;}
.step8-grid {display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:20px;}
.gp-row {display:flex; align-items:center; gap:14px; padding:10px 0; border-bottom:1px solid rgba(0,0,0,0.05);}
.gp-dot {width:12px; height:12px; border-radius:3px; flex-shrink:0;}
.gp-name {font-size:0.95rem; font-weight:600; min-width:120px;}
.gp-pct {font-size:1rem; font-weight:800; min-width:42px; text-align:right;}
.gp-bar {flex:1; height:8px; background:#E8DCC8; border-radius:4px; overflow:hidden;}
.gp-fill {height:100%; border-radius:4px; transition:width 1s ease;}
.gp-desc {font-size:0.78rem; color:var(--text-light);}
.article-hero-bg {position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(135deg, var(--forest) 0%, #0A3D2E 50%, #1A6B55 100%);}
.article-hero-bg::before {content: ''; position: absolute; top: -30%; right: -15%;
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232,168,56,0.12) 0%, transparent 70%);}
.article-hero-content {position: relative; z-index: 1; max-width: 800px; margin: 0 auto; text-align: center;}
.article-hero-content h1 {color: var(--white); margin-bottom: 18px;}
.article-hero-content h1 span {color: var(--amber);}
.table-section {padding: 60px 64px; background: var(--white);}
.table-section .section-header {max-width: 800px; margin-bottom: 48px; text-align: center;}
.compare-table-wrap {max-width: 1100px; margin: 0 auto; overflow-x: auto;}
.compare-table {width: 100%; border-collapse: collapse; background: var(--white);
  border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm);}
.compare-table th {background: var(--forest); color: var(--white); padding: 16px 20px;
  font-size: 0.9rem; font-weight: 600; text-align: left;}
.compare-table td {padding: 14px 20px; font-size: 0.88rem; border-bottom: 1px solid var(--border);
  vertical-align: top;}
.compare-table tr:last-child td {border-bottom: none;}
.compare-table tr:nth-child(even) td {background: var(--cream);}
.compare-table td:first-child {font-weight: 600; color: var(--forest); background: var(--cream);}
.type-section {padding: 70px 64px;}
.type-card {background: var(--white); border-radius: 16px; padding: 48px;
  margin-bottom: 32px; box-shadow: var(--shadow-md);
  border: 1px solid var(--border); transition: all 0.25s ease;}
.type-card:hover {box-shadow: var(--shadow-lg); transform: translateY(-2px);}
.type-card h2 {color: var(--forest); font-size: 1.5rem; margin-bottom: 8px;}
.type-subtitle {color: var(--amber-dark); font-weight: 600; margin-bottom: 16px; font-size: 0.95rem;}
.type-card p {font-size: 0.95rem; margin-bottom: 12px;}
.type-card p strong {color: var(--text);}
.pros, .cons {padding: 20px; border-radius: 12px;}
.pros {background: rgba(37,211,102,0.08); border-left: 4px solid #25D366;}
.cons {background: rgba(220,53,69,0.08); border-left: 4px solid #DC3545;}
.pros h4, .cons h4 {font-size: 1.05rem; margin-bottom: 12px;}
.pros h4 {color: #15803D;}
.cons h4 {color: #DC3545;}
.pros ul li, .cons ul li {margin-bottom: 8px; font-size: 0.92rem; line-height: 1.6;}
.pros ul li::before {content: "✓ "; color: #15803D; font-weight: 700;}
.cons ul li::before {content: "✗ "; color: #DC3545; font-weight: 700;}
.specs-table {width: 100%; border-collapse: collapse; margin: 20px 0;
  background: var(--white); border-radius: 10px; overflow: hidden;
  box-shadow: var(--shadow-sm);}
.specs-table th {background: var(--cream); color: var(--forest); padding: 14px 18px;
  font-size: 0.88rem; font-weight: 600; text-align: left;
  border-bottom: 2px solid var(--border);}
.specs-table td {padding: 12px 18px; font-size: 0.88rem; border-bottom: 1px solid var(--border);}
.specs-table tr:last-child td {border-bottom: none;}
.flowchart-section {padding: 60px 64px; background: var(--cream);}
.flowchart-card {background: var(--white); border-radius: 16px; padding: 48px;
  max-width: 900px; margin: 0 auto; box-shadow: var(--shadow-md);
  border: 1px solid var(--border);}
.flow-step {margin-bottom: 28px;}
.flow-step:last-child {margin-bottom: 0;}
.flow-step h3 {color: var(--forest); font-size: 1.15rem; margin-bottom: 12px;}
.flow-step ul {padding-left: 24px;}
.flow-step ul li {margin-bottom: 8px; font-size: 0.95rem; line-height: 1.6;}
.flow-step ul li strong {color: var(--forest);}
.cta-knowledge {padding: 80px 64px; background: var(--forest); color: var(--white);
  text-align: center; position: relative; overflow: hidden;}
.cta-knowledge::before {content: ''; position: absolute; top: -40%; right: -15%;
  width: 450px; height: 450px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232,168,56,0.1) 0%, transparent 70%);}
.cta-knowledge h2 {color: var(--white); font-size: clamp(1.6rem, 3.5vw, 2.2rem); margin-bottom: 16px; position: relative;}
.cta-knowledge p {color: rgba(255,255,255,0.95); font-size: 1.08rem; max-width: 650px;
  margin: 0 auto 36px; position: relative; line-height: 1.7;}
.knowledge-hero {padding: 40px 64px 60px;
  position: relative;
  overflow: hidden;  background: linear-gradient(135deg, var(--forest) 0%, #0a3d30 100%);  color: var(--white);}
.health-section {padding: 60px 64px;}
.health-section:nth-child(odd) {background: var(--white);}
.health-section:nth-child(even) {background: var(--cream);}
.health-header {max-width: 800px; margin: 0 auto 48px; text-align: center;}
.health-header h2 {color: var(--forest);}
.health-header p {margin-top: 12px; font-size: 1.02rem;}
.health-card {background: var(--cream); border-radius: 12px; padding: 32px;
  margin-bottom: 24px; box-shadow: var(--shadow-sm);
  border-left: 4px solid var(--amber);
  transition: all 0.25s ease;
  max-width: 900px; margin-left: auto; margin-right: auto; margin-bottom: 24px;}
.health-card:hover {transform: translateY(-3px); box-shadow: var(--shadow-md);}
.health-card h3 {color: var(--forest); font-size: 1.15rem; margin-bottom: 12px;}
.health-card p {font-size: 0.92rem;}
.health-card ul {margin-left: 1.5rem; margin-top: 0.5rem; font-size: 0.92rem; color: var(--text-light); line-height: 2;}
.health-label {display: inline-block; background: var(--forest); color: var(--white);
  font-size: 0.72rem; font-weight: 700; padding: 4px 12px; border-radius: 4px;
  margin-bottom: 10px;}
.health-highlight {display: inline-block; background: rgba(13,77,60,0.06); color: var(--forest);
  font-size: 0.82rem; font-weight: 600; padding: 8px 16px; border-radius: 8px;
  margin-top: 12px;}
.specs-table tr:nth-child(even) td {background: var(--cream);}
.condition-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  max-width: 900px; margin: 0 auto;}
.condition-card {background: var(--white); border-radius: 12px; padding: 28px 24px;
  box-shadow: var(--shadow-sm); border-top: 3px solid var(--amber);
  transition: all 0.25s ease;}
.condition-card:hover {transform: translateY(-3px); box-shadow: var(--shadow-md);}
.condition-card h3 {color: var(--forest); font-size: 1.05rem; margin-bottom: 10px;}
.condition-card p {font-size: 0.9rem;}
.process-section {padding: 70px 64px;}
.process-section .section-header {max-width: 800px; margin-bottom: 48px; text-align: center;}
.process-timeline {max-width: 900px; margin: 0 auto;}
.process-card {background: var(--white); border-radius: 16px; padding: 48px;
  margin-bottom: 32px; box-shadow: var(--shadow-md);
  border: 1px solid var(--border); transition: all 0.25s ease;
  border-left: 5px solid var(--amber);}
.process-card:hover {box-shadow: var(--shadow-lg); transform: translateY(-2px);}
.process-card h2 {color: var(--forest); font-size: 1.5rem; margin-bottom: 8px; display: flex; align-items: center; gap: 12px;}
.process-step-num {display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; background: var(--forest); color: var(--white);
  border-radius: 50%; font-size: 0.9rem; font-weight: 700; flex-shrink: 0;}
.process-card .process-duration {color: var(--amber-dark); font-weight: 600; margin-bottom: 16px; font-size: 0.95rem;}
.process-card p {font-size: 0.95rem; margin-bottom: 12px;}
.process-card p strong {color: var(--text);}
.process-steps {margin: 20px 0; padding-left: 0;}
.process-steps li {margin-bottom: 10px; font-size: 0.92rem; line-height: 1.6; padding-left: 24px; position: relative;}
.process-steps li::before {content: ''; position: absolute; left: 0; top: 8px;
  width: 8px; height: 8px; background: var(--amber); border-radius: 50%;}
.process-checkpoints {background: var(--cream); border-radius: 10px; padding: 20px 24px;
  margin-top: 20px; border-left: 4px solid var(--forest);}
.process-checkpoints h4 {color: var(--forest); font-size: 0.95rem; margin-bottom: 8px;}
.process-checkpoints p {font-size: 0.88rem;}
.capacity-section {padding: 60px 64px; background: var(--white);}
.capacity-section .section-header {max-width: 800px; margin-bottom: 48px; text-align: center;}
.capacity-table-wrap {max-width: 900px; margin: 0 auto; overflow-x: auto;}
.capacity-table {width: 100%; border-collapse: collapse; background: var(--white);
  border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm);}
.capacity-table th {background: var(--forest); color: var(--white); padding: 16px 20px;
  font-size: 0.9rem; font-weight: 600; text-align: left;}
.capacity-table td {padding: 14px 20px; font-size: 0.88rem; border-bottom: 1px solid var(--border);
  vertical-align: top;}
.capacity-table tr:last-child td {border-bottom: none;}
.capacity-table tr:nth-child(even) td {background: var(--cream);}
.qc-section {padding: 70px 64px; background: var(--cream);}
.qc-section .section-header {max-width: 800px; margin-bottom: 48px; text-align: center;}
.qc-card {background: var(--white); border-radius: 16px; padding: 48px;
  max-width: 900px; margin: 0 auto; box-shadow: var(--shadow-md);
  border: 1px solid var(--border);}
.qc-card ol {padding-left: 20px;}
.qc-card li {margin-bottom: 16px; font-size: 0.95rem; line-height: 1.7; color: var(--text-light);}
.qc-card li strong {color: var(--forest);}
.data-section .section-header {max-width: 800px; margin-bottom: 48px; text-align: center;}
.data-table-wrap {max-width: 1100px; margin: 0 auto; overflow-x: auto;}
.data-table {width: 100%; border-collapse: collapse; background: var(--white);
  border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm);}
.data-table th {background: var(--forest); color: var(--white); padding: 16px 20px;
  font-size: 0.9rem; font-weight: 600; text-align: left;}
.data-table td {padding: 14px 20px; font-size: 0.88rem; border-bottom: 1px solid var(--border);
  vertical-align: top;}
.data-table tr:last-child td {border-bottom: none;}
.data-table tr:nth-child(even) td {background: var(--cream);}
.data-table td:first-child {font-weight: 600; color: var(--forest); background: var(--cream);}
.growth-positive {color: #25D366; font-weight: 700;}
.trend-section {padding: 70px 64px;}
.trend-section .section-header {max-width: 800px; margin-bottom: 48px; text-align: center;}
.trend-card {background: var(--white); border-radius: 16px; padding: 48px;
  margin-bottom: 32px; box-shadow: var(--shadow-md);
  border: 1px solid var(--border); transition: all 0.25s ease;
  border-top: 4px solid var(--amber);}
.trend-card:hover {box-shadow: var(--shadow-lg); transform: translateY(-2px);}
.trend-card h2 {color: var(--forest); font-size: 1.5rem; margin-bottom: 8px;}
.trend-subtitle {color: var(--amber-dark); font-weight: 600; margin-bottom: 16px; font-size: 0.95rem;}
.trend-card p {font-size: 0.95rem; margin-bottom: 12px;}
.trend-card p strong {color: var(--text);}
.trend-implication {background: var(--cream); border-radius: 10px; padding: 16px 20px;
  margin-top: 20px; border-left: 4px solid var(--forest);
  font-size: 0.92rem;}
.regional-section {padding: 60px 64px; background: var(--cream);}
.regional-section .section-header {max-width: 800px; margin-bottom: 48px; text-align: center;}
.regional-table-wrap {max-width: 1100px; margin: 0 auto; overflow-x: auto;}
.regional-table {width: 100%; border-collapse: collapse; background: var(--white);
  border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm);}
.regional-table th {background: var(--forest); color: var(--white); padding: 16px 20px;
  font-size: 0.9rem; font-weight: 600; text-align: left;}
.regional-table td {padding: 14px 20px; font-size: 0.88rem; border-bottom: 1px solid var(--border);}
.regional-table tr:last-child td {border-bottom: none;}
.regional-table tr:nth-child(even) td {background: var(--cream);}
.guide-section {padding: 70px 64px;}
.guide-section .section-header {max-width: 800px; margin-bottom: 48px; text-align: center;}
.guide-card h2 {color: var(--forest); font-size: 1.5rem; margin-bottom: 8px; display: flex; align-items: center; gap: 12px;}
.guide-card p strong {color: var(--text);}
.guide-card ul li {margin-bottom: 10px; font-size: 0.92rem; line-height: 1.6; padding-left: 24px; position: relative; color: var(--text-light);}
.guide-card ul li::before {content: ''; position: absolute; left: 0; top: 8px;
  width: 8px; height: 8px; background: var(--amber); border-radius: 50%;}
.size-section {padding: 60px 64px; background: var(--cream);}
.size-section .section-header {max-width: 800px; margin-bottom: 48px; text-align: center;}
.size-table-wrap {max-width: 900px; margin: 0 auto; overflow-x: auto;}
.size-table {width: 100%; border-collapse: collapse; background: var(--white);
  border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm);}
.size-table th {background: var(--forest); color: var(--white); padding: 16px 20px;
  font-size: 0.9rem; font-weight: 600; text-align: left;}
.size-table td {padding: 14px 20px; font-size: 0.88rem; border-bottom: 1px solid var(--border);
  vertical-align: top;}
.size-table tr:last-child td {border-bottom: none;}
.size-table tr:nth-child(even) td {background: var(--cream);}
.size-table td:first-child {font-weight: 600; color: var(--forest); background: var(--cream);}
.pro-tip {background: rgba(232,168,56,0.08); border-left: 4px solid var(--amber);
  padding: 16px 20px; border-radius: 0 10px 10px 0; margin-top: 20px;
  font-size: 0.92rem;}
.maintenance-section {padding: 70px 64px; background: var(--white);}
.maintenance-section .section-header {max-width: 800px; margin-bottom: 48px; text-align: center;}
.maintenance-card {background: var(--cream); border-radius: 16px; padding: 32px 40px;
  margin-bottom: 24px; border-left: 5px solid var(--amber);
  max-width: 900px; margin-left: auto; margin-right: auto;}
.maintenance-card h3 {color: var(--forest); font-size: 1.15rem; margin-bottom: 12px;}
.maintenance-card ul {padding-left: 0;}
.maintenance-card ul li {margin-bottom: 8px; font-size: 0.92rem; line-height: 1.6; padding-left: 24px; position: relative; color: var(--text-light);}
.maintenance-card ul li::before {content: ''; position: absolute; left: 0; top: 7px;
  width: 8px; height: 8px; background: var(--amber); border-radius: 50%;}
.trouble-section {padding: 70px 64px; background: var(--cream);}
.trouble-section .section-header {max-width: 800px; margin-bottom: 48px; text-align: center;}
.trouble-card {background: var(--white); border-radius: 16px; padding: 32px 40px;
  margin-bottom: 24px; box-shadow: var(--shadow-sm);
  border: 1px solid var(--border); max-width: 900px; margin-left: auto; margin-right: auto;}
.trouble-card h3 {color: var(--forest); font-size: 1.1rem; margin-bottom: 8px;}
.trouble-card .cause {color: var(--amber-dark); font-weight: 600; font-size: 0.9rem; margin-bottom: 8px;}
.trouble-card .solution {color: var(--forest); font-weight: 600; font-size: 0.9rem; margin-top: 12px; margin-bottom: 4px;}
.life-section {padding: 60px 64px; background: var(--white);}
.life-section .section-header {max-width: 800px; margin-bottom: 48px; text-align: center;}
.life-table-wrap {max-width: 1100px; margin: 0 auto; overflow-x: auto;}
.life-table {width: 100%; border-collapse: collapse; background: var(--white);
  border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm);}
.life-table th {background: var(--forest); color: var(--white); padding: 16px 20px;
  font-size: 0.9rem; font-weight: 600; text-align: left;}
.life-table td {padding: 14px 20px; font-size: 0.88rem; border-bottom: 1px solid var(--border);
  vertical-align: top;}
.life-table tr:last-child td {border-bottom: none;}
.life-table tr:nth-child(even) td {background: var(--cream);}
.life-table td:first-child {font-weight: 600; color: var(--forest); background: var(--cream);}
.storage-section {padding: 70px 64px;}
.storage-section .section-header {max-width: 800px; margin-bottom: 48px; text-align: center;}
.storage-card {background: var(--white); border-radius: 16px; padding: 48px;
  margin-bottom: 32px; box-shadow: var(--shadow-md);
  border: 1px solid var(--border); transition: all 0.25s ease;
  border-left: 5px solid var(--amber);}
.storage-card:hover {box-shadow: var(--shadow-lg); transform: translateY(-2px);}
.storage-card h2 {color: var(--forest); font-size: 1.5rem; margin-bottom: 8px;}
.storage-card ul {padding-left: 0; margin-top: 16px;}
.storage-card ul li {margin-bottom: 10px; font-size: 0.92rem; line-height: 1.6; padding-left: 24px; position: relative; color: var(--text-light);}
.storage-card ul li::before {content: ''; position: absolute; left: 0; top: 8px;
  width: 8px; height: 8px; background: var(--amber); border-radius: 50%;}
.storage-card ul li strong {color: var(--text);}
.pack-section {padding: 60px 64px; background: var(--cream);}
.pack-section .section-header {max-width: 800px; margin-bottom: 48px; text-align: center;}
.pack-table-wrap {max-width: 1100px; margin: 0 auto; overflow-x: auto;}
.pack-table {width: 100%; border-collapse: collapse; background: var(--white);
  border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm);}
.pack-table th {background: var(--forest); color: var(--white); padding: 16px 20px;
  font-size: 0.9rem; font-weight: 600; text-align: left;}
.pack-table td {padding: 14px 20px; font-size: 0.88rem; border-bottom: 1px solid var(--border);}
.pack-table tr:last-child td {border-bottom: none;}
.pack-table tr:nth-child(even) td {background: var(--cream);}
.pack-recommend {background: rgba(232,168,56,0.08); border-radius: 10px; padding: 20px 24px;
  margin-top: 24px; border-left: 4px solid var(--amber); font-size: 0.95rem;}
.degrade-section {padding: 70px 64px;}
.degrade-card {background: var(--white); border-radius: 16px; padding: 48px;
  max-width: 900px; margin: 0 auto; box-shadow: var(--shadow-md);
  border: 1px solid var(--border);}
.degrade-card h3 {color: var(--forest); font-size: 1.15rem; margin-bottom: 16px;}
.degrade-card ul {padding-left: 0;}
.degrade-card ul li {margin-bottom: 12px; font-size: 0.95rem; line-height: 1.7; padding-left: 24px; position: relative; color: var(--text-light);}
.degrade-card ul li::before {content: ''; position: absolute; left: 0; top: 8px;
  width: 8px; height: 8px; background: #DC3545; border-radius: 50%;}
.degrade-card ul li strong {color: var(--text);}
.degrade-warning {background: rgba(220,53,69,0.08); border-left: 4px solid #DC3545;
  padding: 16px 20px; border-radius: 0 10px 10px 0; margin-top: 24px; font-size: 0.92rem;}
.faq-section:nth-child(odd) {background: var(--cream);}
.faq-header {max-width: 800px; margin: 0 auto 48px; text-align: center;}
.faq-header h2 {color: var(--forest);}
.faq-header p {margin-top: 12px; font-size: 1.02rem;}
.faq-list {max-width: 900px; margin: 0 auto;}
.faq-item:hover {transform: translateY(-2px); box-shadow: var(--shadow-md);}
.faq-item p {font-size: 0.92rem;}
.faq-item .answer-label {display: inline-block; background: var(--amber); color: var(--white);
  font-size: 0.72rem; font-weight: 700; padding: 3px 10px; border-radius: 4px;
  margin-bottom: 8px;}
.faq-item .b2b-tip {display: inline-block; background: rgba(13,77,60,0.06); color: var(--forest);
  font-size: 0.82rem; font-weight: 600; padding: 8px 16px; border-radius: 8px;
  margin-top: 12px;}
.faq-table {width: 100%; border-collapse: collapse; background: var(--white);
  border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm);
  margin-top: 16px;}
.faq-table th {background: var(--forest); color: var(--white); padding: 14px 18px;
  font-size: 0.88rem; font-weight: 600; text-align: left;}
.faq-table td {padding: 12px 18px; font-size: 0.88rem; border-bottom: 1px solid var(--border);
  vertical-align: top;}
.faq-table tr:last-child td {border-bottom: none;}
.faq-table tr:nth-child(even) td {background: var(--cream);}
.standards-section {padding: 60px 64px;}
.standards-section:nth-child(odd) {background: var(--white);}
.standards-section:nth-child(even) {background: var(--cream);}
.standards-header {max-width: 800px; margin: 0 auto 48px; text-align: center;}
.standards-header h2 {color: var(--forest);}
.standards-header p {margin-top: 12px; font-size: 1.02rem;}
.cert-card h3 {color: var(--forest); font-size: 1.15rem; margin-bottom: 16px;}
.cert-card ul {margin-left: 1.5rem; font-size: 0.92rem; color: var(--text-light); line-height: 2;}
.cert-card ul li {margin-bottom: 6px;}
.specs-table td:first-child {font-weight: 600; color: var(--forest); background: var(--cream);}
.cert-icon-box {width: 56px; height: 56px; background: var(--forest); color: var(--white);
  border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.2rem; flex-shrink: 0;}
.innovation-section {padding: 60px 64px;}
.innovation-section:nth-child(odd) {background: var(--white);}
.innovation-section:nth-child(even) {background: var(--cream);}
.innovation-header {max-width: 800px; margin: 0 auto 48px; text-align: center;}
.innovation-header h2 {color: var(--forest);}
.innovation-header p {margin-top: 12px; font-size: 1.02rem;}
.innovation-card {background: var(--white); border-radius: 12px; padding: 32px;
  margin-bottom: 24px; box-shadow: var(--shadow-sm);
  border-left: 4px solid var(--amber);
  transition: all 0.25s ease;
  max-width: 900px; margin-left: auto; margin-right: auto; margin-bottom: 24px;}
.innovation-card:hover {transform: translateY(-3px); box-shadow: var(--shadow-md);}
.innovation-card h3 {color: var(--forest); font-size: 1.15rem; margin-bottom: 12px;}
.innovation-card p {font-size: 0.92rem; margin-bottom: 8px;}
.innovation-label {display: inline-block; background: var(--forest); color: var(--white);
  font-size: 0.72rem; font-weight: 700; padding: 4px 12px; border-radius: 4px;
  margin-bottom: 10px;}
.innovation-highlight {display: inline-block; background: rgba(13,77,60,0.06); color: var(--forest);
  font-size: 0.82rem; font-weight: 600; padding: 8px 16px; border-radius: 8px;
  margin-top: 12px;}
.mistakes-section {padding: 60px 64px;}
.mistakes-section:nth-child(odd) {background: var(--white);}
.mistakes-section:nth-child(even) {background: var(--cream);}
.mistakes-header {max-width: 800px; margin: 0 auto 48px; text-align: center;}
.mistakes-header h2 {color: var(--forest);}
.mistakes-header p {margin-top: 12px; font-size: 1.02rem;}
.mistake-card {background: var(--cream); border-radius: 12px; padding: 32px;
  margin-bottom: 24px; box-shadow: var(--shadow-sm);
  border-left: 4px solid #D94436;
  transition: all 0.25s ease;
  max-width: 900px; margin-left: auto; margin-right: auto; margin-bottom: 24px;}
.mistake-card:hover {transform: translateY(-3px); box-shadow: var(--shadow-md);}
.mistake-card h3 {color: var(--forest); font-size: 1.08rem; margin-bottom: 12px;}
.mistake-card p {font-size: 0.92rem;}
.mistake-label {display: inline-block; background: #D94436; color: var(--white);
  font-size: 0.72rem; font-weight: 700; padding: 4px 12px; border-radius: 4px;
  margin-bottom: 10px;}
.mistake-highlight {display: inline-block; background: #FEE2E2; color: #D94436;
  font-size: 0.78rem; font-weight: 700; padding: 6px 14px; border-radius: 8px;
  margin-top: 14px;}
.checklist-box ol {font-size: 1.05rem; line-height: 2.5; color: var(--forest); font-weight: 500;}
.checklist-box ol li {padding: 6px 0;}
.knowledge-hero h1 {color: var(--white); margin-bottom: 16px;}
.knowledge-hero p {font-size: 1.1rem; max-width: 700px; margin: 0 auto 32px;}
.knowledge-hero .hero-actions {display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;}
.category-filter {display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 48px; padding: 0 64px;}
.category-btn {padding: 10px 24px; border-radius: 24px; border: 2px solid rgba(13,77,60,0.15);
  background: var(--white); color: var(--forest); font-weight: 600; font-size: 0.88rem;
  cursor: pointer; transition: all 0.2s ease;}
.category-btn:hover, .category-btn.active {background: var(--forest); color: var(--white); border-color: var(--forest);}
.article-card-image {height: 200px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--forest) 0%, #1A6B52 100%);
  overflow: hidden;}
.article-card-image .icon-wrapper {width: 80px; height: 80px; background: rgba(255,255,255,0.15); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.5rem; color: var(--white);}
.article-card-content {padding: 28px; flex: 1; display: flex; flex-direction: column;}
.article-card-tag {display: inline-block; background: rgba(232,168,56,0.12); color: var(--amber);
  font-size: 0.78rem; font-weight: 700; padding: 4px 12px; border-radius: 12px;
  margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.5px;
  align-self: flex-start;}
.article-card-link {color: var(--amber); font-weight: 700; font-size: 0.9rem; display: inline-flex;
  align-items: center; gap: 6px; margin-top: auto; transition: gap 0.2s ease;}
.article-card-link:hover {gap: 10px;}
.featured-card {background: var(--forest); border-radius: 16px; padding: 48px; display: flex; gap: 48px;
  align-items: center; color: var(--white);}
.featured-content {flex: 1;}
.featured-content .article-card-tag {background: rgba(232,168,56,0.2); color: var(--amber);}
.featured-content h2 {font-size: 1.8rem; font-weight: 800; margin-bottom: 16px; color: var(--white);}
.featured-content p {font-size: 1rem; color: rgba(255,255,255,0.8); line-height: 1.7; margin-bottom: 24px;}
.featured-content .btn-primary {background: var(--amber); color: var(--white);}
.hub-hero {padding: 40px 64px 80px;
  background: linear-gradient(135deg, var(--forest) 0%, #0A3D2E 100%);
  color: var(--white); text-align: center; position: relative; overflow: hidden;}
.hub-hero::before {content: ''; position: absolute; top: -30%; right: -15%;
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232,168,56,0.12) 0%, transparent 70%);}
.hub-hero h1 {color: var(--white); margin-bottom: 16px; position: relative;}
.hub-hero p {font-size: 1.1rem; color: rgba(255,255,255,0.7); max-width: 700px; margin: 0 auto 32px; position: relative;}
.hub-grid {padding: 80px 64px; max-width: 1200px; margin: 0 auto;}
.hub-grid h2 {text-align: center; font-size: clamp(1.4rem, 3vw, 1.8rem); color: var(--forest); margin-bottom: 16px;}
.hub-subtitle {text-align: center; color: var(--text-light); margin-bottom: 48px; max-width: 600px; margin-left: auto; margin-right: auto;}
.knowledge-cards {display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;}
.knowledge-card {background: var(--white); border-radius: 16px; padding: 32px;
  box-shadow: var(--shadow-sm); transition: all 0.3s ease;
  border: 2px solid transparent; display: flex; flex-direction: column;}
.knowledge-card:hover {border-color: var(--amber); transform: translateY(-4px); box-shadow: var(--shadow-md);}
.knowledge-card .card-icon {width: 64px; height: 64px; background: var(--cream); border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; margin-bottom: 16px;}
.knowledge-card h3 {font-size: 1.15rem; margin-bottom: 12px; color: var(--forest);}
.knowledge-card p {font-size: 0.9rem; color: var(--text-light); line-height: 1.7; margin-bottom: 16px; flex: 1;}
.knowledge-card .card-link {color: var(--amber); font-weight: 600; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 6px; transition: gap 0.2s ease;}
.knowledge-card .card-link:hover {gap: 10px;}
.featured-content ul {list-style: none; padding: 0;}
.featured-content li {padding: 8px 0; color: var(--text-light); position: relative; padding-left: 24px;}
.featured-content li::before {content: "\2713"; position: absolute; left: 0; color: var(--amber); font-weight: 700;}
.cta-hub {padding: 80px 64px; background: var(--forest); color: var(--white);
  text-align: center; position: relative; overflow: hidden;}
.cta-hub::before {content: ''; position: absolute; top: -40%; right: -15%;
  width: 450px; height: 450px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232,168,56,0.1) 0%, transparent 70%);}
.cta-hub h2 {color: var(--white); font-size: clamp(1.6rem, 3.5vw, 2.2rem); margin-bottom: 16px; position: relative;}
.cta-hub p {color: rgba(255,255,255,0.95); font-size: 1.08rem; max-width: 650px;
  margin: 0 auto 36px; position: relative; line-height: 1.7;}
.card-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;}
.card ul {margin-top: 10px; padding-left: 20px; color: var(--text-light); font-size: 0.9rem; list-style: disc;}
.card ul li {margin-bottom: 6px;}
.card-icon:hover {transform: translateY(-4px); box-shadow: var(--shadow-md);}
.card-icon .ci-icon {margin: 0 auto 16px;}
.card-icon h3 {color: var(--forest); margin-bottom: 8px;}
.phase-grid {display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;}
.phase-step {text-align: center; position: relative;}
.phase-num {width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.15rem; color: var(--white); margin: 0 auto 12px;}
.phase-num-amber {background: var(--amber);}
.phase-num-forest {background: var(--forest);}
.phase-label {font-size: 0.85rem; font-weight: 600; color: var(--forest);}
.phase-desc {font-size: 0.82rem; color: var(--text-light); margin-top: 6px; line-height: 1.5;}
.phase-connector {display: none;}
.hl-box {background: rgba(232,168,56,0.06); border: 1px solid rgba(232,168,56,0.2); border-radius: 10px; padding: 20px 24px;}
.card-icon-h {background: var(--white); border-radius: 12px; padding: 28px; box-shadow: var(--shadow-sm); transition: transform 0.2s;}
.card-icon-h:hover {transform: translateY(-4px); box-shadow: var(--shadow-md);}
.card-icon-h .cih-row {display: flex; align-items: flex-start; gap: 16px;}
.card-icon-h h3 {color: var(--forest); margin-bottom: 6px;}
.card-icon-h p {line-height: 1.65;}
.data-table.striped tbody tr:nth-child(even) {background: rgba(13,77,60,0.03);}
.table-highlight td {background: rgba(232,168,56,0.06) !important; font-weight: 600;}
.pill-tag {display: inline-block; padding: 6px 14px; border-radius: 20px; font-size: 0.82rem; font-weight: 600;}
.pill-tag-amber {background: rgba(232,168,56,0.12); color: var(--amber-dark);}
.pill-tag-forest {background: rgba(13,77,60,0.08); color: var(--forest);}
.size-grid {display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1100px; margin: 0 auto;}
.size-item {background: var(--cream); border-radius: 12px; padding: 24px; text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06); transition: transform 0.2s;}
.size-item:hover {transform: translateY(-4px);}
.size-item h3 {color: var(--forest); font-size: 1.1rem; margin-bottom: 8px;}
.size-item p {color: var(--text-light); font-size: 0.9rem;}
.pkg-card {background: var(--white); border-radius: 12px; padding: 28px; box-shadow: var(--shadow-sm); transition: transform 0.2s; text-align: center;}
.pkg-card:hover {transform: translateY(-4px); box-shadow: var(--shadow-md);}
.pkg-card .pkg-icon {margin: 0 auto 16px; font-size: 2rem;}
.pkg-card h3 {color: var(--forest); margin-bottom: 8px;}
.pkg-card p {font-size: 0.92rem; line-height: 1.65;}
.size-card {background: var(--white); border-radius: 12px; padding: 28px 20px; text-align: center; box-shadow: var(--shadow-sm); transition: transform 0.2s; border-top: 4px solid var(--amber);}
.size-card:hover {transform: translateY(-4px);}
.size-card .sz-num {font-size: 2rem; font-weight: 800; color: var(--forest); margin-bottom: 6px;}
.size-card .sz-tag {font-size: 0.88rem; color: var(--text-light);}
.check-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 12px 32px;}
.check-item {display: flex; align-items: center; gap: 10px; padding: 12px 0; font-size: 0.93rem; color: var(--text-light);}
.check-mark {color: var(--amber); font-weight: 700; font-size: 1.1rem; flex-shrink: 0;}
.pe-bag-section {background: linear-gradient(180deg, rgba(13,77,60,0.02) 0%, rgba(13,77,60,0.06) 100%);}
.pe-bag-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; max-width: 1100px; margin: 0 auto;}
.pe-bag-card {background: var(--white); border-radius: 16px; padding: 28px 24px 24px; box-shadow: 0 4px 20px rgba(0,0,0,0.05); text-align: center; transition: transform 0.25s ease, box-shadow 0.25s ease; border: 1px solid rgba(13,77,60,0.06); position: relative; overflow: hidden;}
.pe-bag-card:nth-child(odd) {background: #fafaf8;}
.pe-bag-card:hover {transform: translateY(-6px); box-shadow: 0 12px 32px rgba(0,0,0,0.1);}
.pe-bag-card::before {content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--forest), var(--amber)); opacity: 0; transition: opacity 0.25s;}
.pe-bag-card:hover::before {opacity: 1;}
.pe-bag-card img {width: 100%; height: 240px; object-fit: contain; margin-bottom: 18px; display: block;}
.pe-bag-card h3 {color: var(--forest); font-size: 1.1rem; margin-bottom: 10px; line-height: 1.35; font-weight: 700;}
.pe-bag-card h3 small {display: block; font-size: 0.9rem; font-weight: 500; color: var(--text-light); margin-top: 4px;}
.pe-bag-card p {color: var(--text-light); font-size: 0.92rem; line-height: 1.65;}
.materials-grid {display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 1000px; margin: 0 auto;}
.material-card {display: flex; gap: 20px; align-items: flex-start; background: var(--white); border-radius: 14px; padding: 28px; box-shadow: 0 2px 12px rgba(0,0,0,0.05); text-align: left; transition: transform 0.2s; border-top: 4px solid var(--amber);}
.material-card:hover {transform: translateY(-4px);}
.material-card:nth-child(even) {border-top-color: var(--forest);}
.material-card:nth-child(5) {grid-column: span 2; justify-content: center;}
.material-card .material-icon {width: 56px; height: 56px; border-radius: 14px; background: rgba(13,77,60,0.08); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; flex-shrink: 0;}
.material-card h3 {color: var(--forest); font-size: 1.15rem; margin-bottom: 6px;}
.material-card p {color: var(--text-light); font-size: 0.92rem; line-height: 1.65;}
.size-bar {display: flex; align-items: flex-end; justify-content: center; gap: 16px; margin-bottom: 36px; flex-wrap: wrap;}
.size-bar-item {display: flex; flex-direction: column; align-items: center; gap: 8px;}
.size-bar-box {background: linear-gradient(180deg, var(--forest) 0%, #0a3d30 100%); border-radius: 8px 8px 0 0; color: white; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 0.9rem;}
.size-bar-2-5 {width: 56px; height: 64px;}
.size-bar-5 {width: 76px; height: 90px;}
.size-bar-10 {width: 96px; height: 124px;}
.size-bar-20 {width: 116px; height: 164px;}
.size-bar-label {font-size: 0.85rem; color: var(--text-light);}
.steps-grid::before {content: ''; position: absolute; top: 32px; left: 18%; right: 18%; height: 2px; background: linear-gradient(90deg, var(--forest), var(--amber)); z-index: 0;}
.step-card:nth-child(2) {border-top-color: var(--forest);}
.step-card .step-num {width: 44px; height: 44px; border-radius: 50%; background: var(--forest); color: white; font-weight: 800; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 1.1rem;}
.print-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1000px; margin: 0 auto;}
.print-item {background: var(--white); border-radius: 12px; padding: 22px; box-shadow: 0 2px 10px rgba(0,0,0,0.04); display: flex; align-items: flex-start; gap: 14px; border-left: 4px solid var(--amber);}
.print-item:nth-child(even) {border-left-color: var(--forest);}
.print-item .print-icon {width: 32px; height: 32px; border-radius: 8px; background: rgba(232,168,56,0.12); color: var(--amber); display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0;}
.print-item p {color: var(--text-light); font-size: 0.93rem; line-height: 1.5; margin: 0;}
.model-hero {padding: 40px 64px 64px; position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--forest), #0a3d30); color: var(--white);}
.model-hero .hero-bg::before {content: ''; position: absolute; top: -30%; right: -15%;
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232,168,56,0.12) 0%, transparent 70%);}
.model-hero .hero-bg::after {content: ''; position: absolute; bottom: -20%; left: -10%;
  width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.04) 0%, transparent 70%);}
.model-hero h1 {font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.5px;}
.model-hero h1 span {color: var(--amber);}
.model-hero p {max-width: 720px; margin-top: 16px; font-size: 1.05rem; color: rgba(255,255,255,0.9);}
.section-header h2 {font-size: clamp(1.6rem, 3.5vw, 2.2rem); color: var(--text); margin-bottom: 12px;}
.def-section {padding: 64px 64px 20px; background: var(--white);}
.def-grid {max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 28px;}
.def-card {background: var(--cream); border-radius: 14px; padding: 32px 28px; border-top: 4px solid var(--amber);}
.def-card h3 {color: var(--forest); margin-bottom: 12px; font-size: 1.15rem;}
.def-card p {color: var(--text-light); font-size: 0.95rem; line-height: 1.6;}
.def-card .tag {display: inline-block; background: var(--forest); color: var(--white); font-size: 0.75rem; font-weight: 600; padding: 4px 10px; border-radius: 12px; margin-bottom: 12px;}
.cmp-section {padding: 40px 64px 64px; background: var(--white);}
.cmp-table th, .cmp-table td {padding: 16px 18px; text-align: left; font-size: 0.92rem; border-bottom: 1px solid var(--border); vertical-align: top;}
.cmp-table tbody tr:nth-child(even) {background: var(--cream);}
.cmp-table td b {color: var(--forest);}
.models-section {padding: 64px 64px; background: var(--cream);}
.models-grid {max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;}
.model-card {background: var(--white); border-radius: 14px; padding: 32px 28px; display: flex; flex-direction: column; transition: all 0.25s ease; border: 1px solid var(--border);}
.model-card:hover {transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,0.1);}
.model-card .mc-badge {width: 52px; height: 52px; border-radius: 12px; background: var(--forest); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: 18px;}
.model-card h3 {color: var(--text); font-size: 1.2rem; margin-bottom: 8px;}
.model-card .mc-sub {color: var(--text-light); font-size: 0.85rem; margin-bottom: 16px;}
.model-card ul {list-style: none; margin: 0 0 20px; padding: 0; flex: 1;}
.model-card ul li {font-size: 0.88rem; color: var(--text-light); padding-left: 18px; position: relative; margin-bottom: 8px;}
.model-card ul li::before {content: ''; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--amber);}
.model-card .card-link {color: var(--forest); font-weight: 700; font-size: 0.92rem; text-decoration: none; display: inline-flex; align-items: center; gap: 6px;}
.model-card .card-link:hover {color: var(--amber);}
.proc-section {padding: 64px 64px; background: var(--white);}
.proc-steps {max-width: 820px; margin: 0 auto;}
.proc-step {display: flex; gap: 24px; margin-bottom: 30px; align-items: flex-start;}
.proc-num {background: var(--amber); color: var(--white); width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; font-weight: 700; flex-shrink: 0;}
.proc-content h4 {color: var(--forest); margin-bottom: 6px; font-size: 1.05rem;}
.proc-content p {font-size: 0.92rem; color: var(--text-light); line-height: 1.6;}
.xlink-section {padding: 0 64px 64px; background: var(--white);}
.xlink-grid {max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;}
.xlink-card {background: var(--cream); border-radius: 12px; padding: 22px; text-decoration: none; transition: all 0.2s; border: 1px solid var(--border);}
.xlink-card:hover {box-shadow: 0 8px 24px rgba(0,0,0,0.08); transform: translateY(-2px);}
.xlink-card h4 {color: var(--forest); font-size: 0.98rem; margin-bottom: 6px;}
.xlink-card p {color: var(--text-light); font-size: 0.82rem;}
.cta-band {padding: 70px 64px; background: var(--forest); color: var(--white); text-align: center;}
.cta-band h2 {color: var(--white); margin-bottom: 14px;}
.cta-band p {color: rgba(255,255,255,0.88); max-width: 680px; margin: 0 auto 8px; font-size: 1.02rem;}
.req-section {padding: 56px 64px; background: var(--cream);}
.req-wrap {max-width: 880px; margin: 0 auto; background: var(--white); border-radius: 16px; padding: 40px; box-shadow: 0 8px 32px rgba(0,0,0,0.06);}
.req-intro {text-align: center; margin-bottom: 28px;}
.req-intro h3 {color: var(--forest); font-size: 1.4rem; margin-bottom: 8px;}
.req-intro p {color: var(--text-light); font-size: 0.95rem;}
.req-form {display: flex; flex-direction: column; gap: 26px;}
.form-section {border-top: 2px solid var(--cream); padding-top: 22px;}
.form-section:first-child {border-top: none; padding-top: 0;}
.form-section-title::before {content: ''; width: 6px; height: 18px; background: var(--amber); border-radius: 3px; display: inline-block;}
.form-field {margin-bottom: 16px;}
.form-field > label {display: block; font-weight: 600; color: var(--text); font-size: 0.92rem; margin-bottom: 7px;}
.form-field .opt {display: block; font-weight: 400; color: var(--text-muted); font-size: 0.8rem; margin-top: 3px;}
.form-field input[type=text], .form-field input[type=email], .form-field textarea, .form-field select {width: 100%; padding: 11px 14px; border: 1.5px solid var(--border); border-radius: 8px;
  font-size: 0.95rem; font-family: inherit; color: var(--text); background: var(--white); transition: border-color 0.2s;}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {outline: none; border-color: var(--forest); box-shadow: 0 0 0 3px rgba(26,107,85,0.1);}
.form-field textarea {resize: vertical; min-height: 60px;}
.radio-row, .check-row {display: flex; flex-wrap: wrap; gap: 10px 20px;}
.radio-opt, .check-opt {display: flex; align-items: center; gap: 7px; font-size: 0.9rem; color: var(--text-light); cursor: pointer;}
.radio-opt input, .check-opt input {width: 16px; height: 16px; accent-color: var(--forest);}
.form-note {font-size: 0.82rem; color: var(--text-muted); background: var(--cream); border-left: 3px solid var(--amber); padding: 10px 14px; border-radius: 6px; margin-top: 4px;}
.req-submit-btn {width: 100%; padding: 15px; background: var(--amber); color: var(--white); border: none;
  border-radius: 8px; font-size: 1.05rem; font-weight: 700; cursor: pointer; transition: all 0.2s; font-family: inherit;}
.req-submit-btn:hover {background: var(--amber-dark, #d9942e);}
.req-submit-btn:disabled {opacity: 0.6; cursor: not-allowed;}
.req-form .err {border-color: #d32f2f !important;}
.form-error-msg {color: #d32f2f; font-size: 0.82rem; margin-top: 6px; display: none;}
.req-privacy {text-align: center; font-size: 0.8rem; color: var(--text-muted); margin-top: 16px;}
.policy-hero {padding: 40px 64px 60px;
  background: linear-gradient(135deg, var(--forest) 0%, #0A3D30 50%, #072E23 100%);
  color: var(--white); position: relative; overflow: hidden;}
.policy-hero::before {content: ''; position: absolute; top: -30%; right: -15%;
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232,168,56,0.12) 0%, transparent 70%);}
.policy-hero-content {position: relative; z-index: 1; max-width: 800px;}
.policy-hero h1 {color: var(--white); margin-bottom: 16px;}
.policy-hero p {color: rgba(255,255,255,0.95); font-size: 1.05rem;}
.policy-content {padding: 60px 64px; background: var(--white);}
.policy-container {max-width: 900px; margin: 0 auto;}
.policy-container h2 {color: var(--forest); font-size: 1.5rem; margin-top: 40px; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 2px solid var(--cream);}
.policy-container h3 {color: var(--forest); font-size: 1.15rem; margin-top: 28px; margin-bottom: 12px;}
.policy-container p {margin-bottom: 16px; line-height: 1.8;}
.policy-container ul {margin-left: 20px; margin-bottom: 16px;}
.policy-container ul li {padding: 6px 0; padding-left: 20px; position: relative; color: var(--text-light);}
.policy-container ul li::before {content: '•'; color: var(--amber); font-weight: 700; position: absolute; left: 0;}
.policy-container .last-updated {background: var(--cream); padding: 12px 20px; border-radius: 8px; font-size: 0.9rem; color: var(--text-light); margin-bottom: 32px;}
.nav-links a {font-size:0.9rem; font-weight:500; color:var(--text);}
.nav-whatsapp:hover {background:var(--forest); color:var(--white);}
.showcase-section {padding:24px 64px 56px; max-width:1200px; margin:0 auto;}
.showcase-grid {display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;}
.showcase-image {border-radius:16px; overflow:hidden; background:var(--cream);
  display:flex; align-items:center; justify-content:center;}
.showcase-image {max-height: 460px;}
.showcase-image img {width:100%; height:100%; object-fit:cover; border-radius:16px;}
.showcase-content h1 {font-size:2.2rem; font-weight:800; line-height:1.2; margin-bottom:8px;}
.showcase-subtitle {color:var(--amber); font-weight:600; font-size:1.05rem; margin-bottom:18px;}
.showcase-tags {display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px;}
.tag {background:var(--cream); color:var(--forest); font-size:0.8rem;
  font-weight:600; padding:6px 14px; border-radius:16px;}
.showcase-desc {color:var(--text-light); line-height:1.75; margin-bottom:28px; font-size:0.95rem;}
.showcase-actions {display:flex; gap:16px; flex-wrap:wrap;}
.btn-large {background:var(--amber); color:var(--white); font-weight:700; font-size:1rem;
  padding:16px 32px; border-radius:10px; border:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px; transition:transform .15s;}
.btn-large:hover {transform:scale(1.03);}
.btn-outline {background:transparent; color:var(--forest); font-weight:600; font-size:1rem;
  padding:16px 32px; border-radius:10px; border:2px solid var(--forest);
  cursor:pointer; transition:all .15s;}
.btn-outline:hover {background:var(--forest); color:var(--white);}
.grade-table {width:100%; border-collapse:collapse; border-radius:12px; overflow:hidden; box-shadow:0 2px 12px rgba(0,0,0,0.06);}
.grade-table thead th {background:var(--forest); color:var(--white); padding:16px 18px;
  text-align:left; font-size:0.88rem; font-weight:600; letter-spacing:.02em;}
.grade-table tbody td {padding:15px 18px; border-bottom:1px solid rgba(0,0,0,0.05); font-size:0.9rem; vertical-align:top;}
.grade-table tbody tr:last-child td {border-bottom:none;}
.grade-table tbody tr:hover {background:rgba(13,77,60,0.03);}
.badge-recommended {display:inline-block; background:var(--amber); color:var(--white);
  font-size:0.7rem; font-weight:700; padding:3px 10px; border-radius:10px;
  margin-left:8px; vertical-align:middle;}
.check-icon {color:var(--forest); font-weight:700; margin-right:4px;}
.cross-icon {color:#C44; font-weight:700; margin-right:4px;}
.warn-text {color:#B86E00; font-weight:600;}
.difference-box {margin-top:28px; padding:24px 28px; border-left:4px solid var(--amber);
  background:linear-gradient(135deg, #FFF9EB, #FFF3D6); border-radius:0 12px 12px 0;}
.difference-box h4 {color:var(--forest); font-size:1rem; margin-bottom:10px;}
.difference-box p {font-size:0.92rem; line-height:1.7; color:var(--text-light);}
.difference-box a {color:var(--forest); font-weight:600;}
.custom-section {padding:56px 64px; max-width:1100px; margin:0 auto;}
.custom-grid {display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.custom-card {background:var(--white); border-radius:14px; padding:28px;
  box-shadow:0 2px 10px rgba(0,0,0,0.05); border-top:4px solid var(--forest);
  transition:transform .2s, box-shadow .2s;}
.custom-card:hover {transform:translateY(-4px); box-shadow:0 8px 24px rgba(0,0,0,0.1);}
.custom-card h3 {font-size:1.08rem; font-weight:700; margin-bottom:14px; color:var(--forest);}
.custom-list {list-style:none;}
.custom-list li {padding:7px 0; font-size:0.9rem; color:var(--text-light); border-bottom:1px dashed rgba(0,0,0,0.06);}
.custom-list li:last-child {border-bottom:none;}
.custom-note {margin-top:14px; font-size:0.82rem; color:var(--amber); font-weight:600;}
.specs-section {padding:56px 64px; background:var(--white);}
.specs-grid {display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:1100px; margin:0 auto;}
.spec-item {background:var(--cream); border-radius:12px; padding:22px;
  text-align:center; border:1px solid rgba(13,77,60,0.06);}
.spec-label {font-size:0.82rem; color:var(--text-light); margin-bottom:6px; font-weight:500;}
.spec-value {font-size:1.35rem; font-weight:800; color:var(--forest);}
.spec-unit {font-size:0.78rem; color:var(--text-light); margin-top:2px;}
.faq-grid {display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.faq-grid .faq-item {background: var(--white); border-radius: 12px; padding: 20px 24px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05); border-left: 4px solid var(--amber);
  transition: transform .2s, box-shadow .2s;}

.faq-card {background:var(--white); border-radius:12px; padding:22px 26px;
  box-shadow:0 2px 8px rgba(0,0,0,0.04); border-left:3px solid var(--forest);}
.faq-q {font-size:0.95rem; font-weight:700; color:var(--forest); margin-bottom:8px; line-height:1.45;}
.faq-a {font-size:0.87rem; color:var(--text-light); line-height:1.65;}
.faq-a strong {color:var(--text);}
.inquiry-section {padding:56px 64px; max-width:750px; margin:0 auto;}
.inquiry-form {background:var(--white); border-radius:16px; padding:44px;
  box-shadow:0 4px 20px rgba(0,0,0,0.07);}
.form-submit {width:100%; padding:16px; font-size:1.05rem; font-weight:700; cursor:pointer; border-radius:10px; border:none; background:var(--forest); color:var(--white); margin-top:8px; transition:opacity .15s;}
.form-submit:hover {opacity:.9;}
.form-footer {text-align:center; margin-top:18px; font-size:0.83rem; color:var(--text-light);}
.form-footer a {color:var(--amber); font-weight:600;}
.bridge-section {background:linear-gradient(135deg, #0D4D3C, #1a6b54, #0D4D3C);
  padding:64px 64px; text-align:center; color:var(--white);}
.bridge-title {font-size:1.9rem; font-weight:800; margin-bottom:10px;}
.bridge-subtitle {font-size:1.05rem; color: rgba(255,255,255,0.85); margin-bottom:42px; max-width:600px; margin-left:auto; margin-right:auto;}
.bridge-cards {display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:1000px; margin:0 auto;}
.bridge-card {background:rgba(255,255,255,.09); border-radius:14px; padding:32px 24px;
  border:1px solid rgba(255,255,255,.12); transition:transform .2s;}
.bridge-card:hover {transform:translateY(-4px); background:rgba(255,255,255,.14);}
.bridge-num {font-size:2rem; font-weight:800; color:var(--amber); margin-bottom:10px;}
.bridge-card h3 {font-size:1.1rem; font-weight:700; margin-bottom:10px;}
.bridge-card p {font-size:0.88rem; color: rgba(255,255,255,0.92); line-height:1.6;}
.footer-brand {font-size:1.35rem; font-weight:700; color:var(--amber); margin-bottom:12px;}
.lab-metrics-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.order-control-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px;}
.btn-ghost {background: transparent; color: var(--text-light); font-weight: 500;
  padding: 10px 24px; border-radius: 8px; border: 1px solid var(--border);
  font-size: 0.88rem; display: inline-flex; align-items: center; gap: 6px;
  transition: all 0.2s ease; white-space: nowrap;}
.btn-ghost:hover {border-color: var(--forest); color: var(--forest); background: rgba(13,77,60,0.04);}
.product-showcase {padding: 24px 64px 48px;}
.showcase-image:hover img {transform: scale(1.02);}
.showcase-badge {position: absolute; top: 18px; left: 18px;
  background: var(--forest); color: var(--white);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.5px;
  padding: 5px 14px; border-radius: 4px;}
.showcase-body h1 {margin-bottom: 4px;}
.showcase-body h1 .tm {color: var(--amber); font-size: 0.85em; font-weight: 600;}
.showcase-tag {background: var(--cream); color: var(--forest);
  font-size: 0.82rem; font-weight: 600; padding: 6px 14px; border-radius: 10px;}
.showcase-tag.highlight {background: var(--amber); color: var(--white);}
.grade-section {padding: 48px 64px;}
.section-label {font-size: 0.85rem; font-weight: 700; color: var(--forest);
  text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 8px;
  display: flex; align-items: center; gap: 12px;}
.section-label::before {content: ''; width: 32px; height: 3px; background: var(--amber); border-radius: 2px;}
.section-sub {font-size: 0.92rem; color: var(--text-muted); margin-bottom: 28px;}
.grade-table-wrap {overflow-x: auto; border-radius: 12px; border: 1px solid var(--border);}
.grade-table th {background: var(--forest); color: var(--white); font-weight: 600;
  padding: 14px 18px; text-align: center; font-size: 0.84rem;
  border-right: 1px solid rgba(255,255,255,0.1);}
.grade-table th:first-child {text-align: left; width: 160px;}
.grade-table td {padding: 13px 18px; text-align: center; border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);}
.grade-table td:first-child {text-align: left; font-weight: 600; background: var(--cream);}
.grade-table tr:last-child td {border-bottom: none;}
.grade-table tr.recommended-row td:first-child,
.grade-table tr.recommended-row td {background: rgba(232,168,56,0.05);}
.grade-recommended-badge {display: inline-block; background: var(--amber); color: var(--white);
  font-size: 0.72rem; font-weight: 700; padding: 2px 10px; border-radius: 10px;
  margin-left: 6px; vertical-align: middle;}
.buyer-type {font-size: 0.83rem; color: var(--text-light); line-height: 1.5;}
.grade-note {text-align: center; margin-top: 16px; font-size: 0.84rem; color: var(--text-muted);}
.difference-icon {font-size: 1.8rem; flex-shrink: 0;}
.difference-text h4 {color: var(--forest); font-size: 0.95rem; margin-bottom: 6px;}
.difference-text p {font-size: 0.86rem; margin-bottom: 0;}
.custom-card-header {background: var(--forest); color: var(--white); padding: 18px 24px;
  display: flex; align-items: center; gap: 10px;}
.custom-icon {font-size: 1.4rem;}
.custom-card-header h3 {color: var(--white); font-size: 1rem; margin-bottom: 0;}
.custom-card-body {padding: 22px 24px;}
.custom-chip {background: var(--cream); color: var(--forest); font-size: 0.82rem;
  font-weight: 600; padding: 5px 12px; border-radius: 8px;
  transition: all 0.15s ease;}
.custom-chip:hover {background: var(--amber); color: var(--white);}
.custom-note strong {color: var(--amber);}
.faq-a a {color: var(--amber); font-weight: 600;}
.inquiry-box {max-width: 700px; margin: 0 auto; background: var(--cream);
  border-radius: 16px; padding: 40px 44px; border: 1px solid var(--border);}
.inquiry-title {text-align: center; margin-bottom: 6px;}
.inquiry-sub {text-align: center; color: var(--text-muted); font-size: 0.9rem; margin-bottom: 28px;}
.form-label {display: block; font-weight: 600; font-size: 0.88rem; color: var(--text); margin-bottom: 6px;}
.form-input {width: 100%; padding: 12px 16px; border: 1px solid rgba(0,0,0,0.1); border-radius: 8px;
  font-size: 0.95rem; font-family: inherit; background: var(--white);
  transition: border-color 0.2s ease;}
.form-input:focus {outline: none; border-color: var(--amber);}
textarea.form-input {resize: vertical; min-height: 100px;}
.bridge-section::before {content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at 70% 40%, rgba(232,168,56,0.12) 0%, transparent 50%);
  pointer-events: none;}
.bridge-content {position: relative; max-width: 800px; margin: 0 auto; text-align: center;}
.bridge-content h2 {color: var(--white); margin-bottom: 8px;}
.bridge-divider {width: 40px; height: 3px; background: var(--amber); border-radius: 2px; margin: 16px auto 20px;}
.bridge-content > p {color: rgba(255,255,255,0.7); font-size: 1rem; margin-bottom: 32px;}
.bridge-buttons {display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;}
.showcase-tags span {background: linear-gradient(135deg,#0D4D3C,#167d65); color: #fff;
  font-size: 0.78rem; font-weight: 600; padding: 6px 14px; border-radius: 20px;}
.badge-gold {display: inline-block; background: linear-gradient(135deg,#E8A838,#f0c060); color: #fff;
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.5px; padding: 4px 12px; border-radius: 4px;
  animation: pulse-badge 2.5s infinite;}
.clamping-demo {margin: 40px auto 0; max-width: 800px; border-radius: 16px; overflow: hidden; background: var(--white); box-shadow: 0 4px 24px rgba(0,0,0,0.08);}
.clamping-demo img {width: 100%; height: auto; object-fit: contain;}
.clamping-demo-caption {padding: 16px 24px; background: var(--forest); color: #fff; font-size: 0.9rem; font-weight: 600; text-align: center;}
.grade-table-section {padding: 48px 64px; background: var(--white);}
.grade-header {text-align: center; margin-bottom: 32px;}
.grade-header h2 {font-size: 1.8rem; font-weight: 800; color: var(--text); margin-bottom: 8px;}
.grade-header p {color: var(--text-light); font-size: 1rem;}
.table-wrapper {max-width: 900px; margin: 0 auto; overflow-x: auto;}
.grade-table tr:hover td {background: var(--cream);}
.badge-recommend {display: inline-block; background: var(--amber); color: #fff; font-size: 0.68rem; font-weight: 700; padding: 2px 8px; border-radius: 4px; vertical-align: middle; margin-left: 6px;}
.difference-box .icon {font-size: 1.4rem; flex-shrink: 0;}
.difference-box strong {color: var(--text);}
.custom-header {text-align: center; margin-bottom: 36px;}
.custom-header h2 {font-size: 1.7rem; font-weight: 800; color: var(--text); margin-bottom: 8px;}
.custom-header p {color: var(--text-light); font-size: 1rem;}
.custom-card ul {list-style: none; padding: 0;}
.custom-card li {padding: 6px 0; font-size: 0.9rem; color: var(--text-light); display: flex; align-items: center; gap: 8px;}
.custom-card li::before {content: "✦"; color: var(--amber); font-size: 0.75rem; flex-shrink: 0;}
.no-extra {color: var(--forest); font-weight: 600; font-size: 0.82rem; margin-top: 12px; padding: 8px 12px; background: var(--cream); border-radius: 6px; display: inline-block;}
.specs-header {text-align: center; margin-bottom: 36px;}
.specs-header h2 {font-size: 1.7rem; font-weight: 800; color: var(--text); margin-bottom: 8px;}
.spec-card {background: var(--cream); border-radius: 12px; padding: 22px; text-align: center; transition: transform 0.2s;}
.spec-card:hover {transform: translateY(-3px);}
.faq-q::before {content: "Q"; background: var(--amber); color: #fff; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 800; flex-shrink: 0;}
.inquiry-inner {max-width: 700px; margin: 0 auto;}
.inquiry-section h2 {font-size: 1.6rem; font-weight: 800; color: var(--text); text-align: center; margin-bottom: 8px;}
.inquiry-section > .inquiry-inner > p {text-align: center; color: var(--text-light); margin-bottom: 28px;}
.btn-submit {width: 100%; padding: 14px; background: var(--forest); color: #fff; border: none;
  border-radius: 8px; font-size: 1rem; font-weight: 700; cursor: pointer; transition: all 0.2s;
  margin-top: 8px;}
.btn-submit:hover {background: #093d30; transform: translateY(-1px);}
.bridge-inner {max-width: 1000px; margin: 0 auto;}
.bridge-header {text-align: center; margin-bottom: 40px;}
.bridge-header h2 {font-size: 1.85rem; font-weight: 800; margin-bottom: 10px; color: #fff;}
.bridge-header p {font-size: 1.02rem; color: rgba(255,255,255,0.85);}
.bridge-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;}
.bridge-card a {display: inline-block; font-size: 0.88rem; font-weight: 600; color: #E8A838;
  border-bottom: 1.5px solid #E8A838; padding-bottom: 2px; transition: color 0.2s, border-color 0.2s;}
.bridge-card a:hover {color: #f0c060; border-color: #f0c060;}
.btn-secondary, .btn-outline {background: transparent; color: var(--forest); font-weight: 600;
  padding: 12px 28px; border-radius: 8px; border: 2px solid var(--forest);
  font-size: 0.95rem; display: inline-flex; align-items: center; gap: 8px;
  transition: all 0.2s ease; white-space: nowrap;}
.btn-secondary:hover, .btn-outline:hover {background: var(--forest); color: var(--white);}
.page-header {text-align: center; padding: 20px 64px 40px;
  max-width: 900px; margin: 0 auto;}
.page-header h1 {font-size: 2.2rem; font-weight: 800; color: var(--forest); margin-bottom: 12px; line-height: 1.2;}
.page-header p {font-size: 1.08rem; color: var(--text-light); line-height: 1.7; max-width: 700px; margin: 0 auto 24px;}
.path-chooser {display: flex; justify-content: center; gap: 16px; flex-wrap: wrap;}
.path-btn {padding: 10px 24px; border-radius: 50px; font-size: 0.85rem; font-weight: 600;
  border: 2px solid var(--forest); color: var(--forest); background: var(--white);
  cursor: pointer; transition: all 0.2s;}
.path-btn:hover, .path-btn.active {background: var(--forest); color: var(--white);}
.path-btn.amber-btn {border-color: var(--amber); color: var(--amber);}
.path-btn.amber-btn:hover, .path-btn.amber-btn.active {background: var(--amber); color: var(--white);}
.product-showcase.featured {border-color: var(--amber);}
.product-showcase:nth-child(even) {border-color: var(--forest);}
.showcase-inner {display: grid; grid-template-columns: 1fr 1fr; gap: 0;}
.product-showcase:hover .showcase-image img {transform: scale(1.03);}
.showcase-badge.forest-badge {background: var(--forest); box-shadow: 0 4px 12px rgba(13,77,60,0.3);}
.showcase-badge.best-seller {background: linear-gradient(135deg, #E8A838, #d4942e);
  animation: pulse-badge 2s ease-in-out infinite;}
.showcase-content {padding: 44px 40px; display: flex; flex-direction: column; justify-content: center;}
.showcase-content h2 {font-size: 1.65rem; font-weight: 800; color: var(--forest); margin-bottom: 6px; line-height: 1.3;}
.showcase-desc strong {color: var(--text);}
.showcase-highlights {list-style: none; margin-bottom: 28px;}
.showcase-highlights li {display: flex; align-items: flex-start; gap: 10px;
  font-size: 0.88rem; color: var(--text); margin-bottom: 10px; line-height: 1.5;}
.showcase-highlights li .check {color: var(--amber); font-weight: 800; font-size: 1rem; flex-shrink: 0;}
.compare-section {padding: 64px 64px; background: var(--white);}
.compare-header {text-align: center; max-width: 750px; margin: 0 auto 40px;}
.compare-header h2 {font-size: 1.8rem; font-weight: 800; color: var(--forest); margin-bottom: 10px;}
.compare-header p {color: var(--text-light); font-size: 0.95rem;}
.compare-table thead th {background: var(--forest); color: var(--white);
  padding: 16px 20px; text-align: left; font-size: 0.88rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.5px;}
.compare-table thead th:first-child {min-width: 160px;}
.compare-table tbody td {padding: 14px 20px; border-bottom: 1px solid var(--border);
  font-size: 0.88rem; vertical-align: middle;}
.compare-table tbody tr:last-child td {border-bottom: none;}
.compare-table tbody tr:hover {background: var(--cream);}
.compare-table .best {color: var(--amber); font-weight: 700;}
.compare-table .good {color: var(--forest); font-weight: 600;}
.compare-table .warn {color: #c74a2a;}
.compare-table .badge-cell {display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 50px; font-size: 0.78rem; font-weight: 700;}
.badge-best {background: rgba(232,168,56,0.12); color: var(--amber-dark);}
.badge-good {background: rgba(13,77,60,0.08); color: var(--forest-light);}
.custom-card h3 .icon {font-size: 1.2rem;}
.custom-card ul li {font-size: 0.87rem; color: var(--text); padding: 6px 0; border-bottom: 1px dashed var(--border);}
.custom-card ul li:last-child {border-bottom: none;}
.custom-card .note {margin-top: 14px; font-size: 0.82rem; color: var(--amber-dark); font-weight: 600;}
.spec-card h3 {font-size: 0.88rem; font-weight: 600; color: var(--text-light); margin-bottom: 8px;}
.inquiry-header {text-align: center; max-width: 550px; margin: 0 auto 36px;}
.inquiry-header h2 {font-size: 1.7rem; font-weight: 800; color: var(--forest); margin-bottom: 8px;}
.inquiry-header p {color: var(--text-light); font-size: 0.93rem;}
.inquiry-form-wrap {max-width: 680px; margin: 0 auto;
  background: var(--cream); border-radius: 20px;
  padding: 44px 40px; box-shadow: var(--shadow-md);}
.form-row label {display: block; font-weight: 600; font-size: 0.88rem; color: var(--text); margin-bottom: 6px;}
.form-row input, .form-row select, .form-row textarea {width: 100%; padding: 12px 16px; border: 2px solid var(--border);
  border-radius: 10px; font-size: 0.95rem; font-family: inherit;
  background: var(--white); transition: border-color 0.2s;}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {outline: none; border-color: var(--amber);}
.form-row textarea {resize: vertical; min-height: 100px;}
.bridge-section h2 {font-size: 1.8rem; font-weight: 800; margin-bottom: 12px;}
.bridge-section p {font-size: 1rem; opacity: 1; max-width: 600px; margin: 0 auto 32px; line-height: 1.6;}
.bridge-card h4 {font-size: 1rem; font-weight: 700; margin-bottom: 8px;}
.bridge-cta {display: inline-flex; align-items: center; gap: 8px; margin-top: 32px;}
.tag-highlight {background: var(--forest); color: white;}
.grade-table-wrapper {overflow-x: auto; border-radius: 16px; box-shadow: 0 2px 16px rgba(0,0,0,.06);}
.grade-name {font-weight: 800; color: var(--forest); font-size: 1rem;}
.badge-rec {display: inline-block; background: var(--amber); color: white;
  font-size: 0.72rem; font-weight: 800; padding: 3px 10px; border-radius: 20px;
  margin-left: 6px; letter-spacing: .3px; vertical-align: middle;}
.bridge-btn {display: inline-flex; align-items: center; gap: 8px;
  padding: 16px 36px; background: var(--amber); color: white;
  font-weight: 800; font-size: 1rem; border-radius: 10px;
  transition: all .2s; border: none; cursor: pointer;
  text-decoration: none;}
.bridge-btn:hover {background: #d4972e; transform: translateY(-2px);}
.diameter-section {padding: 48px 64px; background: var(--white);}
.diameter-layout {display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 1100px; margin: 0 auto;}
.diameter-visual {background: var(--cream); border-radius: 12px; overflow: hidden;
  border: 1px solid var(--border);}
.diameter-visual img {width: 100%; height: auto; display: block;
  object-fit: contain; object-position: center top;}
.diameter-options {display: flex; flex-direction: column; gap: 16px;}
.diameter-card {background: var(--cream); border-radius: 10px; padding: 20px 24px;
  border-left: 4px solid transparent; transition: all 0.25s ease;}
.diameter-card:hover {border-left-color: var(--amber); box-shadow: var(--shadow-sm);}
.diameter-card.featured {border-left-color: var(--amber); background: linear-gradient(135deg, rgba(232,168,56,0.07) 0%, var(--cream) 100%);}
.diameter-card-header {display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;}
.diameter-card h3 {font-size: 1.05rem; margin-bottom: 0;}
.diameter-badge {font-size: 0.72rem; font-weight: 700; padding: 3px 10px; border-radius: 10px;}
.badge-standard {background: var(--amber); color: var(--white);}
.badge-premium {background: var(--forest); color: var(--white);}
.badge-economy {background: var(--text-muted); color: var(--white);}
.diameter-desc {font-size: 0.86rem; color: var(--text-light); line-height: 1.6;}
.diameter-surchage {font-size: 0.78rem; color: var(--amber-dark); font-weight: 600;
  margin-top: 6px;}
.compare-header h1 {font-size: 2rem; font-weight: 800; color: var(--text); margin-bottom: 8px;}
.compare-path-btns {display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;}
.compare-path-btns a {padding: 10px 24px; border-radius: 8px; font-weight: 600; font-size: 0.9rem;
  transition: all 0.2s;}
.path-standard {background: var(--forest); color: #fff;}
.path-standard:hover {transform: translateY(-2px); box-shadow: 0 4px 14px rgba(13,77,60,0.35);}
.path-oem {background: var(--amber); color: var(--forest);}
.path-oem:hover {transform: translateY(-2px); box-shadow: 0 4px 14px rgba(232,168,56,0.35);}
.compare-section h2 {font-size: 1.5rem; font-weight: 800; color: var(--text); margin-bottom: 24px; text-align: center;}
.compare-table th:first-child {border-radius: 14px 0 0 0;}
.compare-table th:last-child {border-radius: 0 14px 0 0;}
.compare-table tr:hover td {background: var(--cream);}
.best-tag {display: inline-block; background: #d4edda; color: var(--forest); font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 4px; vertical-align: middle;}
.quick-cards {display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 0 64px 56px; max-width: 1200px; margin: 0 auto;}
.quick-card {background: var(--white); border-radius: 14px; padding: 28px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06); transition: transform 0.2s, box-shadow 0.2s;}
.quick-card:hover {transform: translateY(-4px); box-shadow: 0 8px 28px rgba(0,0,0,0.1);}
.quick-card h3 {font-size: 1.05rem; font-weight: 700; color: var(--forest); margin-bottom: 8px; display: flex; align-items: center; gap: 8px;}
.quick-card .tag {font-size: 0.78rem; font-weight: 600; color: var(--amber); margin-bottom: 10px;}
.quick-card p {font-size: 0.88rem; color: var(--text-light); line-height: 1.6; margin-bottom: 14px;}
.quick-card a {display: inline-block; font-size: 0.84rem; font-weight: 600; color: var(--forest); border-bottom: 1.5px solid var(--forest); padding-bottom: 2px; transition: color 0.2s;}
.quick-card a:hover {color: var(--amber); border-color: var(--amber);}
.page-intro {padding: 24px 64px 48px;
  border-bottom: 1px solid var(--border);}
.page-intro-header {display: flex; align-items: flex-start; justify-content: space-between; gap: 40px;
  margin-bottom: 28px;}
.page-intro-header h1 {flex: 1;}
.page-intro-header h1 .accent {color: var(--amber);}
.page-intro-sub {font-size: 1.05rem; color: var(--text-light); max-width: 680px; margin-bottom: 20px;}
.path-btn-standard {background: var(--forest); color: var(--white);}
.path-btn-standard:hover {background: var(--forest-light); transform: translateY(-2px);}
.path-btn-custom {background: var(--white); color: var(--amber); border: 2px solid var(--amber);}
.path-btn-custom:hover {background: var(--amber); color: var(--white); transform: translateY(-2px);}
.flagship-section {padding: 64px 64px 48px;}
.flagship-section-title {font-size: 0.85rem; font-weight: 700; color: var(--forest);
  text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 32px;
  display: flex; align-items: center; gap: 12px;}
.flagship-section-title::before {content: ''; width: 32px; height: 3px; background: var(--amber); border-radius: 2px;}
.flagship-card {display: flex; gap: 0; background: var(--white); border-radius: 16px;
  overflow: hidden; box-shadow: var(--shadow-md); margin-bottom: 32px;
  border: 1px solid rgba(0,0,0,0.04);
  transition: box-shadow 0.3s ease;}
.flagship-card:hover {box-shadow: var(--shadow-lg);}
.flagship-card:last-child {margin-bottom: 0;}
.flagship-img {flex: 0 0 42%; background: var(--cream); position: relative; overflow: hidden;
  min-height: 320px;}
.flagship-img img {width: 100%; height: 100%; object-fit: contain; object-position: center;
  transition: transform 0.3s ease;}
.flagship-card:hover .flagship-img img {transform: scale(1.03);}
.flagship-badge {position: absolute; top: 20px; left: 20px;
  background: var(--forest); color: var(--white);
  font-size: 0.72rem; font-weight: 700; padding: 5px 12px;
  border-radius: 4px; letter-spacing: 0.5px;}
.flagship-body {flex: 1; padding: 36px 40px; display: flex; flex-direction: column;}
.flagship-body h2 {margin-bottom: 4px;}
.flagship-body h2 .tm {color: var(--amber); font-size: 0.9em; font-weight: 600;}
.flagship-subtitle {font-size: 0.9rem; color: var(--text-muted); margin-bottom: 20px;}
.flagship-specs {display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px;
  margin-bottom: 24px;}
.spec-dot {width: 8px; height: 8px; border-radius: 50%; background: var(--amber);}
.flagship-desc {font-size: 0.95rem; color: var(--text-light); line-height: 1.7;
  margin-bottom: 24px; max-width: 500px;}
.flagship-actions {display: flex; gap: 12px; align-items: center;}
.flagship-link {color: var(--forest); font-weight: 700; font-size: 0.95rem;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 20px; border-radius: 8px; border: 2px solid var(--forest);
  transition: all 0.2s ease;}
.flagship-link:hover {background: var(--forest); color: var(--white); gap: 10px;}
.secondary-section {padding: 48px 64px 64px;}
.secondary-section-title {font-size: 0.85rem; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 32px;
  display: flex; align-items: center; gap: 12px;}
.secondary-section-title::before {content: ''; width: 32px; height: 3px; background: var(--text-muted); border-radius: 2px;}
.secondary-grid {display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  max-width: 1200px;}
.secondary-card {background: var(--white); border-radius: 12px; overflow: hidden;
  box-shadow: var(--shadow-sm); border: 1px solid rgba(0,0,0,0.04);
  transition: all 0.3s ease;}
.secondary-card:hover {transform: translateY(-4px); box-shadow: var(--shadow-md);}
.secondary-img {height: 180px; background: var(--cream); overflow: hidden; position: relative;}
.secondary-img img {width: 100%; height: 100%; object-fit: contain; object-position: center;
  transition: transform 0.3s ease;}
.secondary-card:hover .secondary-img img {transform: scale(1.03);}
.secondary-body {padding: 20px;}
.secondary-body h3 {font-size: 1rem; margin-bottom: 2px;}
.secondary-body h3 .tm {color: var(--amber); font-size: 0.85em; font-weight: 600;}
.secondary-specs {display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px;}
.secondary-spec {font-size: 0.78rem; font-weight: 600; padding: 3px 10px;
  border-radius: 10px; background: var(--cream); color: var(--forest);}
.secondary-link {color: var(--amber); font-weight: 600; font-size: 0.88rem;
  display: inline-flex; align-items: center; gap: 4px;
  transition: gap 0.2s ease;}
.secondary-link:hover {gap: 8px;}
.compare-section-title {font-size: 0.85rem; font-weight: 700; color: var(--forest);
  text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 8px;
  display: flex; align-items: center; gap: 12px;}
.compare-section-title::before {content: ''; width: 32px; height: 3px; background: var(--amber); border-radius: 2px;}
.compare-section-sub {font-size: 1rem; color: var(--text-light); margin-bottom: 32px;}
.compare-table .check {color: var(--forest);}
.compare-table .cross {color: #C62828;}
.compare-table .product-link {color: var(--amber); font-weight: 600; font-size: 0.82rem;}
.compare-table .product-link:hover {text-decoration: underline;}
.compare-cta {text-align: center; margin-top: 32px;}
.bridge-header .divider {width: 40px; height: 3px; background: var(--amber); border-radius: 2px;
  margin: 16px auto;}
.bridge-card-icon {font-size: 2rem; margin-bottom: 12px; display: block;}
.bridge-card-link {color: var(--amber); font-weight: 600; font-size: 0.9rem;
  display: inline-flex; align-items: center; gap: 4px;
  transition: gap 0.2s ease;}
.bridge-card-link:hover {gap: 8px;}
.bridge-bottom-cta {text-align: center; margin-top: 48px; position: relative;
  display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;}
.process-hero {position: relative; min-height: 480px; display: flex; align-items: center;
  padding: 64px; overflow: hidden;}
.process-hero .hero-bg {position: absolute; inset: 0;
  background: url('images/factory/auto-line-full.webp') center / cover;}
.process-hero .hero-bg::after {content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(13,77,60,0.88) 0%, rgba(13,77,60,0.72) 50%, rgba(13,77,60,0.6) 100%);}
.process-intro {display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; max-width: 1200px; margin: 0 auto 64px;}
.process-intro-img {border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-md);}
.process-intro-img img {width: 100%; height: auto; object-fit: contain;}
.process-intro-text h2 {margin-bottom: 16px;}
.process-intro-text p {margin-bottom: 14px;}
.process-intro-text strong {color: var(--forest);}
.process-timeline::before {content: ''; position: absolute;
  left: 22px; top: 8px; bottom: 8px;
  width: 3px; border-radius: 2px;
  background: linear-gradient(180deg,
    var(--forest) 0%, var(--forest) 50%,
    var(--amber) 50%, var(--amber) 79%,
    var(--forest) 79%, var(--forest) 100%);}
.timeline-num {flex-shrink: 0;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--forest); color: var(--white);
  font-size: 0.82rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 2;
  box-shadow: 0 0 0 6px var(--cream);
  letter-spacing: 0.5px;}
.timeline-item.dedust .timeline-num {background: var(--amber);}
.timeline-content {flex: 1; background: var(--white); border-radius: 10px;
  padding: 14px 20px; box-shadow: var(--shadow-sm);
  border-left: 3px solid var(--forest);
  transition: all 0.25s ease;}
.timeline-item.dedust .timeline-content {border-left-color: var(--amber);}
.timeline-content:hover {box-shadow: var(--shadow-md); transform: translateX(4px);}
.timeline-content h3 {font-size: 0.92rem; font-weight: 600; color: var(--text);
  margin-bottom: 3px; display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;}
.timeline-content p {font-size: 0.83rem; line-height: 1.55; color: var(--text-light);}
.timeline-tag {display: inline-block; font-size: 0.65rem; font-weight: 700;
  padding: 2px 8px; border-radius: 50px;
  background: rgba(232,168,56,0.12); color: var(--amber-dark);}
.timeline-item.dedust .timeline-tag {background: rgba(13,77,60,0.08); color: var(--forest);}
.dedust-section {padding: 80px 64px; background: var(--white);}
.dedust-flow {max-width: 1300px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;}
.dedust-stage {text-align: center; padding: 32px 20px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(232,168,56,0.06) 0%, rgba(232,168,56,0.02) 100%);
  border: 1px solid rgba(232,168,56,0.15); transition: all 0.3s ease;
  position: relative;}
.dedust-stage:hover {transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--amber);}
.dedust-stage-num {width: 48px; height: 48px; border-radius: 50%;
  background: var(--amber); color: var(--white);
  font-size: 1.3rem; font-weight: 800; display: flex;
  align-items: center; justify-content: center; margin: 0 auto 16px;}
.dedust-stage h3 {color: var(--text); margin-bottom: 8px; font-size: 0.98rem;}
.dedust-stage p {font-size: 0.82rem; line-height: 1.5;}
.dedust-stage .dust-icon {font-size: 1.8rem; margin-bottom: 12px;}
.dedust-result {max-width: 900px; margin: 48px auto 0; text-align: center;
  background: var(--cream); border-radius: 14px; padding: 40px;}
.dedust-result h3 {color: var(--forest); font-size: 1.3rem; margin-bottom: 12px;}
.dedust-result .result-stats {display: flex; justify-content: center; gap: 48px; margin-top: 24px; flex-wrap: wrap;}
.result-stat {text-align: center;}
.result-stat .stat-num {font-size: 2.2rem; font-weight: 800; color: var(--amber);}
.result-stat .stat-label {font-size: 0.82rem; color: var(--text-light);}
.why-section {padding: 80px 64px; background: var(--cream);}
.why-icon {font-size: 2.5rem; margin-bottom: 16px;}
.showcase-item {border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm);
  background: var(--white); transition: all 0.3s ease;}
.showcase-item:hover {transform: translateY(-4px); box-shadow: var(--shadow-md);}
.showcase-img-wrap {aspect-ratio: 4/3; overflow: hidden; background: var(--cream);}
.showcase-img-wrap img {width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s ease;}
.showcase-item:hover .showcase-img-wrap img {transform: scale(1.08);}
.showcase-caption {padding: 18px 20px;}
.showcase-caption h3 {font-size: 0.95rem; font-weight: 600; color: var(--text);}
.showcase-caption p {font-size: 0.82rem; color: var(--text-light); margin-top: 4px;}
.cta-process {background: var(--forest); color: rgba(255,255,255,0.9); padding: 80px 64px; text-align: center;}
.cta-process h2 {color: var(--white);}
.cta-process p {color: rgba(255,255,255,0.75); font-size: 1.05rem; max-width: 600px; margin: 16px auto 32px;}
.quality-hero {padding: 40px 64px 60px;
  position: relative;
  overflow: hidden;}
.problem-section {padding: 60px 64px; background: var(--white);}
.problem-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
  max-width: 1100px; margin: 0 auto;}
.problem-card {background: var(--cream); border-radius: 12px; padding: 32px 28px;
  border-top: 4px solid #D94436; transition: all 0.25s ease;}
.problem-card:hover {transform: translateY(-3px); box-shadow: var(--shadow-md);}
.problem-icon {font-size: 2.2rem; margin-bottom: 16px;}
.problem-card h3 {color: var(--text); font-size: 1.05rem; margin-bottom: 10px;}
.problem-card p {font-size: 0.9rem;}
.problem-highlight {display: inline-block; background: #FEE2E2; color: #D94436;
  font-size: 0.78rem; font-weight: 700; padding: 3px 10px; border-radius: 10px;
  margin-top: 14px;}
.solution-section {padding: 80px 64px;}
.solution-layout {display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start;
  max-width: 1200px; margin: 0 auto;}
.solution-text h2 {color: var(--forest); margin-bottom: 20px;}
.solution-text p {margin-bottom: 16px; font-size: 1rem;}
.solution-point {display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px;
  padding: 16px 20px; background: var(--white); border-radius: 10px;
  border-left: 4px solid var(--amber);}
.point-icon {font-size: 1.3rem; flex-shrink: 0; margin-top: 2px;}
.point-body strong {color: var(--forest); display: block; margin-bottom: 4px; font-size: 0.95rem;}
.point-body p {font-size: 0.87rem; margin: 0;}
.solution-visual {position: sticky; top: 92px;}
.visual-chain {background: var(--white); border-radius: 16px; overflow: hidden;
  box-shadow: var(--shadow-md); border: 1px solid var(--border);}
.chain-step {padding: 24px 28px; display: flex; gap: 16px; align-items: center;
  border-bottom: 1px solid var(--border); transition: background 0.2s;}
.chain-step:last-child {border-bottom: none;}
.chain-step:hover {background: var(--cream);}
.chain-num {width: 42px; height: 42px; background: var(--forest); color: var(--white);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1rem; flex-shrink: 0;}
.chain-info h4 {color: var(--forest); font-size: 0.95rem; margin-bottom: 3px;}
.chain-info p {font-size: 0.82rem; margin: 0; color: var(--text-muted);}
.supplier-section {padding: 70px 64px; background: var(--white);}
.supplier-section .section-header {text-align: center; margin: 0 auto 52px;}
.supplier-section .section-header p {margin-left: auto; margin-right: auto;}
.supplier-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
  max-width: 1100px; margin: 0 auto;}
.supplier-card {background: var(--white); border-radius: 16px; overflow: hidden;
  box-shadow: var(--shadow-md); border: 1px solid var(--border);
  transition: all 0.3s ease;}
.supplier-card:hover {transform: translateY(-4px); box-shadow: var(--shadow-lg);}
.supplier-img-wrap {height: 240px; overflow: hidden;
  background: linear-gradient(135deg, #f0f0f0, #e8e8e8);}
.supplier-img-wrap img {width: 100%; height: 100%; object-fit: contain;
  object-position: center; transition: transform 0.5s ease;}
.supplier-card:hover .supplier-img-wrap img {transform: scale(1.03);}
.supplier-body {padding: 28px 32px 32px;}
.supplier-badge {display: inline-block; background: var(--forest); color: var(--white);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.8px;
  padding: 5px 14px; border-radius: 4px; margin-bottom: 14px;}
.supplier-badge.corn {background: var(--amber); color: var(--forest);}
.supplier-body h3 {color: var(--forest); font-size: 1.3rem; margin-bottom: 6px;}
.supplier-subtitle {font-size: 0.88rem; color: var(--amber-dark); font-weight: 600; margin-bottom: 16px;}
.supplier-body > p {font-size: 0.92rem; margin-bottom: 18px;}
.supplier-specs {display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px;}
.supplier-role {display: inline-flex; align-items: center; gap: 6px;
  background: rgba(13,77,60,0.06); color: var(--forest);
  font-size: 0.82rem; font-weight: 600; padding: 8px 16px; border-radius: 8px;}
.benefit-section {padding: 70px 64px;}
.benefit-section .section-header {text-align: center; margin: 0 auto 48px;}
.benefit-section .section-header p {margin-left: auto; margin-right: auto; max-width: 700px;}
.benefit-grid {display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  max-width: 1100px; margin: 0 auto;}
.benefit-card {background: var(--white); border-radius: 12px; padding: 28px 22px;
  text-align: center; box-shadow: var(--shadow-sm); border: 1px solid rgba(0,0,0,0.03);
  transition: all 0.25s ease; border-top: 3px solid var(--amber);}
.benefit-card:hover {transform: translateY(-3px); box-shadow: var(--shadow-md);}
.benefit-card h4 {color: var(--forest); font-size: 0.98rem; margin-bottom: 8px;}
.benefit-card p {font-size: 0.84rem;}
.check-yes {color: #25D366; font-weight: 700; font-size: 1.05rem;}
.check-no {color: var(--text-muted); font-size: 1.05rem;}
.table-note {text-align: center; margin-top: 18px; font-size: 0.82rem; color: var(--text-muted);}
.cta-quality {padding: 80px 64px; background: var(--forest); color: var(--white);
  text-align: center; position: relative; overflow: hidden;}
.cta-quality::before {content: ''; position: absolute; top: -40%; right: -15%;
  width: 450px; height: 450px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232,168,56,0.1) 0%, transparent 70%);}
.cta-quality h2 {color: var(--white); font-size: clamp(1.6rem, 3.5vw, 2.2rem); margin-bottom: 16px; position: relative;}
.cta-quality p {color: rgba(255,255,255,0.95); font-size: 1.08rem; max-width: 650px;
  margin: 0 auto 36px; position: relative; line-height: 1.7;}
.calc-hero {padding: 40px 64px 60px;
  position: relative;
  overflow: hidden;}
.calculator-main {padding: 60px 64px; background: var(--white);}
.calc-wrapper {max-width: 800px; margin: 0 auto;}
.calc-card {background: var(--cream); border-radius: 16px; padding: 40px;
  box-shadow: var(--shadow-sm); border: 1px solid var(--border);}
.calc-card h2 {color: var(--forest); margin-bottom: 8px;}
.calc-card > p {margin-bottom: 32px; font-size: 0.95rem;}
.calc-form {display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px;}
.calc-button {width: 100%; padding: 16px; background: var(--forest); color: var(--white);
  border: none; border-radius: 8px; font-weight: 700; font-size: 1.05rem;
  cursor: pointer; transition: all 0.2s; margin-top: 8px;}
.calc-button:hover {background: var(--forest-light); transform: translateY(-2px); box-shadow: var(--shadow-md);}
.calc-result h3 {color: var(--amber); margin-bottom: 16px; font-size: 1.2rem;}
.info-section {padding: 70px 64px; background: var(--cream);}
.info-section .section-header {text-align: center; max-width: 800px; margin: 0 auto 48px;}
.cta-calc {padding: 80px 64px; background: var(--forest); color: var(--white);
  text-align: center; position: relative; overflow: hidden;}
.cta-calc::before {content: ''; position: absolute; top: -40%; right: -15%;
  width: 450px; height: 450px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232,168,56,0.1) 0%, transparent 70%);}
.cta-calc h2 {color: var(--white); font-size: clamp(1.6rem, 3.5vw, 2.2rem); margin-bottom: 16px; position: relative;}
.cta-calc p {color: rgba(255,255,255,0.95); font-size: 1.08rem; max-width: 650px;
  margin: 0 auto 36px; position: relative; line-height: 1.7;}
.downloads-hero {padding: 40px 64px 60px;
  position: relative;
  overflow: hidden;}
.downloads-main {padding: 60px 64px; background: var(--white);}
.downloads-main .section-header {text-align: center; max-width: 1100px; margin: 0 auto 48px;}
.downloads-main .section-header h2 {color: var(--text); overflow-wrap: break-word; word-break: keep-all;}
.downloads-main .section-header p {margin-top: 12px; font-size: 1.02rem; max-width: 700px; margin-left: auto; margin-right: auto;}
.downloads-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px;
  max-width: 1100px; margin: 0 auto 40px;
  overflow-x: hidden;}
.cta-downloads {padding: 80px 64px; background: var(--forest); color: var(--white);
  text-align: center; position: relative; overflow: hidden;}
.cta-downloads::before {content: ''; position: absolute; top: -40%; right: -15%;
  width: 450px; height: 450px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232,168,56,0.1) 0%, transparent 70%);}
.cta-downloads h2 {color: var(--white); font-size: clamp(1.6rem, 3.5vw, 2.2rem); margin-bottom: 16px; position: relative;}
.cta-downloads p {color: rgba(255,255,255,0.95); font-size: 1.08rem; max-width: 650px;
  margin: 0 auto 36px; position: relative; line-height: 1.7;}
.faq-hero {padding: 40px 64px 60px;
  position: relative;
  overflow: hidden;}
.faq-main {padding: 60px 64px; background: var(--white);}
.faq-main .section-header {text-align: center; max-width: 800px; margin: 0 auto 48px;}
.faq-category {max-width: 900px; margin: 0 auto 48px;}
.faq-category h2 {color: var(--forest); font-size: 1.4rem; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 3px solid var(--amber);}
.faq-toggle {font-size: 1.3rem; color: var(--amber); font-weight: 700; transition: transform 0.2s;}
.faq-answer.active {display: block;}
.faq-answer ul {margin-left: 20px; margin-top: 8px;}
.faq-answer ul li {margin-bottom: 4px;}
.cta-faq {padding: 80px 64px; background: var(--forest); color: var(--white);
  text-align: center; position: relative; overflow: hidden;}
.cta-faq::before {content: ''; position: absolute; top: -40%; right: -15%;
  width: 450px; height: 450px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232,168,56,0.1) 0%, transparent 70%);}
.cta-faq h2 {color: var(--white); font-size: clamp(1.6rem, 3.5vw, 2.2rem); margin-bottom: 16px; position: relative;}
.cta-faq p {color: rgba(255,255,255,0.95); font-size: 1.08rem; max-width: 650px;
  margin: 0 auto 36px; position: relative; line-height: 1.7;}
.guides-hero {padding: 40px 64px 60px;
  position: relative;
  overflow: hidden;}
.guides-main {padding: 60px 64px; background: var(--white);}
.guides-main .section-header {text-align: center; max-width: 800px; margin: 0 auto 48px;}
.guides-main .section-header h2 {color: var(--text);}
.guides-main .section-header p {margin-top: 12px; font-size: 1.02rem; max-width: 700px; margin-left: auto; margin-right: auto;}
.guides-grid {display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px;
  max-width: 1100px; margin: 0 auto;}
.guide-card .btn-primary {font-size: 0.85rem; padding: 9px 18px; align-self: flex-start;}
.cta-guides {padding: 80px 64px; background: var(--forest); color: var(--white);
  text-align: center; position: relative; overflow: hidden;}
.cta-guides::before {content: ''; position: absolute; top: -40%; right: -15%;
  width: 450px; height: 450px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232,168,56,0.1) 0%, transparent 70%);}
.cta-guides h2 {color: var(--white); font-size: clamp(1.6rem, 3.5vw, 2.2rem); margin-bottom: 16px; position: relative;}
.cta-guides p {color: rgba(255,255,255,0.95); font-size: 1.08rem; max-width: 650px;
  margin: 0 auto 36px; position: relative; line-height: 1.7;}
.guides-tabs {display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 28px; justify-content: center;}
.guide-tab {padding: 8px 18px; border: 1.5px solid var(--border);
  border-radius: 50px; background: var(--white); color: var(--text);
  font-size: 0.85rem; font-weight: 500; cursor: pointer;
  transition: all 0.2s ease; font-family: inherit;}
.guide-tab:hover {border-color: var(--amber); color: var(--amber);}
.guide-tab.active {background: var(--forest); color: var(--white);
  border-color: var(--forest);}
.guide-card[data-category] {transition: opacity 0.25s ease, transform 0.25s ease;}
.guide-card.hidden {display: none !important;}
.resources-hero {padding: 40px 64px 60px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--forest) 0%, #0a3d30 100%);  color: var(--white);}
.guides-section {padding: 60px 64px; background: var(--white);}
.guides-section .section-header {text-align: center; max-width: 800px; margin: 0 auto 48px;}
.guides-section .section-header h2 {color: var(--text);}
.guides-section .section-header p {margin-top: 12px; font-size: 1.02rem; max-width: 700px; margin-left: auto; margin-right: auto;}
.faq-preview-section {padding: 70px 64px; background: var(--cream);}
.faq-preview-section .section-header {text-align: center; max-width: 800px; margin: 0 auto 48px;}
.faq-preview-section .section-header h2 {color: var(--text);}
.faq-preview-section .section-header p {margin-top: 12px; font-size: 1.02rem; max-width: 700px; margin-left: auto; margin-right: auto;}
.faq-question .faq-toggle {font-size: 1.2rem; color: var(--amber); font-weight: 700;}
.faq-center {text-align: center; margin-top: 32px;}
.calculator-section {padding: 70px 64px; background: var(--white);}
.calculator-section .section-header {text-align: center; max-width: 800px; margin: 0 auto 48px;}
.calc-preview-wrap {max-width: 700px; margin: 0 auto; background: var(--cream);
  border-radius: 16px; padding: 40px; box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);}
.calc-result h4 {color: var(--amber); margin-bottom: 8px;}
.downloads-section {padding: 70px 64px;}
.downloads-section .section-header {text-align: center; max-width: 800px; margin: 0 auto 48px;}
.downloads-section .section-header h2 {color: var(--text);}
.downloads-section .section-header p {margin-top: 12px; font-size: 1.02rem; max-width: 700px; margin-left: auto; margin-right: auto;}
.download-card h4 {color: var(--forest); font-size: 0.98rem; margin-bottom: 8px;}
.cta-resources {padding: 80px 64px; background: var(--forest); color: var(--white);
  text-align: center; position: relative; overflow: hidden;}
.cta-resources::before {content: ''; position: absolute; top: -40%; right: -15%;
  width: 450px; height: 450px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232,168,56,0.1) 0%, transparent 70%);}
.cta-resources h2 {color: var(--white); font-size: clamp(1.6rem, 3.5vw, 2.2rem); margin-bottom: 16px; position: relative;}
.cta-resources p {color: rgba(255,255,255,0.95); font-size: 1.08rem; max-width: 650px;
  margin: 0 auto 36px; position: relative; line-height: 1.7;}
.sample-hero h1 {font-size: 2.8rem; font-weight: 800; margin-bottom: 16px; color: var(--white);}
.sample-hero p {font-size: 1.1rem; color: rgba(255,255,255,0.9); line-height: 1.7;}
.sample-form-section {padding: 64px; max-width: 1000px; margin: 0 auto;}
.sample-form h2 {font-size: 1.5rem; margin-bottom: 32px; color: var(--forest);}
.form-row .form-group {margin-bottom: 0;}
.product-selection {margin-bottom: 32px;}
.product-selection h3 {font-size: 1.1rem; margin-bottom: 16px; color: var(--forest);}
.product-checkboxes {display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;}
.product-checkbox {display: flex; align-items: center; gap: 12px; background: var(--cream); border-radius: 12px; padding: 16px; cursor: pointer; border: 2px solid transparent; transition: all 0.2s ease;}
.product-checkbox:hover {border-color: var(--amber);}
.product-checkbox input {cursor: pointer;}
.product-checkbox label {cursor: pointer; font-size: 0.95rem;}
.product-checkbox .product-desc {font-size: 0.82rem; color: var(--text-light); margin-top: 4px;}
.trust-item h3 {font-size: 2rem; font-weight: 800; color: var(--amber); margin-bottom: 8px;}
.trust-item p {font-size: 0.9rem; color: rgba(255,255,255,0.7);}
.cta-bar {background: var(--amber); color: var(--white); padding: 48px 64px; text-align: center;}
.cta-bar h2 {font-size: 1.8rem; margin-bottom: 16px;}
.cta-bar p {font-size: 1.05rem; margin-bottom: 32px; color: rgba(255,255,255,0.9);}
.search-container {padding:120px 64px 80px;max-width:900px;margin:0 auto}
.search-header {text-align:center;margin-bottom:48px}
.search-header h1 {font-size:clamp(1.8rem,4vw,2.4rem);font-weight:800;color:var(--forest);margin-bottom:12px}
.search-header p {color:var(--text-light);font-size:1.05rem}
.search-box-wrap {position:relative;max-width:640px;margin:0 auto 36px}
.search-box-wrap input {width:100%;padding:18px 56px;font-size:1.1rem;border:2px solid var(--border);border-radius:16px;background:var(--white);font-family:inherit;transition:all 0.2s ease;outline:none;color:var(--text);box-shadow:var(--shadow-sm)}
.search-box-wrap input:focus {border-color:var(--amber);box-shadow:0 0 0 4px rgba(232,168,56,0.1)}
.search-box-wrap input::placeholder {color:var(--text-muted)}
.search-icon-input {position:absolute;left:20px;top:50%;transform:translateY(-50%);font-size:1.2rem;color:var(--text-muted);pointer-events:none}
.search-clear {position:absolute;right:16px;top:50%;transform:translateY(-50%);background:var(--cream);border:none;width:32px;height:32px;border-radius:50%;font-size:1rem;color:var(--text-muted);display:none;align-items:center;justify-content:center;cursor:pointer;transition:all 0.2s}
.search-clear:hover {background:#e0ddd6;color:var(--text)}
.search-clear.visible {display:flex}
.results-info {text-align:center;font-size:0.9rem;color:var(--text-muted);margin-bottom:32px;display:none}
.results-info.visible {display:block}
#searchResults {display:flex;flex-direction:column;gap:16px}
.result-card {background:var(--white);border-radius:12px;padding:24px 28px;box-shadow:var(--shadow-sm);border:1px solid var(--border);transition:all 0.2s ease;display:block;text-decoration:none}
.result-card:hover {transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--amber)}
.result-cat {display:inline-block;font-size:0.72rem;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;padding:4px 10px;border-radius:4px;margin-bottom:10px}
.result-cat.Products,.result-cat.Home {background:rgba(13,77,60,0.1);color:var(--forest)}
.result-cat.About {background:rgba(232,168,56,0.12);color:#996d1f}
.result-cat.Quality {background:rgba(37,211,102,0.1);color:#1a8a3f}
.result-cat.OEM\/ODM {background:rgba(100,100,200,0.1);color:#4444aa}
.result-cat.Solutions {background:rgba(200,100,50,0.1);color:#8B4513}
.result-cat.Resources {background:rgba(50,150,200,0.1);color:#226688}
.result-cat.Knowledge {background:rgba(150,50,150,0.1);color:#663366}
.result-cat.Contact {background:rgba(200,50,50,0.1);color:#993333}
.result-cat.Legal {background:rgba(100,100,100,0.1);color:#555}
.result-card h3 {font-size:1.1rem;color:var(--forest);margin-bottom:8px;font-weight:600}
.result-card p {font-size:0.9rem;color:var(--text-light);line-height:1.6}
.result-url {font-size:0.78rem;color:var(--text-muted);margin-top:8px}
mark {background:rgba(232,168,56,0.25);color:inherit;padding:1px 2px;border-radius:2px}
.no-results {text-align:center;padding:48px 0;color:var(--text-muted)}
.no-results strong {display:block;font-size:1.2rem;color:var(--text);margin-bottom:8px}
.footer-logo .gorm {color:var(--white)}
.footer-logo .eet {color:var(--amber)}
.form-success-msg {display: none; color: #1a6b55; font-size: 0.92rem; background: #e8f5ef; border: 1px solid #b8dfc7; border-left: 4px solid #1a6b55; padding: 12px 14px; border-radius: 6px; margin-bottom: 14px;}
.bag-type-link {font-size: 0.82rem; margin-bottom: 10px;}
.bag-type-link a {color: var(--forest); text-decoration: underline;}
.bag-type-link a:hover {color: var(--amber);}
.terms-hero {padding: 40px 64px 60px;
  background: linear-gradient(135deg, var(--forest) 0%, #0A3D30 50%, #072E23 100%);
  color: var(--white); position: relative; overflow: hidden;}
.terms-hero::before {content: ''; position: absolute; top: -30%; right: -15%;
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232,168,56,0.12) 0%, transparent 70%);}
.terms-hero-content {position: relative; z-index: 1; max-width: 800px;}
.terms-hero h1 {color: var(--white); margin-bottom: 16px;}
.terms-hero p {color: rgba(255,255,255,0.95); font-size: 1.05rem;}
.terms-content {padding: 60px 64px; background: var(--white);}
.terms-container {max-width: 900px; margin: 0 auto;}
.terms-container h2 {color: var(--forest); font-size: 1.5rem; margin-top: 40px; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 2px solid var(--cream);}
.terms-container h3 {color: var(--forest); font-size: 1.15rem; margin-top: 28px; margin-bottom: 12px;}
.terms-container p {margin-bottom: 16px; line-height: 1.8;}
.terms-container ul {margin-left: 20px; margin-bottom: 16px;}
.terms-container ul li {padding: 6px 0; padding-left: 20px; position: relative; color: var(--text-light);}
.terms-container ul li::before {content: '•'; color: var(--amber); font-weight: 700; position: absolute; left: 0;}
.terms-container .last-updated {background: var(--cream); padding: 12px 20px; border-radius: 8px; font-size: 0.9rem; color: var(--text-light); margin-bottom: 32px;}
.terms-container .highlight-box {background: var(--cream); padding: 20px 24px; border-radius: 8px; border-left: 4px solid var(--amber); margin: 20px 0;}
.cert-hero h1 em {font-style: normal; color: var(--amber);}
.cert-hero .subtitle {font-size: 1.05rem; opacity: 0.88; max-width: 600px; margin: 0 auto; line-height: 1.8;}
.cert-section h2 {text-align: center; color: var(--forest); margin-bottom: 12px;}
.cert-section .sub {text-align: center; color: var(--text-light); margin-bottom: 48px; font-size: 0.95rem;}
.cert-card .icon {font-size: 2.5rem; margin-bottom: 16px;}
.cert-card p {font-size: 0.9rem; color: var(--text-light); line-height: 1.7;}
.benefits-inner {max-width: 900px; margin: 0 auto;}
.benefits-section h2 {text-align: center; color: var(--forest); margin-bottom: 48px;}
.benefit-card h3 {color: var(--forest); margin-bottom: 8px; font-size: 1.05rem;}
.factory-hero h1 em {font-style: normal; color: var(--amber);}
.factory-hero .subtitle {font-size: 1.05rem; opacity: 0.88; max-width: 600px; margin: 0 auto; line-height: 1.8;}
.prod-lines {padding: 40px 64px 80px; max-width: 1100px; margin: 0 auto;}
.prod-lines h2 {text-align: center; color: var(--forest); margin-bottom: 12px;}
.prod-lines .sub {text-align: center; color: var(--text-light); margin-bottom: 48px; font-size: 0.95rem;}
.prod-grid {display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;}
.prod-card {background: var(--white); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm); transition: all 0.25s ease;}
.prod-card:hover {transform: translateY(-3px); box-shadow: var(--shadow-md);}
.prod-card img {width: 100%; height: 220px; object-fit: cover;}
.prod-card .body {padding: 20px 24px;}
.prod-card h3 {color: var(--forest); margin-bottom: 8px;}
.prod-card p {font-size: 0.88rem; color: var(--text-light); line-height: 1.6;}
.packaging-section {padding: 80px 64px; background: var(--cream);}
.packaging-inner {max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;}
.packaging-video {width: 100%; aspect-ratio: 16/9; background: var(--forest); border-radius: 12px; overflow: hidden;}
.packaging-video video {width: 100%; height: 100%; object-fit: cover;}
.packaging-text h2 {color: var(--forest); margin-bottom: 16px;}
.packaging-text p {font-size: 0.95rem; color: var(--text-light); line-height: 1.8; margin-bottom: 16px;}
.packaging-text ul li {font-size: 0.9rem; color: var(--text); padding: 6px 0 6px 20px; position: relative;}
.packaging-text ul li::before {content: '✓'; position: absolute; left: 0; color: var(--amber); font-weight: 700;}
.location-section {padding: 80px 64px; background: var(--white);}
.location-inner {max-width: 900px; margin: 0 auto; text-align: center;}
.location-section h2 {color: var(--forest); margin-bottom: 12px;}
.location-section .sub {color: var(--text-light); margin-bottom: 32px; font-size: 0.95rem;}
.location-map {width: 100%; height: 400px; background: var(--cream); border-radius: 12px; overflow: hidden; margin-bottom: 32px;}
.location-map iframe {width: 100%; height: 100%; border: none;}
.location-details {display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;}
.location-card {background: var(--cream); border-radius: 12px; padding: 24px; text-align: center;}
.location-card h3 {color: var(--forest); font-size: 1rem; margin-bottom: 8px;}
.location-card p {font-size: 0.88rem; color: var(--text-light);}
.video-container {max-width: 720px; margin: 24px auto; border-radius: 12px; overflow: hidden;
  box-shadow: var(--shadow-md);}
.video-container video {width: 100%; display: block;}
.video-caption {font-size: 0.85rem; color: var(--text-muted); text-align: center; margin-top: 8px; margin-bottom: 24px;}
.comparison-table thead th {background: var(--forest); color: var(--white); padding: 14px 16px;
  text-align: left; font-weight: 600; font-size: 0.88rem;}
.comparison-table thead th:first-child {border-radius: 12px 0 0 0;}
.comparison-table thead th:last-child {border-radius: 0 12px 0 0;}
.comparison-table tr:last-child td:first-child {border-radius: 0 0 0 12px;}
.comparison-table tr:last-child td:last-child {border-radius: 0 0 12px 0;}
.comparison-table .highlight-row td {background: #f0f9f4;}
.comparison-table .star {color: var(--amber);}
.callout {background: #eff6ff; border-left: 4px solid var(--forest); border-radius: 0 8px 8px 0;
  padding: 20px 24px; margin: 24px 0;}
.callout p {margin-bottom: 8px;}
.callout a {color: var(--forest); font-weight: 600; text-decoration: underline;}
.product-inline {display: flex; align-items: center; gap: 16px; background: var(--white);
  border: 1px solid var(--border); border-radius: 12px; padding: 16px 20px;
  margin: 16px 0; box-shadow: var(--shadow-sm);}
.product-inline img {width: 60px; height: 60px; border-radius: 8px; margin: 0;}
.product-inline a {color: var(--forest); font-weight: 600; font-size: 0.9rem;}
.product-inline a:hover {color: var(--amber);}
.pros-box li::before, .cons-box li::before {display: none;}
.footer-social-svg a {display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; transition: transform 0.2s ease;}
.footer-social-svg a:hover {transform: scale(1.1);}
.footer-social-svg a svg {width: 18px; height: 18px;}
.m-dropdown-menu {padding: 8px 0 8px 16px;}
.m-dropdown-menu a {display: block; padding: 8px 0; font-size: 0.9rem; color: var(--text-light);}
.mobile-menu > a {display: block; padding: 12px 0; font-weight: 600; font-size: 1rem; border-bottom: 1px solid var(--border);}
.article-card .img {width: 220px; min-height: 160px; display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex-shrink: 0; position: relative;}
.article-card .img .icon-wrapper {width: 56px; height: 56px; background: rgba(255,255,255,0.25); border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; color: var(--white);
  backdrop-filter: blur(4px);}
.article-card .content {padding: 20px 22px; flex: 1; display: flex; flex-direction: column; gap: 6px;}
p strong {color: var(--text);}
.page-with-sidebar {display: grid;
  grid-template-columns: 1fr 300px;
  gap: 48px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 64px;}
.main-content {min-width: 0;}
.article-card.guide-content {max-width: 100%;
  margin: 0;
  padding: 56px 64px;}
.sidebar-cta .btn-primary {display: inline-block;
  background: var(--amber);
  color: var(--forest);
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: 600;
  margin-top: 12px;
  text-align: center;}
.sidebar-cta .btn-primary:hover {background: #d99a2e;}
.sidebar {position: sticky;
  top: 96px;
  align-self: start;}
.sidebar-card {background: var(--white);
  border-radius: 12px;
  padding: 24px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;}
.sidebar-card h3 {font-size: 0.95rem;
  color: var(--forest);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--amber);}
.sidebar-card ul {margin: 0; padding: 0;}
.sidebar-card li {font-size: 0.88rem;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);}
.sidebar-card li:last-child {border-bottom: none;}
.sidebar-card a {color: var(--text-light); transition: color 0.2s; display: block;}
.sidebar-card a:hover {color: var(--amber);}
.sidebar-cta {background: linear-gradient(135deg, var(--forest) 0%, #0a3d30 100%);
  border-radius: 12px;
  padding: 24px;
  color: var(--white);
  text-align: center;}
.sidebar-cta h3 {color: var(--amber); font-size: 0.95rem; margin-bottom: 10px;}
.sidebar-cta p {color: rgba(255,255,255,0.85); font-size: 0.88rem; margin-bottom: 16px; line-height: 1.6;}
.sidebar-cta .btn-cta {background: var(--amber); color: var(--white); font-weight: 700;
  padding: 10px 20px; border-radius: 8px; border: none;
  display: inline-block; font-size: 0.9rem; transition: all 0.2s;
  text-decoration: none;}
.sidebar-cta .btn-cta:hover {background: #d1942e; transform: translateY(-2px);}
.guide-content {padding: 80px 64px; max-width: 860px; margin: 0 auto;}
.guide-content article {background: var(--white); border-radius: 16px; padding: 56px 64px; box-shadow: var(--shadow-sm);}
.guide-content h2 {font-size: 1.6rem; color: var(--forest); margin-top: 2.2em; margin-bottom: 0.8em; padding-bottom: 0.4em; border-bottom: 2px solid var(--amber);}
.guide-content h2:first-child {margin-top: 0;}
.guide-content h3 {font-size: 1.1rem; color: var(--forest); margin-top: 1.6em; margin-bottom: 0.5em;}
.guide-content p {font-size: 0.95rem; line-height: 1.8; color: var(--text-light); margin-bottom: 1.15em;}
.guide-content ul.content-list {margin: 0 0 1.5em 0; padding: 0; list-style: none;}
.guide-content ul.content-list li {font-size: 0.95rem; color: var(--text-light); padding: 8px 0 8px 24px; position: relative; line-height: 1.7;}
.guide-content ul.content-list li::before {content: ''; position: absolute; left: 0; top: 15px; width: 8px; height: 8px; background: var(--amber); border-radius: 50%;}
.info-box p {margin-bottom: 0;}
.warning-box p {margin-bottom: 0;}
.comparison-table tr:hover {background: var(--cream);}
.comparison-table tr:last-child td {border-bottom: none;}
.table-scroll {overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 24px 0; border-radius: 12px;}
.cta-inline {background: var(--cream); border-radius: 12px; padding: 32px 36px; margin: 2em 0; text-align: center;}
.cta-inline h3 {color: var(--forest); margin-bottom: 8px;}
.cta-inline p {font-size: 0.95rem; color: var(--text-light); margin-bottom: 16px;}
.cta-inline a {color: var(--amber); font-weight: 600;}
.key-takeaways {background: var(--forest); color:#fff; border-radius:14px; padding:28px 32px; margin:28px 0;}
.key-takeaways h3 {color:#fff; font-size:1.05rem; margin-bottom:14px; display:flex; align-items:center; gap:8px;}
.key-takeaways ul {list-style:none; padding:0; margin:0;}
.key-takeaways li {padding:7px 0 7px 26px; position:relative; color:rgba(255,255,255,0.92); font-size:0.95rem; line-height:1.55;}
.key-takeaways li::before {content:"✓"; position:absolute; left:0; top:7px; color:var(--amber); font-weight:700;}
.callout.tip {background:#EAF5F0; border-color:var(--forest); color:#1c3a30;}
.callout.warn {background:#FBF1E0; border-color:var(--amber); color:#5a4410;}
.callout.danger {background:#FCEAEA; border-color:#C0392B; color:#5b1d16;}
.callout strong {color:inherit;}
.stat-grid {display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin:24px 0;}
.stat-card {background:var(--cream); border-radius:12px; padding:20px; text-align:center; border:1px solid var(--border);}
.stat-card .num {font-size:1.8rem; font-weight:800; color:var(--forest); line-height:1.1;}
.stat-card .lbl {font-size:0.82rem; color:var(--text-light); margin-top:6px;}
.tier-grid {display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin:24px 0;}
.tier-card {background:#fff; border-radius:14px; padding:22px; border:1px solid var(--border); box-shadow:var(--shadow-sm);}
.tier-card .badge {display:inline-block; font-size:0.72rem; font-weight:700; letter-spacing:.5px; text-transform:uppercase; padding:4px 10px; border-radius:20px; margin-bottom:10px;}
.tier-card.t1 .badge {background:var(--forest); color:#fff;}
.tier-card.t2 .badge {background:var(--amber); color:#fff;}
.tier-card.t3 .badge {background:#cfd6d2; color:#1a1a1a;}
.tier-card h3 {margin-bottom:8px; font-size:1.05rem;}
.tier-card p {font-size:0.9rem; margin-bottom:10px; line-height:1.55;}
.tier-card .best {font-size:0.85rem; color:var(--forest); font-weight:600;}
.timeline-item::before {content:""; position:absolute; left:-10px; top:4px; width:16px; height:16px; border-radius:50%; background:var(--forest); border:3px solid #fff; box-shadow:0 0 0 2px var(--forest);}
.timeline-item .ph {font-weight:700; color:var(--forest); font-size:0.95rem;}
.timeline-item .d {font-size:0.9rem; color:var(--text-light); line-height:1.5;}
.steps {counter-reset:step; margin:24px 0; list-style:none; padding:0;}
.step {position:relative; padding:0 0 20px 52px;}
.step::before {counter-increment:step; content:counter(step); position:absolute; left:0; top:0; width:36px; height:36px; border-radius:50%; background:var(--forest); color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center; font-size:1rem;}
.step h3 {margin-bottom:4px; font-size:1rem;}
.step p {font-size:0.92rem; margin-bottom:0; line-height:1.55;}
.pullquote {font-size:1.2rem; font-weight:600; color:var(--forest); border-left:4px solid var(--amber); padding:6px 0 6px 20px; margin:28px 0; line-height:1.55; font-style:italic;}
.angle-note {background:var(--cream); border-radius:12px; padding:16px 20px; margin:20px 0; font-size:0.92rem; line-height:1.6;}
.angle-note b {color:var(--forest);}
.layout-report {max-width:1100px; margin:0 auto; padding:0 20px;}
.report-toc-bar {position:sticky; top:60px; z-index:40; background:var(--white); border-bottom:1px solid var(--border); padding:12px 0; margin:-10px 0 28px; overflow-x:auto; -webkit-overflow-scrolling:touch;}
.report-toc-bar::-webkit-scrollbar {height:4px;}
.report-toc-bar::-webkit-scrollbar-thumb {background:var(--border);border-radius:2px;}
.report-toc-bar ul {list-style:none; display:flex; gap:4px 18px; flex-wrap:wrap; margin:0; padding:0 4px; white-space:nowrap;}
.report-toc-bar li a {font-size:0.85rem; color:var(--text-light); text-decoration:none; padding:4px 0; border-bottom:2px solid transparent; transition:border-color .15s;}
.report-toc-bar li a:hover {color:var(--forest); border-bottom-color:var(--forest);}
.report-section {margin-bottom:48px;}
.report-section h2 {font-size:1.45rem; color:var(--forest); border-bottom:2px solid var(--cream); padding-bottom:8px; margin-bottom:18px;}
.layout-vs {max-width:1000px; margin:0 auto; padding:0 24px;}
.vs-band {display:grid; grid-template-columns:1fr 1fr; gap:0 32px; align-items:start; margin:36px 0;}
.vs-band.reverse {direction:rtl;}
.vs-band.reverse > * {direction:ltr;}
.vs-col-header {background:var(--forest); color:#fff; padding:14px 18px; border-radius:10px 10px 0 0; font-weight:700; font-size:1.05rem;}
.vs-col-body {background:var(--cream, #F5F2EB); padding:18px; border-radius:0 0 10px 10px; min-height:120px;}
.vs-winner {background:#EAF5F0; border:2px solid var(--forest); border-radius:10px; padding:16px 20px; margin-top:20px; font-weight:600; color:var(--forest); text-align:center;}
.vs-decision-table {width:100%; border-collapse:collapse; margin:24px 0;}
.vs-decision-table th {background:var(--forest); color:#fff; padding:12px 14px; text-align:left; font-size:0.92rem;}
.vs-decision-table td {padding:11px 14px; border-bottom:1px solid var(--border); font-size:0.92rem; line-height:1.5;}
.vs-decision-table tr:nth-child(even) {background:var(--cream);}
.layout-playbook {max-width:780px; margin:0 auto; padding:0 24px 40px;}
.playbook-intro {font-size:1.05rem; line-height:1.75; color:var(--text); margin-bottom:32px;}
.playbook-step {margin-bottom:42px;}
.playbook-step h2 {font-size:1.35rem; color:var(--forest); display:flex; align-items:center; gap:10px; margin-bottom:16px;}
.playbook-step h2 .step-num {display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:var(--amber); color:#fff; font-size:0.85rem; font-weight:700; flex-shrink:0;}
.playbreak {max-width:1100px; margin:40px auto; padding:0 20px;}
.playbreak .timeline {max-width:700px; margin-left:auto; margin-right:auto;}
.playbreak table {width:100%;}
.layout-dashboard {display:grid; grid-template-columns:240px 1fr; gap:32px; max-width:1200px; margin:0 auto; padding:0 20px; align-items:start;}
.dash-nav {position:sticky; top:70px;}
.dash-nav-card {background:var(--cream); border-radius:12px; padding:18px; border:1px solid var(--border);}
.dash-nav-card h4 {font-size:0.85rem; text-transform:uppercase; letter-spacing:.5px; color:var(--text-light); margin:0 0 10px;}
.dash-nav ul {list-style:none; padding:0; margin:0;}
.dash-nav li {margin-bottom:2px;}
.dash-nav li a {display:block; padding:6px 10px; font-size:0.88rem; color:var(--text); text-decoration:none; border-radius:6px; transition:background .12s;}
.dash-nav li a:hover {background:var(--white); color:var(--forest);}
.dash-main {min-width:0;}
.price-hero-grid {display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin:24px 0 32px;}
.price-hero-card {background:linear-gradient(135deg,var(--forest),#0a3d2e); color:#fff; border-radius:14px; padding:20px; text-align:center;}
.price-hero-card .ph-type {font-size:0.82rem; opacity:0.8; margin-bottom:4px; text-transform:uppercase; letter-spacing:.3px;}
.price-hero-card .ph-price {font-size:1.6rem; font-weight:800;}
.price-hero-card .ph-note {font-size:0.78rem; opacity:0.7; margin-top:4px;}
.pricing-detail-table {width:100%; border-collapse:collapse; margin:20px 0; font-size:0.92rem;}
.pricing-detail-table thead th {background:var(--forest); color:#fff; padding:11px 12px; text-align:left; font-size:0.88rem;}
.pricing-detail-table tbody td {padding:10px 12px; border-bottom:1px solid var(--border); line-height:1.5;}
.pricing-detail-table tbody tr:nth-child(even) {background:rgba(0,0,0,.02);}
.pricing-detail-table .price-cell {font-weight:700; color:var(--forest);}
.pricing-note {font-size:0.84rem; color:var(--text-light); font-style:italic; margin:4px 0 18px;}
.layout-magazine {max-width:900px; margin:0 auto; padding:0 28px 40px;}
.mag-intro {font-size:1.08rem; line-height:1.8; color:var(--text); margin-bottom:36px; border-left:4px solid var(--amber); padding-left:20px;}
.mag-pullquote-large {font-size:1.35rem; font-weight:700; color:var(--forest); text-align:center; padding:28px 40px; margin:40px -28px; background:var(--cream, #F5F2EB); border-radius:0; line-height:1.55; letter-spacing:-.01em;}
.mag-stats-row {display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:32px 0;}
.mag-stat {text-align:center; background:var(--cream); border-radius:12px; padding:20px 12px; border:1px solid var(--border);}
.mag-stat .ms-num {font-size:1.7rem; font-weight:800; color:var(--forest);}
.mag-stat .ms-lbl {font-size:0.8rem; color:var(--text-light); margin-top:4px;}
.mag-section {margin-bottom:44px;}
.mag-section h2 {font-size:1.35rem; color:var(--forest); margin-bottom:14px;}
.mag-framework {background:var(--white); border:2px solid var(--forest); border-radius:14px; padding:28px; margin:28px 0;}
.footer-social {display: flex; gap: 16px;}
.footer-social a {color: rgba(255,255,255,0.7); font-size: 0.9rem; transition: color 0.2s;}
.footer-social a:hover {color: var(--amber);}
.navbara {position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  background: rgba(255,255,255,0.97); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border); padding: 0 64px;
  display: flex; align-items: center; justify-content: space-between; height: 72px;
  transition: box-shadow 0.3s ease;}
.navbara.scrolled {box-shadow: 0 2px 12px rgba(0,0,0,0.08);}
.nav-links a:hover {color:var(--amber); background:rgba(232,168,56,0.06);}
.showcase-grid:hover .showcase-image img {transform:scale(1.03);}
.spec-item:hover {border-color:var(--amber);}
.calc-review-wrap {max-width: 700px; margin: 0 auto; background: var(--cream);
  border-radius: 16px; padding: 40px; box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);}
@media (max-width: 1024px) {.cert-grid { grid-template-columns: repeat(2, 1fr); }
  .benefits-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .navbar { padding: 0 24px; }
  .cert-hero, .intro-bar, .cert-section, .benefits-section, .cert-cta { padding-left: 32px; padding-right: 32px; }
  .breadcrumb { padding-left: 32px; padding-right: 32px; }
  .nav-links { display: none !important; }
  .nav-cta { display: none !important; }}
@keyframes searchSlideIn {from { opacity: 0; transform: translateY(-16px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }}
@keyframes leadSlideIn {from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }}
@media (max-width: 1024px) {.factory-grid.cols-2, .factory-grid.cols-3, .factory-grid.cols-4 { grid-template-columns: 1fr; }
  .text-image-row { flex-direction: column !important; }
  .image-block { flex: none; width: 100%; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .navbar { padding: 0 24px; }
  .page-hero, .factory-intro, .factory-data-strip, .factory-section, .cta-section { padding-left: 32px; padding-right: 32px; }
  section.factory-section[style*="max-width:100%"] { padding-left: 32px !important; padding-right: 32px !important; }
  .breadcrumb { padding-left: 32px; padding-right: 32px; }
  .nav-links { display: none !important; }
  .nav-cta { display: none !important; }}
@media (max-width: 640px) {.entity-card { padding: 20px 16px; } .entity-table { font-size: 0.85rem; } .entity-table th, .entity-table td { padding: 8px 10px; }}
@media (max-width: 1024px) {.navbar { padding: 0 24px; }
  .nav-links { display: none !important; }
  .nav-cta { display: none !important; }
  .hero { padding: 140px 32px 80px; }
  .hero h1 { font-size: 2.4rem; }
  .overview { padding: 64px 32px; }
  .overview-inner { grid-template-columns: 1fr; gap: 40px; }
  .overview-metrics { flex-direction: row; }
  .metric-card { flex: 1; }
  .factory-showcase { padding: 0 32px 64px; }
  .factory-grid { grid-template-columns: 1fr 1fr; }
  .categories { padding: 64px 32px; }
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .manufacturing { padding: 64px 32px; }
  .mfg-grid { grid-template-columns: 1fr; gap: 32px; }
  .rd-grid { grid-template-columns: 1fr; }
  .quality-strip { padding: 60px 32px; }
  .breadcrumb { padding-left: 32px; padding-right: 32px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }}
@media (max-width: 1024px) {.adv-card { grid-template-columns: 1fr; }
  .adv-num { padding: 20px; font-size: 2rem; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .navbar { padding: 0 24px; }
  .why-hero, .adv-intro, .adv-section, .team-section, .cta-section { padding-left: 32px; padding-right: 32px; }
  .breadcrumb { padding-left: 32px; padding-right: 32px; }
  .nav-links { display: none !important; }
  .nav-cta { display: none !important; }}
@media (max-width: 1024px) {.vision-grid { grid-template-columns: 1fr; gap: 32px; }
  .data-grid { grid-template-columns: repeat(3, 1fr); }
  .values-grid { grid-template-columns: 1fr; max-width: 500px; }
  .team-grid { grid-template-columns: repeat(2, 1fr); max-width: 600px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .navbar { padding: 0 24px; }
  .journey-hero, .vision-section, .timeline-section, .data-section, .values-section, .mission-section, .team-section, .cta-section { padding-left: 32px; padding-right: 32px; }
  .breadcrumb { padding-left: 32px; padding-right: 32px; }
  .nav-links { display: none !important; }
  .nav-cta { display: none !important; }}
@media (max-width:768px) {.article-container { padding:20px 16px; }
  .article-container h1 { font-size:1.6em; }
  .article-container h2 { font-size:1.2em; }
  .article-figure img { max-height:280px; }
  .cta-box { padding:24px 16px; }}
@media (max-width: 768px) {.articles-grid { grid-template-columns: 1fr; }
  .article-card { padding: 20px 18px; }}
@media (max-width: 1024px) {.articles-grid { grid-template-columns: 1fr; max-width: 600px; margin: 0 auto; }
  .featured-article { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .navbar { padding: 0 24px; }
  .blog-hero, .featured-section, .articles-section, .cta-blog { padding-left: 32px; padding-right: 32px; }
  .breadcrumb { padding-left: 32px; padding-right: 32px; }
  .nav-links { display: none !important; }
  .nav-cta { display: none !important; }
  .nav-menu { display: flex; }}
@media (max-width: 768px) {.navbar { height: 64px; }
  .mobile-menu { top: 64px; }
  .breadcrumb { padding-top: 84px; padding-left: 20px; padding-right: 20px; }
  .blog-hero h1 { font-size: 2rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer { padding: 48px 20px 24px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .blog-hero, .featured-section, .articles-section, .cta-blog { padding: 40px 20px; }
  .featured-article { padding: 32px 24px; }
  .category-tabs { margin-left: 20px; margin-right: 20px; }
  .cta-buttons { flex-direction: column; align-items: center; }}
@media (max-width: 768px) {.cs-card-body { grid-template-columns: 1fr; }
  .stats-strip { gap: 32px; }
  .section-tint { padding: 48px 20px; }}
@media (max-width: 1024px) {.navbar, .breadcrumb, .article-hero, .article-body, .related-products, footer { padding-left: 32px; padding-right: 32px; }
  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }}
@media (max-width: 768px) {.navbar, .breadcrumb, .article-hero, .article-body, .related-products, footer { padding-left: 20px; padding-right: 20px; }
  .nav-links, .nav-cta { display: none; }
  .nav-menu { display: flex; }
  .products-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .checklist-box { flex-direction: column; text-align: center; }}
@media (max-width: 640px) {.form-row { grid-template-columns: 1fr; } .radio-group, .checkbox-group { flex-direction: column; gap: 10px; }}
@media (max-width: 1024px) {.info-grid { grid-template-columns: 1fr; max-width: 480px; }
  .navbar { padding: 0 24px; }
  .quote-hero, .quote-section, .quote-info, .cta-quote { padding-left: 32px; padding-right: 32px; }
  .breadcrumb { padding-left: 32px; padding-right: 32px; }
  .nav-links { display: none !important; }
  .nav-menu { display: flex !important; }
  .nav-cta { display: none !important; }
  .footer-grid { grid-template-columns: 1fr 1fr; }}
@media (max-width: 1024px) {.info-grid { grid-template-columns: 1fr; max-width: 550px; }
  .navbar { padding: 0 24px; }
  .sample-hero, .sample-section, .sample-info, .cta-sample { padding-left: 32px; padding-right: 32px; }
  .breadcrumb { padding-left: 32px; padding-right: 32px; }
  .nav-links { display: none !important; }
  .nav-menu { display: flex !important; }
  .nav-cta { display: none !important; }
  .footer-grid { grid-template-columns: 1fr 1fr; }}
@media (max-width: 1024px) {.steps-grid { grid-template-columns: repeat(2, 1fr); max-width: 700px; }
  .navbar { padding: 0 24px; }
  .thank-hero, .steps-section, .cta-thank { padding-left: 32px; padding-right: 32px; }
  .breadcrumb { padding-left: 32px; padding-right: 32px; }
  .nav-links { display: none !important; }
  .nav-menu { display: flex !important; }
  .nav-cta { display: none !important; }
  .footer-grid { grid-template-columns: 1fr 1fr; }}
@media (max-width: 1024px) {.contact-layout { grid-template-columns: 1fr; gap: 40px; }
  .navbar { padding: 0 24px; }
  .contact-hero, .contact-section, .map-section, .cta-contact { padding-left: 32px; padding-right: 32px; }
  .breadcrumb { padding-left: 32px; padding-right: 32px; }
  .nav-links { display: none !important; }
  .nav-menu { display: flex !important; }
  .nav-cta { display: none !important; }
  .footer-grid { grid-template-columns: 1fr 1fr; }}
@media (max-width: 1024px) {.footer-grid { grid-template-columns: 1fr 1fr; }
  .navbar { padding: 0 24px; }
  .guide-hero, .content-section, .cta-section { padding-left: 32px; padding-right: 32px; }
  .breadcrumb { padding-left: 32px; padding-right: 32px; }
  .nav-links { display: none !important; }
  .nav-menu { display: flex; }
  .nav-cta { display: none !important; }
  .pros-cons { grid-template-columns: 1fr; }}
@media (max-width: 768px) {.navbar { height: 64px; }
  .mobile-menu { top: 64px; }
  .breadcrumb { padding-top: 84px; padding-left: 20px; padding-right: 20px; }
  .hero-content p { font-size: 1rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer { padding: 48px 20px 24px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .guide-hero, .content-section, .cta-section { padding: 40px 20px; }
  .step-card { padding: 24px; }
  .comparison-table { font-size: 0.85rem; }
  .comparison-table th, .comparison-table td { padding: 10px 12px; }}
@media (max-width: 768px) {.related-products { padding: 48px 20px; }
  .related-products-title { font-size: 1.4rem; }
  .related-products-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .related-product-card img { height: 160px; }
  .related-product-info { padding: 16px; }}
@media (max-width: 480px) {.related-products-grid { grid-template-columns: 1fr; }}
@media (max-width: 1024px) {.footer-grid { grid-template-columns: 1fr 1fr; }
  .navbar { padding: 0 24px; }
  .guide-hero, .content-section, .cta-section { padding-left: 32px; padding-right: 32px; }
  .breadcrumb { padding-left: 32px; padding-right: 32px; }
  .nav-links { display: none !important; }
  .nav-menu { display: flex; }
  .nav-cta { display: none !important; }}
@media (max-width: 768px) {.two-col { grid-template-columns: 1fr; }}
@media (max-width: 768px) {.navbar { height: 64px; }
  .mobile-menu { top: 64px; }
  .breadcrumb { padding-top: 84px; padding-left: 20px; padding-right: 20px; }
  .hero-content p { font-size: 1rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer { padding: 48px 20px 24px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .guide-hero, .content-section, .cta-section { padding: 40px 20px; }
  .section-card { padding: 24px; }
  .comparison-table { font-size: 0.85rem; }
  .comparison-table th, .comparison-table td { padding: 10px 12px; }}
@media (max-width: 600px) {#toc ol { columns: 1; }}
@media(max-width:768px) {.step8-grid{grid-template-columns:1fr;}}
@media (max-width: 1024px) {.pros-cons { grid-template-columns: 1fr; }
  .navbar { padding: 0 24px; }
  .article-hero, .table-section, .type-section, .flowchart-section, .cta-knowledge { padding-left: 32px; padding-right: 32px; }
  .breadcrumb { padding-left: 32px; padding-right: 32px; }
  .nav-links { display: none !important; }
  .nav-cta { display: none !important; }}
@media (max-width: 1024px) {.condition-grid { grid-template-columns: 1fr; max-width: 480px; }
  .navbar { padding: 0 24px; }
  .knowledge-hero, .health-section, .cta-knowledge { padding-left: 32px; padding-right: 32px; }
  .breadcrumb { padding-left: 32px; padding-right: 32px; }
  .nav-links { display: none !important; }
  .nav-cta { display: none !important; }
  .nav-menu { display: flex; }}
@media (max-width: 1024px) {.navbar { padding: 0 24px; }
  .article-hero, .process-section, .capacity-section, .qc-section, .cta-knowledge { padding-left: 32px; padding-right: 32px; }
  .breadcrumb { padding-left: 32px; padding-right: 32px; }
  .nav-links { display: none !important; }
  .nav-cta { display: none !important; }}
@media (max-width: 1024px) {.navbar { padding: 0 24px; }
  .article-hero, .data-section, .trend-section, .regional-section, .cta-knowledge { padding-left: 32px; padding-right: 32px; }
  .breadcrumb { padding-left: 32px; padding-right: 32px; }
  .nav-links { display: none !important; }
  .nav-cta { display: none !important; }}
@media (max-width: 1024px) {.navbar { padding: 0 24px; }
  .article-hero, .guide-section, .size-section, .maintenance-section, .trouble-section, .cta-knowledge { padding-left: 32px; padding-right: 32px; }
  .breadcrumb { padding-left: 32px; padding-right: 32px; }
  .nav-links { display: none !important; }
  .nav-cta { display: none !important; }}
@media (max-width: 1024px) {.navbar { padding: 0 24px; }
  .article-hero, .life-section, .storage-section, .pack-section, .degrade-section, .cta-knowledge { padding-left: 32px; padding-right: 32px; }
  .breadcrumb { padding-left: 32px; padding-right: 32px; }
  .nav-links { display: none !important; }
  .nav-cta { display: none !important; }}
@media (max-width: 1024px) {.footer-grid { grid-template-columns: 1fr 1fr; }
  .navbar { padding: 0 24px; }
  .knowledge-hero, .faq-section, .cta-knowledge { padding-left: 32px; padding-right: 32px; }
  .breadcrumb { padding-left: 32px; padding-right: 32px; }
  .nav-links { display: none !important; }
  .nav-cta { display: none !important; }
  .nav-menu { display: flex; }}
@media (max-width: 1024px) {.cert-grid { grid-template-columns: 1fr; max-width: 550px; }
  .navbar { padding: 0 24px; }
  .knowledge-hero, .standards-section, .cta-knowledge { padding-left: 32px; padding-right: 32px; }
  .breadcrumb { padding-left: 32px; padding-right: 32px; }
  .nav-links { display: none !important; }
  .nav-cta { display: none !important; }
  .nav-menu { display: flex; }}
@media (max-width: 1024px) {.navbar { padding: 0 24px; }
  .knowledge-hero, .innovation-section, .cta-knowledge { padding-left: 32px; padding-right: 32px; }
  .breadcrumb { padding-left: 32px; padding-right: 32px; }
  .nav-links { display: none !important; }
  .nav-cta { display: none !important; }
  .nav-menu { display: flex; }}
@media (max-width: 1024px) {.navbar { padding: 0 24px; }
  .knowledge-hero, .mistakes-section, .cta-knowledge { padding-left: 32px; padding-right: 32px; }
  .breadcrumb { padding-left: 32px; padding-right: 32px; }
  .nav-links { display: none !important; }
  .nav-cta { display: none !important; }
  .nav-menu { display: flex; }}
@media (max-width: 1024px) {.articles-grid { grid-template-columns: 1fr; max-width: 600px; margin: 0 auto; }
  .featured-card { flex-direction: column; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .navbar { padding: 0 24px; }
  .knowledge-hero, .articles-section, .featured-section, .cta-knowledge { padding-left: 32px; padding-right: 32px; }
  .breadcrumb { padding-left: 32px; padding-right: 32px; }
  .nav-links { display: none !important; }
  .nav-cta { display: none !important; }
  .nav-menu { display: flex; }}
@media (max-width: 1024px) {.knowledge-cards { grid-template-columns: repeat(2, 1fr); }
  .featured-article { flex-direction: column; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .navbar { padding: 0 24px; }
  .hub-hero, .hub-grid, .featured-section, .cta-hub { padding-left: 32px; padding-right: 32px; }
  .breadcrumb { padding-left: 32px; padding-right: 32px; }
  .nav-links { display: none !important; }
  .nav-cta { display: none !important; }
  .nav-menu { display: flex; }}
@media (max-width: 1024px) {.phase-grid { grid-template-columns: repeat(3, 1fr); }}
@media (max-width: 1024px) {.size-grid { grid-template-columns: repeat(2, 1fr); }}
@media (max-width: 980px) {.pe-bag-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } .pe-bag-card img { height: 220px; }}
@media (max-width: 560px) {.pe-bag-grid { grid-template-columns: 1fr; } .pe-bag-card { padding: 22px 18px; } .pe-bag-card img { height: 200px; }}
@media (max-width: 768px) {.materials-grid { grid-template-columns: 1fr; } .material-card:nth-child(5) { grid-column: span 1; justify-content: flex-start; }}
@media (max-width: 860px) {.steps-grid { grid-template-columns: 1fr; } .steps-grid::before { display: none; } .step-card { text-align: left; } .step-card .step-num { margin: 0 0 12px 0; }}
@media (max-width: 860px) {.print-grid { grid-template-columns: 1fr; }}
@media (max-width: 1024px) {.def-grid, .models-grid, .xlink-grid { grid-template-columns: 1fr; }
  .cmp-table { display: block; overflow-x: auto; white-space: nowrap; }
  .model-hero, .def-section, .cmp-section, .models-section, .proc-section, .xlink-section, .req-section, .cta-band { padding-left: 28px; padding-right: 28px; }
  .breadcrumb { padding-left: 28px; padding-right: 28px; }
  .nav-links { display: none !important; }
  .nav-cta { display: none !important; }}
@media (max-width: 640px) {.req-wrap { padding: 24px 18px; }}
@media (max-width: 1024px) {.footer-grid { grid-template-columns: 1fr 1fr; }
  .navbar { padding: 0 24px; }
  .policy-hero, .policy-content, .cta-section { padding-left: 32px; padding-right: 32px; }
  .breadcrumb { padding-left: 32px; padding-right: 32px; }
  .nav-links { display: none !important; }
  .nav-cta { display: none !important; }}
@media(max-width:768px) {.showcase-grid { grid-template-columns:1fr; gap:32px; padding:16px 20px; } .showcase-section { padding:16px 20px 40px; }}
@media(max-width:768px) {.table-section { padding:32px 20px; border-radius:12px; } .grade-table { font-size:0.84rem; } .grade-table th,.grade-table td { padding:11px 10px; }}
@media(max-width:768px) {.custom-section { padding:36px 20px; } .custom-grid { grid-template-columns:1fr; }}
@media(max-width:768px) {.specs-section { padding:36px 20px; } .specs-grid { grid-template-columns:repeat(2,1fr); }}
@media(max-width:768px) {.faq-section { padding:36px 20px; } .faq-grid { grid-template-columns:1fr; }}
@media(max-width:768px) {.inquiry-section { padding:36px 20px; } .inquiry-form { padding:28px 20px; }}
@media(max-width:768px) {.bridge-section { padding:44px 20px; } .bridge-cards { grid-template-columns:1fr; }}
@media(max-width:1024px) {.lab-metrics-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:768px) {.lab-metrics-grid{grid-template-columns:1fr;}.lab-section{padding:32px 20px !important;}}
@media(max-width:1024px) {.order-control-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:768px) {.order-control-grid{grid-template-columns:1fr;}.order-control-section{padding:32px 20px !important;}}
@media (max-width: 1024px) {.showcase-grid { grid-template-columns: 1fr; gap: 32px; }
  .custom-grid { grid-template-columns: 1fr 1fr; }
  .specs-grid { grid-template-columns: repeat(2, 1fr); }
  .faq-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .difference-box { flex-direction: column; gap: 12px; }}
@keyframes pulse-badge {0%,100% { box-shadow: 0 0 0 0 rgba(232,168,56,0.3); }
  50% { box-shadow: 0 0 0 8px rgba(232,168,56,0); }}
@media (max-width: 1024px) {.showcase-grid { gap: 32px; }
  .specs-grid { grid-template-columns: repeat(2, 1fr); }
  .bridge-grid { grid-template-columns: 1fr 1fr; }
  .custom-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .navbar { padding: 0 24px; }
  .showcase-section, .grade-table-section, .custom-section, .specs-section, .faq-section, .inquiry-section, .bridge-section { padding-left: 32px; padding-right: 32px; }
  .breadcrumb { padding-left: 32px; padding-right: 32px; }
  .nav-links { display: none !important; }
  .nav-cta { display: none !important; }}
@keyframes pulse-badge {0%, 100% { box-shadow: 0 4px 12px rgba(232,168,56,0.4); }
  50% { box-shadow: 0 4px 24px rgba(232,168,56,0.6); }}
@media (max-width: 1024px) {.showcase-inner { grid-template-columns: 1fr; }
  .showcase-image { min-height: 300px; order: -1; }
  .custom-grid { grid-template-columns: repeat(2, 1fr); }
  .specs-grid { grid-template-columns: repeat(2, 1fr); }
  .faq-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .navbar { padding: 0 24px; }
  .page-header, .showcase-section, .compare-section, .custom-section, .specs-section, .faq-section, .inquiry-section, .bridge-section { padding-left: 32px; padding-right: 32px; }
  .breadcrumb { padding-left: 32px; padding-right: 32px; }
  .nav-links { display: none !important; }
  .nav-cta { display: none !important; }}
@media (max-width: 1024px) {.showcase-grid { grid-template-columns: 1fr; gap: 32px; }
  .showcase-image { order: -1; max-width: 420px; margin: 0 auto; }
  .custom-grid { grid-template-columns: repeat(2, 1fr); }
  .specs-grid { grid-template-columns: repeat(2, 1fr); }
  .faq-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .navbar { padding: 0 24px; }
  .breadcrumb, .showcase-section, .grade-section, .custom-section,
  .specs-section, .faq-section, .inquiry-section, .bridge-section { padding-left: 32px; padding-right: 32px; }
  .breadcrumb { padding-left: 32px; padding-right: 32px; }
  .nav-links { display: none !important; }
  .nav-cta { display: none !important; }}
@media (max-width: 1024px) {.showcase-grid { grid-template-columns: 1fr; gap: 32px; }
  .diameter-layout { grid-template-columns: 1fr; gap: 28px; }
  .custom-grid { grid-template-columns: 1fr 1fr; }
  .specs-grid { grid-template-columns: repeat(2, 1fr); }
  .faq-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }}
@media (max-width: 1024px) {.quick-cards { grid-template-columns: repeat(2, 1fr); }
  .bridge-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .navbar { padding: 0 24px; }
  .compare-header, .compare-section, .quick-cards, .bridge-section { padding-left: 32px; padding-right: 32px; }
  .breadcrumb { padding-left: 32px; padding-right: 32px; }
  .nav-links { display: none !important; }
  .nav-cta { display: none !important; }}
@media (max-width: 1024px) {.process-intro { grid-template-columns: 1fr; gap: 40px; }
  .dedust-flow { grid-template-columns: 1fr; max-width: 600px; margin: 0 auto; }
  .why-grid { grid-template-columns: 1fr; max-width: 500px; }
  .showcase-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .navbar { padding: 0 24px; }
  .process-hero, .process-section, .dedust-section, .why-section, .showcase-section, .cta-process { padding-left: 32px; padding-right: 32px; }
  .breadcrumb { padding-left: 32px; padding-right: 32px; }
  .nav-links { display: none !important; }
  .nav-cta { display: none !important; }}
@media (max-width: 1024px) {.problem-grid { grid-template-columns: 1fr; max-width: 480px; }
  .benefit-grid { grid-template-columns: repeat(2, 1fr); }
  .solution-layout { grid-template-columns: 1fr; gap: 40px; }
  .supplier-grid { grid-template-columns: 1fr; max-width: 550px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .navbar { padding: 0 24px; }
  .quality-hero, .problem-section, .solution-section,
  .supplier-section, .benefit-section, .compare-section, .cta-quality { padding-left: 32px; padding-right: 32px; }
  .breadcrumb { padding-left: 32px; padding-right: 32px; }
  .nav-links { display: none !important; }
  .nav-cta { display: none !important; }}
@media (max-width: 1024px) {.calc-form { grid-template-columns: 1fr; }
  .calc-result-grid { grid-template-columns: repeat(2, 1fr); }
  .info-grid { grid-template-columns: 1fr; max-width: 500px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .navbar { padding: 0 24px; }
  .calc-hero, .calculator-main, .info-section, .cta-calc { padding-left: 32px; padding-right: 32px; }
  .breadcrumb { padding-left: 32px; padding-right: 32px; }
  .nav-links { display: none !important; }
  .nav-menu { display: flex; }
  .nav-cta { display: none !important; }}
@media (max-width: 1024px) {.downloads-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .navbar { padding: 0 24px; }
  .downloads-hero, .downloads-main, .cta-downloads { padding-left: 32px; padding-right: 32px; }
  .breadcrumb { padding-left: 32px; padding-right: 32px; }
  .nav-links { display: none !important; }
  .nav-menu { display: flex; }
  .nav-cta { display: none !important; }}
@media (max-width: 1024px) {.footer-grid { grid-template-columns: 1fr 1fr; }
  .navbar { padding: 0 24px; }
  .faq-hero, .faq-main, .cta-faq { padding-left: 32px; padding-right: 32px; }
  .breadcrumb { padding-left: 32px; padding-right: 32px; }
  .nav-links { display: none !important; }
  .nav-menu { display: flex; }
  .nav-cta { display: none !important; }}
@media (max-width: 1024px) {.guides-grid { grid-template-columns: 1fr; max-width: 500px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .navbar { padding: 0 24px; }
  .guides-hero, .guides-main, .cta-guides { padding-left: 32px; padding-right: 32px; }
  .breadcrumb { padding-left: 32px; padding-right: 32px; }
  .nav-links { display: none !important; }
  .nav-menu { display: flex; }
  .nav-cta { display: none !important; }}
@media (max-width: 1024px) {.guides-grid { grid-template-columns: 1fr; max-width: 500px; }
  .downloads-grid { grid-template-columns: 1fr; }
  .calc-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .navbar { padding: 0 24px; }
  .resources-hero, .guides-section, .faq-preview-section,
  .calculator-section, .downloads-section, .cta-resources { padding-left: 32px; padding-right: 32px; }
  .breadcrumb { padding-left: 32px; padding-right: 32px; }
  .nav-links { display: none !important; }
  .nav-menu { display: flex; }
  .nav-cta { display: none !important; }}
@media (max-width: 1024px) {.product-checkboxes { grid-template-columns: 1fr; }
  .trust-bar { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .navbar { padding: 0 24px; }
  .sample-hero, .sample-form-section, .trust-bar, .cta-bar { padding-left: 32px; padding-right: 32px; }
  .breadcrumb { padding-left: 32px; padding-right: 32px; }
  .nav-links { display: none !important; }
  .nav-cta { display: none !important; }}
@media(max-width:1024px) {.navbar{padding:0 24px}.search-container{padding:100px 32px 60px}.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:768px) {.navbar{height:64px;padding:0 20px}.search-container{padding:88px 20px 40px}.search-box-wrap input{font-size:1rem;padding:16px 48px}.footer-grid{grid-template-columns:1fr;gap:32px}.footer{padding:48px 20px 24px}.footer-bottom{flex-direction:column;text-align:center}}
@media (max-width: 1024px) {.footer-grid { grid-template-columns: 1fr 1fr; }
  .navbar { padding: 0 24px; }
  .terms-hero, .terms-content, .cta-section { padding-left: 32px; padding-right: 32px; }
  .breadcrumb { padding-left: 32px; padding-right: 32px; }
  .nav-links { display: none !important; }
  .nav-cta { display: none !important; }}
@media (max-width: 1024px) {.cert-grid { grid-template-columns: 1fr; }
  .benefits-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .navbar { padding: 0 24px; }
  .cert-hero, .cert-section, .benefits-section, .cta-section { padding-left: 32px; padding-right: 32px; }
  .breadcrumb { padding-left: 32px; padding-right: 32px; }
  .nav-links { display: none !important; }
  .nav-cta { display: none !important; }}
@media (max-width: 1024px) {.prod-grid { grid-template-columns: 1fr; }
  .packaging-inner { grid-template-columns: 1fr; }
  .location-details { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .navbar { padding: 0 24px; }
  .factory-hero, .factory-intro, .prod-lines, .packaging-section, .location-section, .cta-section { padding-left: 32px; padding-right: 32px; }
  .breadcrumb { padding-left: 32px; padding-right: 32px; }
  .nav-links { display: none !important; }
  .nav-cta { display: none !important; }}
@media (max-width: 768px) {.nav-links, .nav-cta { display: none; }
  .nav-menu { display: flex; }
  .navbar { padding: 0 24px; }
  .article-hero { padding: 30px 24px 40px; }
  .article-body { padding: 40px 24px; }
  .breadcrumb { padding: 100px 24px 16px; }
  .pros-cons { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  footer { padding: 48px 24px 24px; }
  .related-products { padding: 40px 24px; }
  .cta-section { padding: 32px 24px; }
  .comparison-table { font-size: 0.8rem; }
  .comparison-table td, .comparison-table th { padding: 8px 10px; }}
@media (max-width: 768px) {.article-card { flex-direction: column; }
  .article-card .img { width: 100%; min-height: 120px; }}
@media (max-width: 1024px) {.navbar, .breadcrumb, .article-hero, .article-body, .related-products, .footer { padding-left: 32px; padding-right: 32px; }
  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .nav-links { display: none !important; }
  .nav-cta { display: none !important; }}
@media (max-width: 768px) {.navbar { height: 64px; }
  .mobile-menu { top: 64px; }
  .breadcrumb { padding-top: 84px; padding-left: 20px; padding-right: 20px; }
  .article-hero, .article-body, .related-products { padding-left: 20px; padding-right: 20px; }
  .nav-links, .nav-cta { display: none; }
  .nav-menu { display: flex; }
  .products-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer { padding: 48px 20px 24px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .checklist-box { flex-direction: column; text-align: center; }}
@media (max-width: 1024px) {.page-with-sidebar { grid-template-columns: 1fr; padding: 40px 32px; }
  .sidebar { position: static; }}
@media (max-width: 1024px) {.navbar { padding: 0 24px; }
  .nav-links { display: none !important; }
  .nav-cta { display: none !important; }
  .nav-menu { display: flex; }
  .hero { padding: 140px 32px 80px; }
  .hero h1 { font-size: 2.4rem; }
  .guide-content { padding: 60px 32px; }
  .guide-content article { padding: 40px 36px; }
  .breadcrumb { padding-left: 32px; padding-right: 32px; }
  .cta-section { padding: 60px 32px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }}
@media (max-width: 768px) {.navbar { height: 64px; }
  .mobile-menu { top: 64px; }
  .breadcrumb { padding-top: 84px; padding-left: 20px; padding-right: 20px; }
  .hero { padding: 120px 24px 64px; }
  .hero h1 { font-size: 1.9rem; }
  .hero .subtitle { font-size: 0.95rem; }
  .guide-content { padding: 40px 16px; }
  .guide-content article { padding: 28px 24px; border-radius: 12px; }
  .cta-section { padding: 48px 24px; }
  .footer { padding: 48px 20px 24px; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .nav-menu { display: flex; }}
@media(max-width:800px) {.layout-dashboard{grid-template-columns:1fr;}
  .dash-nav{position:relative;top:auto;margin-bottom:20px;}
  .vs-band{grid-template-columns:1fr;gap:0;}
  .vs-band.reverse{direction:ltr;}
  .mag-stats-row{grid-template-columns:1fr 1fr;}
  .price-hero-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:520px) {.mag-stats-row{grid-template-columns:1fr;}
  .price-hero-grid{grid-template-columns:1fr;}}
@media (max-width: 1024px) {.navbar, .breadcrumb, .article-hero, .article-body, .related-products, footer { padding-left: 32px; padding-right: 32px; }
  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .nav-links { display: none !important; }
  .nav-cta { display: none !important; }
  .nav-menu { display: flex; }}
@media (max-width: 768px) {.navbar, .breadcrumb, .article-hero, .article-body, .related-products, footer { padding-left: 20px; padding-right: 20px; }
  .navbar { height: 64px; }
  .mobile-menu { top: 64px; }
  .breadcrumb { padding-top: 84px; }
  .products-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .checklist-box { flex-direction: column; text-align: center; }}
@media (max-width: 768px) {.navbar, .breadcrumb, .article-hero, .article-body, .related-products, .footer { padding-left: 20px; padding-right: 20px; }
  .navbar { height: 64px; }
  .mobile-menu { top: 64px; }
  .breadcrumb { padding-top: 84px; }
  .nav-links, .nav-cta { display: none; }
  .nav-menu { display: flex; }
  .products-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer { padding: 48px 20px 24px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .checklist-box { flex-direction: column; text-align: center; }
  .article-meta { flex-direction: column; gap: 8px; align-items: flex-start; }}
@media (max-width: 1024px) {.navbar, .breadcrumb, .article-hero, .article-body, .related-products, .footer { padding-left: 32px; padding-right: 32px; }
  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .nav-links { display: none !important; }
  .nav-cta { display: none !important; }
  .nav-menu { display: flex; }}
@media (max-width: 768px) {.navbar, .breadcrumb, .article-hero, .article-body, .related-products, .footer { padding-left: 20px; padding-right: 20px; }
  .navbar { height: 64px; }
  .mobile-menu { top: 64px; }
  .products-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer { padding: 48px 20px 24px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .checklist-box { flex-direction: column; text-align: center; }}
@media(max-width:768px) {.showcase-grid { grid-template-columns:1fr; gap:32px; } .showcase-section { padding:16px 20px 40px; } .showcase-image { min-height:300px; }}
@media(max-width:768px) {.table-section { padding:32px 20px; } .grade-table { font-size:0.84rem; } .grade-table th,.grade-table td { padding:11px 10px; }}

/* Procurement benefit callouts (conversion optimization) */

.procurement-benefit {
  display: block;
  color: var(--amber, #E8A838);
  font-size: 0.9rem;
  margin-top: 4px;
  padding-left: 12px;
  border-left: 3px solid var(--amber, #E8A838);
  font-style: italic;
}



/* ===== Nested Submenu (Success Stories > Korea OEM) ===== */
.has-submenu {
  position: relative;
}
.has-submenu > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.submenu-arrow {
  font-size: 0.7rem;
  margin-left: auto;
  opacity: 0.4;
  transition: opacity 0.2s ease;
}
.has-submenu:hover .submenu-arrow {
  opacity: 1;
}
.submenu {
  position: absolute;
  left: calc(100% + 8px);
  top: -8px;
  min-width: 200px;
  background: var(--white);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-8px);
  transition: all 0.25s ease;
  z-index: 99999;
  border: 1px solid rgba(0,0,0,0.06);
}
.has-submenu:hover .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
.submenu a {
  display: block;
  padding: 8px 12px;
  color: var(--text);
  text-decoration: none;
  border-radius: 6px;
  font-size: 0.88rem;
  white-space: nowrap;
  transition: all 0.2s ease;
}
.submenu a:hover {
  color: var(--amber);
  background: rgba(232,168,56,0.06);
}

/* Mobile: stack submenu below parent */
@media (max-width: 768px) {
  .submenu {
    position: static;
    left: 0;
    top: 0;
    transform: none;
    box-shadow: none;
    border: none;
    border-left: 3px solid var(--amber);
    margin-left: 16px;
    padding-left: 8px;
    opacity: 1;
    visibility: visible;
    display: none;
  }
  .has-submenu.active .submenu,
  .has-submenu:hover .submenu {
    display: block;
  }
}