.btn-hero-outline {
      border: 1px solid rgba(255,255,255,0.3);
      color: #fff;
      background: transparent;
      padding: 13px 32px;
      font-size: 15px;
      font-weight: 600;
      border-radius: 10px;
      cursor: pointer;
      text-decoration: none;
      transition: all 0.3s ease;
    }
    .btn-hero-outline:hover {
      background: rgba(255,255,255,0.1);
      border-color: rgba(255,255,255,0.5);
    }

    /* ========== TRUST BAR ========== */
    .trust-bar {
      background: var(--color-primary-700);
      padding: 12px 0;
      position: relative;
      overflow: hidden;
    }
    .trust-bar::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--color-accent) 30%, var(--color-primary) 70%, transparent);
    }
    .trust-bar-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 12px;
      text-align: center;
    }
    .trust-bar-item {
      color: #fff;
      position: relative;
    }
    .trust-bar-item:not(:last-child)::after {
      content: '';
      position: absolute;
      right: 0; top: 50%;
      transform: translateY(-50%);
      width: 1px; height: 32px;
      background: rgba(255,255,255,0.15);
    }
    .trust-bar-item--animate {
      opacity: 0;
      transform: translateY(12px);
      transition: opacity 0.5s ease, transform 0.5s ease;
    }
    .trust-bar-item--animate.counted {
      opacity: 1;
      transform: translateY(0);
    }
    .trust-bar-item--animate:nth-child(1) { transition-delay: 0ms; }
    .trust-bar-item--animate:nth-child(2) { transition-delay: 50ms; }
    .trust-bar-item--animate:nth-child(3) { transition-delay: 100ms; }
    .trust-bar-item--animate:nth-child(4) { transition-delay: 150ms; }
    .trust-bar-item--animate:nth-child(5) { transition-delay: 200ms; }
    .trust-bar-item--animate:nth-child(6) { transition-delay: 250ms; }
    .trust-bar-number {
      font-family: 'Outfit', sans-serif;
      font-size: clamp(16px, 2vw, 24px);
      font-weight: 800;
      color: var(--color-accent);
      display: block;
      line-height: 1;
      margin-bottom: 4px;
    }
    .trust-bar-count {
      display: inline-block;
      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .trust-bar-count.pop {
      transform: scale(1.12);
    }
    .trust-bar-label {
      font-size: clamp(9px, 0.75vw, 11px);
      color: rgba(255, 255, 255, 0.8);
      font-weight: 500;
      line-height: 1.3;
    }

    /* ========== PRODUCT TYPES v2 ========== */
    .product-types-section-v2 {
      padding: clamp(14px, 2vw, 30px) 0 clamp(40px, 6vw, 80px);
      background: var(--color-gray-50);
    }
    .product-types-grid-v2 {
      display: flex;
      gap: 20px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      -ms-overflow-style: none;
      padding: 18px 0 36px 0;  /* vertical room so hover lift + shadow aren't clipped by overflow-x */
      margin: 0;
    }
    .product-types-grid-v2::-webkit-scrollbar { display: none; }
    /* Always-visible mobile scroll indicator (injected by JS; hidden until mobile) */
    .product-types-scroll-indicator { display: none; }
    .type-card-v2 {
      background: var(--color-white);
      border-radius: 16px;
      border: 1px solid var(--color-border);
      overflow: hidden;
      transition: all 0.3s ease;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
      cursor: pointer;
      text-decoration: none;
      display: flex;
      flex-direction: column;
      flex: 0 0 auto;
      width: calc(20% - 16px);
      scroll-snap-align: start;
    }
    .type-card-v2:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 40px rgba(0,0,0,0.14), 0 4px 16px rgba(232,134,58,0.08);
      border-color: var(--color-accent);
    }
    .type-card-v2-img {
      aspect-ratio: 1/1;
      width: 100%;
      min-height: 0;
      background-size: cover;
      background-position: center;
      position: relative;
      overflow: hidden;
    }
    .type-card-v2-img::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.1) 100%);
    }
    .type-card-v2-body {
      padding: 20px;
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    .type-card-v2-body h3 {
      font-size: var(--text-body);
      font-weight: 700;
      color: var(--color-gray-900);
      margin-bottom: 8px;
      line-height: 1.3;
    }
    .type-card-v2-body p {
      font-size: 13px;
      color: var(--color-gray-500);
      line-height: 1.5;
      margin: 0;
      flex: 1;
    }
    .type-card-v2-link {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      margin-top: 12px;
      font-size: var(--text-xs);
      font-weight: 600;
      color: var(--color-accent);
      text-decoration: none;
      transition: gap 0.2s;
    }
    .type-card-v2-link:hover { gap: 8px; }
    .product-types-scroll-wrapper {
      position: relative;
      margin-top: 8px;
      padding: 0 36px;
    }
    .product-types-scroll-wrapper .product-types-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 42px;
      height: 42px;
      border-radius: 50%;
      border: 1px solid rgba(0,0,0,0.08);
      background: rgba(255,255,255,0.3);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      cursor: pointer;
      font-size: 20px;
      font-weight: 300;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease,
                  background 0.25s ease, border-color 0.25s ease;
      color: #4B5563;
      z-index: 5;
      box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    }
    .product-types-scroll-wrapper:hover .product-types-arrow {
      opacity: 1;
      visibility: visible;
    }
    .product-types-scroll-wrapper .product-types-arrow--prev { left: 0; }
    .product-types-scroll-wrapper .product-types-arrow--next { right: 0; }
    .product-types-scroll-wrapper .product-types-arrow:hover {
      background: rgba(255, 255, 255, 0.5);
      color: var(--color-gray-900);
      border-color: rgba(0, 0, 0, 0.12);
      box-shadow: 0 4px 16px rgba(0,0,0,0.1);
      transform: translateY(-50%) scale(1.05);
    }

    /* ========== SECTION HEADER ========== */
    .section-header-center {
      text-align: center;
      margin-bottom: clamp(30px, 5vw, 56px);
    }
    .section-header-center h2 {
      font-size: clamp(28px, 3.5vw, 42px);
      font-weight: 800;
      color: var(--color-gray-900);
      margin-bottom: 12px;
      letter-spacing: -0.02em;
    }
    .section-header-center p {
      font-size: 17px;
      color: var(--color-gray-500);
      max-width: 600px;
      margin: 0 auto;
      line-height: 1.6;
    }

    .section-tag {
      display: inline-block;
      padding: var(--space-1) var(--space-3);
      background: var(--color-primary-light);
      color: var(--color-primary);
      font-size: var(--text-sm);
      font-weight: 600;
      border-radius: var(--radius-full);
      margin-bottom: var(--space-4);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    /* ========== APPLICATION MATRIX ========== */
    .app-matrix-item {
      position: relative;
      border-radius: var(--radius-lg);
      overflow: hidden;
      cursor: pointer;
      aspect-ratio: 16 / 10;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .app-matrix-item:hover {
      transform: translateY(-6px) scale(1.02);
      box-shadow: var(--shadow-xl);
    }
    .app-matrix-overlay {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      padding: var(--space-5) var(--space-4);
      background: linear-gradient(transparent, rgba(0,0,0,0.75));
      color: var(--color-white);
      transition: all 0.3s ease;
    }
    .app-matrix-item:hover .app-matrix-overlay {
      padding-bottom: var(--space-8);
    }
    .app-matrix-overlay h4 {
      color: var(--color-white);
      font-size: var(--text-base);
      font-weight: 700;
      margin-bottom: var(--space-1);
    }
    .app-matrix-overlay p {
      color: rgba(255, 255, 255, 0.8);
      font-size: var(--text-xs);
    }

    /* ========== SAMPLE GALLERY TABS ========== */
    .gallery-tab-switcher {
      display: flex;
      justify-content: center;
      gap: 0;
      margin-bottom: var(--space-8);
      background: var(--color-gray-100);
      border-radius: var(--radius-full);
      padding: 4px;
      width: fit-content;
      margin-left: auto;
      margin-right: auto;
    }
    .gallery-tab-btn {
      padding: 10px 28px;
      border: none;
      border-radius: var(--radius-full);
      background: transparent;
      color: var(--color-gray-600);
      font-size: var(--text-sm);
      font-weight: 600;
      cursor: pointer;
      transition: all 0.25s ease;
      white-space: nowrap;
    }
    .gallery-tab-btn.active {
      background: var(--color-white);
      color: var(--color-primary);
      box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
    }
    .gallery-tab-btn:hover:not(.active) {
      color: var(--color-gray-900);
    }
    .gallery-panel {
      display: none;
    }
    .gallery-panel--active {
      display: block;
    }
    /* (filter tabs removed �?CSS clean) */

    /* ========== MANUFACTURING SERVICES V3 ========== */
    .mfg-services-v3 {
      padding: clamp(56px, 8vw, 100px) 0;
      background: linear-gradient(160deg, #0a1628 0%, var(--color-primary-900) 35%, #132f4c 65%, #0d1f35 100%);
      position: relative;
      overflow: hidden;
    }
    .mfg-services-v3::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 80% 60% at 20% 40%, rgba(0,149,218,0.07), transparent),
        radial-gradient(ellipse 60% 50% at 80% 60%, rgba(232,134,58,0.05), transparent);
      pointer-events: none;
    }
    .mfg-services-v3::after {
      content: '';
      position: absolute;
      top: -50%; left: -50%;
      width: 200%; height: 200%;
      background: repeating-linear-gradient(
        45deg, transparent, transparent 60px,
        rgba(255,255,255,0.015) 60px, rgba(255,255,255,0.015) 61px
      );
      pointer-events: none;
      animation: mfgPatternDrift 30s linear infinite;
    }
    @keyframes mfgPatternDrift {
      from { transform: translate(0, 0); }
      to { transform: translate(61px, 61px); }
    }

    .mfg-v3-header { text-align: center; margin-bottom: clamp(40px, 5vw, 64px); position: relative; z-index: 2; }
    .mfg-v3-header .mfg-badge {
      display: inline-block;
      padding: 6px 18px;
      border-radius: 50px;
      font-size: var(--text-xs);
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--color-accent);
      background: rgba(232,134,58,0.1);
      border: 1px solid rgba(232,134,58,0.2);
      margin-bottom: 16px;
    }
    .mfg-v3-header h2 {
      font-size: clamp(28px, 3.5vw, 44px);
      font-weight: 800;
      color: #fff;
      margin-bottom: 12px;
      letter-spacing: -0.02em;
      line-height: 1.15;
    }
    .mfg-v3-header p {
      color: rgba(255,255,255,0.5);
      font-size: clamp(14px, 1.2vw, 17px);
      max-width: 520px;
      margin: 0 auto;
      line-height: 1.6;
    }

    .mfg-v3-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 32px;
      position: relative;
      z-index: 2;
    }

    .mfg-v3-card {
      background: linear-gradient(145deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 24px;
      padding: clamp(28px, 4vw, 42px);
      display: flex;
      flex-direction: column;
      position: relative;
      overflow: hidden;
      transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                  box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                  border-color 0.35s ease;
    }
    .mfg-v3-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--mfg-accent, var(--color-accent)), transparent);
      opacity: 0;
      transition: opacity 0.35s ease;
    }
    .mfg-v3-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 24px 72px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.06) inset;
      border-color: rgba(255,255,255,0.14);
    }
    .mfg-v3-card:hover::before { opacity: 1; }

    .mfg-v3-card--configure { --mfg-accent: var(--color-accent); }
    .mfg-v3-card--oem { --mfg-accent: var(--color-primary); }

    .mfg-v3-icon-wrap {
      width: 64px; height: 64px;
      border-radius: 18px;
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 24px;
      position: relative;
      background: linear-gradient(135deg, var(--mfg-accent), color-mix(in srgb, var(--mfg-accent) 70%, #fff));
      box-shadow: 0 8px 24px color-mix(in srgb, var(--mfg-accent) 30%, transparent);
      transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .mfg-v3-card:hover .mfg-v3-icon-wrap {
      transform: scale(1.08) rotate(-3deg);
    }
    .mfg-v3-icon-wrap svg { width: 30px; height: 30px; stroke: #fff; stroke-width: 1.8; fill: none; }

    .mfg-v3-card h3 {
      font-size: clamp(20px, 2vw, 26px);
      font-weight: 800;
      color: #fff;
      margin-bottom: 10px;
      letter-spacing: -0.01em;
    }
    .mfg-v3-card > p {
      color: rgba(255,255,255,0.48);
      font-size: var(--text-sm);
      line-height: 1.7;
      margin-bottom: 24px;
      flex-shrink: 0;
    }

    .mfg-v3-features {
      list-style: none;
      padding: 0;
      margin: 0 0 28px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      flex: 1;
    }
    .mfg-v3-feat {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 11px 16px;
      border-radius: 12px;
      cursor: pointer;
      background: rgba(255,255,255,0.02);
      border: 1px solid transparent;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      color: rgba(255,255,255,0.75);
      font-size: 13.5px;
      font-weight: 500;
    }
    .mfg-v3-feat:hover {
      background: rgba(255,255,255,0.07);
      border-color: color-mix(in srgb, var(--mfg-accent) 25%, transparent);
      transform: translateX(6px);
      color: #fff;
    }
    .mfg-v3-feat-num {
      width: 24px; height: 24px;
      border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      font-size: 11px; font-weight: 800;
      background: color-mix(in srgb, var(--mfg-accent) 12%, rgba(255,255,255,0.06));
      color: var(--mfg-accent);
      flex-shrink: 0;
      transition: all 0.25s ease;
    }
    .mfg-v3-feat:hover .mfg-v3-feat-num {
      background: var(--mfg-accent);
      color: #fff;
      transform: scale(1.1);
    }

    .mfg-v3-btn {
      align-self: flex-start;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 14px 30px;
      font-weight: 700;
      font-size: 13.5px;
      border-radius: 12px;
      border: none;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: all 0.38s cubic-bezier(0.22, 1, 0.36, 1);
      letter-spacing: 0.01em;
    }
    .mfg-v3-btn--primary {
      background: linear-gradient(135deg, var(--color-accent), #f59e4b);
      color: #fff;
      box-shadow: 0 4px 20px rgba(232,134,58,0.3);
    }
    .mfg-v3-btn--primary:hover {
      transform: translateY(-3px) scale(1.03);
      box-shadow: 0 12px 40px rgba(232,134,58,0.45), 0 4px 16px rgba(232,134,58,0.2);
    }
    .mfg-v3-btn--secondary {
      background: linear-gradient(135deg, var(--color-primary), #00a8f0);
      color: #fff;
      box-shadow: 0 4px 20px rgba(0,149,218,0.3);
    }
    .mfg-v3-btn--secondary:hover {
      transform: translateY(-3px) scale(1.03);
      box-shadow: 0 12px 40px rgba(0,149,218,0.45), 0 4px 16px rgba(0,149,218,0.2);
    }
    .mfg-v3-btn::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent);
      opacity: 0;
      transition: opacity 0.3s;
    }
    .mfg-v3-btn:hover::after { opacity: 1; }

    /* ========== HOT PRODUCTS V2 �?325×576 2×4 Grid ========== */
    .hot-products-section {
      padding: clamp(40px, 6vw, 80px) 0;
      background: var(--color-gray-50);
    }
    .hp-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      justify-content: center;
    }
    .hp-card {
      width: 100%;
      aspect-ratio: 325/576;
      border-radius: 16px;
      overflow: hidden;
      text-decoration: none;
      position: relative;
      box-shadow: 0 4px 16px rgba(0,0,0,0.06);
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      cursor: pointer;
      background: #111;
      display: block;
    }
    .hp-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 18px 50px rgba(0,0,0,0.18);
    }
    .hp-media-layer {
      position: absolute;
      inset: 0;
      overflow: hidden;
    }
    .hp-media-layer img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: opacity 0.5s ease, transform 0.6s ease;
    }
    .hp-card:hover .hp-media-layer img {
      opacity: 0;
      transform: scale(1.05);
    }
    .hp-media-layer video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      transition: opacity 0.45s ease;
      pointer-events: none;
    }
    .hp-card:hover .hp-media-layer video {
      opacity: 1;
    }
    .hp-title-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 56px 24px 10px;
      background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.45) 40%, rgba(0,0,0,0.82) 100%);
      color: #fff;
      z-index: 3;
      transition: padding 0.35s ease, transform 0.35s ease;
      pointer-events: none;
    }
    .hp-card:hover .hp-title-overlay {
      /* Removed transform to ensure overlay height matches video layer */
    }
    .hp-title-overlay h4 {
      font-size: var(--text-h4);
      font-weight: 700;
      color: #fff;
      margin-bottom: 4px;
      text-shadow: 0 1px 4px rgba(0,0,0,0.5);
      line-height: 1.3;
    }
    .hp-title-overlay p {
      font-size: var(--text-xs);
      color: rgba(255,255,255,0.78);
      font-weight: 500;
      text-shadow: 0 1px 3px rgba(0,0,0,0.4);
    }
    .hp-play-badge {
      position: absolute;
      top: 20px;
      right: 20px;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: rgba(255,255,255,0.2);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 4;
      transition: all 0.35s ease;
      border: 2px solid rgba(255,255,255,0.3);
      pointer-events: none;
    }
    .hp-play-badge::after {
      content: '';
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 8px 0 8px 14px;
      border-color: transparent transparent transparent #fff;
      margin-left: 3px;
    }
    .hp-card:hover .hp-play-badge {
      opacity: 0;
      transform: scale(0.8);
    }
    .hp-tag {
      position: absolute;
      top: 16px;
      left: 16px;
      padding: 5px 14px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 700;
      color: #fff;
      z-index: 4;
      pointer-events: none;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      background: rgba(255,255,255,0.15);
      border: 1px solid rgba(255,255,255,0.2);
      letter-spacing: 0.02em;
    }

    /* Extracted from inline style: gradient fallback layer */
    .hp-card__fallback { width: 100%; height: 100%; }

    /* Responsive: scale tag & play badge to viewport size */
    @media (max-width: 768px) {
      .hp-tag {
        top: 12px;
        left: 12px;
        padding: 4px 11px;
        font-size: 10px;
        letter-spacing: 0.01em;
      }
      .hp-play-badge {
        top: 14px;
        right: 14px;
        width: 36px;
        height: 36px;
        border-width: 1.5px;
        pointer-events: auto;
      }
      .hp-play-badge::after {
        border-width: 6px 0 6px 11px;
        margin-left: 2px;
      }
    }
    @media (min-width: 1200px) {
      .hp-tag { top: 20px; left: 20px; }
      .hp-play-badge { top: 24px; right: 24px; width: 48px; height: 48px; }
    }

    /* ========== WHY CHOOSE US ========== */
    .wcu-section {
      padding: clamp(40px, 6vw, 80px) 0;
      background: var(--color-white);
    }
    .wcu-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
    }
    .wcu-card {
      background: var(--color-white);
      border-radius: 16px;
      border: 1px solid var(--color-border);
      padding: 28px;
      transition: all 0.3s ease;
      box-shadow: 0 1px 3px rgba(0,0,0,0.03);
      text-align: center;
    }
    .wcu-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 30px rgba(0,0,0,0.1);
      border-color: #BFDBFE;
    }
    .wcu-icon {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: var(--text-h4);
      margin: 0 auto 12px auto;
      opacity: 0.7;
    }
    .wcu-card h4 {
      font-size: 17px;
      font-weight: 700;
      color: var(--color-gray-900);
      margin-bottom: 8px;
    }
    .wcu-card p {
      font-size: 13px;
      color: var(--color-gray-500);
      line-height: 1.6;
      margin: 0;
    }

    /* ========== PRODUCT LIST GRID ========== */
    .product-list-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
    }
    .product-list-card {
      background: var(--color-white);
      border: 1px solid var(--color-border);
      border-radius: 12px;
      overflow: hidden;
      transition: all 0.3s ease;
      text-decoration: none;
      display: block;
    }
    .product-list-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 12px 36px rgba(0,0,0,0.12);
      border-color: var(--color-accent);
    }
    .product-list-img {
      aspect-ratio: 1/1;
      min-height: 220px;           /* �?fallback for browsers without aspect-ratio */
      background: #f0f2f5;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      overflow: hidden;
      position: relative;
      transition: background 0.35s ease;
    }
    .product-list-card:hover .product-list-img {
      background: #000;                    /* �?black overlay when video plays on hover */
    }
    .product-list-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;                   /* �?fill container �?no white borders */
      transition: transform 0.4s ease;
    }
    /* Video hover on product cards */
    .product-list-img__photo {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 1;
      transition: opacity 0.4s ease;
    }
    .product-list-img__video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      z-index: 2;
      opacity: 0;
      transition: opacity 0.4s ease;
    }
    .product-list-card:hover .product-list-img__photo {
      opacity: 0;
    }
    .product-list-card:hover .product-list-img__video {
      opacity: 1;
    }
    .product-list-card:not([data-video]) .product-list-img__photo {
      opacity: 1 !important;
    }
    .product-list-img__play {
      position: absolute;
      bottom: 8px;
      right: 8px;
      width: 26px;
      height: 26px;
      background: rgba(0,0,0,.55);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      z-index: 3;
      pointer-events: none;
    }
    .product-list-card:hover .product-list-img__play {
      opacity: 0;
      transition: opacity .2s ease .3s;
    }
    .product-list-card:hover .product-list-img img {
      transform: scale(1.06);
    }
    .product-list-body {
      padding: 16px 18px 20px;
      border-top: 1px solid var(--color-border);
      background: linear-gradient(180deg, #FAFBFC 0%, #F0F4F8 40%, #E8EEF4 100%);
      transition: background 0.35s ease;
    }
    .product-list-card:hover .product-list-body {
      background: linear-gradient(180deg, #FEF7F2 0%, #FFF0E5 40%, #FDE8D8 100%);
    }
    .product-list-body h4 {
      font-size: var(--text-body);
      font-weight: 700;
      color: var(--color-gray-900);
      margin: 0 0 6px;
      letter-spacing: -0.01em;
      transition: color 0.25s;
    }
    .product-list-card:hover .product-list-body h4 {
      color: var(--color-accent);
    }
    /* Tech parameter badges */
    .product-list-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      margin-bottom: 6px;
    }
    .product-list-tag {
      display: inline-block;
      font-size: 10px;
      font-weight: 600;
      color: var(--color-gray-700);
      background: rgba(0,149,218,0.07);
      border: 1px solid rgba(0,149,218,0.15);
      border-radius: 4px;
      padding: 2px 6px;
      line-height: 1.4;
      white-space: nowrap;
    }
    .product-list-body p {
      font-size: var(--text-xs);
      color: var(--color-gray-500);
      margin: 0;
      line-height: 1.5;
      font-weight: 400;
    }
    /* Floating model badge: hidden on desktop (model is shown in tags).
       On mobile it is repositioned to the bottom-left of the product image. */
    .product-list-model {
      display: none;
    }

    /* ========== HOME VIDEO GRID ========== */
    .video-grid-enhanced {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-bottom: var(--space-8);
    }
    .video-card-modal:hover .video-play-circle svg {
      fill: white;
    }
    .video-card-modal .video-duration {
      position: absolute;
      bottom: 8px;
      right: 8px;
      background: rgba(0,0,0,0.75);
      color: white;
      font-size: 11px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 4px;
      backdrop-filter: blur(4px);
    }
    /* ========== HOME SAMPLE GRID ========== */
    .sample-grid-enhanced {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }
    .sample-item-enhanced {
      position: relative;
      aspect-ratio: 1;
      border-radius: 10px;
      overflow: hidden;
      cursor: pointer;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      border: 1px solid var(--color-border);
    }
    .sample-item-enhanced:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 24px rgba(0,0,0,0.12);
      border-color: rgba(0,95,218,0.2);
    }
    .sample-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.8) 100%);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 16px;
      opacity: 0;
      transition: opacity 0.35s;
    }
    .sample-item-enhanced:hover .sample-overlay {
      opacity: 1;
    }
    .sample-overlay h4 {
      color: white;
      font-size: var(--text-xs);
      font-weight: 700;
      margin: 0 0 4px;
    }
    /* ========== ACCESSORIES SECTION ========== */
    .accessories-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: clamp(14px, 1.6vw, 22px);
    }
    .accessory-card {
      background: var(--color-white);
      border: 1px solid var(--color-border);
      border-radius: 14px;
      padding: 20px 16px;
      text-align: center;
      text-decoration: none;
      transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 190px;
    }
    .accessory-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 14px 40px rgba(0,0,0,0.10);
      border-color: var(--color-primary);
    }
    .accessory-img-wrap {
      width: 100px;
      height: 100px;
      margin: 0 auto 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #F9FAFB;
      border-radius: 10px;
      overflow: hidden;
    }
    .accessory-img-wrap img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      transition: transform 0.3s ease;
    }
    .accessory-card:hover .accessory-img-wrap img {
      transform: scale(1.1);
    }
    .accessory-card h4 {
      font-size: var(--text-sm);
      font-weight: 700;
      color: var(--color-gray-900);
      margin: 0 0 4px;
    }
    .accessory-card p {
      font-size: 11px;
      color: var(--color-gray-500);
      margin: 0;
    }

    /* ========== BLOG SECTION ========== */
    .blog-section {
      padding: clamp(40px, 6vw, 80px) 0;
      background: var(--color-gray-50);
    }
    .blog-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 28px;
    }
    .blog-card {
      background: var(--color-white);
      border-radius: 16px;
      border: 1px solid var(--color-border);
      overflow: hidden;
      text-decoration: none;
      transition: all 0.3s ease;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
      display: flex;
      flex-direction: row;
    }
    .blog-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 40px rgba(0,0,0,0.12);
      border-color: var(--color-accent);
    }
    .blog-card-img {
      flex: 0 0 220px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 44px;
    }
    .blog-card-body {
      flex: 1;
      padding: 24px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .blog-card-tag {
      display: inline-block;
      align-self: flex-start;
      width: fit-content;
      padding: 3px 10px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 600;
      margin: 0;
    }
    .blog-card-desc {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      font-size: 13px;
      line-height: 1.55;
      color: var(--color-gray-500);
      margin: 0;
    }
    .blog-card-body h4 {
      font-size: var(--text-body);
      font-weight: 700;
      color: var(--color-gray-900);
      line-height: 1.4;
      margin: 0 0 6px;
    }
    .blog-card-body p {
      font-size: 13px;
      color: var(--color-gray-500);
      line-height: 1.55;
      margin: 0;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    /* ========== FAQ ========== */
    .faq-section {
      padding: clamp(40px, 6vw, 80px) 0;
      background: var(--color-white);
    }
    .faq-item {
      border-bottom: 1px solid var(--color-border);
      transition: background 0.2s;
    }
    .faq-q {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      padding: 28px 24px;
      font-size: 17px;
      font-weight: 600;
      color: var(--color-gray-900);
      text-align: left;
      cursor: pointer;
      transition: all 0.25s ease;
      border-radius: 8px;
      position: relative;
      z-index: 1;
    }
    .faq-q:hover { color: var(--color-primary); }
    .faq-toggle {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: transparent;
      color: #9CA3AF;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all 0.3s ease;
      margin-left: auto;
      line-height: 1;
    }
    .faq-toggle svg { transition: transform 0.3s ease; }
    .faq-item.open .faq-toggle { color: var(--color-accent); }
    .faq-item.open .faq-toggle svg { transform: rotate(180deg); }
    .faq-a {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s ease, padding 0.4s ease;
      color: var(--color-gray-500);
      line-height: 1.7;
      padding: 0 16px;
      font-size: var(--text-sm);
    }
    .faq-item.open .faq-a {
      max-height: 500px;
      padding: 16px 16px 20px;
    }
    .faq-item.open .faq-q {
      background: #EFF6FF;
    }

    /* ========== CTA BANNER ========== */
    .cta-banner {
      background: linear-gradient(135deg, var(--color-primary-700) 0%, var(--color-primary-900) 50%, #0a1a30 100%);
      color: var(--color-white);
      padding: var(--space-16) 0;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .cta-banner::before {
      content: '';
      position: absolute;
      inset: 0;
      background: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%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.2;
    }
    .cta-banner h2 {
      color: var(--color-white);
      font-size: var(--text-4xl);
      margin-bottom: var(--space-4);
    }
    .cta-banner p {
      color: rgba(255, 255, 255, 0.85);
      margin-bottom: var(--space-8);
      max-width: 560px;
      margin-left: auto;
      margin-right: auto;
    }

    /* ========== SEARCH OVERLAY ========== */
    .search-bar {
      position: fixed;
      top: 0; left: 0; right: 0;
      height: 200px;
      max-height: 35vh;
      z-index: 10000;
      background: rgba(255, 255, 255, 0.56);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      display: none;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
      align-items: center;
      justify-content: center;
    }
    .search-bar.open { display: flex; opacity: 1; visibility: visible; }
    .search-bar-inner { width: 100%; max-width: 600px; padding: 0 20px; }
    .search-bar-input-wrap {
      display: flex;
      align-items: center;
      gap: 12px;
      background: var(--color-white);
      border-radius: 16px;
      border: 2px solid var(--color-border);
      padding: 12px 20px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.3);
      transition: border-color 0.2s;
    }
    .search-bar-input-wrap:focus-within { border-color: var(--color-primary); }
    .search-bar-input {
      flex: 1;
      border: none;
      outline: none;
      font-size: var(--text-h4);
      background: transparent;
      color: var(--color-gray-900);
    }
    .search-bar-close {
      position: absolute;
      top: 16px;
      right: 20px;
      background: none;
      border: none;
      cursor: pointer;
      color: #333;
      font-size: 28px;
      padding: 8px;
      z-index: 5;
      transition: transform 0.2s;
    }
    .search-bar-close:hover { transform: rotate(90deg); }
    @media (max-width: 767px) {
      .search-bar {
        height: 180px;
        background: rgba(255, 255, 255, 0.56);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
      }
    }
    @media (max-width: 640px) {
      .search-bar { height: 190px; }
    }
    @media (max-width: 479px) {
      .search-bar { height: 170px; }
    }

    /* ========== SOLUTIONS NAVIGATION CARDS ========== */
    /* ========== SOLUTIONS MEGA MENU IMAGE BLOCKS ========== */
    .nav-solution-block {
      position: relative;
      border-radius: 12px;
      overflow: hidden;
      aspect-ratio: 4/3;
      text-decoration: none;
      display: block;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
      cursor: pointer;
    }
    .nav-solution-block:hover {
      transform: translateY(-4px);
      box-shadow: 0 10px 30px rgba(0,0,0,0.18);
    }
    .nav-solution-block-img {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .nav-solution-block:hover .nav-solution-block-img {
      transform: scale(1.1);
    }
    .nav-solution-block-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, 
        rgba(0,0,0,0.15) 0%, 
        rgba(0,0,0,0.05) 40%, 
        rgba(0,0,0,0.7) 100%);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 14px;
      transition: background 0.3s ease;
    }
    .nav-solution-block:hover .nav-solution-block-overlay {
      background: linear-gradient(180deg, 
        rgba(0,0,0,0.2) 0%, 
        rgba(0,0,0,0.08) 40%, 
        rgba(0,0,0,0.78) 100%);
    }
    .nav-solution-block-title {
      color: #fff;
      font-size: var(--text-sm);
      font-weight: 700;
      text-shadow: 0 1px 4px rgba(0,0,0,0.5);
      line-height: 1.3;
      letter-spacing: 0.01em;
    }
    .nav-solution-block-subtitle {
      color: rgba(255,255,255,0.8);
      font-size: 10px;
      font-weight: 500;
      margin-top: 3px;
      text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    }

    /* ========== RESPONSIVE ========== */
    @media (max-width: 1200px) {
      .hero-slider-v3 { height: 600px; min-height: 600px; }
      .hero-headline-v3 { font-size: clamp(2rem, 4.5vw, 3.2rem); }
      .hero-subtitle-v3 { font-size: clamp(0.9rem, 1vw, 1.1rem); }
      .trust-bar { padding: 10px 0; }
      .trust-bar-grid { gap: 10px; grid-template-columns: repeat(6, 1fr); }
      .product-types-grid-v2 .type-card-v2 { width: calc(25% - 15px); }
    }
    @media (max-width: 1023px) {
      .hero-slider-v3 { height: 500px; min-height: 500px; }
      .hero-headline-v3 { font-size: clamp(1.6rem, 3.8vw, 2.6rem); }
      .hero-subtitle-v3 { font-size: clamp(0.85rem, 1.2vw, 1rem); max-width: 540px; }
      .hero-content-v3 { padding: clamp(16px, 3vw, 40px); }
      .hero-dots-v3 { bottom: 18px; gap: 8px; }
      .hero-dot-v3 { width: 22px; height: 3px; }
      .hero-dot-v3.active { width: 40px; }
      .hero-arrow-v3 { width: 40px; height: 40px; font-size: var(--text-body); }
      .hero-arrow-v3--prev { left: 12px; }
      .hero-arrow-v3--next { right: 12px; }
      /* WCU: 4-col → 2-col for tablets */
      .wcu-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
      .trust-bar { padding: 8px 0 10px; }
      .trust-bar-number { font-size: clamp(14px, 1.3vw, 18px); }
      .trust-bar-label { font-size: clamp(8px, 0.6vw, 10px); }
      .trust-bar-item:not(:last-child)::after { height: 20px; }
      .trust-bar-grid { gap: 6px; grid-template-columns: repeat(6, 1fr); }
      .product-types-grid-v2 .type-card-v2 { width: calc(33.33% - 14px); }
      .hp-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
      .product-list-grid { grid-template-columns: repeat(3, 1fr); }
      .accessories-grid { grid-template-columns: repeat(3, 1fr); }
      .mfg-v3-grid { grid-template-columns: 1fr; }
      .blog-grid { grid-template-columns: repeat(2, 1fr); }
      .blog-card-img { flex: 0 0 180px; }
      .video-grid-enhanced { grid-template-columns: repeat(2, 1fr); }
      .sample-grid-enhanced { grid-template-columns: repeat(3, 1fr); }
      .logo img { height: 34px; }
    }
    @media (max-width: 767px) {
      /* [1] Hero slider: auto-fit content height, dots at slides bottom */
      .hero-slider-v3 { height: 400px; min-height: 400px; }
      .hero-slides-v3 { height: 100%; min-height: 400px; position: relative; }
      .hero-slide-v3 { min-height: 400px; }
      .hero-headline-v3 { font-size: clamp(1.75rem, 5vw, 2.4rem); line-height: 1.15; }
      .hero-subtitle-v3 { font-size: clamp(0.8rem, 1.4vw, 0.95rem); max-width: 479px; }
      .hero-content-v3 { padding: clamp(14px, 2.5vw, 32px); padding-bottom: 48px; }
      .hero-btns-v3 { gap: 10px; }
      .hero-dots-v3 { bottom: 10px; gap: 7px; z-index: 8; }
      .hero-dot-v3 { width: 20px; height: 2.5px; }
      .hero-dot-v3.active { width: 36px; }
      .hero-arrow-v3 { display: none; }
      .hero-badge-v3 { font-size: 10px; padding: 3px 10px; }
      .spec-card-v3 { padding: 8px 14px; }
      .spec-card__value { font-size: 13px; }
      .spec-card__label { font-size: 10px; }

      /* Trust bar */
      .trust-bar { padding: 6px 0 8px; }
      .trust-bar-number { font-size: clamp(12px, 1.2vw, 15px); }
      .trust-bar-label { font-size: clamp(7px, 0.6vw, 9px); }
      .trust-bar-item:not(:last-child)::after { height: 16px; }
      .trust-bar-grid { gap: 4px; grid-template-columns: repeat(3, 1fr); }

      /* [3] Product Types: hide description, show only image + title + link */
      .product-types-grid-v2 .type-card-v2 { width: calc(50% - 10px); }
      .type-card-v2-body p { display: none !important; }
      .type-card-v2-body { padding: 10px 10px 8px; }
      .type-card-v2-body h3 { font-size: 14px; margin-bottom: 2px; line-height: 1.25; }
      .type-card-v2-link { font-size: 11px; margin-top: 2px; line-height: 1.2; }
      .hero-process-steps-v3 { gap: 8px; }
      .process-step-v3 { padding: 6px 12px; }
      /* Product types: remove side padding (arrows hidden on mobile) + hide page arrows */
      .product-types-scroll-wrapper { padding: 0; }
      .product-types-scroll-wrapper .product-types-arrow { display: none !important; }
      /* Item 6: friendly horizontal-scroll hint — keep a thin scrollbar always visible on mobile */
      .product-types-grid-v2 {
        scrollbar-width: thin;
        -ms-overflow-style: auto;
        scrollbar-color: rgba(0,0,0,0.3) rgba(0,0,0,0.06);
      }
      .product-types-grid-v2::-webkit-scrollbar { display: block; height: 8px; }
      .product-types-grid-v2::-webkit-scrollbar-track { background: rgba(0,0,0,0.06); border-radius: 4px; }
      .product-types-grid-v2::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.28); border-radius: 4px; }
      .product-types-grid-v2::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.42); }

      /* [1] Always-visible horizontal scroll progress on mobile.
         Real mobile browsers ignore ::-webkit-scrollbar, so we draw our own. */
      .product-types-scroll-indicator {
        display: block;
        position: relative;
        height: 6px;
        width: 78%;
        max-width: 360px;
        margin: 14px auto 0;
        background: rgba(0,0,0,0.10);
        border-radius: 999px;
        overflow: hidden;
      }
      .product-types-scroll-indicator__thumb {
        position: absolute;
        top: 0; left: 0;
        height: 100%;
        width: 30%;
        min-width: 32px;
        background: var(--color-primary, #1a3a5c);
        border-radius: 999px;
        transform: translateX(0);
        will-change: transform;
        transition: transform 0.08s linear;
      }

      /* [4] Showcase: hide play icon on mobile */
      .product-list-img__play { display: none !important; }

      /* [5] Showcase product list — mobile: 1:1 IMAGE ON TOP, TITLE BELOW,
         model badge floats bottom-left of the image.
         Uses flex-direction:column (NOT grid) because grid+aspect-ratio
         collapses when children are position:absolute and min-height=0.
         Key: flex:0 0 auto on the img container prevents flex-shrink collapse. */
      .product-list-card {
        display: flex;
        flex-direction: column;
      }
      .product-list-body { padding: 10px 10px 6px; }
      .product-list-body h4 { display: block; font-size: 13px; line-height: 1.3; margin-bottom: 2px; }
      .product-list-body p { display: none; }
      .product-list-tags { display: none !important; }
      .product-list-img {
        flex: 0 0 auto;
        width: 100%;
        aspect-ratio: 1 / 1;
        background: #f0f2f5;
      }
      .product-list-img__photo,
      .product-list-img img { object-fit: cover !important; }
      .product-list-model {
        display: block;
        position: absolute;
        left: 8px;
        bottom: 8px;
        z-index: 4;
        background: rgba(17, 24, 39, 0.62);
        color: #fff;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.02em;
        padding: 3px 9px;
        border-radius: 7px;
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
        pointer-events: none;
      }

      /* [6] Company intro: stack vertically, fix aspect-ratio distortion */
      .two-col { grid-template-columns: 1fr !important; gap: var(--space-6) !important; }
      .two-col > div { flex: none !important; max-width: 100% !important; width: 100% !important; }
      .two-col .reveal--slide-left,
      .two-col .reveal--slide-right { flex: none !important; max-width: 100% !important; width: 100% !important; }
      #companyIntro .rounded-xl[style*="aspect-ratio"] { aspect-ratio: 16/9 !important; }

      /* WCU: 2-col grid */
      .wcu-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
      .wcu-card { padding: 20px 16px; }
      .wcu-card h4 { font-size: 15px; }
      .wcu-card p { font-size: 12px; }

      /* [7] Blog: mobile = horizontal card: square thumbnail + 2-line title */
      .blog-grid { grid-template-columns: 1fr; gap: 12px; }
      .blog-card {
        flex-direction: row;
        align-items: stretch;
        border: 1px solid var(--color-border-light, var(--color-border));
        border-radius: 12px;
        box-shadow: none;
        overflow: hidden;
        background: var(--color-white);
        padding: 0;
      }
      .blog-card:active { transform: scale(0.985); }
      .blog-card-img {
        display: block;
        flex: 0 0 96px;
        width: 96px;
        aspect-ratio: 1 / 1;
        border-radius: 0;
        font-size: 0;                 /* hide stray fallback letters when image is present */
      }
      .blog-card-img span { font-size: 26px; }   /* show 2-char fallback only when no image */
      .blog-card-body {
        flex: 1 1 auto;
        min-width: 0;
        padding: 10px 12px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: 6px;
      }
      .blog-card-body h4 {
        order: 1;
        font-size: 14px;
        line-height: 1.35;
        margin: 0;
        color: var(--color-gray-900);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      .blog-card-body p {
        order: 2;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin: 0;
        font-size: 13px;
        line-height: 1.55;
        color: var(--color-gray-500);
      }
      .blog-card-tag {
        display: none !important;    /* hide tag on mobile */
      }

      .logo img { height: 30px; }
    }
    @media (max-width: 640px) {
      /* [1] Hero slider: auto-fit content height (override 767px for smaller screens) */
      .hero-slider-v3 { height: 350px; min-height: 350px; }
      .hero-slides-v3 { height: 100%; min-height: 350px; }
      .hero-slide-v3 { min-height: 350px; }
      .hero-headline-v3 { font-size: clamp(1.6rem, 5vw, 2.2rem); }
      .hero-subtitle-v3 { font-size: 0.82rem; max-width: 100%; margin-bottom: 20px; }
      .hero-content-v3 { padding: clamp(10px, 2vw, 24px); padding-bottom: 44px; }
      .hero-btns-v3 { flex-direction: column; gap: 8px; align-items: flex-start; }
      .hero-btns-v3 .btn-cta-primary { width: auto; text-align: center; }
      .hero-dots-v3 { bottom: 8px; gap: 6px; z-index: 8; }
      .hero-dot-v3 { width: 18px; height: 2px; }
      .hero-dot-v3.active { width: 32px; height: 3px; }
      .hero-badge-v3 { font-size: 9px; padding: 2px 8px; }
      .spec-card-v3 { padding: 6px 10px; border-radius: 8px; }
      .spec-card__value { font-size: var(--text-xs); }
      .spec-card__label { font-size: 9px; }
      .hero-partner-badges-v3 { gap: 6px; }
      .partner-badge-v3 { padding: 6px 10px; }
      .partner-badge-v3 span:last-child { font-size: 10px; }

      /* Trust bar */
      .trust-bar { padding: 8px 0 8px; }
      .trust-bar-number { font-size: 14px; }
      .trust-bar-label { font-size: 11px; }
      .trust-bar-grid { gap: 4px; grid-template-columns: repeat(3, 1fr); }
      .trust-bar-item:not(:last-child)::after { display: none; }
      .trust-bar-item:nth-child(2)::after, .trust-bar-item:nth-child(4)::after { display: none; }

      /* [3] Product types: keep 2 cards visible */
      .product-types-grid-v2 .type-card-v2 { width: calc(50% - 10px); }

      .hp-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
      .product-list-grid { grid-template-columns: repeat(2, 1fr); }
      .accessories-grid { grid-template-columns: repeat(2, minmax(0, 185px)); justify-content: center; gap: 10px; }
      .accessory-card { width: 100%; aspect-ratio: 1 / 1; max-width: 185px; max-height: 185px; min-height: 0; padding: 10px 8px; justify-content: center; overflow: hidden; }
      .accessory-img-wrap { width: 96px; height: 96px; margin: 0 auto 6px; flex: 0 0 auto; }
      .accessory-card h4 { font-size: 13px; margin-bottom: 2px; }
      .accessory-card p { font-size: 10px; }

      /* [M1] Homepage showcase card — smallest phones: keep 1:1 image + model badge,
         tighten padding (grid+order already set in the 767px block) */
      .product-list-img { aspect-ratio: 1 / 1; }
      .product-list-body { padding: 8px 10px 6px; }
      .video-grid-enhanced { grid-template-columns: 1fr; }
      .sample-grid-enhanced { grid-template-columns: repeat(2, 1fr); }
      .mfg-v3-grid { grid-template-columns: 1fr; gap: 24px; }
      .hero-tech-cards-v3 { gap: 8px; }
      .tech-card-v3 { padding: 8px 12px; }
      .tech-card-v3 span:last-child { font-size: 11px; }
      .hero-spec-cards-v3 { gap: 8px; }
      .logo img { height: 26px; }
    }
    @media (max-width: 479px) {
      /* [1] Hero slider: auto-fit content height (smallest screens) */
      .hero-slider-v3 { height: 300px; min-height: 300px; }
      .hero-slides-v3 { height: 100%; min-height: 300px; }
      .hero-slide-v3 { min-height: 300px; }
      .hero-headline-v3 { font-size: clamp(1.5rem, 6vw, 2rem); line-height: 1.2; }
      .hero-subtitle-v3 { font-size: 0.78rem; }
      .hero-content-v3 { padding: 8px 12px; padding-bottom: 40px; }
      .hero-dots-v3 { bottom: 6px; gap: 5px; z-index: 8; }
      .hero-dot-v3 { width: 16px; height: 2px; }
      .hero-dot-v3.active { width: 28px; height: 2.5px; }
      .hero-badge-v3 { font-size: 8px; padding: 2px 7px; }

      /* Trust bar */
      .trust-bar { padding: 6px 0 6px; }
      .trust-bar-number { font-size: 13px; }
      .trust-bar-label { font-size: 10px; }
      .trust-bar-grid { gap: 3px; grid-template-columns: repeat(3, 1fr); }

      /* [3] Product types: keep 2 complete cards visible on smallest phones */
      .product-types-grid-v2 .type-card-v2 { width: calc(50% - 10px); }

      /* [5] Showcase: keep image + model only at smallest size */
      .product-list-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }

      /* [6] Company intro: ensure vertical stack, reduce video height */
      #companyIntro .rounded-xl[style*="aspect-ratio"] { aspect-ratio: 16/9 !important; }

      /* [7] Blog: keep horizontal thumbnail card at smallest size, shrink thumb */
      .blog-grid { grid-template-columns: 1fr; gap: 10px; }
      .blog-card-img { flex-basis: 84px; width: 84px; }
      .blog-card-body h4 { font-size: 13px; }
      .blog-card-body p { font-size: 12px; line-height: 1.5; }

      .hero-process-steps-v3 { flex-direction: column; align-items: flex-start; }
      .process-step__arrow { display: none; }
      .hero-trust-strip-v3 { gap: 4px; margin-bottom: 12px; }

      /* WCU: keep 2-col at small screens */
      .wcu-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
      .wcu-card { padding: 14px 12px; }
      .wcu-card h4 { font-size: 13px; }
      .wcu-card p { font-size: 11px; }
      .wcu-icon { width: 32px; height: 32px; font-size: 16px; margin-bottom: 8px; }

      /* Accessories: keep 2-col square, scale down on smallest screens */
      .accessory-card { padding: 12px 8px; }
      .accessory-img-wrap { width: 60px; height: 60px; margin-bottom: 6px; }
      .accessory-card h4 { font-size: 12px; }

      .logo img { height: 24px; }
    }

/* ══════════════════════════════════════════
   Home Sample Gallery — unified paged + swipe lightbox
   (images + videos, single ordered collection)
   ══════════════════════════════════════════ */
.hg-lightbox {
  align-items: center !important;
  justify-content: center !important;
  padding: var(--space-4) !important;
}
.hg-lightbox .hg-content {
  max-width: 960px;
  width: 100%;
  padding: 0;
  background: #0f172a;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}
.hg-lightbox .hg-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40vh;
  max-height: 80vh;
  background: #0f172a;
  padding: 24px;
}
.hg-lightbox .hg-stage img { background: #111; border-radius: 8px; }
.hg-lightbox .hg-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: #1a1a2e;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.hg-lightbox .hg-caption {
  flex: 1;
  min-width: 0;
  color: #fff;
  font-size: 14px;
  line-height: 1.4;
}
.hg-lightbox .hg-counter {
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  flex-shrink: 0;
}
.hg-lightbox .hg-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  background: rgba(255, 255, 255, 0.92);
  color: #1a1a2e;
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.hg-lightbox .hg-prev,
.hg-lightbox .hg-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: background 0.2s ease;
}
.hg-lightbox .hg-prev:hover,
.hg-lightbox .hg-next:hover { background: rgba(0, 0, 0, 0.7); }
.hg-lightbox .hg-prev { left: 8px; }
.hg-lightbox .hg-next { right: 8px; }
@media (max-width: 767px) {
  .hg-lightbox .hg-prev { left: 4px; }
  .hg-lightbox .hg-next { right: 4px; }
}