/* ============================================
   KTTH 坤天泰合智能 - Print & Label Solutions
   Optimized Styles v2
   ============================================ */

/* ----- CSS Variables ----- */
:root {
  --kth-primary: #0066ff;
  --kth-primary-dark: #0052cc;
  --kth-primary-light: rgba(0, 102, 255, 0.08);
  --kth-dark: #1a1a1a;
  --kth-accent: #00c6ff;
  --kth-success: #10b981;
  --kth-text: #1a1a1a;
  --kth-text-light: #666;
  --kth-text-muted: #999;
  --kth-bg-light: #f8f9fa;
  --kth-bg-dark: #0a0a0a;
  --kth-border: #e8ecf0;
  --kth-radius: 12px;
  --kth-radius-sm: 6px;
  --kth-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
  --kth-shadow-sm: 0 4px 20px rgba(0, 0, 0, 0.08);
  --kth-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --kth-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ----- Base ----- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--kth-font);
  color: var(--kth-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { transition: color var(--kth-transition); }

/* ============================================
   TOP BAR (Language Switcher)
   ============================================ */
.kth-topbar {
  background: #f0f2f8;
  color: rgba(0,0,0,0.55);
  font-size: 12px;
  padding: 6px 0;
  position: relative;
  z-index: 1001;
}
.kth-topbar a { color: rgba(0,0,0,0.55); }
.kth-topbar a:hover { color: #000; }
.kth-topbar-info { display: flex; align-items: center; gap: 6px; }
.kth-topbar-info svg { flex-shrink: 0; }
.kth-topbar-lang { position: relative; }
.kth-lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.8);
  border: 1px solid rgba(0,0,0,0.1);
  color: rgba(0,0,0,0.65);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all var(--kth-transition);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.kth-lang-btn:hover {
  background: #fff;
  color: #000;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.kth-lang-btn svg { transition: transform 0.2s ease; }
.kth-lang-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
/* Dropdown style */
.kth-topbar-lang .uk-dropdown {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.1);
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  border-radius: 8px;
  padding: 6px;
  min-width: 180px;
}
.kth-topbar-lang .uk-dropdown-nav {
  font-size: 13px;
}
.kth-topbar-lang .uk-dropdown-nav > li > a {
  color: rgba(0,0,0,0.6);
  padding: 8px 14px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}
.kth-topbar-lang .uk-dropdown-nav > li > a:hover {
  background: rgba(0,0,0,0.05);
  color: #000;
}
.kth-topbar-lang .uk-dropdown-nav > li.uk-active > a {
  background: var(--kth-primary);
  color: #fff;
  font-weight: 600;
}

/* Push header down when topbar is present */

/* ============================================
   ANIMATIONS / REVEAL
   ============================================ */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}
.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}
.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-scale.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* ============================================
   UTILITY
   ============================================ */
.kth-text-primary { color: var(--kth-primary); }
.kth-text-white { color: #fff; }
.kth-text-muted { color: var(--kth-text-muted); }
.kth-bg-light { background: var(--kth-bg-light); }
.kth-bg-white { background: #fff; }
.kth-section { padding: 80px 0; }
@media (max-width: 960px) { .kth-section { padding: 50px 0; } }

/* ============================================
   HEADER
   ============================================ */
.kth-header {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  transition: background var(--kth-transition);
  top: 0 !important;
  z-index: 1000 !important;
}
.kth-header.is-scrolled {
  background: rgba(255, 255, 255, 0.98);
}
.kth-header .uk-navbar-nav > li > a {
  color: rgba(0, 0, 0, 0.75);
  font-size: 14px;
  min-height: 64px;
  text-transform: none;
  letter-spacing: 0.5px;
  position: relative;
  transition: color var(--kth-transition);
}
.kth-header .uk-navbar-nav > li > a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 12px;
  right: 12px;
  height: 2px;
  background: var(--kth-primary);
  transform: scaleX(0);
  transition: transform var(--kth-transition);
}
.kth-header .uk-navbar-nav > li > a:hover { color: #000; }
.kth-header .uk-navbar-nav > li > a:hover::after,
.kth-header .uk-navbar-nav > li.uk-active > a::after { transform: scaleX(1); }
.kth-header .uk-navbar-nav > li.uk-active > a { color: #000; }

/* ============================================
   HERO
   ============================================ */
.kth-hero {
  background: linear-gradient(135deg, #001a4d 0%, #003d99 50%, #0066ff 100%);
  position: relative;
  overflow: hidden;
  min-height: 85vh;
  display: flex;
  align-items: center;
}
.kth-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0, 26, 77, 0.93) 0%, rgba(0, 26, 77, 0.80) 50%, rgba(0, 102, 255, 0.15) 100%);
  z-index: 1;
}
.kth-hero-overlay {
  position: absolute;
  right: 0;
  top: 0;
  width: 55%;
  height: 100%;
  background: url('assets/images/hero/hero-bg.jpg') center/cover no-repeat;
  opacity: 0.3;
  -webkit-mask-image: linear-gradient(to right, transparent 10%, black 60%);
  mask-image: linear-gradient(to right, transparent 10%, black 60%);
  z-index: 0;
}
.kth-hero-content { position: relative; z-index: 2; width: 100%; max-width: 1020px; margin: 0 auto; }
.kth-hero .hero-en {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--kth-accent);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 12px;
  animation: fadeInUp 0.6s ease;
}
.kth-hero h1 {
  font-size: clamp(34px, 4.5vw, 52px);
  font-weight: 800;
  line-height: 1.15;
  color: #fff;
  animation: fadeInUp 0.6s ease 0.1s both;
}
.kth-hero .hero-highlight { color: #4da6ff; }
.kth-hero .hero-subtitle {
  display: inline-block;
  color: rgba(255, 255, 255, 0.95);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.8;
  background: rgba(0, 0, 0, 0.3);
  padding: 14px 22px;
  border-radius: var(--kth-radius-sm);
  border-left: 3px solid var(--kth-primary);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  margin-top: 16px;
  animation: fadeInUp 0.6s ease 0.2s both;
}
.kth-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 28px;
  animation: fadeInUp 0.6s ease 0.3s both;
}
.kth-feature-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  font-weight: 500;
  transition: transform var(--kth-transition);
}
.kth-feature-item:hover { transform: translateX(4px); }
.kth-feature-item svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--kth-accent); }
.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 32px;
  animation: fadeInUp 0.6s ease 0.4s both;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================
   BUTTONS
   ============================================ */
.kth-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--kth-radius-sm);
  padding: 13px 32px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all var(--kth-transition);
  text-decoration: none;
  line-height: 1.4;
}
.kth-btn-primary {
  background: var(--kth-primary);
  color: #fff;
}
.kth-btn-primary:hover {
  background: var(--kth-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 102, 255, 0.4);
  color: #fff;
}
.kth-btn-outline {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
}
.kth-btn-outline:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(255,255,255,0.15);
}
.kth-btn-whatsapp {
  background: #25d366;
  color: #fff;
}
.kth-btn-whatsapp:hover {
  background: #128c7e;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.3);
  color: #fff;
}
.kth-btn-lg { padding: 14px 40px; font-size: 16px; }

/* ============================================
   TRUST BAR
   ============================================ */
.kth-trust-bar {
  background: #0a0e27;
  padding: 18px 0;
}
.kth-trust-bar .uk-container { max-width: 1080px; }
.kth-trust-bar .trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 12px;
  font-weight: 500;
  transition: color var(--kth-transition);
}
.kth-trust-bar .trust-item:hover { color: rgba(255, 255, 255, 0.95); }
.kth-trust-bar .trust-item svg { width: 16px; height: 16px; color: var(--kth-accent); flex-shrink: 0; }

/* ============================================
   SECTION TITLE
   ============================================ */
.kth-section-title { text-align: center; margin-bottom: 48px; }
.kth-section-title .title-en {
  font-size: 11px;
  font-weight: 700;
  color: var(--kth-primary);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 6px;
  display: block;
}
.kth-section-title h2 {
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 800;
  color: var(--kth-dark);
  margin-bottom: 8px;
  line-height: 1.2;
}
.kth-section-title p {
  color: var(--kth-text-muted);
  font-size: 15px;
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ============================================
   INDUSTRY TABS
   ============================================ */
.kth-industry-tabs {
  display: flex;
  gap: 0;
  height: 620px;
  overflow: hidden;
  width: 100%;
}
.kth-industry-tabs .tab-image {
  width: 70%;
  position: relative;
  overflow: hidden;
}
.kth-industry-tabs .tab-image .uk-switcher > li {
  height: 100%;
  position: relative;
  background: #f0f2f5;
}
.kth-industry-tabs .tab-image .uk-switcher > li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0; left: 0;
}
/* Decorative vertical line */
.kth-industry-tabs .tab-image .tab-decor {
  position: absolute;
  left: 60px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.kth-industry-tabs .tab-image .tab-decor .decor-line {
  width: 1px;
  height: 260px;
  background: rgba(255, 255, 255, 0.35);
}
.kth-industry-tabs .tab-image .tab-decor .decor-dot {
  width: 9px;
  height: 9px;
  background: var(--kth-primary);
  border-radius: 50%;
  order: -1;
}
.kth-industry-tabs .tab-image .tab-decor .decor-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  writing-mode: vertical-rl;
  letter-spacing: 4px;
  margin-top: 8px;
}
/* Bottom text overlay */
.kth-industry-tabs .tab-image .tab-img-text {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 50px 60px 50px 80px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.2) 60%, transparent 100%);
  color: #fff;
  z-index: 2;
}
.kth-industry-tabs .tab-image .tab-img-text .img-title {
  font-size: clamp(24px, 2.5vw, 34px);
  font-weight: 300;
  margin-bottom: 12px;
  letter-spacing: 2px;
}
.kth-industry-tabs .tab-image .tab-img-text .img-desc {
  font-size: 14px;
  opacity: 0.8;
  line-height: 1.8;
  max-width: 520px;
}
/* Tab list */
.kth-industry-tabs .tab-list {
  width: 30%;
  background: #fff;
  display: flex;
  flex-direction: column;
  padding: 48px 0 0;
}
.kth-industry-tabs .tab-header { padding: 0 32px 24px; }
.kth-industry-tabs .tab-header h3 {
  font-size: 26px;
  font-weight: 300;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 14px;
  letter-spacing: 1px;
}
.kth-industry-tabs .tab-header h3::after {
  content: '';
  width: 24px;
  height: 2px;
  background: var(--kth-primary);
}
.kth-industry-tabs .tab-header p {
  font-size: 13px;
  color: var(--kth-text-muted);
  margin: 0;
  line-height: 1.6;
}
.kth-industry-tabs .tab-item {
  margin: 3px 16px;
  border-radius: 0;
  transition: all var(--kth-transition);
  cursor: pointer;
}
.kth-industry-tabs .tab-item a {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 32px;
  text-decoration: none;
  color: inherit;
}
.kth-industry-tabs .tab-icon {
  width: 28px;
  height: 28px;
  color: #bbb;
  flex-shrink: 0;
  transition: color var(--kth-transition);
}
.kth-industry-tabs .tab-icon svg { width: 100%; height: 100%; }
.kth-industry-tabs .tab-item:hover { background: var(--kth-bg-light); }
.kth-industry-tabs .tab-item.uk-active {
  background: var(--kth-primary);
  box-shadow: 0 4px 20px rgba(0, 102, 255, 0.3);
}
.kth-industry-tabs .tab-item.uk-active .tab-icon { color: #fff; }
.kth-industry-tabs .tab-item.uk-active .tab-name { color: #fff; font-weight: 600; }
.kth-industry-tabs .tab-item.uk-active .tab-name-en { color: rgba(255, 255, 255, 0.7) !important; }

/* ============================================
   SCENARIO SECTION
   ============================================ */
.kth-scenario-section {
  background: #fff;
  position: relative;
}
.kth-scenario-section .uk-container { max-width: 1020px; }
.kth-scenario-section .bg-glow-1 {
  position: absolute;
  right: -100px; top: -100px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(0, 102, 255, 0.06) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.kth-scenario-section .bg-glow-2 {
  position: absolute;
  left: -80px; bottom: -80px;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(0, 198, 255, 0.04) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.kth-scenario-list { display: flex; flex-direction: column; gap: 24px; position: relative; z-index: 1; }
.kth-scenario-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 16px;
  overflow: hidden;
  background: #f8fafc;
  border: 1px solid var(--kth-border);
  transition: all 0.4s ease;
}
.kth-scenario-item:nth-child(even) { direction: rtl; }
.kth-scenario-item:nth-child(even) > * { direction: ltr; }
.kth-scenario-item:hover {
  border-color: rgba(0, 102, 255, 0.2);
  box-shadow: var(--kth-shadow-sm);
}
.scenario-body {
  padding: 44px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
.scenario-body::before {
  content: attr(data-index);
  position: absolute;
  right: 24px; top: 20px;
  font-size: 64px;
  font-weight: 800;
  color: rgba(0, 0, 0, 0.03);
  line-height: 1;
  pointer-events: none;
  font-family: 'Inter', sans-serif;
}
.scenario-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--kth-primary);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.scenario-label::before {
  content: '';
  width: 20px;
  height: 2px;
  background: var(--kth-primary);
}
.scenario-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 12px;
  line-height: 1.3;
}
.scenario-desc {
  font-size: 14px;
  color: var(--kth-text-light);
  line-height: 1.8;
  margin-bottom: 20px;
}
.scenario-specs { display: flex; gap: 10px; flex-wrap: wrap; }
.spec-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--kth-primary-light);
  color: var(--kth-primary);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--kth-radius-sm);
  border: 1px solid rgba(0, 102, 255, 0.12);
}
.spec-chip--green {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.15);
  color: var(--kth-success);
}
.spec-chip--amber {
  background: rgba(217, 119, 6, 0.08);
  border-color: rgba(217, 119, 6, 0.15);
  color: #d97706;
}
.scenario-visual {
  position: relative;
  min-height: 260px;
  overflow: hidden;
  background: url(assets/images/solutions/solution-food.jpg) center/cover;
}

/* ============================================
   CAPABILITIES
   ============================================ */
.kth-capabilities-section { background: var(--kth-bg-light); }
.kth-capabilities-section .uk-container { max-width: 1060px; }
.kth-capability-card {
  background: #fff;
  border-radius: 16px;
  padding: 36px 24px;
  text-align: center;
  border: 1px solid rgba(0, 0, 0, 0.06);
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
  height: 100%;
}
.kth-capability-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--cap-color);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.kth-capability-card:hover::before { opacity: 1; }
.kth-capability-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--kth-shadow);
  border-color: rgba(0, 102, 255, 0.1);
}
.kth-capability-card .cap-icon-wrap {
  width: 64px; height: 64px;
  margin: 0 auto 18px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cap-bg);
  transition: transform 0.4s ease;
}
.kth-capability-card:hover .cap-icon-wrap { transform: scale(1.1) rotate(5deg); }
.kth-capability-card .cap-icon { width: 30px; height: 30px; color: var(--cap-color); }
.kth-capability-card .cap-title { font-size: 16px; font-weight: 700; margin-bottom: 2px; }
.kth-capability-card .cap-title-en { font-size: 10px; color: var(--kth-text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
.kth-capability-card .cap-desc { font-size: 13px; color: var(--kth-text-light); line-height: 1.6; margin: 0 0 14px; }
.kth-capability-card .cap-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 6px 16px;
  background: var(--cap-bg);
  border-radius: 20px;
  font-size: 11px;
}
.kth-capability-card .cap-stat-num { font-size: 18px; font-weight: 800; color: var(--cap-color); }
.kth-capability-card .cap-stat-label { color: var(--kth-text-light); }

/* ============================================
   CASE STUDIES
   ============================================ */
.kth-case-section { background: var(--kth-bg-light); overflow: hidden; }
.kth-case-section .uk-container { max-width: 1080px; }

/* Case slider - outside nav buttons */
.slider-outside-nav { padding: 0 60px; }
.slider-outside-nav .uk-slider-items { overflow: visible; }
.slider-outside-nav [uk-slider-item] {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 48px;
  height: 48px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  color: var(--kth-dark);
  transition: all var(--kth-transition);
  text-decoration: none;
}
.slider-outside-nav [uk-slider-item]:hover {
  background: var(--kth-primary);
  color: #fff;
  box-shadow: 0 4px 20px rgba(0,102,255,0.3);
}
.slider-outside-nav [uk-slider-item="previous"] { left: 0; }
.slider-outside-nav [uk-slider-item="next"] { right: 0; }
.case-card-compact { border-radius: 12px; overflow: hidden; }
.case-visual {
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.case-visual-brand {
  text-align: center;
  color: #fff;
  padding: 40px;
}
.case-visual-brand .brand-initials {
  font-size: 48px;
  font-weight: 100;
  margin-bottom: 12px;
  letter-spacing: 4px;
}
.case-visual-brand .brand-name {
  font-size: 13px;
  opacity: 0.6;
  font-weight: 400;
}
.case-body { padding: 40px; }
.case-tag {
  font-size: 11px;
  font-weight: 700;
  color: var(--kth-primary);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 10px;
  display: block;
}
.case-body h3 { font-size: 22px; font-weight: 700; margin-bottom: 12px; }
.case-body .case-desc { color: var(--kth-text-light); font-size: 14px; line-height: 1.8; margin-bottom: 24px; }
.case-stats { display: flex; gap: 28px; margin-bottom: 20px; }
.case-stat-num { font-size: 28px; font-weight: 800; color: var(--kth-primary); line-height: 1; }
.case-stat-label { font-size: 11px; color: var(--kth-text-muted); text-transform: uppercase; letter-spacing: 0.5px; display: block; margin-top: 4px; }
.case-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--kth-primary);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: gap var(--kth-transition);
}
.case-link:hover { gap: 12px; color: var(--kth-primary-dark); }

/* ============================================
   NEWS
   ============================================ */
.kth-news-section { background: #fff; }
.kth-news-section .uk-container { max-width: 1020px; }

/* ============================================
   COLOR CONTRAST FIXES
   ============================================ */
/* Case study card text contrast */
.case-body .case-desc { color: #4a4a4a; }
.case-stat-label { color: #777; }

/* News card text contrast */
.kth-news-card .news-excerpt { color: #555; }
.kth-news-card .news-date { color: #888; }

/* Capability card text contrast */
.kth-capability-card .cap-desc { color: #555; }
.kth-capability-card .cap-stat-label { color: #777; }

/* Scenario text contrast */
.scenario-desc { color: #4a4a4a; }

/* Footer text contrast */
.kth-footer .footer-about { color: rgba(255,255,255,0.55); }
.kth-news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.kth-news-card {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: all 0.4s ease;
  text-decoration: none;
  color: inherit;
  background: #fff;
}
.kth-news-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--kth-shadow-sm);
}
.kth-news-card .news-image {
  height: 200px;
  position: relative;
  background-size: cover;
  background-position: center;
}
.kth-news-card .news-tag {
  position: absolute;
  top: 12px; left: 12px;
  padding: 4px 12px;
  background: var(--kth-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  border-radius: 4px;
  z-index: 1;
}
.kth-news-card .news-content { padding: 24px; }
.kth-news-card .news-date {
  font-size: 12px;
  color: var(--kth-text-muted);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.kth-news-card .news-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 8px;
  transition: color var(--kth-transition);
}
.kth-news-card:hover .news-title { color: var(--kth-primary); }
.kth-news-card .news-excerpt {
  font-size: 13px;
  color: var(--kth-text-light);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================
   VIDEO GALLERY
   ============================================ */
.kth-video-section {
  background: linear-gradient(135deg, var(--kth-bg-light) 0%, #e9ecef 100%);
}
.kth-video-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.kth-video-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: all 0.4s ease;
}
.kth-video-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--kth-shadow-sm);
}
.kth-video-card .video-thumb {
  position: relative;
  padding-top: 56.25%;
  background-size: cover;
  background-position: center;
  cursor: pointer;
}
.kth-video-card .video-thumb::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  transition: background 0.3s ease;
  z-index: 1;
}
.kth-video-card:hover .video-thumb::before { background: rgba(0, 0, 0, 0.4); }
.kth-video-card .play-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 54px; height: 54px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 2;
}
.kth-video-card:hover .play-btn {
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.kth-video-card .play-btn svg { width: 24px; height: 24px; color: var(--kth-primary); margin-left: 4px; }
.kth-video-card .video-info { padding: 16px; }
.kth-video-card .video-title { font-size: 14px; font-weight: 600; margin-bottom: 6px; line-height: 1.4; }
.kth-video-card .video-meta { display: flex; align-items: center; gap: 14px; font-size: 12px; color: var(--kth-text-muted); }

/* ============================================
   CTA BANNER
   ============================================ */
.kth-bottom-cta {
  background: linear-gradient(135deg, #001a4d 0%, #003d99 100%);
  color: #fff;
  padding: 80px 0;
  text-align: center;
}
.kth-bottom-cta .uk-container { max-width: 720px; }
.kth-bottom-cta h2 { font-size: clamp(26px, 3vw, 38px); font-weight: 800; margin-bottom: 14px; color: #fff; }
.kth-bottom-cta p { color: rgba(255, 255, 255, 0.75); font-size: 16px; margin-bottom: 32px; max-width: 500px; margin-left: auto; margin-right: auto; }
.kth-bottom-cta .cta-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ============================================
   FOOTER
   ============================================ */
.kth-footer {
  background: var(--kth-bg-dark);
  color: rgba(255, 255, 255, 0.45);
  padding: 48px 0 24px;
  font-size: 13px;
}
.kth-footer .uk-container { max-width: 1080px; }
.kth-footer a { color: rgba(255, 255, 255, 0.5); text-decoration: none; transition: color var(--kth-transition); }
.kth-footer a:hover { color: #fff; }
.kth-footer .footer-brand {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}
.kth-footer .footer-brand-sub {
  font-size: 11px;
  opacity: 0.5;
  margin-bottom: 14px;
}
.kth-footer .footer-about {
  font-size: 13px;
  line-height: 1.8;
}
.kth-footer .footer-heading {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 14px;
}
.kth-footer .footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  line-height: 2.2;
}
.kth-footer .footer-contact-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 13px;
}
.kth-footer .footer-contact-item svg {
  width: 14px; height: 14px;
  opacity: 0.6;
  flex-shrink: 0;
  color: var(--kth-primary);
}
.kth-footer hr { border-color: rgba(255, 255, 255, 0.06); margin: 28px 0; }
.kth-footer .footer-legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.25);
  flex-wrap: wrap;
  gap: 8px;
}
.kth-footer .footer-legal a { color: rgba(255, 255, 255, 0.3); }
.kth-footer .footer-legal a:hover { color: rgba(255, 255, 255, 0.6); }

/* ============================================
   FLOATING ACTIONS
   ============================================ */
/* ============================================
   FIX: Prevent horizontal scrollbar
   ============================================ */
body { overflow-x: hidden; width: 100%; }
.uk-container { max-width: 100%; }
.kth-industry-section, .kth-scenario-section { overflow: hidden; }

/* ============================================
   FLOATING ACTIONS
   ============================================ */
.kth-float-actions {
  position: fixed;
  right: 24px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 998;
}
.kth-float-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--kth-radius-sm);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  transition: all var(--kth-transition);
  line-height: 1.4;
  color: #fff;
  border: none;
  cursor: pointer;
}
.kth-float-btn.whatsapp { background: #25d366; }
.kth-float-btn.whatsapp:hover { background: #128c7e; transform: translateY(-3px); box-shadow: 0 6px 20px rgba(37,211,102,0.35); color: #fff; }
.kth-float-btn.email { background: var(--kth-primary); }
.kth-float-btn.email:hover { background: var(--kth-primary-dark); transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,102,255,0.35); color: #fff; }
.kth-float-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ============================================
   BACK TO TOP
   ============================================ */
.kth-back-top {
  position: fixed;
  right: 24px;
  bottom: 150px;
  width: 44px;
  height: 44px;
  border-radius: var(--kth-radius-sm);
  background: #fff;
  color: var(--kth-primary);
  border: 1px solid rgba(0,0,0,0.06);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  opacity: 0;
  transform: translateY(20px);
  transition: all var(--kth-transition);
  z-index: 1000;
}
.kth-back-top.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.kth-back-top:hover {
  background: var(--kth-primary);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,102,255,0.35);
}
.kth-back-top svg { width: 20px; height: 20px; }

/* ============================================
   INNER PAGES (Banner + Content)
   ============================================ */
.page-banner {
  background: linear-gradient(135deg, #001a4d 0%, #003d99 50%, #0066ff 100%);
  padding: 120px 0 60px;
  margin-top: -1px;
}
.page-banner-inner { text-align: center; }
.page-banner .page-banner-en {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.page-banner h1 {
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 800;
  color: #fff;
  margin-bottom: 8px;
}
.page-banner p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 15px;
  max-width: 480px;
  margin: 0 auto;
}
.page-section { padding: 60px 0; }
.page-content h2 { font-size: 24px; font-weight: 700; margin-top: 36px; margin-bottom: 16px; }
.page-content h3 { font-size: 20px; font-weight: 600; margin-top: 24px; margin-bottom: 12px; }
.page-content p { color: var(--kth-text-light); line-height: 1.8; margin-bottom: 16px; }
.page-content ul, .page-content ol { color: var(--kth-text-light); line-height: 1.8; }
.page-content li { margin-bottom: 6px; }

/* ============================================
   ABOUT PAGE
   ============================================ */

/* Company Intro */
.about-intro {
  background: #fff;
  padding: 80px 0;
}
.about-intro .uk-container { max-width: 1020px; }
.about-intro-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}
.about-intro-quote {
  font-size: clamp(24px, 2.5vw, 34px);
  font-weight: 300;
  line-height: 1.5;
  color: var(--kth-dark);
  position: relative;
  padding-left: 28px;
  border-left: 4px solid var(--kth-primary);
}
.about-intro-quote strong {
  font-weight: 700;
  color: var(--kth-primary);
}
.about-intro-text {
  color: var(--kth-text-light);
  font-size: 15px;
  line-height: 2;
}
.about-intro-text strong {
  color: var(--kth-dark);
  font-weight: 600;
}
.about-intro-highlight {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 24px;
  background: var(--kth-primary-light);
  color: var(--kth-primary);
  font-weight: 600;
  font-size: 13px;
  padding: 10px 20px;
  border-radius: var(--kth-radius-sm);
  border: 1px solid rgba(0,102,255,0.12);
}

/* Stats */
.about-stats-section {
  background: linear-gradient(135deg, #0a1628 0%, #111827 50%, #1a2744 100%);
  padding: 60px 0;
  color: #fff;
}
.about-stats-section .uk-container { max-width: 960px; }
.about-stats-grid {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: nowrap;
}
.about-stats-card {
  flex: 1;
  min-width: 0;
  text-align: center;
  padding: 24px 8px 20px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  transition: all 0.4s cubic-bezier(.4,0,.2,1);
}
.about-stats-card:hover {
  transform: translateY(-8px);
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.15);
}
.about-stats-num {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 900;
  background: linear-gradient(135deg, #60a5fa, #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: 2px;
}
.about-stats-num small {
  font-size: 0.5em;
  vertical-align: super;
}
.about-stats-unit {
  font-size: 12px;
  color: rgba(255,255,255,0.35);
  font-weight: 600;
  margin-bottom: 8px;
}
.about-stats-label {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  font-weight: 500;
}

/* Timeline */
.about-timeline-section {
  background: var(--kth-bg-light);
  padding: 80px 0;
  overflow: hidden;
}
.about-timeline-section .uk-container { max-width: 820px; }
.about-timeline {
  position: relative;
  padding-left: 40px;
}
.about-timeline::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(to bottom, var(--kth-primary), rgba(0,102,255,0.1));
}
.about-timeline-item {
  position: relative;
  padding: 0 0 40px 40px;
}
.about-timeline-item:last-child { padding-bottom: 0; }
.about-timeline-item::before {
  content: '';
  position: absolute;
  left: -26px;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--kth-primary);
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--kth-primary), 0 2px 8px rgba(0,102,255,0.25);
}
.about-timeline-year {
  font-size: 28px;
  font-weight: 800;
  color: var(--kth-primary);
  margin-bottom: 4px;
}
.about-timeline-text {
  font-size: 15px;
  color: var(--kth-text-light);
  line-height: 1.7;
}

/* Certifications */
.about-cert-section {
  background: #fff;
  padding: 80px 0;
}
.about-cert-section .uk-container { max-width: 900px; }
.about-cert-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.about-cert-card-count .about-cert-count {
  font-size: 36px;
  font-weight: 900;
  color: var(--kth-primary);
  line-height: 1;
  margin-bottom: 10px;
}
.about-cert-card-count .about-cert-count small {
  font-size: 0.5em;
  vertical-align: super;
}
.about-cert-card-count .about-cert-icon {
  width: 44px;
  height: 44px;
  margin-bottom: 12px;
}
.about-cert-card-count .about-cert-icon svg {
  width: 22px;
  height: 22px;
}
.about-cert-card {
  text-align: center;
  padding: 36px 20px;
  border-radius: var(--kth-radius);
  border: 1px solid var(--kth-border);
  transition: all var(--kth-transition);
  background: #fff;
}
.about-cert-card:hover {
  border-color: rgba(0,102,255,0.2);
  box-shadow: var(--kth-shadow-sm);
  transform: translateY(-4px);
}
.about-cert-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 14px;
  background: var(--kth-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-cert-icon svg {
  width: 28px;
  height: 28px;
  color: var(--kth-primary);
}
.about-cert-name {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
}
.about-cert-desc {
  font-size: 12px;
  color: var(--kth-text-muted);
  line-height: 1.5;
}

/* Values */
.about-value-section {
  background: var(--kth-bg-light);
  padding: 80px 0;
}
.about-value-section .uk-container { max-width: 900px; }
.about-value-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.about-value-card {
  text-align: center;
  padding: 36px 20px;
  border-radius: var(--kth-radius);
  background: #fff;
  border: 1px solid rgba(0,0,0,0.05);
  transition: all var(--kth-transition);
  position: relative;
  overflow: hidden;
}
.about-value-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--kth-primary);
  transform: scaleX(0);
  transition: transform 0.4s ease;
  transform-origin: left;
}
.about-value-card:hover::before { transform: scaleX(1); }
.about-value-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--kth-shadow-sm);
}
.about-value-number {
  font-size: 36px;
  font-weight: 800;
  color: rgba(0,102,255,0.08);
  line-height: 1;
  margin-bottom: 8px;
}
.about-value-name {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 6px;
}
.about-value-desc {
  font-size: 13px;
  color: var(--kth-text-light);
  line-height: 1.6;
}

/* Gallery */
.about-gallery-section {
  background: var(--kth-bg-light);
  padding: 80px 0;
}
.about-gallery-section .uk-container { max-width: 960px; }
.about-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.about-gallery-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid var(--kth-border);
  overflow: hidden;
  transition: all 0.35s cubic-bezier(.4,0,.2,1);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.about-gallery-card:hover {
  box-shadow: var(--kth-shadow-sm);
  transform: translateY(-8px);
  border-color: transparent;
}
.about-gallery-vis {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.2);
  position: relative;
  overflow: hidden;
}
.about-gallery-vis svg {
  z-index: 1;
  position: relative;
}
.about-gallery-vis::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.06) 0%, transparent 60%);
}
.about-gallery-body {
  padding: 22px 24px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.about-gallery-title {
  font-size: 16px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 8px;
}
.about-gallery-desc {
  font-size: 13px;
  color: var(--kth-text-muted);
  line-height: 1.65;
  margin-bottom: 14px;
  flex: 1;
}
.about-gallery-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.about-gallery-tags span {
  font-size: 11px;
  background: var(--kth-primary-light);
  color: var(--kth-primary);
  padding: 3px 12px;
  border-radius: 12px;
  font-weight: 600;
}

@media (max-width: 768px) {
  .about-cert-grid { grid-template-columns: repeat(2, 1fr); }
  .about-value-grid { grid-template-columns: repeat(2, 1fr); }
  .about-gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .about-intro { padding: 50px 0; }
  .about-intro-quote { font-size: 22px; padding-left: 20px; }
  .about-timeline-section { padding: 50px 0; }
  .about-timeline-year { font-size: 22px; }
  .about-cert-section { padding: 50px 0; }
  .about-value-section { padding: 50px 0; }
  .about-stats-grid { flex-wrap: wrap; gap: 12px; }
  .about-stats-card { min-width: calc(50% - 12px); flex: none; }
  .about-gallery-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .about-gallery-section { padding: 50px 0; }
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1200px) {
  .kth-industry-tabs .tab-image { width: 65%; }
  .kth-industry-tabs .tab-list { width: 35%; }
}
@media (max-width: 960px) {
  .kth-topbar-info a { font-size: 0; }
  .kth-topbar-info a[href^="mailto"]::before { content: attr(href); font-size: 11px; }
  .kth-hero { min-height: auto; padding-top: 100px; padding-bottom: 60px; }
  .kth-hero .hero-en { font-size: 12px; }
  .kth-features-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .kth-feature-item { font-size: 12px; }

  .kth-industry-tabs { flex-direction: column; height: auto; }
  .kth-industry-tabs .tab-image { width: 100%; height: 280px; }
  .kth-industry-tabs .tab-image .tab-decor { display: none; }
  .kth-industry-tabs .tab-list { width: 100%; padding-top: 24px; }

  .kth-scenario-item,
  .kth-scenario-item:nth-child(even) { grid-template-columns: 1fr; direction: ltr; }
  .scenario-body { padding: 28px 24px; }
  .scenario-title { font-size: 19px; }
  .scenario-visual { min-height: 180px; }
  .scenario-body::before { font-size: 40px; }

  .kth-news-grid { grid-template-columns: 1fr; }
  .kth-video-grid { grid-template-columns: repeat(2, 1fr); }
  .page-banner { padding: 100px 0 50px; }
}
@media (max-width: 640px) {
  .kth-features-grid { grid-template-columns: repeat(2, 1fr); }
  .kth-video-grid { grid-template-columns: 1fr; }
  .kth-bottom-cta h2 { font-size: 26px; }
  .case-body { padding: 24px; }
  .case-visual { height: 260px; }
}

/* ============================================
   TRUST COUNTER
   ============================================ */
.trust-num {
  font-weight: 700;
  color: #fff;
  font-size: 15px;
}

/* ============================================
   TESTIMONIALS
   ============================================ */
.kth-testimonial-section {
  background: linear-gradient(135deg, #f8f9fa 0%, #eef1f8 100%);
  padding: 60px 0;
}
.kth-testimonial-section .uk-container {
  max-width: 820px !important;
}
.kth-testimonial-section .kth-section-title h2 {
  color: #1a1a2e;
}
.kth-testimonial-section .kth-section-title p {
  color: #666;
}
.testimonial-slider {
  margin-top: -16px;
}
.testimonial-card {
  background: #fff;
  border-radius: 12px;
  padding: 32px 28px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
  border: 1px solid rgba(0,0,0,0.04);
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform var(--kth-transition), box-shadow var(--kth-transition);
}
.testimonial-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}
.testimonial-quote-icon {
  font-size: 48px;
  line-height: 1;
  color: var(--kth-primary);
  opacity: 0.15;
  margin-bottom: -8px;
  font-family: Georgia, serif;
}
.testimonial-text {
  font-size: 15px;
  line-height: 1.7;
  color: #444;
  margin: 0 0 20px;
  font-style: italic;
  flex: 1;
}
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(0,0,0,0.05);
}
.testimonial-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.testimonial-avatar-initials {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.testimonial-name {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a2e;
}
.testimonial-role {
  font-size: 12px;
  color: #888;
  margin-top: 1px;
}
.testimonial-slider .uk-slider-nav {
  margin-top: 28px;
}

@media (max-width: 768px) {
  .kth-testimonial-section { padding: 40px 0; }
  .testimonial-card { padding: 24px 20px; }
}

/* ============================================
   ABOUT REDESIGN
   ============================================ */

/* ----- Hero Banner ----- */
.ab-hero {
  background: linear-gradient(135deg, #001a4d 0%, #002a6e 40%, #003d99 70%, #0066ff 100%);
  padding: 160px 0 100px;
  position: relative;
  overflow: hidden;
  margin-top: -1px;
}
.ab-hero-bg {
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.5;
}
.ab-hero-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.ab-hero-particles span {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(255,255,255,0.15);
  border-radius: 50%;
  animation: abFloat 8s infinite ease-in-out;
}
.ab-hero-particles span:nth-child(1) { left: 10%; top: 20%; animation-delay: 0s; }
.ab-hero-particles span:nth-child(2) { left: 25%; top: 60%; animation-delay: 1.2s; width: 6px; height: 6px; }
.ab-hero-particles span:nth-child(3) { left: 40%; top: 10%; animation-delay: 2.5s; }
.ab-hero-particles span:nth-child(4) { left: 60%; top: 70%; animation-delay: 0.8s; width: 3px; height: 3px; }
.ab-hero-particles span:nth-child(5) { left: 75%; top: 30%; animation-delay: 3.2s; }
.ab-hero-particles span:nth-child(6) { left: 85%; top: 80%; animation-delay: 1.8s; width: 5px; height: 5px; }
.ab-hero-particles span:nth-child(7) { left: 15%; top: 85%; animation-delay: 4s; }
.ab-hero-particles span:nth-child(8) { left: 50%; top: 45%; animation-delay: 0.5s; width: 3px; height: 3px; }
.ab-hero-particles span:nth-child(9) { left: 90%; top: 15%; animation-delay: 2s; }
.ab-hero-particles span:nth-child(10) { left: 35%; top: 90%; animation-delay: 3.8s; }

@keyframes abFloat {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.15; }
  50% { transform: translateY(-30px) scale(1.5); opacity: 0.4; }
}

.ab-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
}
.ab-hero-en {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.5);
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 6px 20px;
  border-radius: 20px;
  backdrop-filter: blur(4px);
}
.ab-hero h1 {
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 800;
  color: #fff;
  margin-bottom: 14px;
  letter-spacing: -0.5px;
}
.ab-hero h1::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: var(--kth-primary);
  margin: 16px auto 0;
  border-radius: 2px;
}
.ab-hero p {
  color: rgba(255,255,255,0.6);
  font-size: 16px;
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.7;
}

/* Hero stats row */
.ab-hero-stats {
  display: flex;
  justify-content: center;
  gap: 48px;
  margin-top: 48px;
  padding-top: 36px;
  border-top: 1px solid rgba(255,255,255,0.08);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.ab-hero-stat {
  text-align: center;
}
.ab-hero-stat-num {
  font-size: 28px;
  font-weight: 900;
  background: linear-gradient(135deg, #60a5fa, #93c5fd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  display: inline;
}
.ab-hero-stat small {
  font-size: 14px;
  font-weight: 700;
  background: linear-gradient(135deg, #60a5fa, #93c5fd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ab-hero-stat-label {
  display: block;
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ----- Company Intro ----- */
.ab-intro {
  background: #fff;
  padding: 90px 0;
}
.ab-intro .uk-container { max-width: 1020px; }
.ab-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
.ab-intro-left {
  position: relative;
}
.ab-intro-quote-wrap {
  position: relative;
  padding-left: 32px;
}
.ab-intro-quote-mark {
  position: absolute;
  left: -8px;
  top: -16px;
  font-size: 72px;
  font-weight: 300;
  color: var(--kth-primary);
  opacity: 0.2;
  line-height: 1;
  font-family: Georgia, serif;
}
.ab-intro-quote {
  font-size: clamp(22px, 2.8vw, 32px);
  font-weight: 300;
  line-height: 1.5;
  color: var(--kth-dark);
  border-left: 4px solid var(--kth-primary);
  padding-left: 24px;
}
.ab-intro-quote strong {
  font-weight: 700;
  color: var(--kth-primary);
}
.ab-intro-tag {
  display: inline-block;
  margin-top: 24px;
  background: var(--kth-primary-light);
  color: var(--kth-primary);
  font-weight: 600;
  font-size: 13px;
  padding: 10px 22px;
  border-radius: 8px;
  border: 1px solid rgba(0,102,255,0.12);
  letter-spacing: 1px;
}
.ab-intro-right {
  color: var(--kth-text-light);
  font-size: 15px;
  line-height: 2;
}
.ab-intro-right strong {
  color: var(--kth-dark);
  font-weight: 600;
}
.ab-intro-right p {
  margin-bottom: 16px;
}
.ab-intro-certs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.ab-intro-cert {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #059669;
  background: rgba(16,185,129,0.08);
  border: 1px solid rgba(16,185,129,0.15);
  padding: 8px 16px;
  border-radius: 6px;
}
.ab-intro-cert svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* ----- Core Data Cards ----- */
.ab-data {
  background: linear-gradient(135deg, #0a1628 0%, #111827 50%, #1a2744 100%);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}
.ab-data::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0,102,255,0.06) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.ab-data .uk-container { max-width: 960px; position: relative; z-index: 1; }
.ab-data-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.ab-data-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  padding: 32px 20px 28px;
  text-align: center;
  backdrop-filter: blur(8px);
  transition: all 0.4s cubic-bezier(.4,0,.2,1);
  position: relative;
  overflow: hidden;
}
.ab-data-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent, var(--kth-primary));
  transform: scaleX(0);
  transition: transform 0.4s ease;
  transform-origin: left;
}
.ab-data-card:hover::before {
  transform: scaleX(1);
}
.ab-data-card:hover {
  transform: translateY(-8px);
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.12);
}
.ab-data-vis {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.06);
  transition: transform 0.4s ease;
  color: var(--accent, var(--kth-primary));
}
.ab-data-vis svg {
  width: 24px;
  height: 24px;
}
.ab-data-card:hover .ab-data-vis {
  transform: scale(1.1) rotate(-5deg);
}
.ab-data-num {
  font-size: 34px;
  font-weight: 900;
  background: linear-gradient(135deg, #60a5fa, #93c5fd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: 6px;
}
.ab-data-num small {
  font-size: 0.5em;
  vertical-align: super;
  background: none;
  -webkit-text-fill-color: var(--accent, var(--kth-primary));
  color: var(--accent, var(--kth-primary));
}
.ab-data-label {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}
.ab-data-desc {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  line-height: 1.6;
}

/* ----- Timeline (redesigned) ----- */
.ab-timeline {
  background: var(--kth-bg-light);
  padding: 80px 0;
  overflow: hidden;
}
.ab-timeline .uk-container { max-width: 820px; }
.ab-timeline-track {
  position: relative;
}
.ab-timeline-track::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--kth-primary), rgba(0,102,255,0.05));
  transform: translateX(-50%);
}
.ab-timeline-item {
  display: flex;
  align-items: flex-start;
  position: relative;
  margin-bottom: 40px;
}
.ab-timeline-item:last-child { margin-bottom: 0; }
.ab-timeline-item:nth-child(odd) {
  flex-direction: row;
  padding-right: calc(50% + 40px);
}
.ab-timeline-item:nth-child(even) {
  flex-direction: row-reverse;
  padding-left: calc(50% + 40px);
}
.ab-tl-dot {
  position: absolute;
  left: 50%;
  top: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--kth-primary);
  border: 4px solid #fff;
  box-shadow: 0 0 0 2px var(--kth-primary), 0 2px 12px rgba(0,102,255,0.35);
  transform: translateX(-50%);
  z-index: 2;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ab-timeline-item:hover .ab-tl-dot {
  transform: translateX(-50%) scale(1.25);
  box-shadow: 0 0 0 3px var(--kth-primary), 0 4px 20px rgba(0,102,255,0.45);
}
.ab-tl-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px 24px;
  border: 1px solid var(--kth-border);
  transition: all 0.35s ease;
  flex: 1;
}
.ab-tl-card:hover {
  border-color: rgba(0,102,255,0.15);
  box-shadow: 0 8px 30px rgba(0,0,0,0.06);
  transform: translateY(-2px);
}
.ab-tl-year {
  display: inline-block;
  font-size: 20px;
  font-weight: 800;
  color: var(--kth-primary);
  margin-bottom: 6px;
  padding: 0 12px 0 0;
}
.ab-tl-card p {
  font-size: 14px;
  color: var(--kth-text-light);
  line-height: 1.7;
  margin: 0;
}
.ab-tl-card strong {
  color: var(--kth-dark);
  font-weight: 600;
}

/* ----- Factory Gallery (masonry-style) ----- */
.ab-gallery {
  background: #fff;
  padding: 80px 0;
}
.ab-gallery .uk-container { max-width: 1000px; }
.ab-gallery-masonry {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.ab-gallery-main {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
}
.ab-gallery-main .ab-gallery-img {
  height: 100%;
  min-height: 320px;
  display: flex;
  align-items: flex-end;
  position: relative;
}
.ab-gallery-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ab-gallery-sm {
  flex: 1;
  min-height: 152px;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
}
.ab-gallery-img,
.ab-gallery-sm {
  background-size: cover !important;
  background-position: center !important;
  cursor: pointer;
  transition: transform 0.4s ease;
}
.ab-gallery-img:hover,
.ab-gallery-sm:hover {
  transform: scale(1.02);
}
.ab-gallery-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.1) 50%, transparent 100%);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: background 0.3s ease;
}
.ab-gallery-img:hover .ab-gallery-overlay,
.ab-gallery-sm:hover .ab-gallery-overlay {
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.15) 60%, transparent 100%);
}
.ab-gallery-expand {
  display: inline-block;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 4px 14px;
  border-radius: 20px;
  opacity: 0;
  transform: translateY(6px);
  transition: all 0.3s ease;
  width: fit-content;
  backdrop-filter: blur(4px);
}
.ab-gallery-img:hover .ab-gallery-expand,
.ab-gallery-sm:hover .ab-gallery-expand {
  opacity: 1;
  transform: translateY(0);
}
.ab-gallery-label {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}
.ab-gallery-sub {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  line-height: 1.4;
}

/* ----- Values (redesigned) ----- */
.ab-values {
  background: var(--kth-bg-light);
  padding: 80px 0;
}
.ab-values .uk-container { max-width: 960px; }
.ab-values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.ab-value-card {
  background: #fff;
  border-radius: 16px;
  padding: 40px 24px 32px;
  text-align: center;
  border: 1px solid rgba(0,0,0,0.05);
  transition: all 0.4s cubic-bezier(.4,0,.2,1);
  position: relative;
}
.ab-value-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.08);
  border-color: transparent;
}
.ab-value-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  transition: transform 0.4s ease;
}
.ab-value-icon svg {
  width: 28px;
  height: 28px;
  color: var(--kth-primary);
}
.ab-value-card:hover .ab-value-icon {
  transform: scale(1.1) rotate(-5deg);
}
.ab-value-num {
  font-size: 32px;
  font-weight: 900;
  color: rgba(0,102,255,0.06);
  line-height: 1;
  margin-bottom: 4px;
}
.ab-value-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--kth-dark);
}
.ab-value-desc {
  font-size: 13px;
  color: var(--kth-text-muted);
  line-height: 1.65;
  margin: 0;
}

/* ----- Certifications (badge row) ----- */
.ab-certs {
  background: #fff;
  padding: 80px 0;
}
.ab-certs .uk-container { max-width: 800px; }
.ab-certs-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.ab-cert-badge {
  perspective: 800px;
}
.ab-cert-inner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: linear-gradient(135deg, #f8fafc, #f0f4f8);
  border: 1px solid var(--kth-border);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--kth-dark);
  transition: all 0.35s cubic-bezier(.4,0,.2,1);
  cursor: default;
}
.ab-cert-inner svg {
  width: 20px;
  height: 20px;
  color: #f59e0b;
  flex-shrink: 0;
}
.ab-cert-badge:hover .ab-cert-inner {
  transform: translateY(-4px) rotateX(4deg);
  box-shadow: 0 12px 32px rgba(0,0,0,0.08);
  border-color: rgba(0,102,255,0.15);
}

/* ----- Keyframes for data-reveal ----- */
[data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ----- Responsive ----- */
@media (max-width: 960px) {
  #galleryModalContent { min-height: 300px !important; }
  #galleryModalContent > div { padding: 32px 24px !important; }
  #galleryModalLabel { font-size: 22px !important; }
  .ab-hero { padding: 120px 0 60px; }
  .ab-hero-stats { gap: 28px; flex-wrap: wrap; }
  .ab-hero-stat { min-width: 80px; }
  .ab-intro-grid { grid-template-columns: 1fr; gap: 36px; }
  .ab-intro { padding: 60px 0; }
  .ab-data-grid { grid-template-columns: repeat(2, 1fr); }
  .ab-data { padding: 60px 0; }
  .ab-timeline { padding: 60px 0; }
  .ab-timeline-track::before { left: 20px; }
  .ab-timeline-item:nth-child(odd),
  .ab-timeline-item:nth-child(even) {
    padding: 0 0 0 50px;
    flex-direction: row;
  }
  .ab-tl-dot { left: 20px; }
  .ab-gallery-masonry { grid-template-columns: 1fr; }
  .ab-gallery-main .ab-gallery-img { min-height: 240px; }
  .ab-gallery-sm { min-height: 180px; }
  .ab-values-grid { grid-template-columns: repeat(2, 1fr); }
  .ab-values { padding: 60px 0; }
  .ab-certs { padding: 60px 0; }
  .ab-gallery { padding: 60px 0; }
}
@media (max-width: 640px) {
  .ab-data-grid { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; }
  .ab-values-grid { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; }
  .ab-hero-stats { gap: 20px; }
  .ab-hero-stat-num { font-size: 24px; }
}

/* ============================================
   SOLUTIONS REDESIGN
   ============================================ */

/* ----- Hero Banner ----- */
.sol-hero {
  background: linear-gradient(135deg, #001a4d 0%, #002a6e 40%, #003d99 70%, #0066ff 100%);
  padding: 160px 0 100px;
  position: relative;
  overflow: hidden;
  margin-top: -1px;
}
.sol-hero-bg {
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.5;
}
.sol-hero-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.sol-hero-particles span {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(255,255,255,0.15);
  border-radius: 50%;
  animation: solFloat 8s infinite ease-in-out;
}
.sol-hero-particles span:nth-child(1) { left: 10%; top: 20%; animation-delay: 0s; }
.sol-hero-particles span:nth-child(2) { left: 25%; top: 60%; animation-delay: 1.2s; width: 6px; height: 6px; }
.sol-hero-particles span:nth-child(3) { left: 40%; top: 10%; animation-delay: 2.5s; }
.sol-hero-particles span:nth-child(4) { left: 60%; top: 70%; animation-delay: 0.8s; width: 3px; height: 3px; }
.sol-hero-particles span:nth-child(5) { left: 75%; top: 30%; animation-delay: 3.2s; }
.sol-hero-particles span:nth-child(6) { left: 85%; top: 80%; animation-delay: 1.8s; width: 5px; height: 5px; }
.sol-hero-particles span:nth-child(7) { left: 15%; top: 85%; animation-delay: 4s; }
.sol-hero-particles span:nth-child(8) { left: 50%; top: 45%; animation-delay: 0.5s; width: 3px; height: 3px; }
.sol-hero-particles span:nth-child(9) { left: 90%; top: 15%; animation-delay: 2s; }
.sol-hero-particles span:nth-child(10) { left: 35%; top: 90%; animation-delay: 3.8s; }

@keyframes solFloat {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.15; }
  50% { transform: translateY(-30px) scale(1.5); opacity: 0.4; }
}

.sol-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
}
.sol-hero-en {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.5);
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 6px 20px;
  border-radius: 20px;
  backdrop-filter: blur(4px);
}
.sol-hero h1 {
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 800;
  color: #fff;
  margin-bottom: 14px;
  letter-spacing: -0.5px;
}
.sol-hero h1::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: var(--kth-primary);
  margin: 16px auto 0;
  border-radius: 2px;
}
.sol-hero p {
  color: rgba(255,255,255,0.6);
  font-size: 16px;
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.7;
}
.sol-hero-stats {
  display: flex;
  justify-content: center;
  gap: 48px;
  margin-top: 48px;
  padding-top: 36px;
  border-top: 1px solid rgba(255,255,255,0.08);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.sol-hero-stat {
  text-align: center;
}
.sol-hero-stat-num {
  font-size: 28px;
  font-weight: 900;
  background: linear-gradient(135deg, #60a5fa, #93c5fd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  display: inline;
}
.sol-hero-stat small {
  font-size: 14px;
  font-weight: 700;
  background: linear-gradient(135deg, #60a5fa, #93c5fd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.sol-hero-stat-label {
  display: block;
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ----- Section base ----- */
.sol-section { padding: 80px 0; }
.sol-section .uk-container { max-width: 1020px; }

/* ----- Industry Cards (with visual panel) ----- */
.sol-industry-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.sol-industry-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--kth-border);
  transition: all 0.4s cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
}
.sol-industry-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--kth-shadow);
  border-color: transparent;
}
.sol-industry-vis {
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.2);
  position: relative;
  overflow: hidden;
}
.sol-industry-vis svg {
  width: 48px;
  height: 48px;
  z-index: 1;
  position: relative;
  transition: transform 0.4s ease;
}
.sol-industry-card:hover .sol-industry-vis svg {
  transform: scale(1.15);
}
.sol-industry-body {
  padding: 24px 28px 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.sol-industry-en {
  font-size: 11px;
  font-weight: 700;
  color: var(--kth-primary);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.sol-industry-body h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}
.sol-industry-body p {
  font-size: 14px;
  color: var(--kth-text-light);
  line-height: 1.7;
  margin-bottom: 16px;
  flex: 1;
}
.sol-industry-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.sol-industry-tags span {
  font-size: 11px;
  background: var(--kth-primary-light);
  color: var(--kth-primary);
  padding: 4px 14px;
  border-radius: 20px;
  font-weight: 600;
  border: 1px solid rgba(0,102,255,0.12);
}
.sol-industry-link {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  font-size: 14px;
  color: var(--kth-primary);
  text-decoration: none;
  transition: gap 0.3s ease;
  gap: 4px;
}
.sol-industry-link:hover {
  gap: 10px;
  color: var(--kth-primary-dark);
}

/* ----- Flow Diagram ----- */
.sol-flow {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  flex-wrap: wrap;
  max-width: 960px;
  margin: 0 auto;
}
.sol-flow-step {
  text-align: center;
  flex: 1;
  min-width: 100px;
  max-width: 150px;
  position: relative;
}
.sol-flow-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  background: linear-gradient(135deg, #f0f4ff, #e0e8ff);
  color: var(--kth-primary);
  transition: all 0.35s ease;
}
.sol-flow-step:hover .sol-flow-icon {
  transform: scale(1.1);
  box-shadow: 0 4px 20px rgba(0,102,255,0.2);
}
.sol-flow-icon svg { width: 26px; height: 26px; }
.sol-flow-label { font-size: 13px; font-weight: 700; color: #333; }
.sol-flow-desc { font-size: 11px; color: #888; margin-top: 4px; line-height: 1.4; }
.sol-flow-arrow {
  padding-top: 28px;
  color: #ccc;
  flex-shrink: 0;
}
.sol-flow-arrow svg {
  width: 20px;
  height: 20px;
}

/* ----- Capability Cards ----- */
.sol-cap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.sol-cap-card {
  background: #fff;
  border-radius: 16px;
  padding: 32px 24px 28px;
  text-align: center;
  border: 1px solid var(--kth-border);
  transition: all 0.4s cubic-bezier(.4,0,.2,1);
  position: relative;
  overflow: hidden;
}
.sol-cap-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent, var(--kth-primary));
  transform: scaleX(0);
  transition: transform 0.4s ease;
  transform-origin: left;
}
.sol-cap-card:hover::before {
  transform: scaleX(1);
}
.sol-cap-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--kth-shadow-sm);
  border-color: transparent;
}
.sol-cap-vis {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  transition: transform 0.4s ease;
  color: var(--accent, var(--kth-primary));
}
.sol-cap-vis svg { width: 26px; height: 26px; }
.sol-cap-card:hover .sol-cap-vis {
  transform: scale(1.1) rotate(-5deg);
}
.sol-cap-card h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 2px;
}
.sol-cap-en {
  font-size: 10px;
  color: var(--kth-text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  display: block;
  margin-bottom: 10px;
}
.sol-cap-card p {
  font-size: 13px;
  color: var(--kth-text-light);
  line-height: 1.6;
  margin-bottom: 14px;
}
.sol-cap-stat {
  display: inline-block;
  padding: 6px 18px;
  background: rgba(0,102,255,0.04);
  border: 1px solid rgba(0,102,255,0.1);
  border-radius: 20px;
  font-size: 11px;
  color: var(--kth-text-light);
  font-weight: 500;
}
.sol-cap-stat span {
  font-size: 20px;
  font-weight: 800;
  color: var(--accent, var(--kth-primary));
  vertical-align: middle;
}

/* ----- Scenario Cards ----- */
.sol-scene-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.sol-scene-card {
  background: #fff;
  border-radius: 16px;
  padding: 32px 24px 0;
  border: 1px solid var(--kth-border);
  transition: all 0.4s cubic-bezier(.4,0,.2,1);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.sol-scene-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--kth-shadow-sm);
  border-color: transparent;
}
.sol-scene-num {
  font-size: 48px;
  font-weight: 900;
  color: rgba(0,102,255,0.06);
  line-height: 1;
  margin-bottom: -8px;
}
.sol-scene-body {
  position: relative;
  z-index: 1;
}
.sol-scene-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--kth-primary);
  display: block;
  margin-bottom: 6px;
}
.sol-scene-body h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
}
.sol-scene-body p {
  font-size: 14px;
  color: var(--kth-text-light);
  line-height: 1.7;
  margin-bottom: 16px;
}
.sol-scene-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 14px 0 20px;
  border-top: 1px solid #f0f2f5;
}
.sol-scene-tags span {
  font-size: 11px;
  background: #f8faff;
  padding: 4px 14px;
  border-radius: 20px;
  font-weight: 600;
  color: #555;
  border: 1px solid #e5e9f0;
}

/* ----- Comparison Table ----- */
.sol-compare {
  max-width: 860px;
  margin: 0 auto;
  overflow-x: auto;
}
.sol-compare table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(0,0,0,0.04);
}
.sol-compare th {
  background: #0a1628;
  color: #fff;
  padding: 18px 22px;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
}
.sol-compare th:last-child {
  background: linear-gradient(135deg, #0a1628, #1a2744);
}
.sol-compare td {
  padding: 14px 22px;
  font-size: 14px;
  border-bottom: 1px solid #f0f2f5;
  color: #555;
}
.sol-compare tr:last-child td { border-bottom: none; }
.sol-compare tbody tr:hover td { background: #f8faff; }
.sol-check { color: #10b981; font-weight: 700; margin-right: 4px; }
.sol-cross { color: #ef4444; margin-right: 4px; }

/* ----- Integration Cards ----- */
.sol-int-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.sol-int-card {
  background: #fff;
  border-radius: 14px;
  padding: 32px 22px 28px;
  text-align: center;
  border: 1px solid var(--kth-border);
  transition: all 0.4s cubic-bezier(.4,0,.2,1);
}
.sol-int-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--kth-shadow-sm);
  border-color: transparent;
}
.sol-int-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  color: #fff;
  transition: transform 0.4s ease;
}
.sol-int-icon svg { width: 24px; height: 24px; }
.sol-int-card:hover .sol-int-icon {
  transform: scale(1.1) rotate(-5deg);
}
.sol-int-card h3 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 8px;
}
.sol-int-card p {
  font-size: 13px;
  color: var(--kth-text-muted);
  line-height: 1.6;
  margin: 0;
}

/* ----- Case Cards ----- */
.sol-case-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.sol-case-card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--kth-border);
  transition: all 0.4s cubic-bezier(.4,0,.2,1);
  display: flex;
}
.sol-case-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--kth-shadow-sm);
  border-color: transparent;
}
.sol-case-vis {
  width: 120px;
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 24px;
  font-weight: 800;
  flex-shrink: 0;
}
.sol-case-body {
  padding: 20px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.sol-case-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--kth-primary);
  background: var(--kth-primary-light);
  padding: 3px 12px;
  border-radius: 12px;
  margin-bottom: 8px;
  width: fit-content;
}
.sol-case-body h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
}
.sol-case-body p {
  font-size: 13px;
  color: var(--kth-text-muted);
  line-height: 1.6;
  margin: 0;
  flex: 1;
}
.sol-more-btn {
  display: inline-block;
  border: 1.5px solid var(--kth-primary);
  color: var(--kth-primary);
  background: transparent;
  border-radius: 30px;
  padding: 10px 32px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: all var(--kth-transition);
}
.sol-more-btn:hover {
  background: var(--kth-primary);
  color: #fff;
}

/* ----- FAQ ----- */
.sol-faq-list {
  max-width: 720px;
  margin: 0 auto;
}
.sol-faq-item {
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--kth-border);
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color 0.3s ease;
}
.sol-faq-item:hover {
  border-color: rgba(0,102,255,0.15);
}
.sol-faq-question {
  padding: 18px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  color: #222;
  transition: background 0.2s;
}
.sol-faq-question:hover { background: #f8faff; }
.sol-faq-question svg {
  width: 18px;
  height: 18px;
  color: #999;
  transition: transform 0.2s;
  flex-shrink: 0;
}
.sol-faq-item.uk-open .sol-faq-question svg {
  transform: rotate(180deg);
  color: var(--kth-primary);
}
.sol-faq-answer {
  padding: 0 24px 22px;
  font-size: 14px;
  color: #666;
  line-height: 1.7;
}

/* ----- Responsive ----- */
@media (max-width: 960px) {
  .sol-hero { padding: 120px 0 60px; }
  .sol-hero-stats { gap: 28px; flex-wrap: wrap; }
  .sol-section { padding: 60px 0; }
  .sol-industry-grid { grid-template-columns: 1fr; max-width: 500px; margin: 0 auto; }
  .sol-cap-grid { grid-template-columns: repeat(2, 1fr); }
  .sol-scene-grid { grid-template-columns: 1fr; max-width: 500px; margin: 0 auto; }
  .sol-int-grid { grid-template-columns: repeat(2, 1fr); }
  .sol-case-grid { grid-template-columns: 1fr; max-width: 500px; margin: 0 auto; }
  .sol-flow { gap: 4px; }
  .sol-flow-step { min-width: 80px; }
  .sol-flow-arrow { display: none; }
  .sol-case-vis { width: 80px; min-height: 100px; font-size: 18px; }
  .sol-compare th, .sol-compare td { padding: 10px 12px; font-size: 12px; }
}
@media (max-width: 640px) {
  .sol-cap-grid { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; }
  .sol-int-grid { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; }
  .sol-hero-stats { gap: 20px; }
  .sol-hero-stat-num { font-size: 24px; }
}

/* ============================================
   LEAD MAGNET
   ============================================ */
.kth-lead-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(135deg, #1a1a2e 0%, #2d2d5e 100%);
  z-index: 1000;
  padding: 10px 20px;
  transform: translateY(100%);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
}
.kth-lead-bar.is-visible {
  transform: translateY(0);
}
.kth-lead-bar-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.kth-lead-bar-icon {
  font-size: 24px;
  line-height: 1;
}
.kth-lead-bar-text {
  color: rgba(255,255,255,0.9);
  font-size: 14px;
}
.kth-lead-bar-text strong {
  color: #fff;
}
.kth-lead-bar-btn {
  padding: 9px 24px;
  font-size: 13px;
  white-space: nowrap;
}
.kth-lead-bar-close {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255,255,255,0.4);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  transition: color var(--kth-transition);
}
.kth-lead-bar-close:hover {
  color: #fff;
}
.kth-lead-modal {
  padding: 40px 36px !important;
  max-width: 440px !important;
  border-radius: 12px;
}
.kth-lead-modal-icon {
  text-align: center;
  font-size: 40px;
  margin-bottom: 12px;
}
.kth-lead-modal-title {
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 6px;
}
.kth-lead-modal-desc {
  text-align: center;
  font-size: 14px;
  color: #888;
  margin-bottom: 24px;
}
.kth-lead-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.kth-lead-input {
  border-radius: 6px !important;
  border: 1px solid rgba(0,0,0,0.1) !important;
  padding: 12px 14px !important;
  font-size: 14px !important;
  transition: border-color var(--kth-transition), box-shadow var(--kth-transition);
}
.kth-lead-input:focus {
  border-color: var(--kth-primary) !important;
  box-shadow: 0 0 0 3px rgba(0,102,255,0.1) !important;
}
.kth-lead-submit {
  width: 100%;
  justify-content: center;
  margin-top: 4px;
  font-size: 15px;
}
.kth-lead-modal-note {
  text-align: center;
  font-size: 11px;
  color: #aaa;
  margin: 4px 0 0;
}
.kth-lead-success {
  text-align: center;
  padding: 20px 0;
}
.kth-lead-success-icon {
  font-size: 48px;
  margin-bottom: 12px;
}
.kth-lead-success-title {
  font-size: 20px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 8px;
}
.kth-lead-success-text {
  font-size: 14px;
  color: #666;
  margin: 0;
}

@media (max-width: 768px) {
  .kth-lead-bar { padding: 10px 12px; }
  .kth-lead-bar-text { font-size: 13px; width: 100%; text-align: center; }
  .kth-lead-modal { padding: 28px 20px !important; }
}

/* ============================================
   CONTACT REDESIGN
   ============================================ */

/* ----- Hero Banner ----- */
.contact-hero {
  background: linear-gradient(135deg, #001a4d 0%, #002a6e 40%, #003d99 70%, #0066ff 100%);
  padding: 160px 0 100px;
  position: relative;
  overflow: hidden;
  margin-top: -1px;
}
.contact-hero-bg {
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.5;
}
.contact-hero-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.contact-hero-particles span {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(255,255,255,0.15);
  border-radius: 50%;
  animation: contactFloat 8s infinite ease-in-out;
}
.contact-hero-particles span:nth-child(1) { left: 10%; top: 20%; animation-delay: 0s; }
.contact-hero-particles span:nth-child(2) { left: 25%; top: 60%; animation-delay: 1.2s; width: 6px; height: 6px; }
.contact-hero-particles span:nth-child(3) { left: 40%; top: 10%; animation-delay: 2.5s; }
.contact-hero-particles span:nth-child(4) { left: 60%; top: 70%; animation-delay: 0.8s; width: 3px; height: 3px; }
.contact-hero-particles span:nth-child(5) { left: 75%; top: 30%; animation-delay: 3.2s; }
.contact-hero-particles span:nth-child(6) { left: 85%; top: 80%; animation-delay: 1.8s; width: 5px; height: 5px; }
.contact-hero-particles span:nth-child(7) { left: 15%; top: 85%; animation-delay: 4s; }
.contact-hero-particles span:nth-child(8) { left: 50%; top: 45%; animation-delay: 0.5s; width: 3px; height: 3px; }
.contact-hero-particles span:nth-child(9) { left: 90%; top: 15%; animation-delay: 2s; }
.contact-hero-particles span:nth-child(10) { left: 35%; top: 90%; animation-delay: 3.8s; }

@keyframes contactFloat {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.15; }
  50% { transform: translateY(-30px) scale(1.5); opacity: 0.4; }
}

.contact-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
}
.contact-hero-en {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.5);
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 6px 20px;
  border-radius: 20px;
  backdrop-filter: blur(4px);
}
.contact-hero h1 {
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 800;
  color: #fff;
  margin-bottom: 14px;
  letter-spacing: -0.5px;
}
.contact-hero h1::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: var(--kth-primary);
  margin: 16px auto 0;
  border-radius: 2px;
}
.contact-hero p {
  color: rgba(255,255,255,0.6);
  font-size: 16px;
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ----- Quick Contact Bar ----- */
.contact-quick-bar {
  background: #fff;
  border-bottom: 1px solid var(--kth-border);
  padding: 24px 0;
}
.contact-quick-bar .uk-container { max-width: 1080px; }
.contact-quick-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.contact-quick-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 12px;
  background: #f8faff;
  transition: all 0.3s ease;
  text-decoration: none;
}
.contact-quick-item:hover {
  background: var(--kth-primary-light);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,102,255,0.08);
}
.contact-quick-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-quick-icon svg { width: 20px; height: 20px; }
.contact-quick-body { flex: 1; min-width: 0; }
.contact-quick-label {
  font-size: 12px;
  color: #999;
  margin-bottom: 1px;
}
.contact-quick-value {
  font-size: 13px;
  font-weight: 600;
  color: #333;
  text-decoration: none;
}

/* ----- Main Contact Section ----- */
.contact-main-section {
  padding: 80px 0;
  background: var(--kth-bg-light);
}
.contact-main-section .uk-container { max-width: 1080px; }

/* ----- Contact Form ----- */
.contact-form-card {
  background: #fff;
  border: 1px solid var(--kth-border);
  border-radius: 20px;
  padding: 40px 36px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.04);
}
.contact-form-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--kth-dark);
  margin: 0 0 4px;
}
.contact-form-desc {
  font-size: 13px;
  color: #888;
  margin-bottom: 24px;
}
.contact-input {
  width: 100%;
  padding: 12px 16px !important;
  border: 1.5px solid var(--kth-border) !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  transition: all 0.25s ease !important;
  background: #fafbfc !important;
  color: #333 !important;
}
.contact-input:focus {
  border-color: var(--kth-primary) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(0,102,255,0.08) !important;
}
.contact-input::placeholder { color: #b0b8c4; font-size: 13px; }
textarea.contact-input { min-height: 120px; resize: vertical; }
.contact-submit {
  width: 100%;
  padding: 14px !important;
  border-radius: 12px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}
.contact-submit svg { transition: transform 0.25s ease; }
.contact-submit:hover svg { transform: translateX(4px); }
.contact-form-note {
  font-size: 11px;
  color: #bbb;
  text-align: center;
  margin-top: 14px;
}

/* ----- Contact Info Cards ----- */
.contact-info-title {
  font-size: 28px;
  font-weight: 800;
  color: var(--kth-dark);
  margin: 0 0 6px;
}
.contact-info-desc {
  font-size: 14px;
  color: #888;
  margin-bottom: 32px;
  line-height: 1.6;
}
.contact-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.contact-info-card {
  background: #fff;
  border: 1px solid var(--kth-border);
  border-radius: 16px;
  padding: 24px;
  transition: all 0.35s cubic-bezier(.4,0,.2,1);
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.contact-info-card:hover {
  border-color: transparent;
  box-shadow: 0 8px 28px rgba(0,0,0,0.08);
  transform: translateY(-4px);
}
.contact-info-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-info-card-icon svg { width: 22px; height: 22px; }
.contact-info-card-body { flex: 1; min-width: 0; }
.contact-info-card-label {
  font-size: 14px;
  font-weight: 700;
  color: #333;
  margin: 0 0 4px;
}
.contact-info-card-text {
  font-size: 13px;
  color: #666;
  margin: 0;
  line-height: 1.5;
}
.contact-info-card-link {
  font-size: 13px;
  color: var(--kth-primary);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s;
  word-break: break-all;
}
.contact-info-card-link:hover {
  color: var(--kth-primary-dark);
  text-decoration: underline;
}

/* ----- Working Hours ----- */
.contact-hours {
  margin-top: 24px;
  background: #f8faff;
  border: 1px solid var(--kth-border);
  border-radius: 14px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.contact-hours-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--kth-primary-light);
  color: var(--kth-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-hours-text {
  font-size: 13px;
  color: #555;
  line-height: 1.6;
}
.contact-hours-text strong { color: var(--kth-dark); }

/* ----- Map Section ----- */
.contact-map-section {
  padding: 80px 0;
  background: #fff;
}
.contact-map-section .uk-container { max-width: 1080px; }
.contact-map-card {
  background: linear-gradient(135deg, #f8faff, #eef4fe);
  border: 1px solid var(--kth-border);
  border-radius: 20px;
  padding: 50px 40px;
  text-align: center;
  overflow: hidden;
  position: relative;
}
.contact-map-card::before {
  content: '';
  position: absolute;
  top: -60%; right: -30%;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(0,102,255,0.04) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.contact-map-icon {
  width: 64px; height: 64px;
  border-radius: 18px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  position: relative;
  z-index: 1;
}
.contact-map-icon svg { width: 30px; height: 30px; }
.contact-map-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--kth-dark);
  margin-bottom: 6px;
  position: relative;
  z-index: 1;
}
.contact-map-addr {
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}
.contact-map-directions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--kth-primary);
  text-decoration: none;
  padding: 8px 20px;
  border: 1.5px solid rgba(0,102,255,0.2);
  border-radius: 30px;
  transition: all 0.3s;
  position: relative;
  z-index: 1;
}
.contact-map-directions:hover {
  background: var(--kth-primary);
  color: #fff;
  border-color: var(--kth-primary);
  text-decoration: none;
}
.contact-map-directions svg { width: 16px; height: 16px; }

/* ----- FAQ ----- */
.contact-faq-section {
  padding: 80px 0;
  background: var(--kth-bg-light);
}
.contact-faq-section .uk-container { max-width: 800px; }
.contact-faq-list {
  max-width: 720px;
  margin: 0 auto;
}
.contact-faq-item {
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--kth-border);
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color 0.3s ease;
}
.contact-faq-item:hover {
  border-color: rgba(0,102,255,0.15);
}
.contact-faq-question {
  padding: 18px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  color: #222;
  transition: background 0.2s;
}
.contact-faq-question:hover { background: #f8faff; }
.contact-faq-question svg {
  width: 18px; height: 18px;
  color: #999;
  transition: transform 0.2s;
  flex-shrink: 0;
}
.contact-faq-item.uk-open .contact-faq-question svg {
  transform: rotate(180deg);
  color: var(--kth-primary);
}
.contact-faq-answer {
  padding: 0 24px 22px;
  font-size: 14px;
  color: #666;
  line-height: 1.7;
}

/* ----- Responsive ----- */
@media (max-width: 960px) {
  .contact-hero { padding: 120px 0 60px; }
  .contact-info-grid { grid-template-columns: 1fr; }
  .contact-quick-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-form-card { padding: 30px 24px; }
  .contact-main-section { padding: 60px 0; }
  .contact-map-section { padding: 60px 0; }
  .contact-faq-section { padding: 60px 0; }
}
@media (max-width: 768px) {
  .contact-quick-grid { grid-template-columns: 1fr 1fr; }
  .contact-quick-item { padding: 12px 14px; }
  .contact-info-wrap { padding-right: 0; }
  .contact-hours { flex-wrap: wrap; }
}
@media (max-width: 640px) {
  .contact-quick-grid { grid-template-columns: 1fr; }
  .contact-info-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .contact-map-card { padding: 30px 20px; }
}

/* ============================================
   CASE IMAGE FIXES - wider, better height
   ============================================ */
.case-visual img,
.cas-card-image img,
.case-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.case-visual {
  height: 480px;
  overflow: hidden;
}
.cas-card-image,
.case-card-image {
  height: 320px;
  overflow: hidden;
  position: relative;
}

/* ============================================
   CASE IMAGES - WIDER & BETTER ASPECT RATIO
   ============================================ */
/* All case visual containers */
.case-visual,
[class*="case-visual"],
[class*="cas-card"],
[class*="case-card"],
[class*="cas-grid"] > * {
  position: relative;
}

.case-visual img,
[class*="case-visual"] img,
[class*="cas-card"] img,
[class*="case-card"] img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  position: absolute;
  top: 0;
  left: 0;
}

.case-visual {
  height: 480px;
}

/* Case grid items */
.cas-grid-item,
.case-grid-item,
[class*="cas-grid"] > div,
[class*="case-grid"] > div {
  display: flex;
  flex-direction: column;
}

/* Responsive fixes */
@media (max-width: 960px) {
  .case-visual { height: 360px; }
}
@media (max-width: 640px) {
  .case-visual { height: 260px; }
}

/* Case slider images */
.uk-slider-items .case-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Ensure all images in case sections have proper display */
[class*="case"] img[src*=".jpg"],
[class*="case"] img[src*=".png"],
[class*="cas"] img[src*=".jpg"],
[class*="cas"] img[src*=".png"] {
  max-width: 100%;
}
/* index css */

 * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
      background: #f5f6f8;
      color: #1a1a2e;
      -webkit-font-smoothing: antialiased;
      line-height: 1.6;
    }
    a { text-decoration: none; color: inherit; }
    a:hover { text-decoration: none; }
    img { max-width: 100%; }

    .hw-wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

    /* ─── Header ─── */
    .hw-header {
      background: #fff;
      border-bottom: 1px solid #e8e8e8;
      padding: 0 20px;
      position: sticky;
      top: 0;
      z-index: 100;
    }
    .hw-header-inner {
      max-width: 1120px; margin: 0 auto;
      display: flex; align-items: center; justify-content: space-between;
      height: 56px;
    }
    .hw-logo {
      display: flex; align-items: center; gap: 10px;
      font-weight: 700; font-size: 18px; color: #0066ff;
    }
    .hw-logo span { color: #1a1a2e; font-weight: 600; font-size: 14px; }
    .hw-nav { display: flex; gap: 2px; }
    .hw-nav a {
      padding: 6px 16px; font-size: 13px; color: #555;
      border-radius: 4px; transition: all 0.2s;
    }
    .hw-nav a:hover, .hw-nav a.active { color: #0066ff; background: #f0f5ff; }
    .hw-header-right {
      display: flex; align-items: center; gap: 16px;
      font-size: 12px; color: #888;
    }
    .hw-header-right a { color: #888; }
    .hw-header-right a:hover { color: #0066ff; }
    .hw-lang-btn {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 12px;
      color: #888;
      cursor: pointer;
      padding: 4px 8px;
      border-radius: 4px;
      transition: all 0.2s;
      background: transparent;
      border: 1px solid transparent;
    }
    .hw-lang-btn:hover { color: #0066ff; border-color: #e0e0e0; background: #f8f9fa; }
    .hw-lang-btn .arrow {
      font-size: 8px;
      transition: transform 0.2s;
    }
    .hw-lang-btn[aria-expanded="true"] .arrow {
      transform: rotate(180deg);
    }
    .hw-lang-dropdown {
      min-width: 120px;
      padding: 6px;
    }
    .hw-lang-dropdown a {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 14px;
      font-size: 13px;
      color: #555;
      border-radius: 4px;
      transition: all 0.15s;
    }
    .hw-lang-dropdown a:hover { background: #f0f5ff; color: #0066ff; text-decoration: none; }
    .hw-lang-dropdown a.active { background: #e8f0fe; color: #0066ff; font-weight: 600; }

    /* ─── Hero ─── */
    .hw-hero {
      background: linear-gradient(135deg, #0a1628 0%, #1a2744 100%);
      padding: 64px 0; margin-bottom: 24px;
      position: relative;
      overflow: hidden;
    }
    /* 背景图：替换 url 为实际工厂/产线图，建议 1920px 宽，opacity 0.1~0.2 */
    .hw-hero-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      opacity: 0.12;
      background: url('assets/images/hero/hero-banner.jpg') center/cover no-repeat;
    }
    .hw-hero-inner { position: relative; z-index: 1; }
    .hw-hero-inner {
      max-width: 1120px; margin: 0 auto; padding: 0 20px;
      display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
    }
    .hw-hero-text h1 {
      font-size: clamp(28px, 3vw, 38px); font-weight: 300;
      color: #fff; line-height: 1.3; margin-bottom: 16px;
    }
    .hw-hero-text h1 strong {
      font-weight: 600;
      background: linear-gradient(135deg, #60a5fa, #93c5fd);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .hw-hero-text p {
      font-size: 14px; color: rgba(255,255,255,0.55);
      line-height: 1.8; margin-bottom: 28px; max-width: 440px;
    }
    .hw-hero-actions { display: flex; gap: 12px; }
    .hw-btn {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 10px 28px; border-radius: 4px;
      font-size: 13px; font-weight: 500; cursor: pointer;
      transition: all 0.2s; border: none;
    }
    .hw-btn-primary { background: #0066ff; color: #fff; }
    .hw-btn-primary:hover { background: #0052cc; }
    .hw-btn-outline {
      background: transparent; color: rgba(255,255,255,0.7);
      border: 1px solid rgba(255,255,255,0.2);
    }
    .hw-btn-outline:hover { border-color: rgba(255,255,255,0.5); color: #fff; }
    .hw-hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .hw-hero-stat {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 6px; padding: 20px 24px;
    }
    .hw-hero-stat-num {
      font-size: 28px; font-weight: 300; color: #60a5fa;
      line-height: 1; margin-bottom: 4px;
    }
    .hw-hero-stat-label {
      font-size: 12px; color: rgba(255,255,255,0.4); line-height: 1.4;
    }

    /* ─── Section ─── */
    .hw-section { margin-bottom: 24px; }
    .hw-section-title {
      display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px;
    }
    .hw-section-title h2 { font-size: 20px; font-weight: 600; color: #1a1a2e; }
    .hw-section-title .en {
      font-size: 12px; color: #bbb; text-transform: uppercase; letter-spacing: 1px;
    }
    .hw-section-more { margin-left: auto; font-size: 12px; color: #0066ff; }

    /* ─── Card Grid ─── */
    .hw-grid { display: grid; gap: 12px; }
    .hw-grid-2 { grid-template-columns: 1fr 1fr; }
    .hw-grid-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }

    .hw-card {
      background: #fff; border: 1px solid #e8e8e8;
      border-radius: 6px; transition: box-shadow 0.2s;
    }
    .hw-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.04); }
    .hw-card-body { padding: 24px; }

    /* ─── Solution Cards (图片+文字左右分栏) ─── */
    .hw-sol-card {
      display: grid;
      grid-template-columns: 2fr 1.5fr;
      border-radius: 8px;
      overflow: hidden;
      border: 1px solid #e8e8e8;
      transition: box-shadow 0.2s;
    }
    .hw-sol-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.06); }
    /* 左侧场景图区 */
    .hw-sol-visual {
      position: relative;
      min-height: 260px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .hw-sol-visual img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .hw-sol-visual .uk-slider-container {
      position: absolute;
      inset: 0;
    }
    .hw-sol-visual .uk-slider-items > li {
      width: 100%;
      height: 100%;
    }
    .hw-sol-visual .uk-slider,
    .hw-sol-visual .uk-slider-container,
    .hw-sol-visual .uk-slider-items {
      height: 100%;
    }
    /* 右侧内容区 */
    .hw-sol-body {
      padding: 32px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .hw-sol-body .tag {
      font-size: 11px;
      font-weight: 600;
      color: #0066ff;
      margin-bottom: 8px;
    }
    .hw-sol-body h3 {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 8px;
    }
    .hw-sol-body p {
      font-size: 13px;
      color: #666;
      line-height: 1.7;
      margin-bottom: 16px;
    }
    .hw-sol-body ul {
      list-style: none;
      padding: 0;
      margin: 0 0 12px;
    }
    .hw-sol-body ul li {
      font-size: 13px;
      color: #555;
      padding: 5px 0;
      border-bottom: 1px solid #f0f0f0;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .hw-sol-body ul li:last-child { border-bottom: none; }
    .hw-sol-body ul li::before {
      content: "";
      width: 4px;
      height: 4px;
      background: #0066ff;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .hw-sol-body .specs {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .hw-sol-body .specs span {
      font-size: 11px;
      color: #888;
      background: #f5f6f8;
      padding: 3px 10px;
      border-radius: 3px;
    }
    /* 非标定制 - 深色右侧 */
    .hw-sol-card.dark .hw-sol-body {
      background: #0a1628;
    }
    .hw-sol-card.dark .hw-sol-body h3 { color: #fff; }
    .hw-sol-card.dark .hw-sol-body p { color: rgba(255,255,255,0.5); }
    .hw-sol-card.dark .hw-sol-body ul li { color: rgba(255,255,255,0.55); border-color: rgba(255,255,255,0.06); }
    .hw-sol-card.dark .hw-sol-body .tag { color: #60a5fa; }
    .hw-sol-card.dark .hw-sol-body ul li::before { background: #60a5fa; }
    .hw-sol-card.dark .hw-sol-body .specs span { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.5); }
    @media (max-width: 720px) {
      .hw-sol-card { grid-template-columns: 1fr; }
      .hw-sol-visual { min-height: 180px; }
      .hw-sol-body { padding: 24px; }
    }

    /* ─── Case Overlay Cards ─── */
    .hw-case-slider { position: relative; }
    .hw-case-overlay {
      position: relative;
      height: 380px;
      border-radius: 6px;
      overflow: hidden;
    }
    .hw-case-overlay video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 0;
    }

    .overlay-mask {
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.55) 35%, rgba(0,0,0,0.2) 65%, transparent 100%);
      transition: opacity 0.3s;
    }
    .hw-case-overlay:hover .overlay-mask {
      opacity: 0.8;
    }
    .overlay-content {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 2;
      padding: 32px 24px 24px;
      color: #fff;
    }
    .overlay-content::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 100%;
      background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.15) 60%, transparent 100%);
      z-index: -1;
      pointer-events: none;
      border-radius: 0 0 6px 6px;
    }
    .overlay-content h3 {
      font-size: 17px;
      font-weight: 600;
      margin-bottom: 2px;
    }
    .overlay-content .loc {
      font-size: 12px;
      color: rgba(255,255,255,0.7);
      margin-bottom: 8px;
    }
    .overlay-content p {
      font-size: 13px;
      color: rgba(255,255,255,0.85);
      line-height: 1.5;
      margin-bottom: 12px;
      max-width: 240px;
    }
    .overlay-data {
      display: flex;
      gap: 20px;
    }
    .overlay-data div strong {
      display: block;
      font-size: 20px;
      font-weight: 600;
      color: #60a5fa;
      line-height: 1;
    }
    .overlay-data div span {
      font-size: 10px;
      color: rgba(255,255,255,0.6);
    }

    /* ─── Slider Nav ─── */
    .hw-slider-nav {
      display: flex; justify-content: center; gap: 8px; margin-top: 16px;
    }
    .hw-slider-nav li { list-style: none; }
    .hw-slider-nav li a {
      display: block; width: 8px; height: 8px;
      border-radius: 50%; background: #d0d0d0;
      text-indent: -999px; overflow: hidden;
      transition: background 0.2s;
    }
    .hw-slider-nav li.uk-active a { background: #0066ff; }

    .hw-slider-arrow {
      position: absolute;
      top: 50%; transform: translateY(-50%);
      width: 36px; height: 36px;
      background: #fff;
      border: 1px solid #e8e8e8;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s;
      z-index: 10;
      font-size: 16px;
      color: #555;
    }
    .hw-slider-arrow:hover {
      background: #f0f5ff;
      border-color: #0066ff;
      color: #0066ff;
    }
    .hw-slider-prev { left: -16px; }
    .hw-slider-next { right: -16px; }

    /* ─── Global Map ─── */
    .hw-global {
      border-radius: 12px;
      padding: 0;
      position: relative;
      overflow: hidden;
      border: 1px solid #e8ecf0;
    }
    #hw-world-map {
      width: 100%;
      height: 440px;
      z-index: 1;
    }
    .hw-global-content {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      gap: 32px;
    }
    /* ── 标题行 ── */
    .hw-global-header {
      padding: 32px 32px 0;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 16px;
      flex-wrap: wrap;
    }
    .hw-global-header h3 {
      font-size: clamp(20px, 2.2vw, 26px);
      font-weight: 300;
      color: #1a1a2e;
      margin: 0;
    }
    .hw-global-header h3 strong {
      font-weight: 700;
      color: #0066ff;
    }
    .hw-global-header p {
      font-size: 13px;
      color: #999;
      margin: 4px 0 0;
    }
    .hw-global-header-stats {
      display: flex;
      gap: 20px;
      flex-shrink: 0;
    }
    .hw-global-header-stat {
      text-align: center;
    }
    .hw-global-header-stat-num {
      font-size: 20px;
      font-weight: 700;
      color: #0066ff;
      line-height: 1;
      margin-bottom: 2px;
    }
    .hw-global-header-stat-label {
      font-size: 11px;
      color: #999;
      white-space: nowrap;
    }
    @media (max-width: 800px) {
      .hw-global { padding: 0; }
      #hw-world-map { height: 320px; }
      .hw-global-header {
        flex-direction: column;
        align-items: flex-start;
      }

    }

    /* ─── News ─── */
    .hw-news-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }
    .hw-news-card {
      background: #fff;
      border: 1px solid #e8e8e8;
      border-radius: 6px;
      overflow: hidden;
      transition: all 0.25s;
    }
    .hw-news-card:hover {
      box-shadow: 0 4px 20px rgba(0,0,0,0.05);
      transform: translateY(-2px);
    }
    .hw-news-img {
      height: 160px;
      background-size: cover;
      background-position: center;
      position: relative;
    }
    .hw-news-tag {
      position: absolute;
      top: 10px;
      left: 10px;
      font-size: 10px;
      font-weight: 600;
      color: #fff;
      background: #0066ff;
      padding: 2px 10px;
      border-radius: 3px;
    }
    .hw-news-body {
      padding: 16px 18px 18px;
    }
    .hw-news-date {
      font-size: 11px;
      color: #aaa;
      margin-bottom: 6px;
    }
    .hw-news-body h4 {
      font-size: 14px;
      font-weight: 600;
      color: #1a1a2e;
      margin-bottom: 6px;
      line-height: 1.4;
    }
    .hw-news-body p {
      font-size: 12px;
      color: #888;
      line-height: 1.6;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    @media (max-width: 720px) {
      .hw-news-grid { grid-template-columns: 1fr; }
    }

    /* ─── CTA ─── */
    .hw-cta {
      background: #fff; border: 1px solid #e8e8e8; border-radius: 6px;
      padding: 32px 40px;
      display: flex; align-items: center; justify-content: space-between;
      gap: 24px; flex-wrap: wrap;
    }
    .hw-cta h3 { font-size: 18px; font-weight: 600; margin-bottom: 4px; }
    .hw-cta p { font-size: 13px; color: #888; }
    .hw-cta-actions { display: flex; gap: 10px; }

    /* ─── Footer ─── */
    .hw-footer {
      background: #fff; border-top: 1px solid #e8e8e8;
      padding: 32px 0 24px; margin-top: 24px;
    }
    .hw-footer-grid {
      display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 32px; max-width: 1120px; margin: 0 auto; padding: 0 20px;
    }
    .hw-footer h4 { font-size: 13px; font-weight: 600; margin-bottom: 12px; color: #1a1a2e; }
    .hw-footer p { font-size: 12px; color: #888; line-height: 1.8; }
    .hw-footer a {
      display: block; font-size: 12px; color: #666; line-height: 2.2;
      transition: color 0.2s;
    }
    .hw-footer a:hover { color: #0066ff; }
    .hw-footer-bottom {
      max-width: 1120px; margin: 20px auto 0;
      padding: 16px 20px 0; border-top: 1px solid #f0f0f0;
      display: flex; justify-content: space-between;
      font-size: 11px; color: #bbb;
    }
    .hw-footer-bottom a { display: inline; color: #bbb; font-size: 11px; }

    /* ─── Responsive ─── */
    @media (max-width: 960px) {
      .hw-hero-inner { grid-template-columns: 1fr; gap: 32px; }
      .hw-grid-4 { grid-template-columns: 1fr 1fr; }
      .hw-footer-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 640px) {
      .hw-grid-4, .hw-grid-2 { grid-template-columns: 1fr; }
      .hw-hero-stats { grid-template-columns: 1fr; }
      .hw-hero { padding: 40px 0; }
      .hw-header-inner { flex-wrap: wrap; height: auto; padding: 10px 0; gap: 8px; }
      .hw-nav { order: 3; width: 100%; justify-content: center; }
      .hw-cta { flex-direction: column; text-align: center; }
      .hw-footer-grid { grid-template-columns: 1fr; }
      .hw-slider-prev { left: 4px; }
      .hw-slider-next { right: 4px; }
    }


 /* ─── Page Banner ─── */
    .hw-page-banner {
      background: linear-gradient(135deg, #0a1628 0%, #1a2744 100%);
      padding: 48px 0;
      margin-bottom: 24px;
      position: relative;
      overflow: hidden;
    }
    .hw-page-banner-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      opacity: 0.10;
      background: url('assets/images/solutions/banner-bg.jpg') center/cover no-repeat;
    }
    .hw-page-banner-inner {
      max-width: 1120px; margin: 0 auto; padding: 0 20px;
      position: relative; z-index: 1;
    }
    .hw-page-banner h1 {
      font-size: clamp(24px, 3.2vw, 36px);
      font-weight: 300;
      color: #fff;
      margin-bottom: 6px;
    }
    .hw-page-banner h1 strong {
      font-weight: 600;
      background: linear-gradient(135deg, #60a5fa, #93c5fd);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .hw-page-banner .en {
      font-size: 13px;
      color: rgba(255,255,255,0.35);
      letter-spacing: 3px;
      text-transform: uppercase;
    }
    .hw-page-banner p {
      font-size: 14px;
      color: rgba(255,255,255,0.5);
      max-width: 500px;
      margin-top: 12px;
      line-height: 1.8;
    }

    /* ─── Section ─── */
    .hw-section { margin-bottom: 24px; }
    .hw-section-title {
      display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px;
    }
    .hw-section-title h2 { font-size: 20px; font-weight: 600; color: #1a1a2e; }
    .hw-section-title .en {
      font-size: 12px; color: #bbb; text-transform: uppercase; letter-spacing: 1px;
    }
    .hw-section-more { margin-left: auto; font-size: 12px; color: #0066ff; }

    /* ─── Card Grid ─── */
    .hw-grid { display: grid; gap: 12px; }
    .hw-grid-2 { grid-template-columns: 1fr 1fr; }

    /* ─── Solution Cards ─── */
    .hw-sol-card {
      display: grid;
      grid-template-columns: 2fr 1.5fr;
      border-radius: 8px;
      overflow: hidden;
      border: 1px solid #e8e8e8;
      transition: box-shadow 0.2s;
    }
    .hw-sol-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.06); }
    .hw-sol-visual {
      position: relative;
      min-height: 260px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .hw-sol-visual img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .hw-sol-visual .uk-slider-container {
      position: absolute;
      inset: 0;
    }
    .hw-sol-visual .uk-slider-items > li {
      width: 100%;
      height: 100%;
    }
    .hw-sol-visual .uk-slider,
    .hw-sol-visual .uk-slider-container,
    .hw-sol-visual .uk-slider-items {
      height: 100%;
    }
    .hw-sol-body {
      padding: 32px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .hw-sol-body .tag {
      font-size: 11px;
      font-weight: 600;
      color: #0066ff;
      margin-bottom: 8px;
    }
    .hw-sol-body h3 {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 8px;
    }
    .hw-sol-body p {
      font-size: 13px;
      color: #666;
      line-height: 1.7;
      margin-bottom: 16px;
    }
    .hw-sol-body ul {
      list-style: none;
      padding: 0;
      margin: 0 0 12px;
    }
    .hw-sol-body ul li {
      font-size: 13px;
      color: #555;
      padding: 5px 0;
      border-bottom: 1px solid #f0f0f0;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .hw-sol-body ul li:last-child { border-bottom: none; }
    .hw-sol-body ul li::before {
      content: "";
      width: 4px;
      height: 4px;
      background: #0066ff;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .hw-sol-body .specs {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .hw-sol-body .specs span {
      font-size: 11px;
      color: #888;
      background: #f5f6f8;
      padding: 3px 10px;
      border-radius: 3px;
    }
    .hw-sol-card.dark .hw-sol-body {
      background: #0a1628;
    }
    .hw-sol-card.dark .hw-sol-body h3 { color: #fff; }
    .hw-sol-card.dark .hw-sol-body p { color: rgba(255,255,255,0.5); }
    .hw-sol-card.dark .hw-sol-body ul li { color: rgba(255,255,255,0.55); border-color: rgba(255,255,255,0.06); }
    .hw-sol-card.dark .hw-sol-body .tag { color: #60a5fa; }
    .hw-sol-card.dark .hw-sol-body ul li::before { background: #60a5fa; }
    .hw-sol-card.dark .hw-sol-body .specs span { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.5); }
    @media (max-width: 720px) {
      .hw-sol-card { grid-template-columns: 1fr; }
      .hw-sol-visual { min-height: 180px; }
      .hw-sol-body { padding: 24px; }
    }

    /* ─── Industry Applications ─── */
    .hw-ind-list {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .hw-ind-item {
      display: grid;
      grid-template-columns: 1fr 1.3fr;
      background: #fff;
      border: 1px solid #e8e8e8;
      border-radius: 8px;
      overflow: hidden;
      transition: box-shadow 0.25s;
    }
    .hw-ind-item:hover {
      box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    }
    .hw-ind-item:nth-child(even) {
      grid-template-columns: 1.3fr 1fr;
      direction: rtl;
    }
    .hw-ind-item:nth-child(even) > * {
      direction: ltr;
    }
    .hw-ind-visual {
      min-height: 200px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }
    .hw-ind-visual img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .hw-ind-visual .ind-placeholder {
      text-align: center;
    }
    .hw-ind-visual .ind-placeholder .emoji {
      font-size: 38px;
      display: block;
      margin-bottom: 4px;
    }
    .hw-ind-visual .ind-placeholder .hint {
      font-size: 10px;
      opacity: 0.4;
      letter-spacing: 1px;
    }
    .hw-ind-info {
      padding: 28px 32px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .hw-ind-info h4 {
      font-size: 16px;
      font-weight: 600;
      color: #1a1a2e;
      margin-bottom: 2px;
    }
    .hw-ind-info .ind-sub {
      font-size: 11px;
      color: #bbb;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 10px;
    }
    .hw-ind-info p {
      font-size: 13px;
      color: #666;
      line-height: 1.7;
      margin-bottom: 14px;
    }
    .hw-ind-info .ind-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .hw-ind-info .ind-tags span {
      font-size: 10px;
      color: #0066ff;
      background: #eef3ff;
      padding: 3px 12px;
      border-radius: 10px;
    }
    @media (max-width: 800px) {
      .hw-ind-item,
      .hw-ind-item:nth-child(even) {
        grid-template-columns: 1fr;
        direction: ltr;
      }
      .hw-ind-visual { min-height: 160px; }
      .hw-ind-info { padding: 20px 24px; }
    }

    /* ─── Tech Specs Table ─── */    /* ─── Tech Specs Table ─── */
    .hw-tech-table-wrap {
      background: #fff;
      border: 1px solid #e8e8e8;
      border-radius: 6px;
      overflow: hidden;
    }
    .hw-tech-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
    }
    .hw-tech-table thead th {
      background: #0a1628;
      color: #fff;
      font-weight: 600;
      padding: 14px 18px;
      text-align: left;
      font-size: 13px;
    }
    .hw-tech-table tbody td {
      padding: 12px 18px;
      border-bottom: 1px solid #f0f0f0;
      color: #555;
    }
    .hw-tech-table tbody tr:last-child td { border-bottom: none; }
    .hw-tech-table tbody td:first-child {
      font-weight: 600;
      color: #1a1a2e;
      white-space: nowrap;
      width: 160px;
      background: #fafbfc;
    }
    .hw-tech-table tbody tr:hover td { background: #f5f8ff; }

    /* ─── Workflow Steps ─── */
    .hw-flow-steps {
      background: #fff;
      border: 1px solid #e8e8e8;
      border-radius: 6px;
      padding: 32px;
    }
    .hw-flow-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 16px;
      margin-top: 8px;
    }
    .hw-flow-step {
      text-align: center;
      padding: 20px 12px;
      background: #fafbfc;
      border-radius: 6px;
      border: 1px solid #f0f0f0;
      transition: all 0.2s;
      position: relative;
    }
    .hw-flow-step:hover {
      border-color: #0066ff;
      box-shadow: 0 2px 12px rgba(0,102,255,0.06);
    }
    .hw-flow-step .step-num {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: #0066ff;
      color: #fff;
      font-size: 13px;
      font-weight: 600;
      margin: 0 auto 10px;
    }
    .hw-flow-step h4 {
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 4px;
    }
    .hw-flow-step p {
      font-size: 12px;
      color: #888;
      line-height: 1.5;
    }
    .hw-flow-step .flow-arrow {
      position: absolute;
      right: -12px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 14px;
      color: #ddd;
    }
    .hw-flow-step:last-child .flow-arrow { display: none; }
    @media (max-width: 800px) {
      .hw-flow-grid { grid-template-columns: repeat(3, 1fr); }
      .hw-flow-step .flow-arrow { display: none; }
    }
    @media (max-width: 540px) {
      .hw-flow-grid { grid-template-columns: 1fr 1fr; }
    }

    /* ─── CTA ─── */
    .hw-cta {
      background: #fff; border: 1px solid #e8e8e8; border-radius: 6px;
      padding: 32px 40px;
      display: flex; align-items: center; justify-content: space-between;
      gap: 24px; flex-wrap: wrap;
    }
    .hw-cta h3 { font-size: 18px; font-weight: 600; margin-bottom: 4px; }
    .hw-cta p { font-size: 13px; color: #888; }
    .hw-cta-actions { display: flex; gap: 10px; }
    .hw-btn {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 10px 28px; border-radius: 4px;
      font-size: 13px; font-weight: 500; cursor: pointer;
      transition: all 0.2s; border: none;
    }
    .hw-btn-primary { background: #0066ff; color: #fff; }
    .hw-btn-primary:hover { background: #0052cc; }
    .hw-btn-outline {
      background: transparent; color: rgba(255,255,255,0.7);
      border: 1px solid rgba(255,255,255,0.2);
    }
    .hw-btn-outline:hover { border-color: rgba(255,255,255,0.5); color: #fff; }
    .hw-btn-ghost {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 10px 28px; border-radius: 4px;
      font-size: 13px; font-weight: 500; cursor: pointer;
      transition: all 0.2s; border: 1px solid #d0d0d0;
      background: transparent; color: #555;
    }
    .hw-btn-ghost:hover { border-color: #0066ff; color: #0066ff; }

    /* ─── FAQ ─── */
    .hw-faq-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      align-items: start;
    }
    @media (max-width: 720px) {
      .hw-faq-list { grid-template-columns: 1fr; }
    }
    .hw-faq-item {
      background: #fff;
      border: 1px solid #e8e8e8;
      border-radius: 6px;
      margin-bottom: 8px;
      overflow: hidden;
    }
    .hw-faq-question {
      padding: 16px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      font-weight: 500;
      font-size: 14px;
      color: #1a1a2e;
      transition: background 0.2s;
    }
    .hw-faq-question:hover { background: #f8faff; }
    .hw-faq-question svg {
      width: 16px;
      height: 16px;
      color: #bbb;
      transition: transform 0.2s;
      flex-shrink: 0;
    }
    .hw-faq-item.uk-open .hw-faq-question svg {
      transform: rotate(180deg);
      color: #0066ff;
    }
    .hw-faq-answer {
      padding: 0 20px 18px;
      font-size: 13px;
      color: #666;
      line-height: 1.7;
    }
    .hw-about-hero {
      background: linear-gradient(135deg, #0a1628 0%, #1a2744 100%);
      padding: 72px 0 56px;
      margin-bottom: 24px;
      position: relative;
      overflow: hidden;
      text-align: center;
    }
    .hw-about-hero-inner {
      max-width: 1120px;
      margin: 0 auto;
      padding: 0 20px;
      position: relative;
      z-index: 1;
    }
    .hw-about-hero h1 {
      font-size: clamp(32px, 4vw, 44px);
      font-weight: 300;
      color: #fff;
      line-height: 1.3;
      margin-bottom: 8px;
    }
    .hw-about-hero h1 strong {
      font-weight: 600;
      background: linear-gradient(135deg, #60a5fa, #93c5fd);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .hw-about-hero .en-sub {
      font-size: 13px;
      color: rgba(255,255,255,0.35);
      text-transform: uppercase;
      letter-spacing: 4px;
      margin-bottom: 20px;
    }
    .hw-about-hero p {
      font-size: 14px;
      color: rgba(255,255,255,0.55);
      max-width: 560px;
      margin: 0 auto;
      line-height: 1.8;
    }

    /* ─── Section ─── */
    .hw-section { margin-bottom: 24px; }
    .hw-section-title {
      display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px;
    }
    .hw-section-title h2 { font-size: 20px; font-weight: 600; color: #1a1a2e; }
    .hw-section-title .en {
      font-size: 12px; color: #bbb; text-transform: uppercase; letter-spacing: 1px;
    }

    /* ─── Company Intro ─── */
    .hw-intro-card {
      background: #fff;
      border: 1px solid #e8e8e8;
      border-radius: 6px;
      padding: 40px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
      align-items: center;
    }
    .hw-intro-text h3 {
      font-size: 22px;
      font-weight: 600;
      margin-bottom: 12px;
      color: #1a1a2e;
    }
    .hw-intro-text h3 span {
      color: #0066ff;
    }
    .hw-intro-text p {
      font-size: 13px;
      color: #666;
      line-height: 1.9;
      margin-bottom: 12px;
    }
    .hw-intro-text p:last-child { margin-bottom: 0; }
    .hw-intro-visual {
      position: relative;
      border-radius: 6px;
      overflow: hidden;
      background: linear-gradient(135deg, #e8f0fe 0%, #d0e2fc 50%, #b8d4fa 100%);
    }
    .hw-intro-visual img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* ─── Stats Bar ─── */
    .hw-stats-bar {
      background: linear-gradient(135deg, #0a1628 0%, #1a2744 100%);
      border-radius: 6px;
      padding: 32px 40px;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 16px;
    }
    .hw-stat-item {
      text-align: center;
      border-right: 1px solid rgba(255,255,255,0.08);
      padding: 0 12px;
    }
    .hw-stat-item:last-child { border-right: none; }
    .hw-stat-item-num {
      font-size: 30px;
      font-weight: 300;
      color: #60a5fa;
      line-height: 1;
      margin-bottom: 6px;
    }
    .hw-stat-item-num .small {
      font-size: 14px;
      font-weight: 300;
    }
    .hw-stat-item-label {
      font-size: 12px;
      color: rgba(255,255,255,0.4);
      line-height: 1.4;
    }

    /* ─── Timeline ─── */
    .hw-timeline {
      position: relative;
      padding: 0;
      margin: 0;
    }
    .hw-timeline::before {
      content: '';
      position: absolute;
      left: 50%;
      top: 0;
      bottom: 0;
      width: 2px;
      background: #d0d8e6;
      transform: translateX(-50%);
    }
    .hw-timeline-item {
      display: flex;
      align-items: flex-start;
      margin-bottom: 20px;
      position: relative;
    }
    .hw-timeline-item:last-child { margin-bottom: 0; }
    .hw-timeline-item.left { flex-direction: row; }
    .hw-timeline-item.right { flex-direction: row-reverse; }
    .hw-timeline-content {
      width: calc(50% - 32px);
      background: #fff;
      border: 1px solid #e8e8e8;
      border-radius: 6px;
      padding: 20px 24px;
      transition: box-shadow 0.2s;
    }
    .hw-timeline-content:hover {
      box-shadow: 0 4px 20px rgba(0,0,0,0.04);
    }
    .hw-timeline-content .year {
      font-size: 20px;
      font-weight: 700;
      color: #0066ff;
      line-height: 1;
      margin-bottom: 4px;
    }
    .hw-timeline-content h4 {
      font-size: 14px;
      font-weight: 600;
      color: #1a1a2e;
      margin-bottom: 4px;
    }
    .hw-timeline-content p {
      font-size: 12px;
      color: #888;
      line-height: 1.6;
      margin: 0;
    }
    .hw-timeline-dot {
      position: absolute;
      left: 50%;
      top: 24px;
      width: 12px;
      height: 12px;
      background: #0066ff;
      border: 3px solid #fff;
      border-radius: 50%;
      transform: translateX(-50%);
      z-index: 2;
      box-shadow: 0 0 0 2px #d0d8e6;
    }

    /* ─── Values Grid ─── */
    .hw-grid-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 12px; }
    .hw-card {
      background: #fff; border: 1px solid #e8e8e8;
      border-radius: 6px; transition: box-shadow 0.2s;
    }
    .hw-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.04); }
    .hw-card-body { padding: 24px; text-align: center; }
    .hw-card-body .icon { font-size: 36px; margin-bottom: 12px; display: block; }
    .hw-card-body h4 { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
    .hw-card-body p { font-size: 12px; color: #888; line-height: 1.7; margin: 0; }

    /* ─── Certifications ─── */
    .hw-cert-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
    }
    .hw-cert-card {
      background: #fff;
      border: 1px solid #e8e8e8;
      border-radius: 6px;
      padding: 28px 20px;
      text-align: center;
      transition: box-shadow 0.2s;
    }
    .hw-cert-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.04); }
    .hw-cert-card .cert-icon {
      font-size: 36px;
      display: block;
      margin-bottom: 10px;
    }
    .hw-cert-card .cert-badge {
      display: inline-block;
      background: #e8f0fe;
      color: #0066ff;
      font-size: 11px;
      font-weight: 600;
      padding: 2px 10px;
      border-radius: 3px;
      margin-bottom: 8px;
    }
    .hw-cert-card h4 {
      font-size: 14px;
      font-weight: 600;
      color: #1a1a2e;
      margin-bottom: 4px;
    }
    .hw-cert-card p {
      font-size: 11px;
      color: #aaa;
      margin: 0;
      line-height: 1.5;
    }

    /* ─── CTA ─── */
    .hw-cta {
      background: #fff; border: 1px solid #e8e8e8; border-radius: 6px;
      padding: 32px 40px;
      display: flex; align-items: center; justify-content: space-between;
      gap: 24px; flex-wrap: wrap;
    }
    .hw-cta h3 { font-size: 18px; font-weight: 600; margin-bottom: 4px; }
    .hw-cta p { font-size: 13px; color: #888; }
    .hw-cta-actions { display: flex; gap: 10px; }

    .hw-btn {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 10px 28px; border-radius: 4px;
      font-size: 13px; font-weight: 500; cursor: pointer;
      transition: all 0.2s; border: none;
    }
    .hw-btn-primary { background: #0066ff; color: #fff; }
    .hw-btn-primary:hover { background: #0052cc; }
    .hw-btn-outline {
      background: transparent; color: #555;
      border: 1px solid #d0d0d0;
    }
    .hw-btn-outline:hover { border-color: #0066ff; color: #0066ff; }

    /* ─── About Gallery (Masonry 自适应) ─── */
    .hw-ab-gallery {
      column-count: 3;
      column-gap: 12px;
    }
    .hw-ab-gallery-item {
      break-inside: avoid;
      margin-bottom: 12px;
      border-radius: 6px;
      overflow: hidden;
      position: relative;
    }
    .hw-ab-gallery-img {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      min-height: 140px;
    }
    .hw-ab-gallery-img img {
      width: 100%;
      height: auto;
      display: block;
    }
    .gallery-hint {
      position: absolute;
      bottom: 10px;
      left: 10px;
      font-size: 11px;
      color: #fff;
      background: rgba(0,0,0,0.4);
      padding: 3px 10px;
      border-radius: 3px;
      pointer-events: none;
      z-index: 2;
    }
    .hw-ab-gallery-img:hover .gallery-hint {
      background: rgba(0,102,255,0.7);
    }
    /* Intro photos remain as slider */

    @media (max-width: 800px) {
      .hw-ab-gallery { column-count: 2; }
    }
    @media (max-width: 480px) {
      .hw-ab-gallery { column-count: 1; }
    }
.hw-page-banner {
      background: linear-gradient(135deg, #0a1628 0%, #1a2744 100%);
      padding: 48px 0;
      margin-bottom: 32px;
      position: relative;
      overflow: hidden;
    }
    .hw-page-banner-inner {
      max-width: 1120px; margin: 0 auto; padding: 0 20px;
      text-align: center;
    }
    .hw-page-banner h1 {
      font-size: clamp(30px, 3.5vw, 42px);
      font-weight: 300;
      color: #fff;
      margin-bottom: 6px;
      line-height: 1.2;
    }
    .hw-page-banner h1 strong { font-weight: 600; }
    .hw-page-banner .en {
      font-size: 13px;
      color: rgba(255,255,255,0.4);
      text-transform: uppercase;
      letter-spacing: 4px;
    }
    .hw-page-banner-sub {
      font-size: 14px;
      color: rgba(255,255,255,0.5);
      margin-top: 10px;
    }

    /* ─── Section ─── */
    .hw-section { margin-bottom: 32px; }
    .hw-section-title {
      display: flex; align-items: baseline; gap: 12px; margin-bottom: 20px;
    }
    .hw-section-title h2 { font-size: 20px; font-weight: 600; color: #1a1a2e; }
    .hw-section-title .en {
      font-size: 12px; color: #bbb; text-transform: uppercase; letter-spacing: 1px;
    }

    /* ─── Two-column: Contact Info + Form ─── */
    .hw-contact-grid {
      display: grid;
      grid-template-columns: 1fr 1.2fr;
      gap: 24px;
    }

    /* ─── Contact Info Cards ─── */
    .hw-contact-info-cards {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .hw-contact-card {
      background: #fff;
      border: 1px solid #e8e8e8;
      border-radius: 6px;
      padding: 20px 24px;
      transition: box-shadow 0.2s, transform 0.2s;
    }
    .hw-contact-card:hover {
      box-shadow: 0 4px 16px rgba(0,0,0,0.05);
      transform: translateY(-1px);
    }
    .hw-contact-card-icon {
      width: 36px; height: 36px;
      border-radius: 8px;
      background: #f0f5ff;
      display: flex; align-items: center; justify-content: center;
      font-size: 16px;
      margin-bottom: 10px;
      color: #0066ff;
    }
    .hw-contact-card h4 {
      font-size: 13px;
      font-weight: 600;
      color: #1a1a2e;
      margin-bottom: 4px;
    }
    .hw-contact-card p {
      font-size: 13px;
      color: #666;
      line-height: 1.6;
    }
    .hw-contact-card p a { color: #0066ff; }
    .hw-contact-card p a:hover { text-decoration: none; }
    .hw-contact-card .label {
      font-size: 11px;
      color: #aaa;
      margin-top: 2px;
    }

    /* ─── WhatsApp Card Special ─── */
    .hw-contact-wa {
      background: linear-gradient(135deg, #1f6e43 0%, #25d366 100%);
      border: none;
      color: #fff;
    }
    .hw-contact-wa .hw-contact-card-icon {
      background: rgba(255,255,255,0.2);
      color: #fff;
    }
    .hw-contact-wa h4 { color: #fff; }
    .hw-contact-wa p { color: rgba(255,255,255,0.85); }
    .hw-contact-wa p a { color: #fff; font-weight: 600; }
    .hw-contact-wa:hover { box-shadow: 0 4px 20px rgba(37,211,102,0.2); }

    /* ─── Contact Form ─── */
    .hw-contact-form-wrap {
      background: #fff;
      border: 1px solid #e8e8e8;
      border-radius: 6px;
      padding: 28px 32px 32px;
    }
    .hw-contact-form-wrap h3 {
      font-size: 17px;
      font-weight: 600;
      margin-bottom: 4px;
    }
    .hw-contact-form-wrap .form-sub {
      font-size: 12px;
      color: #999;
      margin-bottom: 20px;
    }
    .hw-form-group {
      margin-bottom: 16px;
    }
    .hw-form-group label {
      display: block;
      font-size: 12px;
      font-weight: 600;
      color: #555;
      margin-bottom: 5px;
    }
    .hw-form-group label .required {
      color: #e74c3c;
      margin-left: 2px;
    }
    .hw-form-group input,
    .hw-form-group textarea {
      width: 100%;
      padding: 10px 14px;
      font-size: 13px;
      border: 1px solid #e0e0e0;
      border-radius: 4px;
      transition: border-color 0.2s, box-shadow 0.2s;
      font-family: inherit;
      background: #fafbfc;
    }
    .hw-form-group input:focus,
    .hw-form-group textarea:focus {
      outline: none;
      border-color: #0066ff;
      box-shadow: 0 0 0 3px rgba(0,102,255,0.08);
      background: #fff;
    }
    .hw-form-group textarea {
      resize: vertical;
      min-height: 100px;
    }
    .hw-form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    .hw-form-submit {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 32px;
      border-radius: 4px;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s;
      border: none;
      background: #0066ff;
      color: #fff;
      width: 100%;
      justify-content: center;
    }
    .hw-form-submit:hover { background: #0052cc; }
    .hw-form-submit:disabled { opacity: 0.5; cursor: not-allowed; }

    /* ─── Map ─── */
    .hw-map-embed {
      width: 100%;
      height: 380px;
      border-radius: 8px;
      border: 1px solid #e0e8f0;
      overflow: hidden;
      position: relative;
    }
    .hw-map-embed iframe {
      width: 100%;
      height: 100%;
      border: none;
      pointer-events: none;
    }
    .hw-map-overlay {
      position: absolute;
      inset: 0;
      z-index: 10;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      cursor: pointer;
      text-decoration: none;
    }
    .hw-map-overlay:hover {
      background: rgba(0,0,0,0.03);
    }
    .map-open-label {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 10px 20px;
      background: rgba(255,255,255,0.92);
      border: 1px solid #e0e0e0;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 500;
      color: #0066ff;
      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
      transition: all 0.2s;
      margin-bottom: 20px;
      pointer-events: none;
    }
    .hw-map-overlay:hover .map-open-label {
      background: #0066ff;
      color: #fff;
      border-color: #0066ff;
      box-shadow: 0 4px 16px rgba(0,102,255,0.2);
    }
    .map-open-label::after {
      content: "→";
      transition: transform 0.2s;
    }
    .hw-map-overlay:hover .map-open-label::after {
      transform: translateX(4px);
    }
    .hw-map-links {
      display: flex;
      gap: 10px;
      justify-content: center;
      margin-top: 12px;
      flex-wrap: wrap;
    }
    .hw-map-links a {
      font-size: 12px;
      color: #0066ff;
      padding: 5px 14px;
      background: #f0f5ff;
      border-radius: 4px;
      transition: all 0.2s;
    }
    .hw-map-links a:hover {
      background: #0066ff;
      color: #fff;
      text-decoration: none;
    }

    /* ─── FAQ Accordion ─── */
    .hw-faq-wrap {
      background: #fff;
      border: 1px solid #e8e8e8;
      border-radius: 6px;
      padding: 24px 28px;
    }
    .hw-faq-wrap .uk-accordion-title {
      font-size: 14px;
      font-weight: 600;
      color: #1a1a2e;
      padding: 14px 0;
      border-bottom: 1px solid #f0f0f0;
    }
    .hw-faq-wrap .uk-open .uk-accordion-title {
      color: #0066ff;
    }
    .hw-faq-wrap .uk-accordion-title::before {
      background-image: none;
      content: "+";
      float: right;
      font-size: 18px;
      font-weight: 300;
      color: #ccc;
      transition: transform 0.2s;
    }
    .hw-faq-wrap .uk-open .uk-accordion-title::before {
      content: "−";
      color: #0066ff;
    }
    .hw-faq-wrap .uk-accordion-content {
      padding: 8px 0 16px;
      font-size: 13px;
      color: #666;
      line-height: 1.8;
    }
    .hw-faq-wrap ul { padding-left: 18px; margin: 6px 0; }
    .hw-faq-wrap ul li { font-size: 13px; color: #666; line-height: 1.8; }
/* ─── Case Page Banner ─── */
    .hw-case-banner {
      background: linear-gradient(135deg, #0a1628 0%, #1a2744 100%);
      padding: 48px 0 40px;
      margin-bottom: 24px;
      position: relative;
      overflow: hidden;
    }
    .hw-case-banner-inner {
      max-width: 1120px; margin: 0 auto; padding: 0 20px;
      display: flex; justify-content: space-between; align-items: flex-end; gap: 24px;
    }
    .hw-case-banner-text h1 {
      font-size: clamp(24px, 2.8vw, 34px);
      font-weight: 300;
      color: #fff;
      line-height: 1.3;
      margin-bottom: 6px;
    }
    .hw-case-banner-text h1 strong { font-weight: 600; }
    .hw-case-banner-text .subtitle {
      font-size: 13px;
      color: rgba(255,255,255,0.4);
      text-transform: uppercase;
      letter-spacing: 2px;
    }
    .hw-case-banner-meta {
      display: flex;
      gap: 32px;
      flex-shrink: 0;
    }
    .hw-case-banner-meta-item {
      text-align: center;
    }
    .hw-case-banner-meta-item .num {
      font-size: 24px;
      font-weight: 300;
      color: #60a5fa;
      line-height: 1;
      margin-bottom: 2px;
    }
    .hw-case-banner-meta-item .label {
      font-size: 11px;
      color: rgba(255,255,255,0.4);
      white-space: nowrap;
    }

    /* ─── Video Hero ─── */
    .hw-case-video-hero {
      position: relative;
      height: 400px;
      border-radius: 8px;
      overflow: hidden;
      margin-bottom: 32px;
    }
    .hw-case-video-hero video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 0;
    }
    .hw-case-video-overlay {
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(to left, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 40%, transparent 70%);
    }
    .hw-case-video-stats {
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: 2;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 40px 48px;
      gap: 24px;
    }
    .hw-case-video-stat { }
    .hw-case-video-stat .num {
      font-size: 32px;
      font-weight: 300;
      color: #60a5fa;
      line-height: 1;
      margin-bottom: 2px;
    }
    .hw-case-video-stat .label {
      font-size: 12px;
      color: rgba(255,255,255,0.5);
    }

    /* ─── Case Content ─── */
    .hw-case-content {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 32px;
      margin-bottom: 32px;
    }

    /* Left column – article */
    .hw-case-article {
      background: #fff;
      border: 1px solid #e8e8e8;
      border-radius: 6px;
      padding: 32px;
    }
    .hw-case-article h2 {
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 16px;
      padding-bottom: 12px;
      border-bottom: 1px solid #f0f0f0;
    }
    .hw-case-article h3 {
      font-size: 17px;
      font-weight: 600;
      margin: 28px 0 12px;
      color: #0066ff;
    }
    .hw-case-article p {
      font-size: 14px;
      color: #444;
      line-height: 1.8;
      margin-bottom: 14px;
    }
    .hw-case-article ul {
      list-style: none;
      padding: 0;
      margin: 0 0 16px;
    }
    .hw-case-article ul li {
      font-size: 13px;
      color: #555;
      padding: 6px 0;
      border-bottom: 1px solid #f5f5f5;
      display: flex;
      align-items: flex-start;
      gap: 10px;
    }
    .hw-case-article ul li::before {
      content: "✓";
      color: #0066ff;
      font-weight: 700;
      flex-shrink: 0;
    }

    /* Tech Table */
    .hw-tech-table-wrap {
      overflow-x: auto;
      margin-top: 20px;
    }
    .hw-tech-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
    }
    .hw-tech-table th {
      text-align: left;
      padding: 10px 14px;
      background: #f8f9fc;
      font-weight: 600;
      color: #1a1a2e;
      border-bottom: 2px solid #e8e8e8;
    }
    .hw-tech-table td {
      padding: 10px 14px;
      border-bottom: 1px solid #f0f0f0;
      color: #555;
    }
    .hw-tech-table tr:last-child td { border-bottom: none; }
    .hw-tech-table td:first-child {
      font-weight: 600;
      color: #1a1a2e;
      white-space: nowrap;
    }

    /* Quick spec badge */
    .hw-spec-pill {
      display: inline-block;
      font-size: 11px;
      background: #f0f5ff;
      color: #0066ff;
      padding: 3px 10px;
      border-radius: 3px;
      margin: 2px 4px 2px 0;
    }

    /* Right column – sidebar */
    .hw-case-sidebar {
      background: #fff;
      border: 1px solid #e8e8e8;
      border-radius: 6px;
      padding: 28px 24px;
      align-self: start;
    }
    .hw-sidebar-section {
      margin-bottom: 24px;
    }
    .hw-sidebar-section:last-child { margin-bottom: 0; }
    .hw-sidebar-section h4 {
      font-size: 12px;
      font-weight: 600;
      color: #999;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 12px;
      padding-bottom: 8px;
      border-bottom: 1px solid #f0f0f0;
    }
    .hw-sidebar-item {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      padding: 8px 0;
      font-size: 13px;
      border-bottom: 1px solid #f8f8f8;
    }
    .hw-sidebar-item:last-child { border-bottom: none; }
    .hw-sidebar-item .key { color: #888; }
    .hw-sidebar-item .val { color: #1a1a2e; font-weight: 500; text-align: right; }

    .hw-sidebar-cta {
      margin-top: 20px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .hw-sidebar-cta .hw-btn { justify-content: center; }

    /* ─── Overlay card style (matching index) ─── */
    .hw-case-overlay {
      position: relative;
      height: 380px;
      border-radius: 6px;
      overflow: hidden;
    }
    .hw-case-overlay video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 0;
    }
    .overlay-mask {
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.55) 35%, rgba(0,0,0,0.2) 65%, transparent 100%);
      transition: opacity 0.3s;
    }
    .hw-case-overlay:hover .overlay-mask {
      opacity: 0.8;
    }
    .overlay-content {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 2;
      padding: 32px 24px 24px;
      color: #fff;
    }
    .overlay-content::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 100%;
      background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.15) 60%, transparent 100%);
      z-index: -1;
      pointer-events: none;
      border-radius: 0 0 6px 6px;
    }
    .overlay-content h3 {
      font-size: 17px;
      font-weight: 600;
      margin-bottom: 2px;
    }
    .overlay-content .loc {
      font-size: 12px;
      color: rgba(255,255,255,0.7);
      margin-bottom: 8px;
    }
    .overlay-content p {
      font-size: 13px;
      color: rgba(255,255,255,0.85);
      line-height: 1.5;
      margin-bottom: 12px;
      max-width: 240px;
    }
    .overlay-data {
      display: flex;
      gap: 20px;
    }
    .overlay-data div strong {
      display: block;
      font-size: 20px;
      font-weight: 600;
      color: #60a5fa;
      line-height: 1;
    }
    .overlay-data div span {
      font-size: 10px;
      color: rgba(255,255,255,0.6);
    }

    /* ─── Related Cases (overlay style, matching index) ─── */
    /* Reuses .hw-case-overlay / .overlay-* from index */
    .hw-related { margin-bottom: 32px; }
    .hw-related-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }
    .hw-related-card {
      display: block;
      color: inherit;
    }
    .hw-related-card .hw-case-overlay {
      height: 300px;
    }

    /* ─── Back Link ─── */
    .hw-back-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      color: #0066ff;
      margin-bottom: 24px;
      transition: gap 0.2s;
    }
    .hw-back-link:hover { gap: 10px; }

    /* ─── Section Title ─── */
    .hw-section-title {
      display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px;
    }
    .hw-section-title h2 { font-size: 20px; font-weight: 600; color: #1a1a2e; }
    .hw-section-title .en {
      font-size: 12px; color: #bbb; text-transform: uppercase; letter-spacing: 1px;
    }

    /* ─── CTA ─── */
    .hw-cta {
      background: #fff; border: 1px solid #e8e8e8; border-radius: 6px;
      padding: 28px 36px;
      display: flex; align-items: center; justify-content: space-between;
      gap: 24px; flex-wrap: wrap;
      margin-bottom: 24px;
    }
    .hw-cta h3 { font-size: 18px; font-weight: 600; margin-bottom: 4px; }
    .hw-cta p { font-size: 13px; color: #888; }
    .hw-cta-actions { display: flex; gap: 10px; }
    .hw-btn {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 10px 28px; border-radius: 4px;
      font-size: 13px; font-weight: 500; cursor: pointer;
      transition: all 0.2s; border: none;
    }
    .hw-btn-primary { background: #0066ff; color: #fff; }
    .hw-btn-primary:hover { background: #0052cc; }
    .hw-btn-outline {
      background: transparent; color: #555;
      border: 1px solid #d0d0d0;
    }
    .hw-btn-outline:hover { border-color: #0066ff; color: #0066ff; }
/* ─── Responsive ─── */
    @media (max-width: 960px) {
      .hw-case-content { grid-template-columns: 1fr; }
      .hw-case-banner-inner { flex-direction: column; align-items: flex-start; }
      .hw-case-video-hero { height: 320px; }
      .hw-case-video-stats { padding: 32px; gap: 20px; }
      .hw-related-grid { grid-template-columns: 1fr 1fr; }
      .hw-related-card .hw-case-overlay { height: 240px; }
      .hw-footer-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 720px) {
      .hw-case-video-hero { height: 260px; }
      .hw-case-video-overlay {
        background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 50%, transparent 80%);
      }
      .hw-case-video-stats {
        flex-direction: row;
        bottom: 0;
        top: auto;
        right: auto;
        left: 0;
        padding: 20px 24px;
        gap: 24px;
      }
      .hw-case-video-stat .num { font-size: 24px; }
      .hw-case-video-stat .label { font-size: 10px; }
      .hw-case-article { padding: 20px; }
      .hw-case-banner { padding: 32px 0 28px; }
      .hw-case-banner-meta { gap: 20px; }
      .hw-case-banner-meta-item .num { font-size: 20px; }
      .hw-header-inner { flex-wrap: wrap; height: auto; padding: 10px 0; gap: 8px; }
      .hw-nav { order: 3; width: 100%; justify-content: center; }
      .hw-related-grid { grid-template-columns: 1fr; }
      .hw-related-card .hw-case-overlay { height: 220px; }
      .hw-cta { flex-direction: column; text-align: center; }
      .hw-footer-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 480px) {
      .hw-case-video-hero { height: 220px; }
      .hw-case-video-stats { padding: 16px 20px; gap: 16px; }
      .hw-case-video-stat .num { font-size: 20px; }
    }

    /* ─── Page Banner ─── */
    .hw-page-banner {
      background: linear-gradient(135deg, #0a1628 0%, #1a2744 100%);
      padding: 56px 0 48px;
      position: relative;
      overflow: hidden;
    }
    .hw-page-banner-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      opacity: 0.08;
      background: url('assets/images/hero/hero-banner.jpg') center/cover no-repeat;
    }
    .hw-page-banner-inner {
      max-width: 1120px; margin: 0 auto; padding: 0 20px;
      position: relative; z-index: 1;
      text-align: center;
    }
    .hw-page-banner-inner h1 {
      font-size: clamp(30px, 3.5vw, 42px);
      font-weight: 300;
      color: #fff;
      line-height: 1.2;
      margin-bottom: 6px;
    }
    .hw-page-banner-inner .en-sub {
      font-size: 13px;
      color: rgba(255,255,255,0.35);
      text-transform: uppercase;
      letter-spacing: 5px;
      margin-bottom: 12px;
    }
    .hw-page-banner-inner p {
      font-size: 14px;
      color: rgba(255,255,255,0.5);
      max-width: 520px;
      margin: 0 auto;
    }

    /* ─── Section ─── */
    .hw-section { margin-bottom: 24px; }
    .hw-section-title {
      display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px;
    }
    .hw-section-title h2 { font-size: 20px; font-weight: 600; color: #1a1a2e; }
    .hw-section-title .en {
      font-size: 12px; color: #bbb; text-transform: uppercase; letter-spacing: 1px;
    }

    /* ─── Case Grid ─── */
    .hw-case-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }
    .hw-case-card {
      position: relative;
      height: 380px;
      border-radius: 8px;
      overflow: hidden;
      display: block;
      transition: transform 0.3s, box-shadow 0.3s;
    }
    .hw-case-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 40px rgba(0,0,0,0.12);
    }
    .hw-case-card video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 0;
    }
    .hw-case-card .overlay-mask {
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.55) 35%, rgba(0,0,0,0.2) 65%, transparent 100%);
      transition: opacity 0.4s;
    }
    .hw-case-card:hover .overlay-mask {
      opacity: 0.75;
    }
    .hw-case-card .overlay-content {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 2;
      padding: 32px 24px 24px;
      color: #fff;
    }
    .hw-case-card .overlay-content::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 100%;
      background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.1) 60%, transparent 100%);
      z-index: -1;
      pointer-events: none;
      border-radius: 0 0 8px 8px;
    }
    .hw-case-card .overlay-content .industry-tag {
      display: inline-block;
      font-size: 10px;
      font-weight: 600;
      color: #60a5fa;
      background: rgba(96,165,250,0.15);
      padding: 2px 10px;
      border-radius: 3px;
      margin-bottom: 6px;
      letter-spacing: 0.5px;
    }
    .hw-case-card .overlay-content h3 {
      font-size: 19px;
      font-weight: 600;
      margin-bottom: 2px;
    }
    .hw-case-card .overlay-content .loc {
      font-size: 12px;
      color: rgba(255,255,255,0.65);
      margin-bottom: 8px;
    }
    .hw-case-card .overlay-content p {
      font-size: 13px;
      color: rgba(255,255,255,0.85);
      line-height: 1.5;
      margin-bottom: 14px;
      max-width: 260px;
    }
    .hw-case-card .overlay-data {
      display: flex;
      gap: 24px;
    }
    .hw-case-card .overlay-data div strong {
      display: block;
      font-size: 22px;
      font-weight: 700;
      color: #60a5fa;
      line-height: 1;
    }
    .hw-case-card .overlay-data div span {
      font-size: 10px;
      color: rgba(255,255,255,0.55);
    }

    /* ─── Feature bar on card when no video ─── */
    .hw-case-card .card-bg-img {
      position: absolute;
      inset: 0;
      z-index: 0;
      background-size: cover;
      background-position: center;
    }

    /* ─── CTA ─── */
    .hw-cta {
      background: #fff; border: 1px solid #e8e8e8; border-radius: 6px;
      padding: 32px 40px;
      display: flex; align-items: center; justify-content: space-between;
      gap: 24px; flex-wrap: wrap;
    }
    .hw-cta h3 { font-size: 18px; font-weight: 600; margin-bottom: 4px; }
    .hw-cta p { font-size: 13px; color: #888; }
    .hw-cta-actions { display: flex; gap: 10px; }
    .hw-btn {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 10px 28px; border-radius: 4px;
      font-size: 13px; font-weight: 500; cursor: pointer;
      transition: all 0.2s; border: none;
    }
    .hw-btn-primary { background: #0066ff; color: #fff; }
    .hw-btn-primary:hover { background: #0052cc; }
    .hw-btn-outline {
      background: transparent; color: #555;
      border: 1px solid rgba(255,255,255,0.2);
    }
    .hw-btn-outline:hover { border-color: #0066ff; color: #0066ff; }
  @media (max-width: 960px) {
      .hw-case-grid { grid-template-columns: 1fr; gap: 14px; }
      .hw-footer-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 640px) {
      .hw-header-inner { flex-wrap: wrap; height: auto; padding: 10px 0; gap: 8px; }
      .hw-nav { order: 3; width: 100%; justify-content: center; }
      .hw-case-card { height: 340px; }
      .hw-footer-grid { grid-template-columns: 1fr; }
      .hw-page-banner { padding: 40px 0 36px; }
    }
    /* ─── Banner ─── */
    .hw-banner {
      background: linear-gradient(135deg, #0a1628 0%, #1a2744 100%);
      padding: 52px 0;
      text-align: center;
      margin-bottom: 24px;
      position: relative;
      overflow: hidden;
    }
    .hw-banner h1 {
      font-size: clamp(24px, 2.8vw, 34px);
      font-weight: 300;
      color: #fff;
      margin-bottom: 6px;
    }
    .hw-banner h1 strong {
      font-weight: 600;
    }
    .hw-banner .en {
      font-size: 12px;
      color: rgba(255,255,255,0.4);
      text-transform: uppercase;
      letter-spacing: 4px;
    }

    /* ─── Section ─── */
    .hw-section { margin-bottom: 24px; }
    .hw-section-title {
      display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px;
    }
    .hw-section-title h2 { font-size: 20px; font-weight: 600; color: #1a1a2e; }
    .hw-section-title .en {
      font-size: 12px; color: #bbb; text-transform: uppercase; letter-spacing: 1px;
    }
    .hw-section-more { margin-left: auto; font-size: 12px; color: #0066ff; }

    /* ─── Filter / Category Tabs ─── */
    .hw-filter {
      display: flex;
      gap: 6px;
      margin-bottom: 20px;
      flex-wrap: wrap;
    }
    .hw-filter a {
      padding: 7px 20px;
      font-size: 13px;
      color: #666;
      background: #fff;
      border: 1px solid #e0e0e0;
      border-radius: 20px;
      transition: all 0.2s;
      cursor: pointer;
    }
    .hw-filter a:hover { border-color: #0066ff; color: #0066ff; }
    .hw-filter a.active {
      background: #0066ff;
      border-color: #0066ff;
      color: #fff;
    }

    /* ─── Product Card Grid ─── */
    .hw-prod-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }

    .hw-prod-card {
      background: #fff;
      border: 1px solid #e8e8e8;
      border-radius: 8px;
      overflow: hidden;
      transition: all 0.25s;
      display: flex;
      flex-direction: column;
    }
    .hw-prod-card:hover {
      box-shadow: 0 6px 24px rgba(0,0,0,0.06);
      transform: translateY(-3px);
    }

    .hw-prod-img {
      height: 200px;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .hw-prod-img img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 0;
    }
    .hw-prod-img .prod-icon {
      font-size: 54px;
      opacity: 0.85;
      z-index: 1;
      position: relative;
    }
    .hw-prod-img img ~ .prod-icon { display: none; }
    .hw-prod-img .badge {
      position: absolute;
      top: 10px;
      left: 10px;
      font-size: 10px;
      font-weight: 600;
      color: #fff;
      padding: 3px 10px;
      border-radius: 3px;
      z-index: 3;
    }
    .hw-prod-img .badge-flag { background: #0066ff; }
    .hw-prod-img .badge-hot { background: #f59e0b; }
    .hw-prod-img .badge-custom { background: #8b5cf6; }
    .hw-prod-img .badge-new { background: #10b981; }

    .hw-prod-body {
      padding: 20px;
      display: flex;
      flex-direction: column;
      flex: 1;
    }
    .hw-prod-body h3 {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 6px;
      color: #1a1a2e;
    }
    .hw-prod-body .prod-desc {
      font-size: 12px;
      color: #888;
      line-height: 1.6;
      margin-bottom: 12px;
      flex: 1;
    }
    .hw-prod-body .prod-specs {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      margin-bottom: 14px;
    }
    .hw-prod-body .prod-specs span {
      font-size: 10px;
      color: #777;
      background: #f0f2f5;
      padding: 2px 10px;
      border-radius: 12px;
      white-space: nowrap;
    }
    .hw-prod-body .prod-link {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 12px;
      color: #0066ff;
      font-weight: 500;
      transition: gap 0.2s;
      margin-top: auto;
    }
    .hw-prod-body .prod-link:hover {
      gap: 8px;
    }
@media (max-width: 1024px) {
      .hw-prod-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 960px) {
      .hw-footer-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 640px) {
      .hw-prod-grid { grid-template-columns: 1fr; }
      .hw-banner { padding: 36px 0; }
      .hw-header-inner { flex-wrap: wrap; height: auto; padding: 10px 0; gap: 8px; }
      .hw-nav { order: 3; width: 100%; justify-content: center; }
      .hw-footer-grid { grid-template-columns: 1fr; }
    }

    /* Page Banner */
    .pd-banner {
      background: linear-gradient(135deg, #001a4d 0%, #003d99 100%);
      padding: 80px 0 60px;
      position: relative;
      overflow: hidden;
    }
    .pd-banner-inner { position: relative; z-index: 1; text-align: center; }
    .pd-breadcrumb { font-size: 12px; color: rgba(255,255,255,0.4); margin-bottom: 12px; }
    .pd-breadcrumb a { color: rgba(255,255,255,0.5); }
    .pd-breadcrumb a:hover { color: #fff; }
    .pd-banner h1 { font-size: 32px; font-weight: 700; color: #fff; margin-bottom: 6px; }
    .pd-banner .pd-sub { font-size: 13px; color: rgba(255,255,255,0.5); }

    /* Product Intro */
    .pd-intro { padding: 40px 0; }
    .pd-intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
    .pd-gallery {
      background: linear-gradient(135deg, #e8f0fe, #d0e2fc);
      border-radius: 8px;
      min-height: 360px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #e0e8f0;
    }
    .pd-gallery .pd-gallery-placeholder { text-align: center; color: #0066ff; opacity: 0.5; }
    .pd-gallery .pd-gallery-placeholder .icon { font-size: 48px; margin-bottom: 8px; }
    .pd-gallery .pd-gallery-placeholder .label { font-size: 13px; }

    .pd-info .pd-tag { font-size: 11px; font-weight: 600; color: #0066ff; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
    .pd-info h2 { font-size: 24px; font-weight: 700; margin-bottom: 12px; }
    .pd-info .pd-desc { font-size: 14px; color: #666; line-height: 1.8; margin-bottom: 20px; }

    .pd-highlights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 24px; }
    .pd-highlight {
      background: #f8fafc; border: 1px solid #e8ecf0; border-radius: 6px;
      padding: 16px; text-align: center;
    }
    .pd-highlight-num { font-size: 20px; font-weight: 700; color: #0066ff; line-height: 1; margin-bottom: 4px; }
    .pd-highlight-label { font-size: 11px; color: #888; }

    .pd-cta { display: flex; gap: 10px; flex-wrap: wrap; }

    /* Specs Table */
    .pd-specs { padding: 40px 0; }
    .pd-specs h3 { font-size: 20px; font-weight: 600; margin-bottom: 20px; }
    .pd-specs table { width: 100%; border-collapse: collapse; }
    .pd-specs td { padding: 12px 16px; font-size: 13px; border-bottom: 1px solid #f0f0f0; }
    .pd-specs td:first-child { font-weight: 600; color: #555; width: 30%; background: #fafbfc; }
    .pd-specs td:last-child { color: #333; }
    .pd-specs tr:last-child td { border-bottom: none; }

    /* Features */
    .pd-features { padding: 40px 0; background: #fff; }
    .pd-features h3 { font-size: 20px; font-weight: 600; margin-bottom: 24px; text-align: center; }
    .pd-features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .pd-feature-card {
      background: #f8fafc; border: 1px solid #e8ecf0; border-radius: 8px;
      padding: 24px; text-align: center;
    }
    .pd-feature-icon { font-size: 28px; margin-bottom: 10px; }
    .pd-feature-card h4 { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
    .pd-feature-card p { font-size: 12px; color: #888; line-height: 1.6; }


    /* Product Gallery Slider */
    .pd-gallery {
      position: relative;
      overflow: hidden;
      height: 100%;
      min-height: 360px;
    }
    .pd-gallery .uk-slider {
      height: 100%;
      min-height: 360px;
    }
    .pd-gallery .uk-slider-container {
      height: 100%;
      min-height: 360px;
    }
    .pd-gallery .uk-slider-items {
      height: 100%;
      min-height: 360px;
      padding: 0 !important;
      margin: 0 !important;
    }
    .pd-gallery .uk-slider-items > li {
      width: 100%;
      height: 100%;
      min-height: 360px;
      padding: 0 !important;
      margin: 0 !important;
      list-style: none;
    }
    .pd-gallery-slide {
      width: 100%;
      height: 100%;
      min-height: 360px;
      display: flex !important;
      align-items: center;
      justify-content: center;
      position: relative;
    }
    .pd-gallery-slide img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }


    /* Description detail */
    .pd-detail { padding: 40px 0; }
    .pd-detail h3 { font-size: 20px; font-weight: 600; margin-bottom: 16px; }
    .pd-detail p { font-size: 14px; color: #555; line-height: 1.9; margin-bottom: 14px; max-width: 780px; }
    .pd-detail ul { list-style: none; padding: 0; margin: 0 0 16px; }
    .pd-detail ul li { font-size: 13px; color: #555; padding: 6px 0; border-bottom: 1px solid #f0f0f0; display: flex; align-items: center; gap: 8px; }
    .pd-detail ul li::before { content: ""; width: 4px; height: 4px; background: #0066ff; border-radius: 50%; flex-shrink: 0; }
    /* Related */
    .pd-related { padding: 40px 0; }
    .pd-related h3 { font-size: 18px; font-weight: 600; margin-bottom: 16px; }
    .pd-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .pd-related-card {
      background: #fff;
      border: 1px solid #e8e8e8;
      border-radius: 8px;
      overflow: hidden;
      transition: all 0.25s;
    }
    .pd-related-card:hover {
      box-shadow: 0 4px 20px rgba(0,0,0,0.05);
      transform: translateY(-3px);
    }
    .pd-related-img {
      height: 225px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }
    .pd-related-img img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .pd-related-img .rel-img-icon {
      font-size: 36px;
      opacity: 0.5;
    }
    .pd-related-info {
      padding: 16px 18px 18px;
      text-align: center;
    }
    .pd-related-info h4 { font-size: 14px; font-weight: 600; margin-bottom: 4px; color: #1a1a2e; }
    .pd-related-info p { font-size: 11px; color: #888; }
 @media (max-width: 800px) {
      .pd-intro-grid, .pd-highlights { grid-template-columns: 1fr; }
      .pd-features-grid { grid-template-columns: 1fr; }
      .pd-related-grid { grid-template-columns: 1fr; }
      .hw-footer-grid { grid-template-columns: 1fr 1fr; }
      .pd-banner { padding: 60px 0 40px; }
      .pd-banner h1 { font-size: 24px; }
    }
    @media (max-width: 640px) {
      .hw-footer-grid { grid-template-columns: 1fr; }
    }

    /* ─── Breadcrumb ─── */
    .hw-breadcrumb {
      max-width: 1120px;
      margin: 16px auto;
      padding: 0 20px;
      font-size: 12px;
      color: #999;
    }
    .hw-breadcrumb a { color: #999; transition: color 0.2s; }
    .hw-breadcrumb a:hover { color: #0066ff; }
    .hw-breadcrumb .sep { margin: 0 8px; color: #ccc; }
    .hw-breadcrumb .current { color: #555; }



    /* ─── Article ─── */
    .hw-article-wrap {
      max-width: 960px;
      margin: 0 auto 40px;
    }
    .hw-article {
      background: #fff;
      border: 1px solid #e8e8e8;
      border-radius: 8px;
      overflow: hidden;
    }
    .hw-article-header {
      padding: 32px 36px 24px;
      border-bottom: 1px solid #f0f0f0;
    }
    .hw-article-header .meta {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 12px;
    }
    .hw-article-header .meta .tag {
      font-size: 10px;
      font-weight: 600;
      color: #fff;
      background: #0066ff;
      padding: 3px 12px;
      border-radius: 3px;
    }
    .hw-article-header .meta .date {
      font-size: 12px;
      color: #aaa;
    }
    .hw-article-header h2 {
      font-size: 22px;
      font-weight: 700;
      color: #1a1a2e;
      line-height: 1.4;
    }
    .hw-article-body {
      padding: 28px 36px 36px;
    }
    .hw-article-body p {
      font-size: 15px;
      color: #444;
      line-height: 1.9;
      margin-bottom: 20px;
    }
    .hw-article-body h3 {
      font-size: 17px;
      font-weight: 600;
      color: #1a1a2e;
      margin: 28px 0 14px;
    }
    .hw-article-body ul {
      padding: 0 0 0 20px;
      margin: 0 0 20px;
    }
    .hw-article-body ul li {
      font-size: 15px;
      color: #444;
      line-height: 1.8;
      margin-bottom: 6px;
    }
    .hw-article-body .highlight {
      background: #f0f5ff;
      border-left: 3px solid #0066ff;
      padding: 16px 20px;
      border-radius: 0 4px 4px 0;
      margin-bottom: 20px;
      font-size: 14px;
      color: #555;
    }

    /* ─── Share ─── */
    .hw-share {
      padding: 20px 36px 28px;
      border-top: 1px solid #f0f0f0;
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }
    .hw-share-label {
      font-size: 12px;
      color: #999;
    }
    .hw-share-btn {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 6px 16px;
      font-size: 12px;
      color: #555;
      border: 1px solid #e0e0e0;
      border-radius: 4px;
      transition: all 0.2s;
      background: #fff;
      cursor: pointer;
    }
    .hw-share-btn:hover {
      color: #fff;
      border-color: #07c160;
      background: #07c160;
    }
    .hw-share-btn.weibo:hover {
      border-color: #e6162d;
      background: #e6162d;
    }
    .hw-share-btn.linkedin:hover {
      border-color: #0077b5;
      background: #0077b5;
    }

    .hw-back-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      color: #0066ff;
      margin-top: 24px;
      transition: color 0.2s;
    }
    .hw-back-link:hover { color: #0052cc; }

    /* ─── Related News ─── */
    .hw-related {
      margin-top: 40px;
      margin-bottom: 24px;
    }
    .hw-related-title {
      font-size: 18px;
      font-weight: 600;
      color: #1a1a2e;
      margin-bottom: 16px;
    }
    .hw-related-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }
    .hw-related-card {
      background: #fff;
      border: 1px solid #e8e8e8;
      border-radius: 6px;
      overflow: hidden;
      transition: all 0.25s;
      display: block;
    }
    .hw-related-card:hover {
      box-shadow: 0 4px 20px rgba(0,0,0,0.05);
      transform: translateY(-2px);
    }
    .hw-related-card .img {
      height: 130px;
      position: relative;
    }
    .hw-related-card .tag {
      position: absolute;
      top: 8px;
      left: 8px;
      font-size: 9px;
      font-weight: 600;
      color: #fff;
      background: #0066ff;
      padding: 2px 10px;
      border-radius: 3px;
    }
    .hw-related-card .body {
      padding: 14px 16px 16px;
    }
    .hw-related-card .body .date {
      font-size: 11px;
      color: #aaa;
      margin-bottom: 4px;
    }
    .hw-related-card .body h4 {
      font-size: 13px;
      font-weight: 600;
      color: #1a1a2e;
      line-height: 1.4;
    }

    /* ─── Section ─── */
    .hw-section { margin-bottom: 24px; }
  /* ─── Responsive ─── */
    @media (max-width: 960px) {
      .hw-related-grid { grid-template-columns: repeat(2, 1fr); }
      .hw-footer-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 720px) {
      .hw-article-header { padding: 24px 20px 20px; }
      .hw-article-header h2 { font-size: 18px; }
      .hw-article-body { padding: 20px 20px 24px; }
      .hw-article-body p { font-size: 14px; }

      .hw-share { padding: 16px 20px 20px; }

    }
    @media (max-width: 640px) {
      .hw-related-grid { grid-template-columns: 1fr; }
      .hw-header-inner { flex-wrap: wrap; height: auto; padding: 10px 0; gap: 8px; }
      .hw-nav { order: 3; width: 100%; justify-content: center; }
      .hw-footer-grid { grid-template-columns: 1fr; }
    }
    /* ─── Page Banner ─── */
    .hw-banner {
      background: linear-gradient(135deg, #0a1628 0%, #1a2744 100%);
      padding: 56px 0;
      text-align: center;
      margin-bottom: 32px;
      position: relative;
      overflow: hidden;
    }
    .hw-banner::before {
      content: '';
      position: absolute;
      inset: 0;
      opacity: 0.08;
      background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23ffffff" d="M0,160L48,176C96,192,192,224,288,213.3C384,203,480,149,576,138.7C672,128,768,160,864,181.3C960,203,1056,213,1152,197.3C1248,181,1344,139,1392,117.3L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"/></svg>') center/cover no-repeat;
    }
    .hw-banner-inner {
      position: relative;
      z-index: 1;
      max-width: 1120px;
      margin: 0 auto;
      padding: 0 20px;
    }
    .hw-banner h1 {
      font-size: 32px;
      font-weight: 600;
      color: #fff;
      margin-bottom: 6px;
    }
    .hw-banner .sub {
      font-size: 13px;
      color: rgba(255,255,255,0.45);
      text-transform: uppercase;
      letter-spacing: 3px;
    }

    /* ─── Section ─── */
    .hw-section { margin-bottom: 32px; }

    /* ─── Filter Tabs ─── */
    .hw-filter {
      display: flex;
      gap: 8px;
      margin-bottom: 24px;
      flex-wrap: wrap;
    }
    .hw-filter a {
      padding: 6px 18px;
      font-size: 13px;
      color: #666;
      background: #fff;
      border: 1px solid #e0e0e0;
      border-radius: 4px;
      transition: all 0.2s;
    }
    .hw-filter a:hover {
      color: #0066ff;
      border-color: #0066ff;
    }
    .hw-filter a.active {
      color: #fff;
      background: #0066ff;
      border-color: #0066ff;
    }

    /* ─── News Grid ─── */
    .hw-news-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
    .hw-news-card {
      background: #fff;
      border: 1px solid #e8e8e8;
      border-radius: 6px;
      overflow: hidden;
      transition: all 0.25s;
      display: block;
    }
    .hw-news-card:hover {
      box-shadow: 0 4px 24px rgba(0,0,0,0.06);
      transform: translateY(-3px);
    }
    .hw-news-img {
      height: 180px;
      position: relative;
      overflow: hidden;
    }
    .hw-news-tag {
      position: absolute;
      top: 12px;
      left: 12px;
      font-size: 10px;
      font-weight: 600;
      color: #fff;
      background: #0066ff;
      padding: 3px 12px;
      border-radius: 3px;
    }
    .hw-news-tag.industry { background: #7c3aed; }
    .hw-news-tag.exhibition { background: #059669; }
    .hw-news-body {
      padding: 18px 20px 20px;
    }
    .hw-news-date {
      font-size: 11px;
      color: #aaa;
      margin-bottom: 6px;
    }
    .hw-news-body h3 {
      font-size: 15px;
      font-weight: 600;
      color: #1a1a2e;
      margin-bottom: 8px;
      line-height: 1.4;
    }
    .hw-news-body p {
      font-size: 12px;
      color: #888;
      line-height: 1.7;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      margin-bottom: 12px;
    }
    .hw-news-more {
      font-size: 11px;
      color: #0066ff;
      font-weight: 500;
      transition: all 0.2s;
    }
    .hw-news-more:hover { color: #0052cc; }

    /* ─── Pagination ─── */
    .hw-pagination {
      display: flex;
      justify-content: center;
      gap: 6px;
      margin-top: 36px;
      margin-bottom: 12px;
    }
    .hw-pagination a,
    .hw-pagination span {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 34px;
      height: 34px;
      padding: 0 8px;
      font-size: 13px;
      color: #666;
      background: #fff;
      border: 1px solid #e0e0e0;
      border-radius: 4px;
      transition: all 0.2s;
    }
    .hw-pagination a:hover {
      color: #0066ff;
      border-color: #0066ff;
    }
    .hw-pagination .active {
      color: #fff;
      background: #0066ff;
      border-color: #0066ff;
    }
    .hw-pagination .dots {
      border: none;
      background: transparent;
      min-width: 20px;
    }
     @media (max-width: 960px) {
      .hw-news-grid { grid-template-columns: repeat(2, 1fr); }
      .hw-footer-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 640px) {
      .hw-news-grid { grid-template-columns: 1fr; }
      .hw-header-inner { flex-wrap: wrap; height: auto; padding: 10px 0; gap: 8px; }
      .hw-nav { order: 3; width: 100%; justify-content: center; }
      .hw-footer-grid { grid-template-columns: 1fr; }
      .hw-banner { padding: 44px 0; }
      .hw-banner h1 { font-size: 24px; }
    }