/* ===================================================================

江苏月仙节能保温设备科技有限公司 - 现代企业官网样式表

Theme Colors: Eco-Green (#2e7d32, #4caf50) & Modern Slate Navy (#1b283c, #263850)

Lighter, Vibrant Dark Sections with Dropdown Menus & Pagination

=================================================================== */

:root {

/* Brand Green (Matching Logo #54a430) */

--primary: #2e7d32;

--primary-rgb: 46, 125, 50;

--primary-light: #4caf50;

--primary-dark: #1b5e20;

--primary-soft: rgba(46, 125, 50, 0.08);

--primary-glow: rgba(76, 175, 80, 0.35);

/* Ice Blue & Cyan */

--accent-cyan: #0284c7;

--accent-cyan-soft: rgba(2, 132, 199, 0.08);

--accent-ice: #e0f2fe;

/* Modern Brighter Slate Navy Palette (Lighter & More Vibrant Dark Tones) */

--dark: #202e44;

--dark-rgb: 32, 46, 68;

--dark-surface: #2b3d58;

--dark-card: #344a6a;

--dark-light: #48668d;

--dark-lighter: #6385b2;

/* Neutral Backgrounds */

--light-bg: #f8fafc;

--light-subtle: #f1f5f9;

--card-bg: #ffffff;

/* Typography Colors */

--text-main: #1e293b;

--text-muted: #64748b;

--text-light: #94a3b8;

--border-color: #e2e8f0;

--border-light: #f1f5f9;

/* Radii */

--radius-sm: 6px;

--radius-md: 12px;

--radius-lg: 18px;

--radius-full: 9999px;

/* Shadows */

--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04);

--shadow-md: 0 8px 24px -4px rgba(26, 38, 57, 0.08);

--shadow-lg: 0 20px 35px -8px rgba(26, 38, 57, 0.12);

--shadow-glow: 0 10px 25px -5px rgba(46, 125, 50, 0.3);

/* Transitions */

--transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);

--transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

--transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

}

/* Base & Reset */

*, *::before, *::after {

box-sizing: border-box;

margin: 0;

padding: 0;

}

html, body {

overflow-x: clip !important;

max-width: 100vw !important;

width: 100% !important;

position: relative;

}

* {

box-sizing: border-box;

}

html {

scroll-behavior: smooth;

font-size: 16px;

-webkit-text-size-adjust: 100%;

}

body {

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;

color: var(--text-main);

background-color: var(--light-bg);

line-height: 1.65;

overflow-x: clip;

-webkit-font-smoothing: antialiased;

}

img {

max-width: 100%;

height: auto;

display: block;

}

a {

color: inherit;

text-decoration: none;

transition: color var(--transition-fast);

}

ul, ol {

list-style: none;

}

button, input, select, textarea {

font: inherit;

outline: none;

border: none;

}

/* Layout Utilities */

.container {

width: 100%;

max-width: 1260px;

margin-left: auto;

margin-right: auto;

padding-left: 24px;

padding-right: 24px;

}

.section {

padding: 85px 0;

position: relative;

}

.section-light {

background-color: #ffffff;

}

.section-subtle {

background-color: var(--light-bg);

}

.section-dark {

background-color: var(--dark);

color: #ffffff;

}

/* Section Header */

.section-header {

text-align: center;

max-width: 760px;

margin: 0 auto 55px;

}

.section-tag {

display: inline-flex;

align-items: center;

gap: 8px;

padding: 6px 16px;

border-radius: var(--radius-full);

background: var(--primary-soft);

color: var(--primary);

font-weight: 600;

font-size: 0.85rem;

letter-spacing: 0.5px;

text-transform: uppercase;

margin-bottom: 14px;

}

.section-tag.cyan {

background: var(--accent-cyan-soft);

color: var(--accent-cyan);

}

.section-tag.light {

background: rgba(255, 255, 255, 0.15);

color: #a7f3d0;

border: 1px solid rgba(255, 255, 255, 0.25);

}

.section-title {

font-size: 2.25rem;

font-weight: 800;

color: var(--dark);

line-height: 1.3;

margin-bottom: 16px;

letter-spacing: -0.5px;

}

.section-dark .section-title {

color: #ffffff;

}

.section-desc {

font-size: 1.05rem;

color: var(--text-muted);

line-height: 1.7;

}

.section-dark .section-desc {

color: #cbd5e1;

}

/* Buttons */

.btn {

display: inline-flex;

align-items: center;

justify-content: center;

gap: 8px;

padding: 12px 26px;

border-radius: var(--radius-md);

font-weight: 600;

font-size: 0.95rem;

cursor: pointer;

transition: all var(--transition-normal);

white-space: nowrap;

position: relative;

overflow: hidden;

}

.btn-primary {

background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);

color: #ffffff;

box-shadow: 0 4px 15px rgba(46, 125, 50, 0.25);

}

.btn-primary:hover {

transform: translateY(-2px);

box-shadow: 0 8px 25px rgba(46, 125, 50, 0.35);

background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);

}

.btn-secondary {

background: #ffffff;

color: var(--dark);

border: 1px solid var(--border-color);

box-shadow: var(--shadow-sm);

}

.btn-secondary:hover {

background: var(--light-subtle);

border-color: var(--text-muted);

transform: translateY(-2px);

}

.btn-outline-white {

background: rgba(255, 255, 255, 0.12);

color: #ffffff;

border: 1.5px solid rgba(255, 255, 255, 0.4);

backdrop-filter: blur(8px);

}

.btn-outline-white:hover {

background: rgba(255, 255, 255, 0.25);

border-color: #ffffff;

transform: translateY(-2px);

}

.btn-sm {

padding: 8px 18px;

font-size: 0.88rem;

border-radius: var(--radius-sm);

}

.btn-lg {

padding: 14px 32px;

font-size: 1.05rem;

border-radius: var(--radius-md);

}

/* ===================================================================

Header & Top Bar (Lighter Navy, Balanced & Crisp)

=================================================================== */

.top-bar {

background: #1f2d42;

color: #e2e8f0;

font-size: 0.82rem;

border-bottom: 1px solid rgba(255, 255, 255, 0.12);

padding: 8px 0;

position: relative;

z-index: 1001;

}

.top-bar-inner {

display: flex;

justify-content: space-between;

align-items: center;

flex-wrap: nowrap;

}

.top-bar-left, .top-bar-right {

display: flex;

align-items: center;

gap: 18px;

white-space: nowrap;

}

.top-bar-item {

display: inline-flex;

align-items: center;

gap: 6px;

white-space: nowrap;

}

.top-bar-item i {

color: #4ade80;

font-size: 0.85rem;

}

.top-bar-item a {

color: #f1f5f9;

}

.top-bar-item a:hover {

color: #4ade80;

}

.top-bar-divider {

width: 1px;

height: 12px;

background: rgba(255, 255, 255, 0.2);

}

.lang-switch {

display: inline-flex;

align-items: center;

background: rgba(255, 255, 255, 0.12);

border-radius: var(--radius-full);

padding: 2px 4px;

}

.lang-btn {

padding: 2px 10px;

border-radius: var(--radius-full);

color: #cbd5e1;

font-weight: 500;

font-size: 0.78rem;

transition: var(--transition-fast);

}

.lang-btn.active {

background: var(--primary);

color: #ffffff;

}

.lang-btn:hover:not(.active) {

color: #ffffff;

}

/* Navbar */

.site-header {

position: sticky;

top: 0;

z-index: 1000;

background: rgba(255, 255, 255, 0.98);

backdrop-filter: blur(16px);

-webkit-backdrop-filter: blur(16px);

box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);

transition: all var(--transition-normal);

border-bottom: 1px solid rgba(226, 232, 240, 0.8);

}

.site-header.scrolled {

background: #ffffff;

box-shadow: 0 6px 25px rgba(0, 0, 0, 0.08);

}

.nav-container {

display: flex;

align-items: center;

justify-content: space-between;

height: 76px;

gap: 20px;

}

.brand-logo-wrap {

display: flex;

align-items: center;

flex-shrink: 0;

}

.brand-logo {

height: 46px;

width: auto;

object-fit: contain;

}

.brand-divider {

width: 1px;

height: 28px;

background: #e2e8f0;

margin: 0 14px;

}

.brand-text {

display: flex;

flex-direction: column;

}

.brand-name {

font-size: 1.15rem;

font-weight: 800;

color: var(--dark);

letter-spacing: -0.2px;

line-height: 1.15;

}

.brand-slogan {

font-size: 0.7rem;

color: var(--primary);

font-weight: 600;

letter-spacing: 0.4px;

margin-top: 2px;

}

/* Main Navigation Menu & Dropdown */

.main-nav {

display: flex;

align-items: center;

gap: clamp(14px, 2vw, 30px);

flex-wrap: nowrap;

}

.nav-item {

position: relative;

display: flex;

align-items: center;

}

.nav-link {

font-size: 0.95rem;

font-weight: 600;

color: var(--dark-light);

padding: 26px 4px;

position: relative;

white-space: nowrap;

display: inline-flex;

align-items: center;

gap: 5px;

transition: color var(--transition-fast);

}

.nav-link::after {

content: "";

position: absolute;

bottom: 18px;

left: 0;

width: 0;

height: 2.5px;

background: var(--primary);

border-radius: 2px;

transition: width var(--transition-fast);

}

.nav-link:hover, .nav-link.active {

color: var(--primary);

}

.nav-link:hover::after, .nav-link.active::after {

width: 100%;

}

.nav-link i.dropdown-caret {

font-size: 0.75rem;

color: var(--text-light);

transition: transform var(--transition-fast);

}

.nav-item:hover .nav-link i.dropdown-caret {

transform: rotate(180deg);

color: var(--primary);

}

/* Dropdown Menu Container */

.dropdown-menu {

position: absolute;

top: 100%;

left: 50%;

transform: translateX(-50%) translateY(10px);

background: #ffffff;

border-radius: var(--radius-md);

border: 1px solid var(--border-color);

box-shadow: 0 15px 35px -5px rgba(26, 38, 57, 0.15), 0 5px 15px rgba(0, 0, 0, 0.05);

padding: 12px;

min-width: 270px;

opacity: 0;

visibility: hidden;

pointer-events: none;

transition: all var(--transition-normal);

z-index: 1002;

}

.nav-item:hover .dropdown-menu {

opacity: 1;

visibility: visible;

pointer-events: auto;

transform: translateX(-50%) translateY(0);

}

.dropdown-item {

display: flex;

align-items: center;

gap: 12px;

padding: 10px 14px;

border-radius: var(--radius-sm);

color: var(--dark-light);

font-size: 0.88rem;

font-weight: 600;

transition: all var(--transition-fast);

}

.dropdown-item:hover {

background: var(--light-subtle);

color: var(--primary);

transform: translateX(4px);

}

.dropdown-icon {

width: 32px;

height: 32px;

border-radius: var(--radius-sm);

background: var(--primary-soft);

color: var(--primary);

display: flex;

align-items: center;

justify-content: center;

font-size: 0.95rem;

flex-shrink: 0;

}

.dropdown-item:hover .dropdown-icon {

background: var(--primary);

color: #ffffff;

}

.dropdown-text h6 {

font-size: 0.88rem;

font-weight: 700;

margin: 0;

line-height: 1.2;

}

.dropdown-text span {

font-size: 0.72rem;

color: var(--text-muted);

font-weight: normal;

display: block;

margin-top: 2px;

}

.nav-cta {

display: flex;

align-items: center;

gap: 12px;

flex-shrink: 0;

}

.mobile-toggle {

display: none;

background: transparent;

border: none;

outline: none;

color: var(--dark);

font-size: 1.4rem;

cursor: pointer;

padding: 6px;

}

/* ===================================================================

Subpage Banner (.page-header) with Real Background Image

=================================================================== */

.page-header {

position: relative;

background: linear-gradient(135deg, rgba(30, 46, 68, 0.82) 0%, rgba(38, 62, 52, 0.80) 100%),

url('../images/factory/factory-1.jpg') center/cover no-repeat;

color: #ffffff;

padding: 70px 0 60px;

border-bottom: 1px solid rgba(255, 255, 255, 0.12);

overflow: hidden;

}

.page-header::before {

content: "";

position: absolute;

top: 0; left: 0; right: 0; bottom: 0;

background: radial-gradient(circle at 80% 20%, rgba(76, 175, 80, 0.25) 0%, transparent 60%);

pointer-events: none;

}

.breadcrumb {

display: flex;

align-items: center;

gap: 8px;

font-size: 0.86rem;

color: #cbd5e1;

margin-bottom: 14px;

}

.breadcrumb a {

color: #e2e8f0;

}

.breadcrumb a:hover {

color: #4ade80;

}

.breadcrumb i {

font-size: 0.72rem;

color: #94a3b8;

}

.page-title {

font-size: 2.35rem;

font-weight: 800;

margin-bottom: 12px;

color: #ffffff;

letter-spacing: -0.4px;

}

.page-desc {

font-size: 1.05rem;

color: #cbd5e1;

max-width: 720px;

line-height: 1.65;

}

/* ===================================================================

Pagination Component (Customized for User's Exact Markup)

=================================================================== */

.pagination {

display: flex;

align-items: center;

justify-content: center;

gap: 8px;

margin: 50px auto 20px;

flex-wrap: wrap;

}

.page-item {

display: inline-flex;

align-items: center;

justify-content: center;

min-width: 42px;

height: 42px;

padding: 0 14px;

border-radius: var(--radius-md);

background: #ffffff;

border: 1px solid var(--border-color);

color: var(--dark-light);

font-weight: 600;

font-size: 0.92rem;

cursor: pointer;

transition: all var(--transition-fast);

box-shadow: var(--shadow-sm);

user-select: none;

}

.page-item a {

color: inherit;

display: inline-flex;

align-items: center;

justify-content: center;

width: 100%;

height: 100%;

}

.page-item:hover:not(.active) {

border-color: var(--primary);

color: var(--primary);

background: var(--primary-soft);

transform: translateY(-2px);

}

.page-item.active {

background: var(--primary);

border-color: var(--primary);

color: #ffffff;

box-shadow: 0 4px 15px rgba(46, 125, 50, 0.3);

cursor: default;

}

.page-item.prev-next {

padding: 0 18px;

font-weight: 600;

}

/* ===================================================================

Hero Banner Slider with Synchronized Switching & Lighter Gradient

=================================================================== */

.hero-slider-section {
  position: relative;
  overflow: hidden;
  background: #142032;
  color: #ffffff;
  height: 680px;
  min-height: 680px;
}

.hero-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 680px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease, visibility 0.8s ease;
  display: flex;
  align-items: center;
  padding: 70px 0 100px;
  z-index: 1;
}

.hero-slide.active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

.hero-bg-layer {
  position: absolute;
  top: -10px;
  left: -10px;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  background-size: cover;
  background-position: center;
  filter: blur(8px) brightness(0.85);
  transform: scale(1.04);
  transition: transform 7s ease-out;
  z-index: -2;
}

.hero-slide.active .hero-bg-layer {
  transform: scale(1.08);
}

/* Lighter, More Vibrant Overlay */

.hero-overlay-layer {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: linear-gradient(135deg, rgba(28, 44, 68, 0.80) 0%, rgba(36, 56, 84, 0.74) 50%, rgba(30, 68, 46, 0.78) 100%);

z-index: -1;

}

.hero-grid {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: 40px;
  align-items: center;
  width: 100%;
}

.hero-slide.active .hero-badge {

animation: heroFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;

}

.hero-slide.active .hero-title {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.22;
  margin-bottom: 16px;
  letter-spacing: -0.6px;
}

.hero-slide.active .hero-desc {
  font-size: 1.02rem;
  color: #e2e8f0;
  line-height: 1.68;
  margin-bottom: 24px;
  max-width: 600px;
  min-height: 56px;
}

.hero-slide.active .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 26px;
}

.hero-slide.active .hero-features-list {

animation: heroFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.7s both;

}

.hero-slide.active .hero-visual {
  position: relative;
  width: 100%;
  max-width: 540px;
  margin-left: auto;
}

@keyframes heroFadeUp {

from {

opacity: 0;

transform: translateY(24px);

}

to {

opacity: 1;

transform: translateY(0);

}

}

@keyframes heroFadeLeft {

from {

opacity: 0;

transform: translateX(30px);

}

to {

opacity: 1;

transform: translateX(0);

}

}

.hero-badge {

display: inline-flex;

align-items: center;

gap: 8px;

background: rgba(46, 125, 50, 0.3);

border: 1px solid rgba(76, 175, 80, 0.5);

padding: 6px 16px;

border-radius: var(--radius-full);

color: #a7f3d0;

font-size: 0.85rem;

font-weight: 600;

margin-bottom: 20px;

}

.hero-badge i {

color: #4ade80;

}

.hero-title {

font-size: 2.85rem;

font-weight: 800;

line-height: 1.24;

margin-bottom: 18px;

letter-spacing: -0.6px;

}

.hero-title span {

background: linear-gradient(135deg, #4ade80 0%, #38bdf8 100%);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

}

.hero-desc {

font-size: 1.05rem;

color: #e2e8f0;

line-height: 1.7;

margin-bottom: 30px;

max-width: 600px;

}

.hero-actions {

display: flex;

flex-wrap: wrap;

gap: 14px;

margin-bottom: 35px;

}

.hero-features-list {

display: flex;

flex-wrap: wrap;

gap: 20px;

padding-top: 20px;

border-top: 1px solid rgba(255, 255, 255, 0.15);

}

.hero-feature-item {

display: flex;

align-items: center;

gap: 8px;

font-size: 0.88rem;

color: #e2e8f0;

}

.hero-feature-item i {

color: #4ade80;

}

.hero-visual {

position: relative;

}

.hero-image-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.22);
  aspect-ratio: 1000 / 408;
  background: #0f172a;
  width: 100%;
}

.hero-image-card img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1000 / 408;
  object-fit: cover;
  display: block;
  transition: transform 0.8s ease;
}

.hero-image-card:hover img {

transform: scale(1.04);

}

.hero-floating-box {
  position: relative;
  margin-top: 16px;
  bottom: auto;
  left: auto;
  background: rgba(27, 44, 70, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  padding: 12px 18px;
  border-radius: var(--radius-md);
  color: #ffffff;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 100%;
  z-index: 2;
}

.floating-icon {

width: 44px;

height: 44px;

border-radius: var(--radius-md);

background: var(--primary);

display: flex;

align-items: center;

justify-content: center;

font-size: 1.3rem;

color: #ffffff;

flex-shrink: 0;

}

.floating-text h4 {

font-size: 0.98rem;

font-weight: 700;

margin-bottom: 2px;

}

.floating-text p {

font-size: 0.8rem;

color: #cbd5e1;

}

.hero-stat-badge {
  position: absolute;
  top: -12px;
  right: 20px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  box-shadow: 0 15px 30px rgba(16, 185, 129, 0.35);
  text-align: center;
  z-index: 3;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.hero-stat-badge .num {

font-size: 1.6rem;

font-weight: 800;

line-height: 1;

}

.hero-stat-badge .lbl {

font-size: 0.75rem;

font-weight: 600;

opacity: 0.95;

margin-top: 3px;

}

.hero-nav-arrow {

position: absolute;

top: 50%;

transform: translateY(-50%);

z-index: 10;

width: 48px;

height: 48px;

border-radius: var(--radius-full);

background: rgba(26, 38, 57, 0.7);

border: 1px solid rgba(255, 255, 255, 0.25);

color: #ffffff;

display: flex;

align-items: center;

justify-content: center;

font-size: 1.1rem;

cursor: pointer;

transition: all var(--transition-fast);

backdrop-filter: blur(8px);

}

.hero-nav-arrow:hover {

background: var(--primary);

border-color: var(--primary);

transform: translateY(-50%) scale(1.08);

}

.hero-nav-arrow.prev { left: 24px; }

.hero-nav-arrow.next { right: 24px; }

.hero-indicators-wrap {

position: absolute;

bottom: 22px;

left: 0;

right: 0;

z-index: 10;

}

.hero-indicators-container {

display: flex;

justify-content: center;

gap: 16px;

}

.hero-indicator-tab {

background: rgba(26, 38, 57, 0.78);

border: 1px solid rgba(255, 255, 255, 0.18);

backdrop-filter: blur(8px);

padding: 10px 18px;

border-radius: var(--radius-md);

cursor: pointer;

color: #cbd5e1;

font-size: 0.84rem;

font-weight: 600;

display: flex;

flex-direction: column;

gap: 4px;

width: 220px;

position: relative;

overflow: hidden;

transition: all var(--transition-fast);

}

.hero-indicator-tab:hover {

background: rgba(26, 38, 57, 0.95);

color: #ffffff;

border-color: rgba(255, 255, 255, 0.35);

}

.hero-indicator-tab.active {

background: rgba(26, 38, 57, 0.98);

color: #ffffff;

border-color: var(--primary-light);

box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);

}

.hero-indicator-tab .tab-title {

display: flex;

align-items: center;

gap: 8px;

}

.hero-indicator-tab .tab-title .tab-num {

color: var(--primary-light);

font-size: 0.75rem;

font-weight: 800;

}

.hero-indicator-tab .tab-progress-bar {

position: absolute;

bottom: 0;

left: 0;

height: 3px;

width: 0%;

background: var(--primary-light);

transition: width 0.1s linear;

}

.hero-indicator-tab.active .tab-progress-bar {

width: 100%;

}

/* ===================================================================

Stats Counter Strip

=================================================================== */

.stats-strip {

background: #ffffff;

padding: 30px 24px;

border-bottom: 1px solid var(--border-color);

box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);

margin-top: -30px;

position: relative;

z-index: 10;

border-radius: var(--radius-md);

}

.stats-grid {

display: grid;

grid-template-columns: repeat(4, 1fr);

gap: 20px;

}

.stat-item {

display: flex;

align-items: center;

gap: 16px;

padding: 5px 12px;

border-right: 1px solid var(--border-color);

}

.stat-item:last-child {

border-right: none;

}

.stat-icon {

width: 50px;

height: 50px;

border-radius: var(--radius-md);

background: var(--primary-soft);

color: var(--primary);

display: flex;

align-items: center;

justify-content: center;

font-size: 1.4rem;

flex-shrink: 0;

}

.stat-icon.blue {

background: var(--accent-cyan-soft);

color: var(--accent-cyan);

}

.stat-info .stat-number {

font-size: 1.85rem;

font-weight: 800;

color: var(--dark);

line-height: 1;

}

.stat-info .stat-label {

font-size: 0.85rem;

color: var(--text-muted);

margin-top: 4px;

font-weight: 500;

}

/* ===================================================================

Calculator, Product Matrix & Other Components

=================================================================== */

.calculator-card {

background: #ffffff;

border-radius: var(--radius-lg);

box-shadow: var(--shadow-lg);

border: 1px solid var(--border-color);

overflow: hidden;

display: grid;

grid-template-columns: 1.15fr 0.85fr;

}

.calc-form-side {

padding: 40px;

}

.calc-results-side {

background: linear-gradient(135deg, #1a2639 0%, #24344d 100%);

color: #ffffff;

padding: 40px;

display: flex;

flex-direction: column;

justify-content: space-between;

}

.calc-title {

font-size: 1.45rem;

font-weight: 700;

color: var(--dark);

margin-bottom: 8px;

display: flex;

align-items: center;

gap: 10px;

}

.calc-title i {

color: var(--primary);

}

.calc-subtitle {

font-size: 0.92rem;

color: var(--text-muted);

margin-bottom: 28px;

}

.calc-type-selector {

display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 12px;

margin-bottom: 26px;

}

.calc-type-btn {

background: var(--light-subtle);

border: 1.5px solid var(--border-color);

border-radius: var(--radius-md);

padding: 14px 10px;

text-align: center;

cursor: pointer;

transition: all var(--transition-fast);

}

.calc-type-btn:hover {

border-color: var(--primary-light);

background: var(--primary-soft);

}

.calc-type-btn.active {

border-color: var(--primary);

background: var(--primary-soft);

box-shadow: 0 4px 12px rgba(46, 125, 50, 0.15);

}

.calc-type-btn i {

font-size: 1.4rem;

color: var(--primary);

margin-bottom: 6px;

display: block;

}

.calc-type-btn .name {

font-size: 0.88rem;

font-weight: 600;

color: var(--dark);

display: block;

}

.calc-type-btn .temp {

font-size: 0.75rem;

color: var(--text-muted);

margin-top: 2px;

display: block;

}

.calc-inputs-grid {

display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 16px;

margin-bottom: 24px;

}

.form-group label {

display: block;

font-size: 0.85rem;

font-weight: 600;

color: var(--dark-light);

margin-bottom: 8px;

}

.input-with-unit {

position: relative;

display: flex;

align-items: center;

}

.input-with-unit input, .input-with-unit select {

width: 100%;

padding: 12px 35px 12px 14px;

border: 1.5px solid var(--border-color);

border-radius: var(--radius-md);

font-size: 0.95rem;

color: var(--dark);

background: #ffffff;

transition: border-color var(--transition-fast);

}

.input-with-unit input:focus, .input-with-unit select:focus {

border-color: var(--primary);

}

.input-with-unit .unit {

position: absolute;

right: 12px;

color: var(--text-muted);

font-size: 0.82rem;

pointer-events: none;

font-weight: 500;

}

.calc-results-title {

font-size: 1.25rem;

font-weight: 700;

color: #ffffff;

margin-bottom: 20px;

display: flex;

align-items: center;

gap: 10px;

}

.calc-results-title i {

color: #4ade80;

}

.result-metric-card {

background: rgba(255, 255, 255, 0.1);

border: 1px solid rgba(255, 255, 255, 0.15);

border-radius: var(--radius-md);

padding: 18px 20px;

margin-bottom: 14px;

display: flex;

justify-content: space-between;

align-items: center;

}

.result-label {

font-size: 0.88rem;

color: #cbd5e1;

}

.result-val {

font-size: 1.25rem;

font-weight: 700;

color: #4ade80;

}

.result-detail-list {

background: rgba(0, 0, 0, 0.2);

border-radius: var(--radius-md);

padding: 18px;

margin-bottom: 24px;

}

.result-detail-item {

display: flex;

align-items: center;

gap: 10px;

font-size: 0.84rem;

color: #e2e8f0;

margin-bottom: 10px;

}

.result-detail-item:last-child {

margin-bottom: 0;

}

.result-detail-item i {

color: #38bdf8;

font-size: 0.9rem;

}

/* Temperature Spectrum */

.spectrum-container {

display: grid;

grid-template-columns: repeat(5, 1fr);

gap: 16px;

}

.spectrum-card {

background: #ffffff;

border-radius: var(--radius-md);

padding: 24px 20px;

border: 1px solid var(--border-color);

box-shadow: var(--shadow-sm);

transition: all var(--transition-normal);

position: relative;

overflow: hidden;

}

.spectrum-card::before {

content: "";

position: absolute;

top: 0;

left: 0;

right: 0;

height: 4px;

background: var(--primary);

transition: height var(--transition-fast);

}

.spectrum-card:hover {

transform: translateY(-6px);

box-shadow: var(--shadow-md);

border-color: var(--primary-light);

}

.spectrum-card:hover::before {

height: 6px;

}

.temp-badge {

display: inline-block;

padding: 4px 12px;

border-radius: var(--radius-full);

font-size: 0.82rem;

font-weight: 700;

margin-bottom: 12px;

}

.temp-badge.blue { background: #e0f2fe; color: #0369a1; }

.temp-badge.cyan { background: #ecfeff; color: #0e7490; }

.temp-badge.green { background: #dcfce7; color: #15803d; }

.temp-badge.orange { background: #ffedd5; color: #c2410c; }

.temp-badge.purple { background: #f3e8ff; color: #7e22ce; }

.spectrum-card h4 {

font-size: 1.15rem;

font-weight: 700;

color: var(--dark);

margin-bottom: 8px;

}

.spectrum-card p {

font-size: 0.85rem;

color: var(--text-muted);

line-height: 1.5;

margin-bottom: 14px;

}

.spectrum-specs {

font-size: 0.78rem;

color: var(--dark-light);

background: var(--light-subtle);

padding: 8px 10px;

border-radius: var(--radius-sm);

}

/* Product Matrix Showcase */

.product-tabs {

display: flex;

justify-content: center;

flex-wrap: wrap;

gap: 12px;

margin-bottom: 45px;

}

.tab-btn {

padding: 10px 24px;

border-radius: var(--radius-full);

background: #ffffff;

color: var(--dark-light);

border: 1px solid var(--border-color);

font-weight: 600;

font-size: 0.92rem;

cursor: pointer;

transition: all var(--transition-fast);

box-shadow: var(--shadow-sm);

}

.tab-btn:hover {

border-color: var(--primary);

color: var(--primary);

}

.tab-btn.active {

background: var(--primary);

color: #ffffff;

border-color: var(--primary);

box-shadow: 0 4px 15px rgba(46, 125, 50, 0.25);

}

.product-grid {

display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 30px;

}

.product-card {

background: #ffffff;

border-radius: var(--radius-lg);

border: 1px solid var(--border-color);

overflow: hidden;

box-shadow: var(--shadow-sm);

transition: all var(--transition-normal);

display: flex;

flex-direction: column;

}

.product-card:hover {

transform: translateY(-8px);

box-shadow: var(--shadow-lg);

border-color: rgba(46, 125, 50, 0.3);

}

.product-thumb {

position: relative;

height: 240px;

overflow: hidden;

background: #f1f5f9;

}

.product-thumb img {

width: 100%;

height: 100%;

object-fit: cover;

transition: transform 0.6s ease;

}

.product-card:hover .product-thumb img {

transform: scale(1.08);

}

.product-tag-pill {

position: absolute;

top: 14px;

left: 14px;

background: rgba(26, 38, 57, 0.85);

backdrop-filter: blur(8px);

-webkit-backdrop-filter: blur(8px);

color: #ffffff;

padding: 4px 12px;

border-radius: var(--radius-full);

font-size: 0.75rem;

font-weight: 600;

}

.product-body {

padding: 24px;

flex: 1;

display: flex;

flex-direction: column;

}

.product-title {

font-size: 1.25rem;

font-weight: 700;

color: var(--dark);

margin-bottom: 10px;

line-height: 1.35;

}

.product-desc {

font-size: 0.88rem;

color: var(--text-muted);

line-height: 1.6;

margin-bottom: 18px;

flex: 1;

}

.product-specs-table {

background: var(--light-bg);

border-radius: var(--radius-md);

padding: 12px 14px;

margin-bottom: 18px;

font-size: 0.82rem;

}

.spec-row {

display: flex;

justify-content: space-between;

padding: 4px 0;

border-bottom: 1px dashed var(--border-color);

}

.spec-row:last-child {

border-bottom: none;

}

.spec-key { color: var(--text-muted); }

.spec-val { color: var(--dark); font-weight: 600; }

.product-footer {

display: flex;

justify-content: space-between;

align-items: center;

padding-top: 14px;

border-top: 1px solid var(--border-light);

}

.product-link {

font-size: 0.88rem;

font-weight: 600;

color: var(--primary);

display: inline-flex;

align-items: center;

gap: 6px;

}

.product-link:hover {

gap: 10px;

color: var(--primary-dark);

}

/* Quality & Factory Strength */

.craft-grid {

display: grid;

grid-template-columns: repeat(4, 1fr);

gap: 24px;

margin-bottom: 60px;

}

.craft-card {

background: #ffffff;

border-radius: var(--radius-md);

padding: 30px 24px;

border: 1px solid var(--border-color);

box-shadow: var(--shadow-sm);

transition: all var(--transition-normal);

text-align: center;

}

.craft-card:hover {

transform: translateY(-6px);

box-shadow: var(--shadow-md);

border-color: var(--primary-light);

}

.craft-icon-wrap {

width: 64px;

height: 64px;

border-radius: var(--radius-md);

background: var(--primary-soft);

color: var(--primary);

display: flex;

align-items: center;

justify-content: center;

font-size: 1.8rem;

margin: 0 auto 20px;

transition: transform var(--transition-fast);

}

.craft-card:hover .craft-icon-wrap {

transform: scale(1.1);

background: var(--primary);

color: #ffffff;

}

.craft-card h4 {

font-size: 1.15rem;

font-weight: 700;

color: var(--dark);

margin-bottom: 10px;

}

.craft-card p {

font-size: 0.88rem;

color: var(--text-muted);

line-height: 1.6;

}

/* Factory Gallery */

.factory-gallery-grid {

display: grid;

grid-template-columns: repeat(4, 1fr);

gap: 18px;

}

.gallery-item {

position: relative;

border-radius: var(--radius-md);

overflow: hidden;

height: 220px;

box-shadow: var(--shadow-sm);

}

.gallery-item img {

width: 100%;

height: 100%;

object-fit: cover;

transition: transform 0.6s ease;

}

.gallery-item:hover img {

transform: scale(1.1);

}

.gallery-overlay {

position: absolute;

bottom: 0;

left: 0;

right: 0;

padding: 16px 14px;

background: linear-gradient(to top, rgba(26, 38, 57, 0.92) 0%, rgba(26, 38, 57, 0) 100%);

color: #ffffff;

font-size: 0.85rem;

font-weight: 600;

transform: translateY(10px);

opacity: 0;

transition: all var(--transition-normal);

}

.gallery-item:hover .gallery-overlay {

transform: translateY(0);

opacity: 1;

}

/* Applications Grid */

.app-grid {

display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 26px;

}

.app-card {

background: rgba(255, 255, 255, 0.08);

border: 1px solid rgba(255, 255, 255, 0.15);

border-radius: var(--radius-lg);

padding: 32px 28px;

transition: all var(--transition-normal);

}

.app-card:hover {

background: rgba(255, 255, 255, 0.14);

border-color: rgba(76, 175, 80, 0.6);

transform: translateY(-6px);

}

.app-icon {

width: 52px;

height: 52px;

border-radius: var(--radius-md);

background: rgba(76, 175, 80, 0.25);

color: #4ade80;

display: flex;

align-items: center;

justify-content: center;

font-size: 1.45rem;

margin-bottom: 20px;

}

.app-card h4 {

font-size: 1.25rem;

font-weight: 700;

color: #ffffff;

margin-bottom: 10px;

}

.app-card p {

font-size: 0.9rem;

color: #cbd5e1;

line-height: 1.65;

margin-bottom: 18px;

}

.app-tags {

display: flex;

flex-wrap: wrap;

gap: 8px;

}

.app-tag {

background: rgba(255, 255, 255, 0.12);

color: #e2e8f0;

padding: 3px 10px;

border-radius: var(--radius-full);

font-size: 0.76rem;

}

/* Classic Cases */

.cases-grid {

display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 28px;

margin-bottom: 50px;

}

.case-card {

background: #ffffff;

border-radius: var(--radius-lg);

border: 1px solid var(--border-color);

overflow: hidden;

box-shadow: var(--shadow-sm);

transition: all var(--transition-normal);

}

.case-card:hover {

transform: translateY(-6px);

box-shadow: var(--shadow-lg);

border-color: var(--primary-light);

}

.case-img {

height: 210px;

overflow: hidden;

position: relative;

}

.case-img img {

width: 100%;

height: 100%;

object-fit: cover;

transition: transform 0.6s ease;

}

.case-card:hover .case-img img {

transform: scale(1.08);

}

.case-badge {

position: absolute;

top: 14px;

right: 14px;

background: var(--primary);

color: #ffffff;

padding: 4px 12px;

border-radius: var(--radius-full);

font-size: 0.75rem;

font-weight: 600;

}

.case-info { padding: 22px; }

.case-info h4 {

font-size: 1.15rem;

font-weight: 700;

color: var(--dark);

margin-bottom: 8px;

}

.case-info p {

font-size: 0.85rem;

color: var(--text-muted);

line-height: 1.6;

margin-bottom: 14px;

}

.case-meta {

display: flex;

justify-content: space-between;

font-size: 0.8rem;

color: var(--text-muted);

border-top: 1px solid var(--border-light);

padding-top: 12px;

}

.clients-strip {

background: var(--light-subtle);

border-radius: var(--radius-lg);

padding: 30px;

border: 1px solid var(--border-color);

}

.clients-title {

text-align: center;

font-size: 0.95rem;

font-weight: 700;

color: var(--dark-light);

margin-bottom: 22px;

letter-spacing: 0.5px;

}

.clients-row {

display: flex;

justify-content: center;

align-items: center;

flex-wrap: wrap;

gap: 20px 30px;

}

.client-pill {

background: #ffffff;

padding: 10px 22px;

border-radius: var(--radius-full);

border: 1px solid var(--border-color);

font-weight: 600;

font-size: 0.9rem;

color: var(--dark-light);

box-shadow: var(--shadow-sm);

display: flex;

align-items: center;

gap: 8px;

transition: all var(--transition-fast);

}

.client-pill:hover {

border-color: var(--primary);

color: var(--primary);

transform: translateY(-2px);

}

.client-pill i { color: var(--primary); }

/* Knowledge Base & FAQ */

.kb-faq-grid {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 40px;

}

.news-card-mini {

background: #ffffff;

border-radius: var(--radius-md);

border: 1px solid var(--border-color);

padding: 20px;

margin-bottom: 18px;

transition: all var(--transition-fast);

display: flex;

gap: 18px;

align-items: center;

}

.news-card-mini:hover {

transform: translateX(6px);

border-color: var(--primary-light);

box-shadow: var(--shadow-sm);

}

.news-date-badge {

width: 58px;

height: 58px;

border-radius: var(--radius-md);

background: var(--primary-soft);

color: var(--primary);

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

flex-shrink: 0;

font-weight: 800;

line-height: 1.1;

}

.news-date-badge .day { font-size: 1.25rem; }

.news-date-badge .month { font-size: 0.72rem; font-weight: 600; }

.news-content h5 {

font-size: 1rem;

font-weight: 700;

color: var(--dark);

margin-bottom: 5px;

line-height: 1.4;

}

.news-content p {

font-size: 0.82rem;

color: var(--text-muted);

line-height: 1.5;

}

.faq-item {

background: #ffffff;

border-radius: var(--radius-md);

border: 1px solid var(--border-color);

margin-bottom: 14px;

overflow: hidden;

transition: border-color var(--transition-fast);

}

.faq-header {

padding: 18px 22px;

display: flex;

justify-content: space-between;

align-items: center;

cursor: pointer;

font-weight: 700;

font-size: 0.98rem;

color: var(--dark);

background: #ffffff;

}

.faq-header i {

color: var(--primary);

transition: transform var(--transition-fast);

}

.faq-body {

padding: 0 22px 18px;

font-size: 0.9rem;

color: var(--text-muted);

line-height: 1.7;

display: none;

border-top: 1px solid var(--border-light);

}

.faq-item.active { border-color: var(--primary); }

.faq-item.active .faq-header i { transform: rotate(180deg); }

.faq-item.active .faq-body { display: block; padding-top: 14px; }

/* Contact Section (Lighter & Vibrant Dark) */

.contact-grid {

display: grid;

grid-template-columns: 1fr 1.2fr;

gap: 40px;

}

.contact-info-panel {

background: linear-gradient(135deg, #1a2639 0%, #263850 100%);

color: #ffffff;

border-radius: var(--radius-lg);

padding: 40px;

display: flex;

flex-direction: column;

justify-content: space-between;

}

.contact-info-header h3 {

font-size: 1.6rem;

font-weight: 700;

margin-bottom: 10px;

}

.contact-info-header p {

font-size: 0.95rem;

color: #cbd5e1;

margin-bottom: 30px;

}

.contact-method-list {

display: flex;

flex-direction: column;

gap: 22px;

margin-bottom: 35px;

}

.contact-method {

display: flex;

align-items: flex-start;

gap: 16px;

}

.contact-icon {

width: 44px;

height: 44px;

border-radius: var(--radius-md);

background: rgba(76, 175, 80, 0.25);

color: #4ade80;

display: flex;

align-items: center;

justify-content: center;

font-size: 1.25rem;

flex-shrink: 0;

}

.contact-method-detail h5 {

font-size: 0.85rem;

color: #94a3b8;

margin-bottom: 2px;

}

.contact-method-detail p {

font-size: 1.05rem;

font-weight: 600;

color: #ffffff;

}

.contact-method-detail p a:hover { color: #4ade80; }

.contact-form-panel {

background: #ffffff;

border-radius: var(--radius-lg);

border: 1px solid var(--border-color);

box-shadow: var(--shadow-lg);

padding: 40px;

}

.contact-form-panel h3 {

font-size: 1.5rem;

font-weight: 700;

color: var(--dark);

margin-bottom: 8px;

}

.contact-form-panel p {

font-size: 0.92rem;

color: var(--text-muted);

margin-bottom: 26px;

}

.form-row {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 18px;

margin-bottom: 18px;

}

.form-full { margin-bottom: 18px; }

.form-control {

width: 100%;

padding: 13px 16px;

border: 1.5px solid var(--border-color);

border-radius: var(--radius-md);

font-size: 0.95rem;

color: var(--dark);

background: #ffffff;

transition: border-color var(--transition-fast);

}

.form-control:focus { border-color: var(--primary); }

textarea.form-control { resize: vertical; min-height: 110px; }

/* Footer (Lighter Slate Navy) */

.site-footer {

background: #1e2d42;

color: #e2e8f0;

padding-top: 70px;

border-top: 1px solid rgba(255, 255, 255, 0.12);

}

.footer-grid {

display: grid;

grid-template-columns: 1.4fr 1fr 1fr 1.2fr;

gap: 40px;

margin-bottom: 50px;

}

.footer-brand h4 {

font-size: 1.35rem;

font-weight: 800;

color: #ffffff;

margin-bottom: 14px;

}

.footer-brand p {

font-size: 0.9rem;

line-height: 1.7;

color: #cbd5e1;

margin-bottom: 20px;

}

.footer-col h5 {

font-size: 1.05rem;

font-weight: 700;

color: #ffffff;

margin-bottom: 20px;

position: relative;

padding-bottom: 10px;

}

.footer-col h5::after {

content: "";

position: absolute;

bottom: 0;

left: 0;

width: 30px;

height: 2px;

background: var(--primary-light);

}

.footer-links {

display: flex;

flex-direction: column;

gap: 10px;

font-size: 0.9rem;

}

.footer-links a:hover {

color: #4ade80;

padding-left: 4px;

}

.footer-bottom {

border-top: 1px solid rgba(255, 255, 255, 0.1);

padding: 24px 0;

text-align: center;

font-size: 0.85rem;

color: #94a3b8;

}

.footer-bottom a { color: #cbd5e1; }

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

/* Floating Quick Action Bar */

.floating-toolbar {

position: fixed;

right: 25px;

bottom: 35px;

z-index: 999;

display: flex;

flex-direction: column;

gap: 12px;

}

.float-btn {

width: 50px;

height: 50px;

border-radius: var(--radius-full);

background: #ffffff;

color: var(--dark);

box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);

display: flex;

align-items: center;

justify-content: center;

font-size: 1.25rem;

cursor: pointer;

transition: all var(--transition-fast);

border: 1px solid var(--border-color);

position: relative;

}

.float-btn:hover {

background: var(--primary);

color: #ffffff;

transform: translateY(-3px);

box-shadow: var(--shadow-glow);

}

.float-btn.phone-btn {

background: var(--primary);

color: #ffffff;

position: relative;

}

.float-btn.phone-btn:hover,

.float-btn.phone-btn.active {

background: var(--primary-dark);

color: #ffffff;

}

/* Rich Phone Popup Card (PC & Tablet) */

.phone-popup {

position: absolute;

right: 65px;

top: 50%;

transform: translateY(-50%);

background: #ffffff;

padding: 16px 18px;

border-radius: var(--radius-md);

box-shadow: 0 16px 40px rgba(15, 23, 42, 0.22), 0 4px 12px rgba(0, 0, 0, 0.08);

border: 1.5px solid var(--primary-soft);

text-align: center;

display: none;

width: 260px;

z-index: 1010;

cursor: default;

pointer-events: auto;

}

.float-btn:hover .phone-popup,

.float-btn.active .phone-popup {

display: block;

animation: floatPopIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);

}

@keyframes floatPopIn {

from {

opacity: 0;

transform: translateY(-50%) translateX(10px);

}

to {

opacity: 1;

transform: translateY(-50%) translateX(0);

}

}

.phone-popup-badge {

display: inline-flex;

align-items: center;

gap: 5px;

background: var(--primary-soft);

color: var(--primary);

font-size: 0.72rem;

font-weight: 700;

padding: 3px 10px;

border-radius: var(--radius-full);

margin-bottom: 8px;

}

.phone-popup-number {

font-size: 1.4rem;

font-weight: 800;

color: var(--dark);

letter-spacing: 0.5px;

line-height: 1.15;

}

.phone-popup-sub {

font-size: 0.78rem;

color: var(--text-muted);

margin: 4px 0 12px;

}

.phone-popup-actions {

display: flex;

gap: 8px;

margin-bottom: 8px;

}

.btn-phone-copy, .btn-phone-call {

flex: 1;

padding: 8px 10px;

border-radius: var(--radius-sm);

font-size: 0.76rem;

font-weight: 700;

display: inline-flex;

align-items: center;

justify-content: center;

gap: 5px;

cursor: pointer;

transition: all var(--transition-fast);

}

.btn-phone-copy {

background: var(--light-bg);

color: var(--dark);

border: 1px solid var(--border-color);

}

.btn-phone-copy:hover {

background: #e2e8f0;

color: var(--primary);

}

.btn-phone-call {

background: var(--primary);

color: #ffffff;

text-decoration: none;

}

.btn-phone-call:hover {

background: var(--primary-dark);

color: #ffffff;

}

.phone-popup-hint {

font-size: 0.7rem;

color: var(--text-light);

line-height: 1.4;

border-top: 1px dashed var(--border-color);

padding-top: 6px;

}

/* QR Code Popup */

.qr-popup {

position: absolute;

right: 65px;

top: 50%;

transform: translateY(-50%);

background: #ffffff;

padding: 16px;

border-radius: var(--radius-md);

box-shadow: 0 16px 40px rgba(15, 23, 42, 0.22);

border: 1px solid var(--border-color);

text-align: center;

display: none;

width: 180px;

z-index: 1010;

}

.float-btn:hover .qr-popup,

.float-btn.active .qr-popup {

display: block;

animation: floatPopIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);

}

.qr-popup img { width: 130px; height: 130px; margin: 0 auto 8px; }

.qr-popup p { font-size: 0.75rem; color: var(--dark); font-weight: 600; }

/* Copy Feedback Toast Notification */

.copy-toast {

position: fixed;

top: 35px;

left: 50%;

transform: translateX(-50%) translateY(-25px);

background: #1e293b;

color: #ffffff;

padding: 12px 26px;

border-radius: var(--radius-full);

box-shadow: 0 14px 35px rgba(0, 0, 0, 0.3);

display: flex;

align-items: center;

gap: 10px;

font-size: 0.92rem;

font-weight: 600;

z-index: 999999;

opacity: 0;

visibility: hidden;

transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

border: 1px solid rgba(255, 255, 255, 0.18);

pointer-events: none;

}

.copy-toast.show {

opacity: 1;

visibility: visible;

transform: translateX(-50%) translateY(0);

}

.copy-toast i {

color: #4ade80;

font-size: 1.15rem;

}

/* ===================================================================

Subpage Details & Content Layouts (Product Detail & News Detail)

=================================================================== */

/* Product Detail Page Layout */

.product-detail-grid {

display: grid;

grid-template-columns: 1fr 1.15fr;

gap: 45px;

margin-bottom: 60px;

}

.detail-gallery {

position: relative;

}

.detail-main-img {

width: 100%;

height: 420px;

border-radius: var(--radius-lg);

overflow: hidden;

border: 1px solid var(--border-color);

box-shadow: var(--shadow-md);

background: #ffffff;

}

.detail-main-img img {

width: 100%;

height: 100%;

object-fit: cover;

}

.detail-thumbs-row {

display: flex;

gap: 12px;

margin-top: 14px;

}

.detail-thumb-item {

width: 80px;

height: 70px;

border-radius: var(--radius-md);

overflow: hidden;

border: 2px solid var(--border-color);

cursor: pointer;

transition: all var(--transition-fast);

}

.detail-thumb-item.active, .detail-thumb-item:hover {

border-color: var(--primary);

transform: translateY(-2px);

}

.detail-thumb-item img {

width: 100%;

height: 100%;

object-fit: cover;

}

.detail-info {

display: flex;

flex-direction: column;

}

.detail-title {

font-size: 1.85rem;

font-weight: 800;

color: var(--dark);

line-height: 1.3;

margin-bottom: 12px;

}

.detail-tags-row {

display: flex;

flex-wrap: wrap;

gap: 8px;

margin-bottom: 18px;

}

.detail-tag {

background: var(--primary-soft);

color: var(--primary);

padding: 4px 12px;

border-radius: var(--radius-full);

font-size: 0.8rem;

font-weight: 600;

}

.detail-tag.blue {

background: var(--accent-cyan-soft);

color: var(--accent-cyan);

}

.detail-desc-box {

background: var(--light-subtle);

border-radius: var(--radius-md);

padding: 18px 20px;

font-size: 0.92rem;

color: var(--dark-light);

line-height: 1.7;

margin-bottom: 24px;

border-left: 4px solid var(--primary);

}

.detail-specs-list {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 12px;

margin-bottom: 30px;

}

.detail-spec-item {

background: #ffffff;

border: 1px solid var(--border-color);

border-radius: var(--radius-sm);

padding: 10px 14px;

font-size: 0.85rem;

}

.detail-spec-item strong {

color: var(--text-muted);

display: block;

font-size: 0.76rem;

margin-bottom: 2px;

}

.detail-spec-item span {

color: var(--dark);

font-weight: 700;

}

.thickness-selector-wrap {

margin-bottom: 25px;

}

.thickness-label {

font-size: 0.85rem;

font-weight: 700;

color: var(--dark);

margin-bottom: 8px;

display: block;

}

.thickness-options {

display: flex;

flex-wrap: wrap;

gap: 8px;

}

.thickness-btn {

padding: 6px 14px;

border-radius: var(--radius-sm);

border: 1px solid var(--border-color);

background: #ffffff;

color: var(--dark-light);

font-size: 0.85rem;

font-weight: 600;

cursor: pointer;

transition: all var(--transition-fast);

}

.thickness-btn:hover, .thickness-btn.active {

border-color: var(--primary);

background: var(--primary-soft);

color: var(--primary);

}

.thickness-btn.active {

background: var(--primary);

color: #ffffff;

border-color: var(--primary);

}

.detail-actions-row {

display: flex;

flex-wrap: wrap;

gap: 12px;

margin-top: 10px;

}

.product-detail-tabs {

margin-top: 50px;

background: #ffffff;

border-radius: var(--radius-lg);

border: 1px solid var(--border-color);

box-shadow: var(--shadow-sm);

overflow: hidden;

}

.detail-tabs-nav {

display: flex;

background: var(--light-subtle);

border-bottom: 1px solid var(--border-color);

overflow-x: auto;

}

.detail-tab-btn {

padding: 16px 24px;

font-size: 0.95rem;

font-weight: 700;

color: var(--dark-light);

background: transparent;

border: none;

cursor: pointer;

white-space: nowrap;

position: relative;

transition: all var(--transition-fast);

}

.detail-tab-btn:hover {

color: var(--primary);

}

.detail-tab-btn.active {

color: var(--primary);

background: #ffffff;

}

.detail-tab-btn.active::after {

content: "";

position: absolute;

top: 0;

left: 0;

right: 0;

height: 3px;

background: var(--primary);

}

.detail-tab-pane {

padding: 35px 30px;

display: none;

}

.detail-tab-pane.active {

display: block;

}

/* Article Detail Content Layout */

.article-detail-grid {

display: grid;

grid-template-columns: 1fr 340px;

gap: 45px;

}

.article-main-content {

background: #ffffff;

border-radius: var(--radius-lg);

border: 1px solid var(--border-color);

padding: 40px;

box-shadow: var(--shadow-sm);

}

.article-header {

border-bottom: 1px solid var(--border-light);

padding-bottom: 24px;

margin-bottom: 28px;

}

.article-title {

font-size: 2rem;

font-weight: 800;

color: var(--dark);

line-height: 1.35;

margin-bottom: 16px;

}

.article-meta {

display: flex;

flex-wrap: wrap;

gap: 20px;

font-size: 0.85rem;

color: var(--text-muted);

}

.article-meta span {

display: inline-flex;

align-items: center;

gap: 6px;

}

.article-meta i { color: var(--primary); }

.article-body {

font-size: 1rem;

color: #334155;

line-height: 1.85;

}

.article-body h2 {

font-size: 1.45rem;

font-weight: 800;

color: var(--dark);

margin: 35px 0 16px;

padding-left: 12px;

border-left: 4px solid var(--primary);

}

.article-body h3 {

font-size: 1.2rem;

font-weight: 700;

color: var(--dark);

margin: 25px 0 12px;

}

.article-body p {

margin-bottom: 18px;

}

.article-body ul, .article-body ol {

margin-bottom: 20px;

padding-left: 24px;

}

.article-body li {

margin-bottom: 8px;

list-style-type: disc;

}

.article-body blockquote {

background: var(--light-bg);

border-left: 4px solid var(--accent-cyan);

padding: 16px 20px;

border-radius: 0 var(--radius-md) var(--radius-md) 0;

margin: 24px 0;

font-style: italic;

color: var(--dark-light);

}

.article-footer-nav {

display: flex;

justify-content: space-between;

border-top: 1px solid var(--border-light);

padding-top: 24px;

margin-top: 40px;

gap: 20px;

}

.article-nav-link {

font-size: 0.9rem;

color: var(--dark-light);

font-weight: 600;

}

.article-nav-link:hover { color: var(--primary); }

/* Sidebar Widgets */

.sidebar-widget {

background: #ffffff;

border-radius: var(--radius-md);

border: 1px solid var(--border-color);

padding: 24px;

margin-bottom: 24px;

box-shadow: var(--shadow-sm);

}

.sidebar-title {

font-size: 1.1rem;

font-weight: 700;

color: var(--dark);

margin-bottom: 18px;

padding-bottom: 10px;

border-bottom: 2px solid var(--primary-soft);

position: relative;

}

.sidebar-title::after {

content: "";

position: absolute;

bottom: -2px;

left: 0;

width: 30px;

height: 2px;

background: var(--primary);

}

.sidebar-link-list {

display: flex;

flex-direction: column;

gap: 12px;

}

.sidebar-link-item {

font-size: 0.88rem;

color: var(--dark-light);

display: flex;

align-items: center;

gap: 8px;

transition: all var(--transition-fast);

}

.sidebar-link-item:hover {

color: var(--primary);

transform: translateX(4px);

}

.sidebar-link-item i {

color: var(--primary-light);

font-size: 0.75rem;

}

/* Technical Specification Table */

.tech-table-container {

overflow-x: auto;

background: #ffffff;

border-radius: var(--radius-md);

border: 1px solid var(--border-color);

box-shadow: var(--shadow-sm);

margin: 30px 0;

}

.tech-table {

width: 100%;

border-collapse: collapse;

text-align: left;

font-size: 0.9rem;

}

.tech-table th {

background: var(--light-subtle);

color: var(--dark);

font-weight: 700;

padding: 14px 18px;

border-bottom: 2px solid var(--border-color);

white-space: nowrap;

}

.tech-table td {

padding: 14px 18px;

border-bottom: 1px solid var(--border-light);

color: var(--dark-light);

}

.tech-table tr:last-child td { border-bottom: none; }

.tech-table tr:hover td { background: rgba(46, 125, 50, 0.03); }

/* Timeline */

.timeline {

position: relative;

max-width: 860px;

margin: 40px auto;

padding: 20px 0;

}

.timeline::before {

content: "";

position: absolute;

top: 0; bottom: 0; left: 50%;

width: 2px;

background: var(--border-color);

transform: translateX(-50%);

}

.timeline-item {

position: relative;

width: 50%;

padding: 20px 40px;

box-sizing: border-box;

}

.timeline-item.left { left: 0; text-align: right; }

.timeline-item.right { left: 50%; }

.timeline-item::after {

content: "";

position: absolute;

top: 30px;

width: 14px;

height: 14px;

background: #ffffff;

border: 3px solid var(--primary);

border-radius: 50%;

z-index: 2;

}

.timeline-item.left::after { right: -8px; }

.timeline-item.right::after { left: -8px; }

.timeline-content {

background: #ffffff;

padding: 20px 24px;

border-radius: var(--radius-md);

border: 1px solid var(--border-color);

box-shadow: var(--shadow-sm);

}

.timeline-year {

font-size: 1.1rem;

font-weight: 800;

color: var(--primary);

margin-bottom: 6px;

}

.timeline-text {

font-size: 0.88rem;

color: var(--text-muted);

line-height: 1.6;

}

/* Full News Card Grid */

.news-full-grid {

display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 30px;

margin-top: 35px;

}

.news-card-full {

background: #ffffff;

border-radius: var(--radius-lg);

border: 1px solid var(--border-color);

overflow: hidden;

box-shadow: var(--shadow-sm);

transition: all var(--transition-normal);

display: flex;

flex-direction: column;

}

.news-card-full:hover {

transform: translateY(-6px);

box-shadow: var(--shadow-lg);

border-color: var(--primary-light);

}

.news-card-body {

padding: 24px;

flex: 1;

display: flex;

flex-direction: column;

}

.news-badge-cat {

display: inline-block;

padding: 3px 10px;

border-radius: var(--radius-full);

font-size: 0.72rem;

font-weight: 700;

background: var(--primary-soft);

color: var(--primary);

margin-bottom: 12px;

}

.news-card-title {

font-size: 1.1rem;

font-weight: 700;

color: var(--dark);

margin-bottom: 10px;

line-height: 1.45;

}

.news-card-summary {

font-size: 0.85rem;

color: var(--text-muted);

line-height: 1.65;

margin-bottom: 18px;

flex: 1;

}

.news-card-footer {

display: flex;

justify-content: space-between;

align-items: center;

font-size: 0.8rem;

color: var(--text-light);

border-top: 1px solid var(--border-light);

padding-top: 12px;

}

/* Responsive Adjustments */

@media (max-width: 1200px) {

.nav-container { gap: 10px; }

.brand-name { font-size: 1.05rem; }

.brand-slogan { display: none; }

.main-nav { gap: 16px; }

.nav-link { font-size: 0.88rem; padding: 22px 2px; }

.btn-sm { padding: 7px 14px; font-size: 0.82rem; }

}

@media (max-width: 1024px) {

.main-nav { display: none !important; }

.nav-cta .btn { display: none !important; } /* Hide quote button on tablet/mobile */

.mobile-toggle {

display: inline-flex !important;

align-items: center;

justify-content: center;

width: 44px;

height: 44px;

background: #ffffff;

border: 1.5px solid var(--border-color);

border-radius: var(--radius-md);

color: var(--dark);

font-size: 1.35rem;

cursor: pointer;

padding: 0;

flex-shrink: 0;

box-shadow: var(--shadow-sm);

transition: all var(--transition-fast);

}

.mobile-toggle:hover, .mobile-toggle:active {

background: var(--primary-soft);

color: var(--primary);

border-color: var(--primary);

}

.hero-grid { grid-template-columns: 1fr; gap: 32px; }

.hero-visual { max-width: 520px; margin: 0 auto; width: 100%; }

.hero-slider-section {
  position: relative;
  overflow: hidden;
  background: #142032;
  color: #ffffff;
  height: 680px;
  min-height: 680px;
}

.hero-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 680px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease, visibility 0.8s ease;
  display: flex;
  align-items: center;
  padding: 70px 0 100px;
  z-index: 1;
}

.hero-slide.active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

.hero-nav-arrow { display: none; }

.hero-indicators-container { padding: 0 20px; gap: 10px; }

.hero-indicator-tab { flex: 1; width: auto; }

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

.craft-grid, .factory-gallery-grid { grid-template-columns: repeat(2, 1fr); }

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

.calculator-card { grid-template-columns: 1fr; }

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

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

.product-detail-grid, .article-detail-grid { grid-template-columns: 1fr; }

}

@media (max-width: 768px) {
  .hero-slider-section {
    height: auto !important;
    min-height: 950px !important;
  }
  .hero-slide {
    position: absolute !important;
    height: 100% !important;
    min-height: 950px !important;
    padding: 30px 0 85px !important;
  }
  .hero-slide.active {
    position: relative !important;
    height: auto !important;
    min-height: 950px !important;
  }
  .hero-image-card {
    aspect-ratio: 1000 / 408 !important;
    width: 100% !important;
  }
  .hero-image-card img {
    aspect-ratio: 1000 / 408 !important;
    width: 100% !important;
    height: auto !important;
  }

/* AOS Mobile Protection: prevent 100px offscreen translation from causing horizontal wobble */

[data-aos] {

opacity: 1 !important;

transform: none !important;

transition: none !important;

}

.tech-table-container {

width: 100% !important;

max-width: 100% !important;

overflow-x: auto !important;

-webkit-overflow-scrolling: touch !important;

display: block !important;

}

.hero-bg-layer {
  position: absolute;
  top: -10px;
  left: -10px;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  background-size: cover;
  background-position: center;
  filter: blur(8px) brightness(0.85);
  transform: scale(1.04);
  transition: transform 7s ease-out;
  z-index: -2;
}

/* Top Bar on Mobile: ONLY show language switcher */

.top-bar {

padding: 5px 0;

}

.top-bar-left {

display: none !important;

}

.top-bar-right .top-bar-item,

.top-bar-right .top-bar-divider {

display: none !important;

}

.top-bar-inner {

display: flex;

justify-content: flex-end;

align-items: center;

}

.top-bar-right {

display: flex;

justify-content: flex-end;

align-items: center;

width: 100%;

gap: 0;

}

.lang-switch {

display: inline-flex !important;

margin-left: auto;

}

/* Header & Brand Logo on Mobile */

.site-header {

padding: 6px 0;

}

.nav-container {

display: flex;

justify-content: space-between;

align-items: center;

}

.brand-logo-wrap {

display: flex;

align-items: center;

gap: 10px;

max-width: calc(100% - 60px);

}

.brand-logo {

height: 38px;

width: auto;

}

.brand-divider {

display: block;

height: 20px;

width: 1px;

background: var(--border-color);

margin: 0;

}

.brand-text {

display: flex;

flex-direction: column;

}

.brand-name {

font-size: 1.05rem;

font-weight: 800;

color: var(--dark);

white-space: nowrap;

}

.brand-slogan {

display: none !important;

}

/* Nav CTA: No quote button on mobile, only hamburger */

.nav-cta {

display: flex;

align-items: center;

margin-left: auto;

}

.nav-cta .btn {

display: none !important;

}

.mobile-toggle {

display: inline-flex !important;

}

/* Typography & Sections */

.hero-title { font-size: 1.95rem; }

.page-title { font-size: 1.75rem; }

.section { padding: 45px 0; }

.section-title { font-size: 1.65rem; }

.hero-slider-section {
  position: relative;
  overflow: hidden;
  background: #142032;
  color: #ffffff;
  height: 680px;
  min-height: 680px;
}

.hero-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 680px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease, visibility 0.8s ease;
  display: flex;
  align-items: center;
  padding: 70px 0 100px;
  z-index: 1;
}

.hero-slide.active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

.hero-visual { max-width: 100%; }

.hero-image-card { aspect-ratio: 1000 / 408; width: 100%; }

.hero-image-card img { aspect-ratio: 1000 / 408; width: 100%; height: auto; }

.hero-indicators-wrap { bottom: 12px; }

.hero-indicator-tab .tab-title span:last-child { display: none; }

.hero-indicator-tab { padding: 6px 6px; text-align: center; }

.product-grid, .app-grid, .cases-grid, .kb-faq-grid, .contact-grid, .news-full-grid {

grid-template-columns: 1fr;

}

.stats-grid { grid-template-columns: 1fr; }

.calc-type-selector, .calc-inputs-grid, .detail-specs-list { grid-template-columns: 1fr; }

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

.spectrum-container { grid-template-columns: 1fr; }

.footer-grid { grid-template-columns: 1fr; }

.timeline::before { left: 20px; }

.timeline-item { width: 100%; padding-left: 50px; padding-right: 15px; text-align: left !important; }

.timeline-item.right { left: 0; }

.timeline-item.left::after, .timeline-item.right::after { left: 13px; right: auto; }

/* Responsive Floating Toolbar & Popups */

.floating-toolbar { right: 14px; bottom: 20px; gap: 10px; }

.float-btn { width: 44px; height: 44px; font-size: 1.15rem; }

.phone-popup { right: 54px; width: 230px; padding: 12px; }

.phone-popup-number { font-size: 1.2rem; }

.qr-popup { right: 54px; width: 170px; padding: 12px; }

.hero-floating-box { margin-top: 12px; padding: 12px 14px; gap: 10px; left: auto; bottom: auto; max-width: 100%; }

.hero-stat-badge { top: -10px; right: 12px; padding: 6px 14px; }

.hero-stat-badge .num { font-size: 1.15rem; }

.hero-stat-badge .lbl { font-size: 0.72rem; }

.container { padding-left: 16px; padding-right: 16px; }

}

@media (max-width: 400px) {

.brand-name { font-size: 0.95rem; }

.brand-logo { height: 34px; }

.mobile-toggle { width: 40px; height: 40px; font-size: 1.25rem; }

}

/* Mobile Offcanvas Drawer (Hardware Accelerated & Zero Scroll Leak) */

.mobile-drawer {

display: none !important;

position: fixed !important;

top: 0 !important;

right: 0 !important;

width: min(310px, 84vw) !important;

height: 100vh !important;

height: 100dvh !important;

background: #ffffff !important;

z-index: 99999 !important;

box-shadow: -6px 0 30px rgba(0, 0, 0, 0.22) !important;

padding: 20px 18px !important;

flex-direction: column !important;

overflow-y: auto !important;

-webkit-overflow-scrolling: touch !important;

}

.mobile-drawer.open {

display: flex !important;

animation: drawerSlideIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;

}

@keyframes drawerSlideIn {

from {

transform: translateX(100%);

}

to {

transform: translateX(0);

}

}

.drawer-header {

display: flex;

justify-content: space-between;

align-items: center;

margin-bottom: 20px;

padding-bottom: 12px;

border-bottom: 1px solid var(--border-color);

}

.drawer-brand {

display: flex;

align-items: center;

}

.drawer-close {

background: transparent;

font-size: 1.4rem;

color: var(--dark);

cursor: pointer;

padding: 4px 8px;

border-radius: var(--radius-sm);

transition: all var(--transition-fast);

}

.drawer-close:hover {

background: var(--light-bg);

color: var(--primary);

}

.drawer-links {

display: flex;

flex-direction: column;

gap: 14px;

}

.drawer-link {

font-size: 1rem;

font-weight: 600;

color: var(--dark);

display: flex;

align-items: center;

gap: 12px;

padding: 8px 10px;

border-radius: var(--radius-sm);

transition: all var(--transition-fast);

}

.drawer-link:hover, .drawer-link.active {

background: var(--primary-soft);

color: var(--primary);

}

.drawer-link i {

font-size: 1.05rem;

width: 22px;

text-align: center;

color: var(--primary);

}

.drawer-dropdown {

display: flex;

flex-direction: column;

}

.drawer-dropdown-toggle {

cursor: pointer;

justify-content: space-between;

}

.drawer-dropdown-toggle span {

display: flex;

align-items: center;

gap: 12px;

}

.drawer-caret {

font-size: 0.75rem !important;

width: auto !important;

transition: transform var(--transition-fast);

color: var(--text-muted) !important;

}

.drawer-dropdown.open .drawer-caret {

transform: rotate(180deg);

color: var(--primary) !important;

}

.drawer-sublinks {

display: none;

flex-direction: column;

gap: 8px;

padding-left: 34px;

margin-top: 6px;

margin-bottom: 6px;

border-left: 2px solid var(--primary-soft);

}

.drawer-dropdown.open .drawer-sublinks {

display: flex;

}

.drawer-sublink {

font-size: 0.88rem;

color: var(--dark-light);

font-weight: 500;

display: flex;

align-items: center;

gap: 8px;

padding: 6px 8px;

border-radius: var(--radius-sm);

transition: all var(--transition-fast);

}

.drawer-sublink i {

font-size: 0.82rem;

width: 16px;

color: var(--primary-light);

}

.drawer-sublink.highlight {

color: var(--primary);

font-weight: 700;

}

.drawer-sublink:hover {

background: var(--light-subtle);

color: var(--primary);

}

.drawer-footer {

margin-top: auto;

padding-top: 20px;

border-top: 1px solid #e2e8f0;

display: flex;

flex-direction: column;

gap: 14px;

}

.drawer-lang {

display: flex;

align-items: center;

justify-content: center;

gap: 12px;

font-size: 0.88rem;

font-weight: 600;

}

.drawer-lang-btn {

color: var(--text-muted);

padding: 4px 10px;

border-radius: var(--radius-full);

}

.drawer-lang-btn.active {

background: var(--primary-soft);

color: var(--primary);

font-weight: 700;

}

.drawer-overlay {

position: fixed;

top: 0; left: 0; width: 100vw; height: 100vh;

background: rgba(0, 0, 0, 0.55);

backdrop-filter: blur(2px);

-webkit-backdrop-filter: blur(2px);

z-index: 99998;

display: none;

}

.drawer-overlay.active { display: block; }

/* Responsive Overflow & Layout Protection for Mobile Screens */

@media (max-width: 768px) {

/* AOS Mobile Protection: prevent 100px offscreen translation from causing horizontal wobble */

[data-aos] {

opacity: 1 !important;

transform: none !important;

transition: none !important;

}

.tech-table-container {

width: 100% !important;

max-width: 100% !important;

overflow-x: auto !important;

-webkit-overflow-scrolling: touch !important;

display: block !important;

}

.hero-bg-layer {
  position: absolute;
  top: -10px;
  left: -10px;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  background-size: cover;
  background-position: center;
  filter: blur(8px) brightness(0.85);
  transform: scale(1.04);
  transition: transform 7s ease-out;
  z-index: -2;
}

html, body {

overflow-x: clip !important;

max-width: 100vw !important;

width: 100% !important;

}

.container {

padding-left: 16px !important;

padding-right: 16px !important;

max-width: 100% !important;

box-sizing: border-box !important;

}

/* Grid element shrink protection */

.contact-grid, .hero-grid, .calculator-card, .footer-grid,

.article-detail-grid, .product-detail-grid, .kb-faq-grid, .craft-grid, .cases-grid {

min-width: 0 !important;

max-width: 100% !important;

width: 100% !important;

grid-template-columns: 1fr !important;

}

.contact-grid > *, .hero-grid > *, .calculator-card > *, .footer-grid > *,

.article-detail-grid > *, .product-detail-grid > *, .kb-faq-grid > *,

.craft-grid > *, .cases-grid > * {

min-width: 0 !important;

max-width: 100% !important;

box-sizing: border-box !important;

}

/* Forms and Panels */

.contact-form-panel, .contact-info-panel,

.calc-form-side, .calc-results-side,

.article-main-content, .sidebar-widget {

padding: 22px 16px !important;

max-width: 100% !important;

box-sizing: border-box !important;

}

.form-row {

grid-template-columns: 1fr !important;

gap: 14px !important;

}

.form-control, input, select, textarea {

font-size: 16px !important; /* iOS Safari auto-zoom prevention */

max-width: 100% !important;

box-sizing: border-box !important;

}

.btn {

white-space: normal !important;

word-break: break-word !important;

text-align: center !important;

max-width: 100% !important;

}

.btn-lg {

padding: 12px 16px !important;

font-size: 0.95rem !important;

line-height: 1.35 !important;

}

/* Hero & Visuals */

.hero-floating-box {

display: none !important;

}

.hero-stat-badge {

right: 8px !important;

top: 8px !important;

padding: 6px 10px !important;

font-size: 0.75rem !important;

}

/* Calculator Mobile */

.calc-type-selector {

grid-template-columns: 1fr 1fr !important;

gap: 8px !important;

}

.calc-inputs-grid {

grid-template-columns: 1fr !important;

gap: 12px !important;

}

.calc-type-btn {

padding: 10px 8px !important;

}

.calc-title {

font-size: 1.15rem !important;

}

/* Floating Quick Toolbar on Mobile */

.floating-toolbar {

right: 12px !important;

bottom: 20px !important;

gap: 10px !important;

}

.float-btn {

width: 44px !important;

height: 44px !important;

font-size: 1.15rem !important;

}

.phone-popup {

right: 52px !important;

width: 240px !important;

padding: 14px !important;

}

.phone-popup-number {

font-size: 1.25rem !important;

}

.qr-popup {

right: 52px !important;

width: 175px !important;

padding: 12px !important;

}

/* Tables horizontal scroll safely */

.tech-table-container {

max-width: 100% !important;

overflow-x: auto !important;

-webkit-overflow-scrolling: touch !important;

}

}

.float-btn:hover i,

.float-btn:hover .fa-brands,

.float-btn:hover .fa-solid,

.float-btn:hover .fa-regular,

.float-btn:hover svg,

.float-btn.active i,

.float-btn.active .fa-brands,

.float-btn.active .fa-solid {

color: #ffffff !important;

}

/* Responsive Subpage Detail Grids */

.detail-highlights-grid {

display: grid;

grid-template-columns: repeat(2, 1fr);

gap: 12px;

margin-top: 24px;

}

.detail-features-grid {

display: grid;

grid-template-columns: repeat(2, 1fr);

gap: 25px;

}

.detail-steps-grid {

display: grid;

grid-template-columns: repeat(4, 1fr);

gap: 18px;

margin-top: 20px;

}

@media (max-width: 1024px) {

.product-grid { grid-template-columns: repeat(2, 1fr) !important; }

.detail-steps-grid { grid-template-columns: repeat(2, 1fr) !important; }

}

@media (max-width: 768px) {

.product-grid {

grid-template-columns: 1fr !important;

gap: 18px !important;

}

.detail-features-grid {

grid-template-columns: 1fr !important;

gap: 16px !important;

}

}

@media (max-width: 500px) {

.detail-highlights-grid {

grid-template-columns: 1fr !important;

}

.detail-steps-grid {

grid-template-columns: 1fr !important;

gap: 14px !important;

}

}

/* ==========================================================================

Certificates Page & Interactive Lightbox Album

========================================================================== */

.cert-filters {

display: flex;

justify-content: center;

align-items: center;

flex-wrap: wrap;

gap: 12px;

margin-bottom: 40px;

}

.cert-filter-btn {

padding: 10px 22px;

border-radius: var(--radius-full);

background: #ffffff;

border: 1px solid var(--border-color);

color: var(--text-main);

font-weight: 600;

font-size: 0.95rem;

cursor: pointer;

transition: all var(--transition-fast);

display: inline-flex;

align-items: center;

gap: 8px;

box-shadow: var(--shadow-sm);

}

.cert-filter-btn:hover {

border-color: var(--primary);

color: var(--primary);

transform: translateY(-2px);

}

.cert-filter-btn.active {

background: var(--primary);

border-color: var(--primary);

color: #ffffff;

box-shadow: 0 4px 15px rgba(46, 125, 50, 0.3);

}

.cert-filter-btn .count-badge {

font-size: 0.75rem;

padding: 2px 8px;

border-radius: 10px;

background: rgba(0, 0, 0, 0.08);

font-weight: 700;

}

.cert-filter-btn.active .count-badge {

background: rgba(255, 255, 255, 0.25);

color: #ffffff;

}

.cert-grid {

display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 30px;

}

.cert-card {

background: #ffffff;

border-radius: var(--radius-lg);

border: 1px solid var(--border-color);

overflow: hidden;

box-shadow: var(--shadow-sm);

transition: all var(--transition-normal);

display: flex;

flex-direction: column;

position: relative;

}

.cert-card:hover {

transform: translateY(-8px);

box-shadow: 0 16px 36px rgba(0, 0, 0, 0.1);

border-color: rgba(46, 125, 50, 0.35);

}

.cert-thumb {

position: relative;

height: 250px;

background: #f8fafc;

overflow: hidden;

cursor: pointer;

display: flex;

align-items: center;

justify-content: center;

padding: 12px;

}

.cert-thumb img {

max-width: 100%;

max-height: 100%;

object-fit: contain;

border-radius: var(--radius-sm);

box-shadow: 0 2px 8px rgba(0,0,0,0.06);

transition: transform 0.4s ease;

}

.cert-card:hover .cert-thumb img {

transform: scale(1.04);

}

.cert-overlay {

position: absolute;

inset: 0;

background: rgba(15, 23, 42, 0.65);

backdrop-filter: blur(2px);

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

opacity: 0;

transition: opacity var(--transition-normal);

color: #ffffff;

gap: 10px;

z-index: 2;

}

.cert-thumb:hover .cert-overlay {

opacity: 1;

}

.cert-overlay-icon {

width: 52px;

height: 52px;

border-radius: 50%;

background: var(--primary);

color: #ffffff;

display: flex;

align-items: center;

justify-content: center;

font-size: 1.3rem;

box-shadow: 0 4px 18px rgba(46, 125, 50, 0.5);

transform: scale(0.8);

transition: transform 0.3s ease;

}

.cert-thumb:hover .cert-overlay-icon {

transform: scale(1);

}

.cert-overlay-text {

font-size: 0.9rem;

font-weight: 600;

letter-spacing: 0.5px;

}

.cert-tag-pill {

position: absolute;

top: 14px;

left: 14px;

background: rgba(255, 255, 255, 0.95);

color: var(--primary);

font-size: 0.75rem;

font-weight: 700;

padding: 4px 10px;

border-radius: var(--radius-full);

box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

z-index: 3;

display: flex;

align-items: center;

gap: 5px;

border: 1px solid rgba(46, 125, 50, 0.2);

}

.cert-verified-pill {

position: absolute;

top: 14px;

right: 14px;

background: #ecfdf5;

color: #059669;

font-size: 0.72rem;

font-weight: 700;

padding: 4px 8px;

border-radius: var(--radius-full);

z-index: 3;

border: 1px solid #a7f3d0;

display: flex;

align-items: center;

gap: 4px;

}

.cert-body {

padding: 22px 20px;

display: flex;

flex-direction: column;

flex-grow: 1;

}

.cert-title {

font-size: 1.15rem;

font-weight: 700;

color: var(--dark);

margin-bottom: 12px;

line-height: 1.45;

display: -webkit-box;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

overflow: hidden;

min-height: 2.9em;

}

.cert-meta-wrap {

display: flex;

flex-direction: column;

gap: 8px;

margin-bottom: 18px;

font-size: 0.85rem;

color: var(--text-muted);

flex-grow: 1;

border-top: 1px dashed var(--border-color);

padding-top: 12px;

}

.cert-meta-row {

display: flex;

align-items: flex-start;

gap: 8px;

}

.cert-meta-row i {

color: var(--primary);

margin-top: 3px;

font-size: 0.85rem;

flex-shrink: 0;

}

.cert-meta-row strong {

color: var(--dark);

font-weight: 600;

}

.cert-footer-btn {

display: flex;

align-items: center;

justify-content: center;

gap: 8px;

padding: 10px 16px;

background: var(--light-bg);

color: var(--primary);

border: 1px solid var(--border-color);

border-radius: var(--radius-md);

font-weight: 700;

font-size: 0.9rem;

cursor: pointer;

transition: all var(--transition-fast);

text-decoration: none;

width: 100%;

}

.cert-footer-btn:hover {

background: var(--primary);

color: #ffffff;

border-color: var(--primary);

box-shadow: 0 4px 12px rgba(46, 125, 50, 0.25);

}

/* ==========================================================================

Full Screen Lightbox Photo Album Modal

========================================================================== */

.cert-lightbox {

position: fixed;

inset: 0;

z-index: 10000;

display: none;

flex-direction: column;

background: rgba(10, 17, 24, 0.96);

backdrop-filter: blur(12px);

-webkit-backdrop-filter: blur(12px);

opacity: 0;

transition: opacity 0.3s ease;

}

.cert-lightbox.active {

display: flex;

opacity: 1;

}

.lightbox-topbar {

display: flex;

align-items: center;

justify-content: space-between;

padding: 14px 24px;

background: rgba(15, 23, 42, 0.85);

border-bottom: 1px solid rgba(255, 255, 255, 0.1);

color: #ffffff;

z-index: 10;

}

.lightbox-title-area {

display: flex;

align-items: center;

gap: 14px;

min-width: 0;

}

.lightbox-counter {

font-size: 0.88rem;

font-weight: 700;

background: rgba(255, 255, 255, 0.15);

padding: 4px 12px;

border-radius: 20px;

white-space: nowrap;

letter-spacing: 1px;

}

.lightbox-title {

font-size: 1.1rem;

font-weight: 700;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

max-width: 600px;

}

.lightbox-tools {

display: flex;

align-items: center;

gap: 10px;

}

.lightbox-tool-btn {

background: rgba(255, 255, 255, 0.1);

border: 1px solid rgba(255, 255, 255, 0.15);

color: #ffffff;

width: 40px;

height: 40px;

border-radius: 8px;

display: flex;

align-items: center;

justify-content: center;

cursor: pointer;

transition: all 0.2s ease;

font-size: 1.05rem;

}

.lightbox-tool-btn:hover {

background: var(--primary);

border-color: var(--primary);

color: #ffffff;

transform: scale(1.05);

}

.lightbox-close-btn {

background: rgba(239, 68, 68, 0.8);

border-color: rgba(239, 68, 68, 0.9);

}

.lightbox-close-btn:hover {

background: #dc2626 !important;

border-color: #dc2626 !important;

}

.lightbox-stage {

flex-grow: 1;

position: relative;

display: flex;

align-items: center;

justify-content: center;

padding: 20px;

overflow: hidden;

user-select: none;

}

.lightbox-img-wrap {

position: relative;

max-width: 90vw;

max-height: calc(85vh - 180px);

display: flex;

align-items: center;

justify-content: center;

transition: transform 0.3s ease;

}

.lightbox-main-img {

max-width: 100%;

max-height: calc(85vh - 180px);

object-fit: contain;

border-radius: 6px;

box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);

transition: all 0.25s ease;

}

.lightbox-main-img.zoomed {

transform: scale(1.4);

cursor: zoom-out;

}

.lightbox-nav-arrow {

position: absolute;

top: 50%;

transform: translateY(-50%);

width: 52px;

height: 52px;

border-radius: 50%;

background: rgba(255, 255, 255, 0.12);

border: 1px solid rgba(255, 255, 255, 0.2);

color: #ffffff;

font-size: 1.3rem;

display: flex;

align-items: center;

justify-content: center;

cursor: pointer;

transition: all 0.25s ease;

z-index: 10;

}

.lightbox-nav-arrow:hover {

background: var(--primary);

border-color: var(--primary);

transform: translateY(-50%) scale(1.1);

box-shadow: 0 4px 20px rgba(46, 125, 50, 0.5);

}

.lightbox-nav-arrow.prev { left: 24px; }

.lightbox-nav-arrow.next { right: 24px; }

.lightbox-bottom-panel {

background: rgba(15, 23, 42, 0.92);

border-top: 1px solid rgba(255, 255, 255, 0.1);

padding: 14px 24px;

z-index: 10;

display: flex;

flex-direction: column;

gap: 12px;

}

.lightbox-caption-meta {

display: flex;

align-items: center;

justify-content: space-between;

flex-wrap: wrap;

gap: 12px;

color: #cbd5e1;

font-size: 0.88rem;

}

.lightbox-caption-meta span {

display: inline-flex;

align-items: center;

gap: 6px;

}

.lightbox-caption-meta strong {

color: #ffffff;

}

.lightbox-thumbs-strip {

display: flex;

align-items: center;

gap: 10px;

overflow-x: auto;

padding-bottom: 4px;

scroll-behavior: smooth;

-webkit-overflow-scrolling: touch;

}

.lightbox-thumbs-strip::-webkit-scrollbar {

height: 6px;

}

.lightbox-thumbs-strip::-webkit-scrollbar-thumb {

background: rgba(255, 255, 255, 0.25);

border-radius: 4px;

}

.lightbox-thumb-item {

width: 70px;

height: 50px;

flex-shrink: 0;

border-radius: 4px;

overflow: hidden;

border: 2px solid transparent;

cursor: pointer;

opacity: 0.5;

transition: all 0.2s ease;

background: #1e293b;

}

.lightbox-thumb-item img {

width: 100%;

height: 100%;

object-fit: cover;

}

.lightbox-thumb-item:hover {

opacity: 0.85;

transform: translateY(-2px);

}

.lightbox-thumb-item.active {

opacity: 1;

border-color: var(--primary-light);

box-shadow: 0 0 12px rgba(74, 222, 128, 0.5);

transform: scale(1.05);

}

@media (max-width: 1024px) {

.cert-grid {

grid-template-columns: repeat(2, 1fr) !important;

gap: 22px !important;

}

}

@media (max-width: 768px) {

.cert-grid {

grid-template-columns: 1fr !important;

gap: 18px !important;

}

.cert-thumb {

height: 210px;

}

.cert-body {

padding: 16px;

}

.lightbox-topbar {

padding: 10px 14px;

}

.lightbox-title {

max-width: 180px;

font-size: 0.95rem;

}

.lightbox-nav-arrow {

width: 42px;

height: 42px;

font-size: 1.1rem;

}

.lightbox-nav-arrow.prev { left: 8px; }

.lightbox-nav-arrow.next { right: 8px; }

.lightbox-stage {

padding: 10px;

}

.lightbox-main-img {

max-height: 50vh;

}

.lightbox-bottom-panel {

padding: 10px 14px;

}

.lightbox-caption-meta {

font-size: 0.78rem;

flex-direction: column;

align-items: flex-start;

gap: 4px;

}

.lightbox-thumb-item {

width: 54px;

height: 38px;

}

}

/* ==========================================================================

After-Sales Service Page Styles (售后服务)

========================================================================== */

.service-tier-grid {

display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 28px;

margin-top: 20px;

}

.service-tier-card {

background: #ffffff;

border: 1px solid var(--border-color);

border-radius: var(--radius-lg);

padding: 32px 24px;

box-shadow: var(--shadow-sm);

transition: all var(--transition-normal);

display: flex;

flex-direction: column;

position: relative;

overflow: hidden;

}

.service-tier-card::before {

content: '';

position: absolute;

top: 0;

left: 0;

right: 0;

height: 5px;

background: var(--primary);

}

.service-tier-card.tier-2::before {

background: var(--accent-cyan);

}

.service-tier-card.tier-3::before {

background: #f59e0b;

}

.service-tier-card:hover {

transform: translateY(-8px);

box-shadow: var(--shadow-lg);

}

.tier-badge {

display: inline-flex;

align-items: center;

gap: 6px;

font-size: 0.8rem;

font-weight: 800;

padding: 4px 12px;

border-radius: var(--radius-full);

background: var(--primary-soft);

color: var(--primary);

margin-bottom: 16px;

width: fit-content;

}

.tier-badge.cyan {

background: #ecfeff;

color: #0891b2;

}

.tier-badge.amber {

background: #fffbeb;

color: #d97706;

}

.tier-header {

display: flex;

align-items: center;

gap: 16px;

margin-bottom: 16px;

}

.tier-icon-box {

width: 56px;

height: 56px;

border-radius: 14px;

background: var(--light-bg);

display: flex;

align-items: center;

justify-content: center;

font-size: 1.6rem;

color: var(--primary);

flex-shrink: 0;

border: 1px solid var(--border-color);

}

.tier-title {

font-size: 1.25rem;

font-weight: 800;

color: var(--dark);

line-height: 1.35;

}

.tier-desc {

font-size: 0.92rem;

color: var(--text-muted);

line-height: 1.7;

margin-bottom: 20px;

flex-grow: 1;

}

.tier-feature-list {

list-style: none;

padding: 0;

margin: 0;

display: flex;

flex-direction: column;

gap: 10px;

border-top: 1px dashed var(--border-color);

padding-top: 18px;

}

.tier-feature-item {

display: flex;

align-items: flex-start;

gap: 10px;

font-size: 0.88rem;

color: var(--dark-light);

}

.tier-feature-item i {

color: var(--primary);

margin-top: 4px;

font-size: 0.85rem;

}

/* 7 Commitments Grid */

.commitments-grid {

display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 24px;

}

.commit-card {

background: #ffffff;

border: 1px solid var(--border-color);

border-radius: var(--radius-md);

padding: 26px 22px;

box-shadow: var(--shadow-sm);

transition: all var(--transition-normal);

display: flex;

flex-direction: column;

position: relative;

}

.commit-card:hover {

transform: translateY(-6px);

border-color: rgba(46, 125, 50, 0.4);

box-shadow: var(--shadow-md);

}

.commit-card-head {

display: flex;

justify-content: space-between;

align-items: center;

margin-bottom: 14px;

}

.commit-num {

font-size: 1.5rem;

font-weight: 900;

color: var(--primary);

opacity: 0.85;

font-family: var(--font-heading);

}

.commit-icon {

width: 44px;

height: 44px;

border-radius: 12px;

background: var(--primary-soft);

color: var(--primary);

display: flex;

align-items: center;

justify-content: center;

font-size: 1.2rem;

}

.commit-title {

font-size: 1.12rem;

font-weight: 800;

color: var(--dark);

margin-bottom: 10px;

}

.commit-text {

font-size: 0.9rem;

color: var(--text-muted);

line-height: 1.7;

}

/* Service Workflow Step Container */

.service-flow-grid {

display: grid;

grid-template-columns: repeat(5, 1fr);

gap: 16px;

margin-top: 30px;

position: relative;

}

.service-flow-step {

background: #ffffff;

border: 1px solid var(--border-color);

border-radius: var(--radius-md);

padding: 22px 16px;

text-align: center;

position: relative;

box-shadow: var(--shadow-sm);

transition: all var(--transition-fast);

}

.service-flow-step:hover {

border-color: var(--primary);

transform: translateY(-4px);

box-shadow: var(--shadow-md);

}

.flow-step-num {

width: 36px;

height: 36px;

border-radius: 50%;

background: var(--primary);

color: #ffffff;

font-weight: 800;

font-size: 1rem;

display: flex;

align-items: center;

justify-content: center;

margin: 0 auto 12px;

box-shadow: 0 4px 10px rgba(46, 125, 50, 0.3);

}

.flow-step-title {

font-size: 1rem;

font-weight: 700;

color: var(--dark);

margin-bottom: 6px;

}

.flow-step-desc {

font-size: 0.82rem;

color: var(--text-muted);

line-height: 1.55;

}

/* Service Dispatch Action Box */

.service-contact-banner {

background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);

border-radius: var(--radius-lg);

padding: 45px 40px;

color: #ffffff;

margin-top: 50px;

border: 1px solid rgba(255, 255, 255, 0.1);

box-shadow: var(--shadow-lg);

}

.service-contact-inner {

display: grid;

grid-template-columns: 1.2fr 0.8fr;

gap: 36px;

align-items: center;

}

@media (max-width: 1024px) {

.service-tier-grid {

grid-template-columns: 1fr;

gap: 20px;

}

.commitments-grid {

grid-template-columns: repeat(2, 1fr);

}

.service-flow-grid {

grid-template-columns: repeat(2, 1fr);

}

.service-contact-inner {

grid-template-columns: 1fr;

gap: 24px;

}

}

@media (max-width: 768px) {

.commitments-grid {

grid-template-columns: 1fr !important;

gap: 16px !important;

}

.service-flow-grid {

grid-template-columns: 1fr !important;

gap: 14px !important;

}

.service-contact-banner {

padding: 28px 20px !important;

}

}

.commit-card.wide {

grid-column: span 3;

}

@media (max-width: 1024px) {

.commit-card.wide {

grid-column: span 2;

}

}

@media (max-width: 768px) {

.commit-card.wide {

grid-column: span 1 !important;

}

.service-contact-inner {

width: 100% !important;

max-width: 100% !important;

overflow: hidden;

}

.service-contact-banner {

width: 100% !important;

max-width: 100% !important;

box-sizing: border-box !important;

}

}