*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Noto Sans SC', sans-serif; color: #1a1a1a; background: #fff; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
::selection { background: #0d4f6c; color: #fff; }

/* Layout */
.container { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.container-narrow { max-width: 800px; margin: 0 auto; padding: 0 40px; }

/* Typography */
.text-display { font-size: clamp(2.5rem, 5vw, 3.75rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; }
.text-h1 { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }

/* Sections */
.section { padding: 96px 0; }
.section-sm { padding: 64px 0; }
.section-label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #0d4f6c; margin-bottom: 16px; display: block; }
.section-title { color: #111; margin-bottom: 16px; }
.section-desc { color: #6a6a6a; font-size: 1.0625rem; max-width: 520px; line-height: 1.75; }
.section-desc-center { margin: 0 auto; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; border-radius: 6px; font-size: 0.9375rem; font-weight: 600; transition: all 0.2s; cursor: pointer; border: none; font-family: inherit; }
.btn-primary { background: #0d4f6c; color: #fff; }
.btn-primary:hover { background: #0a3f55; transform: translateY(-1px); }
.btn-outline { background: transparent; color: #0d4f6c; border: 1.5px solid #0d4f6c; }
.btn-outline:hover { background: #0d4f6c; color: #fff; }

/* ==================== NAVIGATION ==================== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: 68px; display: flex; align-items: center;
  transition: all 0.3s;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.06);
  max-width: 100vw;
  overflow: visible;
}

.nav-inner {
  max-width: 1200px; width: 100%; margin: 0 auto; padding: 0 40px;
  display: flex; align-items: center; justify-content: space-between;
  box-sizing: border-box;
}

.nav-logo {
  display: flex; align-items: center; gap: 12px;
  font-weight: 700; font-size: 1rem; color: #0d4f6c;
}

.nav-logo-icon {
  width: 40px; height: 40px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.nav-logo-icon img { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; }

.nav-logo-text {
  display: flex; flex-direction: column; gap: 1px;
}
.nav-logo-text .brand-cn {
  font-size: 1.0625rem; font-weight: 700; color: #0d4f6c; line-height: 1.25;
}
.nav-logo-text .brand-en {
  font-size: 0.625rem; font-weight: 500; color: #8a9faa; letter-spacing: 0.08em;
}

.nav-links {
  display: flex; align-items: center; gap: 28px;
}
.nav-links a {
  font-size: 0.875rem; font-weight: 500; color: #5a5a5a;
  transition: color 0.2s;
  padding: 4px 0;
}
.nav-links a:hover { color: #0d4f6c; }

.nav-cta {
  background: #0d4f6c; color: #fff !important;
  padding: 8px 24px; border-radius: 6px;
  font-weight: 600 !important; font-size: 0.875rem !important;
  transition: all 0.2s; white-space: nowrap;
}
.nav-cta:hover { background: #0a3f55 !important; }
.nav-lang-switch { color: #0d4f6c; font-weight: 600; font-size: 0.8125rem; padding: 6px 12px; border: 1.5px solid #0d4f6c; border-radius: 6px; margin-right: 4px; white-space: nowrap; transition: all 0.2s; }
.nav-lang-switch:hover { background: #0d4f6c; color: #fff; }

.nav-hamburger {
  display: none;
  cursor: pointer; padding: 4px 8px;
  background: none; border: none;
  align-items: center; justify-content: center;
}

/* ==================== HERO ==================== */
.hero {
  min-height: 100vh; background: #0d1f2d;
  display: grid; grid-template-columns: 1fr 1fr;
  position: relative; overflow: hidden;
}
.hero-content { padding: 120px 0 80px; display: flex; flex-direction: column; justify-content: center; }
.hero-label { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.45); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 28px; }
.hero-label-dot { width: 6px; height: 6px; background: #4db8a4; border-radius: 50%; }
.hero-title { color: #fff; margin-bottom: 24px; }
.hero-title span { display: block; color: rgba(255,255,255,0.65); font-weight: 500; font-size: 0.7em; margin-top: 12px; }
.hero-desc { color: rgba(255,255,255,0.7); font-size: 1rem; line-height: 1.8; max-width: 440px; margin-bottom: 40px; }
.hero-actions { display: flex; gap: 16px; align-items: center; }
.hero-stats { display: flex; gap: 48px; margin-top: 72px; padding-top: 40px; border-top: 1px solid rgba(255,255,255,0.1); }
.hero-stat-value { font-size: 2rem; font-weight: 700; color: #fff; line-height: 1; }
.hero-stat-label { font-size: 0.75rem; color: rgba(255,255,255,0.4); margin-top: 6px; font-weight: 500; }

.hero-visual { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.hero-visual::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, #0d1f2d 0%, transparent 60%); z-index: 1; }
.hero-capsule-img { position: relative; z-index: 2; max-height: 85vh; width: auto; object-fit: contain; opacity: 0.9; }

.hero-expo { background: rgba(13,31,45,0.85); backdrop-filter: blur(16px); border: 1px solid rgba(77,184,164,0.25); border-radius: 12px; padding: 20px 24px; }
.hero-expo--desktop { position: absolute; bottom: 40px; right: 40px; z-index: 3; max-width: 270px; }
.hero-expo--mobile { display: none; }
.hero-expo-tag { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #4db8a4; margin-bottom: 8px; display: block; }
.hero-expo-name { font-size: 0.9375rem; font-weight: 700; color: #fff; margin-bottom: 6px; }
.hero-expo-info { font-size: 0.8125rem; color: rgba(255,255,255,0.55); line-height: 1.7; }

/* ==================== PRODUCTS ==================== */
.divider { height: 1px; background: #ebebeb; }
.products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.product-card { background: #fff; border-radius: 12px; overflow: hidden; border: 1px solid #ebebeb; transition: all 0.25s; }
.product-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.08); transform: translateY(-4px); }
.product-img { height: 200px; overflow: hidden; background: #f5f7f9; }
.product-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.product-card:hover .product-img img { transform: scale(1.04); }
.product-body { padding: 28px; }
.product-category { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #0d4f6c; margin-bottom: 10px; display: block; }
.product-name { font-size: 1.125rem; font-weight: 700; color: #111; margin-bottom: 10px; }
.product-desc { font-size: 0.875rem; color: #6a6a6a; line-height: 1.7; }

/* ==================== FEATURES ==================== */
.features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: #ebebeb; border: 1px solid #ebebeb; border-radius: 12px; overflow: hidden; }
.feature-item { background: #fff; padding: 40px 32px; text-align: center; }
.feature-value { font-size: 2.25rem; font-weight: 700; color: #0d4f6c; margin-bottom: 8px; }
.feature-label { font-size: 0.875rem; color: #6a6a6a; }

/* ==================== TECHNOLOGY ==================== */
.tech-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.tech-preview-heading { text-align: center; max-width: 820px; margin: 0 auto 56px; }
.tech-preview-heading .section-desc { margin-left: auto; margin-right: auto; }
.tech-process-block { display: grid; grid-template-columns: minmax(0,0.9fr) minmax(0,1.1fr); gap: 72px; align-items: center; margin-bottom: 56px; }
.tech-process-block:last-child { margin-bottom: 0; }
.tech-process-block--reverse { grid-template-columns: minmax(0,1.1fr) minmax(0,0.9fr); }
.tech-img { border-radius: 12px; overflow: hidden; background:#071d2a; }
.tech-img img { width: 100%; height: 420px; object-fit: cover; display:block; }
.tech-steps { display: flex; flex-direction: column; }
.tech-step { display: flex; gap: 20px; padding: 24px 0; border-bottom: 1px solid #ebebeb; }
.tech-step:last-child { border-bottom: none; }
.tech-num { font-size: 0.8125rem; font-weight: 700; color: #0d4f6c; min-width: 28px; }
.tech-title { font-size: 1rem; font-weight: 600; color: #111; margin-bottom: 4px; }
.tech-desc { font-size: 0.875rem; color: #6a6a6a; }

/* ==================== ABOUT ==================== */
.about-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 80px; align-items: center; }
.about-text .text-h1 { margin-bottom: 24px; }
.about-text p { color: #5a5a5a; font-size: 1rem; line-height: 1.8; margin-bottom: 16px; }
.about-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; padding-top: 40px; border-top: 1px solid #ebebeb; }
.about-stat-value { font-size: 1.75rem; font-weight: 700; color: #0d4f6c; }
.about-stat-label { font-size: 0.8125rem; color: #8a8a8a; margin-top: 4px; }
.about-img { border-radius: 12px; overflow: hidden; }
.about-img img { width: 100%; height: 400px; object-fit: cover; }

/* ==================== EXHIBITIONS ==================== */
.expo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.expo-card { background: #fff; border: 1px solid #ebebeb; border-radius: 12px; padding: 32px; transition: all 0.25s; }
.expo-card:hover { border-color: #0d4f6c; box-shadow: 0 8px 32px rgba(13,79,108,0.08); transform: translateY(-2px); }
.expo-card-badge { display: inline-block; background: #f0f7f7; padding: 3px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; color: #0d4f6c; margin-bottom: 12px; }
.expo-card-name { font-size: 1.0625rem; font-weight: 700; color: #111; margin-bottom: 8px; }
.expo-card-meta { font-size: 0.875rem; color: #6a6a6a; line-height: 1.8; }

/* ==================== CTA ==================== */
.cta { background: #0d1f2d; padding: 100px 0; text-align: center; }
.cta-title { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; color: #fff; margin-bottom: 16px; }
.cta-desc { color: rgba(255,255,255,0.5); font-size: 1rem; margin-bottom: 40px; }

/* ==================== CONTACT ==================== */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.contact-info h3 { font-size: 1.5rem; font-weight: 700; color: #111; margin-bottom: 16px; }
.contact-info > p { color: #6a6a6a; font-size: 0.9375rem; line-height: 1.75; margin-bottom: 32px; }
.contact-list { display: flex; flex-direction: column; gap: 28px; }
.contact-item { display: flex; gap: 16px; }
.contact-icon { width: 40px; height: 40px; background: #f0f5f7; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.125rem; flex-shrink: 0; }
.contact-label { font-size: 0.75rem; color: #8a8a8a; font-weight: 500; margin-bottom: 4px; letter-spacing: 0.04em; }
.contact-value { font-size: 0.9375rem; font-weight: 600; color: #111; line-height: 1.6; }
.contact-value-list { list-style: none; padding: 0; margin: 0; }
.contact-value-list li { font-size: 0.9375rem; font-weight: 600; color: #111; line-height: 1.8; }

.contact-form { background: #f8fafb; border-radius: 16px; padding: 40px; border: 1px solid #ebebeb; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 0.8125rem; font-weight: 600; color: #333; margin-bottom: 6px; }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 11px 14px; border: 1px solid #ddd; border-radius: 8px; font-size: 0.9375rem; font-family: inherit; background: #fff; transition: border-color 0.2s; outline: none; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: #0d4f6c; }
.form-group textarea { resize: vertical; min-height: 90px; }
.form-submit { width: 100%; padding: 13px; background: #0d4f6c; color: #fff; border: none; border-radius: 8px; font-size: 0.9375rem; font-weight: 600; cursor: pointer; transition: background 0.2s; font-family: inherit; }
.form-submit:hover { background: #0a3f55; }
.form-success { display: none; text-align: center; padding: 32px; background: #f0f7f5; border-radius: 12px; color: #0d4f6c; }
.form-success.show { display: block; }
.contact-form form { display: block; }
.contact-form .form-success.show + form { display: none; }
.form-success-icon { font-size: 2.5rem; margin-bottom: 12px; }

/* ==================== FOOTER ==================== */
.footer { background: #0d1f2d; color: rgba(255,255,255,0.5); padding: 64px 0 32px; }
.footer-grid { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1.2fr; gap: 48px; margin-bottom: 48px; }
.footer-brand h4 { color: #fff; font-size: 1rem; font-weight: 700; margin-bottom: 14px; }
.footer-brand p { font-size: 0.875rem; line-height: 1.75; }
.footer-col h5 { color: #fff; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 20px; }
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 16px; line-height: 1.7; }
.footer-col ul li a { font-size: 0.875rem; transition: color 0.2s; }
.footer-col ul li a:hover { color: #fff; }
.footer-contact-item { margin-bottom: 18px; line-height: 1.7; }
.footer-contact-item .fc-label { font-size: 0.6875rem; color: rgba(255,255,255,0.35); font-weight: 500; letter-spacing: 0.04em; display: block; margin-bottom: 3px; }
.footer-contact-item .fc-value { font-size: 0.875rem; color: rgba(255,255,255,0.75); }
.footer-contact-item .fc-value a { color: rgba(255,255,255,0.75); }
.footer-contact-item .fc-value a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 24px; font-size: 0.8125rem; display: flex; justify-content: space-between; }

/* ==================== UTILITIES ==================== */
.scroll-top { position: fixed; bottom: 32px; right: 32px; width: 44px; height: 44px; background: #0d4f6c; color: #fff; border: none; border-radius: 50%; font-size: 1.125rem; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(13,79,108,0.3); opacity: 0; pointer-events: none; transition: all 0.3s; z-index: 99; }
.scroll-top.visible { opacity: 1; pointer-events: auto; }
.scroll-top:hover { background: #0a3f55; transform: translateY(-2px); }

.reveal { opacity: 0; transform: translateY(24px); transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ==================== RESPONSIVE — TABLET (≤1024px) ==================== */
@media (max-width: 1024px) {
  .nav-hamburger {
    display: flex;
  }
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-visual { height: 400px; position: relative; }
  .hero-capsule-img { max-height: 400px; }
  .hero-expo { bottom: 20px; right: 20px; max-width: 220px; padding: 16px; }
  .hero-content { padding: 100px 0 60px; }
  .hero-stats { gap: 32px; }
  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .tech-grid { grid-template-columns: 1fr; gap: 48px; }
  .tech-preview-heading { margin-bottom: 36px; }
  .tech-process-block,
  .tech-process-block--reverse { grid-template-columns: 1fr; gap: 28px; margin-bottom: 42px; }
  .tech-process-block--reverse .tech-img { order: -1; }
  .about-grid { grid-template-columns: 1fr; gap: 48px; }
  .contact-grid { grid-template-columns: 1fr; gap: 48px; }
  .expo-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }

  /* Mobile nav overlay */
  .nav-links {
    display: none;
    position: absolute; top: 68px; left: 0; right: 0;
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(12px);
    flex-direction: column;
    padding: 24px 40px; gap: 20px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 4px 0; }
}

/* News archive list */
.news-archive-section { background: #fafbfc; }
.news-archive-section .section-title { margin-bottom: 24px; }
.news-search { display: flex; align-items: center; gap: 8px; margin-bottom: 24px; }
.news-search-input { width: 280px; padding: 10px 14px; border: 1px solid #ddd; border-radius: 8px; font-size: 0.9375rem; outline: none; transition: border-color 0.2s; }
.news-search-input:focus { border-color: #0d4f6c; }
.news-search-btn { padding: 10px 20px; background: #0d4f6c; color: #fff; border: none; border-radius: 8px; font-size: 0.9375rem; cursor: pointer; transition: background 0.2s; }
.news-search-btn:hover { background: #0a3d56; }
.news-search-clear { padding: 10px 16px; color: #8a8a8a; text-decoration: none; font-size: 0.9375rem; }
.news-search-clear:hover { color: #333; }
.news-empty { text-align: center; color: #8a8a8a; padding: 48px 0; font-size: 1rem; }
.news-list { display: flex; flex-direction: column; gap: 0; }
.news-list-item { display: grid; grid-template-columns: 140px 1fr auto; gap: 16px; align-items: start; padding: 20px 0; border-bottom: 1px solid #ebebeb; }
.news-list-meta { display: flex; flex-direction: column; gap: 4px; padding-top: 2px; }
.news-list-date { font-size: 0.8125rem; color: #aaa; }
.news-list-category { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; color: #0d4f6c; text-transform: uppercase; }
.news-list-body { min-width: 0; }
.news-list-title { font-size: 1rem; font-weight: 600; color: #111; text-decoration: none; line-height: 1.5; display: block; margin-bottom: 4px; }
.news-list-title:hover { color: #0d4f6c; }
.news-list-summary { font-size: 0.8125rem; color: #8a8a8a; line-height: 1.6; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-list-link { font-size: 0.8125rem; color: #0d4f6c; text-decoration: none; white-space: nowrap; padding-top: 2px; align-self: start; }
.news-list-link:hover { text-decoration: underline; }
.news-pagination { display: flex; align-items: center; gap: 6px; margin-top: 32px; flex-wrap: wrap; }
.news-page-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 0.875rem; color: #333; text-decoration: none; background: #fff; transition: all 0.2s; }
.news-page-btn:hover { border-color: #0d4f6c; color: #0d4f6c; }
.news-page-btn.active { background: #0d4f6c; color: #fff; border-color: #0d4f6c; }
.news-page-btn.disabled { color: #ccc; border-color: #eee; cursor: default; pointer-events: none; }
.news-page-info { font-size: 0.8125rem; color: #8a8a8a; margin-left: 8px; }

/* ==================== RESPONSIVE — MOBILE (≤768px) ==================== */
@media (max-width: 768px) {
  html, body { overflow-x: hidden; max-width: 100vw; }
  .container, .container-narrow { padding: 0 20px; }
  .nav-inner { padding: 0 20px; }
  .nav-hamburger { display: flex; }
  .section { padding: 64px 0; }
  .section-label { font-size: 0.6875rem; margin-bottom: 12px; }
  .section-desc { font-size: 0.9375rem; }
  .nav-links { padding: 20px; }

  /* ---- HERO ---- */
  .hero-title { font-size: 1.875rem; }
  .hero-title span { font-size: 0.55em; margin-top: 8px; }
  .hero-desc { font-size: 0.9375rem; margin-bottom: 28px; }
  .hero-label { font-size: 0.75rem; margin-bottom: 20px; }
  .hero-content { padding: 88px 0 0; }
  .hero-visual { display: none; }

  /* Hero actions: stack on very narrow screens */
  .hero-actions { flex-direction: column; gap: 12px; }
  .hero-actions .btn { width: 100%; justify-content: center; }

  /* Hero stats: 4-col on mobile, compact - force inline */
  .hero-stats {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin-top: 40px;
    padding-top: 28px;
    text-align: center;
  }
  .hero-stats > div {
    grid-column: auto !important;
    min-width: 0;
    text-align: center;
  }
  .hero-stats > div:nth-child(3),
  .hero-stats > div:nth-child(4) {
    grid-column: auto !important;
  }
  .hero-stat-value { font-size: 1.25rem !important; white-space: nowrap; line-height: 1.15; }
  .hero-stat-label { font-size: 0.6rem !important; margin-top: 4px; white-space: nowrap; line-height: 1.2; }

  /* Hero expo: mobile card centered */
  .hero-expo--desktop { display: none; }
  .hero-expo--mobile {
    display: block !important;
    grid-column: 1 / -1;
    margin: 32px auto 0 !important;
    padding: 24px;
    max-width: 320px !important;
    width: min(100%, 320px) !important;
    text-align: left;
  }
  .hero-expo--mobile .container {
    padding: 0;
  }

  /* ---- FEATURES / DATA METRICS ---- */
  .features-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1px;
  }
  .feature-item { padding: 28px 20px; }
  .feature-value { font-size: 1.75rem; }
  .feature-label { font-size: 0.8125rem; }

  /* ---- PRODUCTS ---- */
  .products-grid { grid-template-columns: 1fr; gap: 32px; }
  .product-card { border-radius: 10px; }
  .product-img { height: 180px; }
  .product-body { padding: 24px; }
  .product-name { font-size: 1rem; margin-bottom: 8px; }
  .product-desc { font-size: 0.8125rem; line-height: 1.8; }
  .product-category { font-size: 0.6875rem; margin-bottom: 8px; }

  /* ---- TECHNOLOGY ---- */
  .tech-step { padding: 20px 0; gap: 16px; }
  .tech-num { font-size: 0.875rem; min-width: 24px; }
  .tech-title { font-size: 0.9375rem; margin-bottom: 6px; }
  .tech-desc { font-size: 0.8125rem; line-height: 1.7; }
  .tech-img img { height: 280px; }

  /* ---- ABOUT ---- */
  /* About stats: 3-col on mobile, compact - force inline */
  .about-stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin-top: 32px;
    padding-top: 32px;
    text-align: center;
  }
  .about-stats > div {
    grid-column: auto !important;
    min-width: 0;
    text-align: center;
  }
  .about-stats > div:nth-child(3) {
    grid-column: auto !important;
  }
  .about-stat-value { font-size: 1.25rem !important; white-space: nowrap; line-height: 1.15; }
  .about-stat-label { font-size: 0.6rem !important; margin-top: 4px; white-space: nowrap; line-height: 1.2; }
  .about-text p { font-size: 0.9375rem; line-height: 1.8; margin-bottom: 12px; }
  .about-img img { height: 280px; }

  /* ---- EXHIBITIONS ---- */
  .expo-card { padding: 24px; }
  .expo-card-name { font-size: 1rem; margin-bottom: 10px; }
  .expo-card-meta { font-size: 0.8125rem; line-height: 1.8; }
  .expo-card-badge { font-size: 0.6875rem; }

  /* ---- CONTACT ---- */
  .contact-grid { gap: 40px; }
  .contact-info h3 { font-size: 1.375rem; margin-bottom: 12px; }
  .contact-info > p { font-size: 0.875rem; margin-bottom: 24px; }
  .contact-list { gap: 24px; }
  .contact-item { gap: 14px; }
  .contact-icon { width: 36px; height: 36px; font-size: 1rem; }
  .contact-value { font-size: 0.875rem; }
  .contact-value-list li { font-size: 0.875rem; }
  .contact-form { padding: 28px; }
  .form-group input, .form-group select, .form-group textarea { font-size: 16px; padding: 10px 12px; }
  .form-group label { font-size: 0.75rem; }
  .form-submit { padding: 14px; font-size: 1rem; }
  .form-row { grid-template-columns: 1fr; }

  /* ---- FOOTER ---- */
  .footer { padding: 56px 0 28px; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .footer-brand h4 { font-size: 1.0625rem; margin-bottom: 12px; }
  .footer-brand p { font-size: 0.8125rem; }
  .footer-col h5 { margin-bottom: 16px; font-size: 0.6875rem; }
  .footer-col ul li { margin-bottom: 14px; line-height: 1.8; }
  .footer-col ul li a { font-size: 0.9375rem; }
  .footer-contact-item { margin-bottom: 16px; }
  .footer-contact-item .fc-label { font-size: 0.625rem; margin-bottom: 4px; }
  .footer-contact-item .fc-value { font-size: 0.9375rem; }
  .footer-bottom { flex-direction: column; gap: 8px; padding-top: 20px; font-size: 0.75rem; }
}

/* ==================== SUB-PAGES COMMON ==================== */
.hero-page { background: #0d1f2d; padding: 120px 0 64px; text-align: center; }
.hero-page h1 { color: #fff; font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; margin-bottom: 16px; }
.hero-page p { color: rgba(255,255,255,0.5); font-size: 1.0625rem; max-width: 560px; margin: 0 auto; line-height: 1.75; }
.breadcrumb { font-size: 0.8125rem; color: rgba(255,255,255,0.4); margin-bottom: 20px; }
.breadcrumb a { color: rgba(255,255,255,0.5); transition: color 0.2s; }
.breadcrumb a:hover { color: #fff; }
.breadcrumb span { margin: 0 8px; }

/* Product list row */
.products-list { display: flex; flex-direction: column; gap: 24px; }
.product-row { display: grid; grid-template-columns: 1fr 1.5fr; gap: 0; border: 1px solid #ebebeb; border-radius: 12px; overflow: hidden; transition: all 0.25s; }
.product-row:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.08); transform: translateY(-2px); }
.product-row-img { overflow: hidden; background: #f5f7f9; }
.product-row-img img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; transition: transform 0.4s; }
.product-row:hover .product-row-img img { transform: scale(1.04); }
.product-row-body { padding: 40px; display: flex; flex-direction: column; justify-content: center; }
.product-row-body h3 { font-size: 1.375rem; font-weight: 700; color: #111; margin-bottom: 12px; }
.product-row-body > p { font-size: 0.9375rem; color: #6a6a6a; line-height: 1.75; margin-bottom: 20px; }
.product-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.tag-pill { background: #f0f5f7; padding: 4px 12px; border-radius: 20px; font-size: 0.75rem; font-weight: 500; color: #555; }
.product-actions { display: flex; gap: 12px; }
.btn-sm { padding: 9px 20px; font-size: 0.875rem; border-radius: 6px; font-weight: 600; transition: all 0.2s; display: inline-flex; align-items: center; cursor: pointer; }
.btn-sm-primary { background: #0d4f6c; color: #fff; border: none; }
.btn-sm-primary:hover { background: #0a3f55; }
.btn-sm-outline { color: #0d4f6c; border: 1.5px solid #0d4f6c; background: transparent; }
.btn-sm-outline:hover { background: #0d4f6c; color: #fff; }

/* Product detail */
.detail-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: start; }
.detail-img { border-radius: 12px; overflow: hidden; }
.detail-img img { width: 100%; height: 400px; object-fit: cover; }
.detail-info h2 { font-size: 1.75rem; font-weight: 700; color: #111; margin-bottom: 8px; }
.detail-info .detail-category { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #0d4f6c; margin-bottom: 16px; display: block; }
.detail-info .detail-desc { font-size: 1rem; color: #5a5a5a; line-height: 1.8; margin-bottom: 28px; }
.specs-table { width: 100%; border-collapse: collapse; margin-bottom: 32px; }
.specs-table tr { border-bottom: 1px solid #ebebeb; }
.specs-table td { padding: 12px 0; font-size: 0.9375rem; }
.specs-table td:first-child { color: #8a8a8a; width: 140px; font-weight: 500; }
.specs-table td:last-child { color: #111; font-weight: 600; }
.detail-section { margin-bottom: 32px; }
.detail-section h3 { font-size: 1.125rem; font-weight: 700; color: #111; margin-bottom: 12px; }
.detail-section p { font-size: 0.9375rem; color: #6a6a6a; line-height: 1.8; }
.back-link { display: inline-flex; align-items: center; gap: 6px; color: #0d4f6c; font-size: 0.875rem; font-weight: 500; margin-top: 24px; }

/* Certification cards */
.cert-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cert-card { background: #fff; border: 1px solid #ebebeb; border-radius: 12px; padding: 36px 28px; text-align: center; transition: all 0.25s; }
.cert-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.08); transform: translateY(-2px); }
.cert-icon { font-size: 2.5rem; margin-bottom: 16px; }
.cert-name { font-size: 1.0625rem; font-weight: 700; color: #111; margin-bottom: 4px; }
.cert-name-en { font-size: 0.75rem; color: #8a8a8a; margin-bottom: 12px; }
.cert-desc { font-size: 0.875rem; color: #6a6a6a; line-height: 1.7; }

/* News list */
.news-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.news-card { background: #fff; border: 1px solid #ebebeb; border-radius: 12px; overflow: hidden; transition: all 0.25s; }
.news-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.08); transform: translateY(-2px); }
.news-card-img { height: 200px; overflow: hidden; background: #f5f7f9; }
.news-card-img img { width: 100%; height: 100%; object-fit: cover; }
.news-card-body { padding: 24px; }
.news-card-category { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #0d4f6c; margin-bottom: 8px; display: block; }
.news-card-title { font-size: 1.0625rem; font-weight: 700; color: #111; margin-bottom: 8px; }
.news-card-summary { font-size: 0.875rem; color: #6a6a6a; line-height: 1.7; margin-bottom: 12px; }
.news-card-date { font-size: 0.75rem; color: #aaa; }

/* News detail */
.news-detail-header { margin-bottom: 32px; }
.news-detail-header h1 { font-size: 1.75rem; font-weight: 700; color: #111; margin-bottom: 12px; }
.news-meta { font-size: 0.8125rem; color: #8a8a8a; margin-bottom: 16px; }
.news-content { font-size: 1rem; color: #333; line-height: 1.9; }
.news-content p { margin-bottom: 16px; }
.news-html-content { font-size: 1rem; color: #333; line-height: 1.9; }
.news-html-content p { margin-bottom: 16px; }
.news-html-content img { max-width: 100%; height: auto; border-radius: 8px; margin: 16px 0; }
.news-html-content h1,.news-html-content h2,.news-html-content h3 { margin: 24px 0 12px; }
.news-html-content ul,.news-html-content ol { margin: 12px 0; padding-left: 24px; }
.news-html-content a { color: #0d4f6c; text-decoration: underline; }
.related-news { margin-top: 48px; padding-top: 48px; border-top: 1px solid #ebebeb; }
.related-news h3 { font-size: 1.25rem; font-weight: 700; color: #111; margin-bottom: 24px; }

/* About milestones */
.milestones { display: flex; flex-direction: column; gap: 0; position: relative; padding-left: 32px; border-left: 2px solid #0d4f6c; }
.milestone { position: relative; padding: 16px 0 16px 20px; }
.milestone::before { content: ''; position: absolute; left: -37px; top: 22px; width: 12px; height: 12px; background: #0d4f6c; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px #0d4f6c; }
.milestone-year { font-size: 1.0625rem; font-weight: 700; color: #0d4f6c; }
.milestone-event { font-size: 0.9375rem; color: #5a5a5a; }

/* Tech features */
.tech-features-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.tech-feature-card { background: #fff; border: 1px solid #ebebeb; border-radius: 12px; padding: 32px; transition: all 0.25s; }
.tech-feature-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.08); }
.tech-feature-icon { font-size: 2rem; margin-bottom: 12px; }
.tech-feature-title { font-size: 1.0625rem; font-weight: 700; color: #111; margin-bottom: 8px; }
.tech-feature-desc { font-size: 0.875rem; color: #6a6a6a; line-height: 1.7; }

/* Tech specs table */
.tech-specs-table { width: 100%; border-collapse: collapse; }
.tech-specs-table tr { border-bottom: 1px solid #ebebeb; }
.tech-specs-table td { padding: 14px 0; font-size: 0.9375rem; }
.tech-specs-table td:first-child { color: #5a5a5a; font-weight: 500; width: 200px; }
.tech-specs-table td:last-child { color: #111; font-weight: 600; }

/* CTA section for sub-pages */
.subpage-cta { background: #0d1f2d; padding: 80px 0; text-align: center; margin-top: 64px; }

/* ===== SUB-PAGES MOBILE ===== */
@media (max-width: 768px) {
  .hero-page { padding: 100px 0 48px; }
  .hero-page h1 { font-size: 1.75rem; }
  .hero-page p { font-size: 0.9375rem; }
  .product-row { grid-template-columns: 1fr; }
  .product-row-img img { min-height: 200px; }
  .product-row-body { padding: 24px; }
  .detail-grid { grid-template-columns: 1fr; gap: 32px; }
  .detail-img img { height: 260px; }
  .cert-grid { grid-template-columns: 1fr; gap: 16px; }
  .cert-card { padding: 24px; }
  .news-grid { grid-template-columns: 1fr; }
  .tech-features-grid { grid-template-columns: 1fr; }
  .specs-table td:first-child { width: 110px; }
  .milestones { padding-left: 24px; }
  .milestone::before { left: -29px; }
  /* Mobile: hide news archive */
  .news-archive-section { display: none; }
}

/* Multilingual flag switcher */
.nav-lang-group { display:inline-flex; align-items:center; gap:6px; margin:0 4px; }
.nav-lang-flag { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border:1px solid rgba(13,79,108,.16); border-radius:999px; background:#fff; box-shadow:0 2px 8px rgba(13,79,108,.08); font-size:17px; transition:.2s ease; }
.nav-lang-flag:hover { transform:translateY(-1px); border-color:#0d4f6c; box-shadow:0 4px 12px rgba(13,79,108,.16); }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.footer-lang-group { display:inline-flex; align-items:center; gap:8px; }
.footer-lang-flag { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); font-size:16px; }
.footer-lang-flag:hover { background:rgba(255,255,255,.16); }
html[dir="rtl"] body { direction:rtl; text-align:right; }
html[dir="rtl"] .hero-content, html[dir="rtl"] .section-title, html[dir="rtl"] .page-title { text-align:right; }
@media (max-width:768px){ .nav-lang-group{width:100%; justify-content:center; padding:8px 0;} .nav-lang-flag{width:36px;height:36px;font-size:18px;} .footer-bottom{justify-content:center;text-align:center;} }

/* ==================== CUSTOM CAPSULE DESIGNER ==================== */
.nav-custom-capsule{
  display:inline-flex;align-items:center;justify-content:center;
  margin-left:18px;background:#0d4f6c;color:#fff!important;
  padding:8px 18px;border-radius:6px;font-size:.875rem;font-weight:700;
  white-space:nowrap;box-shadow:0 8px 18px rgba(13,79,108,.16);transition:.2s ease;
}
.nav-custom-capsule:hover{background:#0a3f55;transform:translateY(-1px)}
.capsule-customizer-section{background:#f8fafb;position:relative;overflow:hidden}
.capsule-customizer-shell{display:grid;grid-template-columns:minmax(0,3fr) minmax(310px,1fr);gap:28px;align-items:start}
.capsule-preview-panel{position:sticky;top:96px;min-height:720px;border-radius:22px;background:#cfd6dd;border:1px solid rgba(13,79,108,.12);box-shadow:0 18px 45px rgba(13,31,45,.08);overflow:hidden}
.capsule-watermark-layer{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;-webkit-mask:radial-gradient(ellipse at center,transparent 0 34%,rgba(0,0,0,.15) 42%,#000 68%);mask:radial-gradient(ellipse at center,transparent 0 34%,rgba(0,0,0,.15) 42%,#000 68%)}.capsule-watermark-layer .wm{position:absolute;font-size:clamp(1.7rem,3.6vw,4.2rem);font-weight:800;letter-spacing:.08em;color:rgba(13,79,108,.20);white-space:nowrap;transform:rotate(-18deg);text-transform:uppercase}.capsule-watermark-layer .wm-1{left:-3%;top:3%}.capsule-watermark-layer .wm-2{left:30%;top:5%}.capsule-watermark-layer .wm-3{right:-8%;top:6%}.capsule-watermark-layer .wm-4{left:6%;top:27%}.capsule-watermark-layer .wm-5{right:2%;top:32%}.capsule-watermark-layer .wm-6{left:-7%;top:52%}.capsule-watermark-layer .wm-7{left:36%;top:55%}.capsule-watermark-layer .wm-8{right:-7%;top:57%}.capsule-watermark-layer .wm-9{left:3%;bottom:7%}.capsule-watermark-layer .wm-10{left:34%;bottom:8%}.capsule-watermark-layer .wm-11{right:-3%;bottom:10%}.capsule-watermark-layer .wm-12{left:58%;top:20%}
.capsule-canvas-wrap{position:relative;z-index:2;width:100%;height:660px;background:#cfd6dd;border-radius:22px;overflow:hidden}.capsule-canvas-wrap canvas{display:block;width:100%!important;height:100%!important}.capsule-preview-hints{position:relative;z-index:3;margin:0 24px 22px;padding:12px 16px;border-radius:12px;background:rgba(255,255,255,.70);color:#6b7280;font-size:.875rem;text-align:center;box-shadow:0 8px 20px rgba(15,39,66,.05)}
.capsule-control-panel{background:#fff;border-radius:22px;border:1px solid rgba(13,79,108,.10);box-shadow:0 18px 45px rgba(13,31,45,.08);padding:24px;max-height:none}.capsule-control-panel h2{font-size:1.2rem;color:#0d1f2d;margin-bottom:18px}.capsule-control-section{border-top:1px solid #edf1f4;padding-top:18px;margin-top:18px}.capsule-control-section:first-of-type{border-top:0;margin-top:0;padding-top:0}.capsule-control-section h3{font-size:.95rem;color:#0d4f6c;margin-bottom:12px}.capsule-small-note{font-size:.75rem;color:#7a8790;line-height:1.7;margin-top:8px}.capsule-control-label{display:block;font-size:.76rem;font-weight:700;color:#45545d;margin:12px 0 6px}.capsule-field,.capsule-select{width:100%;height:38px;border:1px solid #dbe3e8;border-radius:10px;padding:0 12px;font:inherit;font-size:.86rem;background:#fff;color:#0d1f2d}.capsule-field:focus,.capsule-select:focus{outline:none;border-color:#0d4f6c;box-shadow:0 0 0 3px rgba(13,79,108,.10)}.capsule-size-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.capsule-size-btn{height:34px;border:1px solid #dbe3e8;border-radius:10px;background:#fff;color:#0d4f6c;font-weight:700;cursor:pointer}.capsule-size-btn.active{background:#0d4f6c;color:#fff;border-color:#0d4f6c}.capsule-spec-table{width:100%;margin-top:12px;border-collapse:collapse;font-size:.78rem}.capsule-spec-table td{padding:7px 6px;border-bottom:1px solid #edf1f4;color:#56636c}.capsule-spec-table td:last-child{text-align:right;font-weight:700;color:#0d1f2d}.capsule-color-row{display:grid;grid-template-columns:42px 1fr;gap:10px;align-items:center}.capsule-color-dot{width:38px;height:38px;border-radius:50%;padding:0;border:1px solid #dbe3e8;background:#fff;cursor:pointer}.capsule-pantone-msg{min-height:18px;font-size:.72rem;color:#8a9faa;margin-top:4px}.capsule-pantone-msg.ok{color:#0d6b57}.capsule-radio-stack{display:grid;grid-template-columns:1fr 1fr;gap:8px}.capsule-radio-stack label{display:flex;gap:6px;align-items:center;background:#f8fafb;border:1px solid #e5edf2;border-radius:10px;padding:9px;font-size:.82rem;color:#34434b}.capsule-print-box{display:none;margin-top:12px;padding:14px;border-radius:14px;background:#f8fafb;border:1px solid #e5edf2}.capsule-print-box.active{display:block}.capsule-range-row{display:grid;grid-template-columns:1fr 42px;gap:10px;align-items:center}.capsule-range-row input{width:100%}.capsule-range-row span{font-size:.8rem;font-weight:700;color:#0d4f6c;text-align:right}.capsule-action-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.capsule-btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;border-radius:10px;border:0;font-family:inherit;font-weight:700;cursor:pointer;transition:.2s ease}.capsule-btn-light{background:#f2f6f8;color:#0d4f6c;border:1px solid #dbe3e8}.capsule-btn-light:hover{background:#e8f0f4}.capsule-btn-dark{background:#0d4f6c;color:#fff}.capsule-btn-dark:hover{background:#0a3f55}
.capsule-share-modal,.capsule-fullscreen-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(6,16,24,.72);z-index:9999;padding:24px}.capsule-share-modal.active,.capsule-fullscreen-modal.active{display:flex}.capsule-share-card{width:min(560px,100%);background:#fff;border-radius:20px;padding:28px;box-shadow:0 24px 80px rgba(0,0,0,.25);position:relative}.capsule-share-card h3{color:#0d1f2d;margin-bottom:8px}.capsule-share-card p{color:#6b7280;font-size:.9rem;margin-bottom:14px}.capsule-share-card textarea{width:100%;height:90px;border:1px solid #dbe3e8;border-radius:12px;padding:12px;resize:none;margin-bottom:14px}.capsule-share-close{position:absolute;right:18px;top:14px;border:0;background:none;font-size:28px;cursor:pointer;color:#6b7280}.capsule-fullscreen-modal{background:#e9edf1}.capsule-fullscreen-canvas{width:min(1180px,94vw);height:min(760px,86vh);background:#dde3e8;border-radius:20px;overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.25)}.capsule-fullscreen-canvas canvas{width:100%!important;height:100%!important}.capsule-fullscreen-close{position:absolute;right:24px;top:18px;border:0;background:#0d4f6c;color:#fff;border-radius:999px;padding:10px 18px;font-weight:700;cursor:pointer}.capsule-toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%) translateY(20px);opacity:0;pointer-events:none;background:#0d1f2d;color:#fff;border-radius:999px;padding:10px 18px;font-size:.88rem;z-index:10000;transition:.2s ease}.capsule-toast.active{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:1024px){.capsule-customizer-shell{grid-template-columns:1fr}.capsule-canvas-wrap{height:560px}.capsule-preview-panel{min-height:620px}.nav-custom-capsule{display:none}.nav-links .nav-custom-capsule{display:flex}}
@media(max-width:768px){.capsule-preview-panel{min-height:auto;border-radius:16px}.capsule-canvas-wrap{height:430px;border-radius:16px}.capsule-customizer-shell{gap:18px}.capsule-control-panel{padding:18px;border-radius:16px}.capsule-size-grid{grid-template-columns:repeat(4,1fr)}.capsule-radio-stack{grid-template-columns:1fr}.capsule-action-grid{grid-template-columns:1fr}.capsule-preview-hints{font-size:.78rem;margin:0 12px 14px}.capsule-watermark-layer .wm{font-size:2rem}.capsule-fullscreen-canvas{width:96vw;height:76vh}.capsule-customizer-section{padding-top:56px;padding-bottom:56px}}
/* 3D designer refinements */
.capsule-spec-table{display:none!important}
@media(max-width:1024px){.capsule-preview-panel{position:relative;top:auto}}

/* 3D designer v4: fixed preview + independently scrolling console (desktop) */
@media (min-width:1025px){
  .capsule-customizer-shell{
    display:grid;
    grid-template-columns:minmax(0,3fr) minmax(340px,1fr);
    gap:32px;
    align-items:stretch;
    height:calc(100vh - 140px);
    min-height:640px;
  }
  .capsule-preview-panel{
    position:relative!important;
    top:auto!important;
    height:100%;
    min-height:0;
    background:#c5ccd3;
  }
  .capsule-canvas-wrap{
    height:calc(100% - 64px);
    background:#c5ccd3;
  }
  .capsule-control-panel{
    height:100%;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding-right:18px;
    scrollbar-width:thin;
  }
  .capsule-control-panel::-webkit-scrollbar{width:8px}
  .capsule-control-panel::-webkit-scrollbar-thumb{background:#c5d1d8;border-radius:999px}
  .capsule-control-panel::-webkit-scrollbar-track{background:#f3f6f8;border-radius:999px}
}
@media(max-width:1024px){
  .capsule-customizer-shell{height:auto!important;display:block!important}
  .capsule-preview-panel{position:relative!important;top:auto!important;height:auto!important;min-height:620px}
  .capsule-control-panel{height:auto!important;overflow:visible!important}
}


/* ===== Homepage technology zigzag refinement ===== */
.home-tech-section .home-tech-header {
  max-width: 860px;
  margin: 0 auto 56px;
  text-align: center;
}
.home-tech-section .home-tech-header .section-label,
.home-tech-section .home-tech-header .section-title,
.home-tech-section .home-tech-header .section-desc {
  text-align: center;
}
.home-tech-section .home-tech-row {
  display: grid;
  grid-template-columns: minmax(320px, 0.95fr) minmax(420px, 1.05fr);
  gap: 72px;
  align-items: center;
  margin-bottom: 56px;
}
.home-tech-section .home-tech-row:last-child { margin-bottom: 0; }
.home-tech-section .home-tech-row.is-reverse {
  grid-template-columns: minmax(420px, 1.05fr) minmax(320px, 0.95fr);
}
.home-tech-section .home-tech-media {
  border-radius: 16px;
  overflow: hidden;
  background: #071d2a;
  box-shadow: 0 16px 36px rgba(7,29,42,.12);
  min-height: 420px;
}
.home-tech-section .home-tech-media img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
}
.home-tech-section .home-tech-steps {
  display: flex;
  flex-direction: column;
}
.home-tech-section .home-tech-step {
  display: flex;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid #ebebeb;
}
.home-tech-section .home-tech-step:last-child { border-bottom: none; }
.home-tech-section .home-tech-step-num {
  flex: 0 0 44px;
  font-size: 1.125rem;
  line-height: 1.2;
  font-weight: 700;
  color: #0d4f6c;
  padding-top: 2px;
}
.home-tech-section .home-tech-step-body {
  min-width: 0;
}
.home-tech-section .home-tech-step-title {
  font-size: 1.25rem;
  line-height: 1.4;
  font-weight: 700;
  color: #111;
  margin: 0 0 10px;
}
.home-tech-section .home-tech-step-desc {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.9;
  color: #6a6a6a;
}
html[dir="rtl"] .home-tech-section .home-tech-step {
  flex-direction: row-reverse;
}
html[dir="rtl"] .home-tech-section .home-tech-step-body {
  text-align: right;
}
@media (max-width: 992px) {
  .home-tech-section .home-tech-row,
  .home-tech-section .home-tech-row.is-reverse {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-bottom: 42px;
  }
  .home-tech-section .home-tech-row.is-reverse .home-tech-media {
    order: -1;
  }
  .home-tech-section .home-tech-media,
  .home-tech-section .home-tech-media img {
    min-height: 280px;
    height: 280px;
  }
}
@media (max-width: 768px) {
  .home-tech-section .home-tech-header {
    margin-bottom: 36px;
  }
  .home-tech-section .home-tech-step {
    gap: 16px;
    padding: 20px 0;
  }
  .home-tech-section .home-tech-step-num {
    flex-basis: 38px;
    font-size: 1rem;
  }
  .home-tech-section .home-tech-step-title {
    font-size: 1.0625rem;
  }
  .home-tech-section .home-tech-step-desc {
    font-size: 0.9rem;
    line-height: 1.8;
  }
}