/*
Theme Name: Huayuan Bearing Converted Theme
Theme URI: https://skfzc.cc/
Author: Codex
Author URI: https://openai.com/
Description: WordPress theme converted from static Huayuan Bearing HTML pages with WPML-ready strings, WPForms hooks, SEO schema preservation, and Chinese page content controls.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: huayuan-bearing
*/



/* WordPress conversion helpers */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.hy-page-shell {
  position: relative;
  transform: translate(var(--hy-control-x, 0), var(--hy-control-y, 0)) scale(var(--hy-control-scale, 1));
  transform-origin: top center;
  padding-top: var(--hy-control-padding-top, 0);
  padding-bottom: var(--hy-control-padding-bottom, 0);
  background-image: var(--hy-control-bg-image, none);
  background-size: cover;
  background-position: center;
}
.hy-converted-html {
  display: flex;
  flex-direction: column;
  gap: var(--hy-control-section-gap, 0);
}
.hy-wordpress-content:empty {
  display: none;
}
.hy-controller-media {
  width: min(100%, 1200px);
  margin: 0 auto;
}
.hy-controller-media img,
.hy-controller-media video {
  width: 100%;
  height: auto;
  display: block;
}
.hy-controller-bg-video {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  pointer-events: none;
}
.hy-wpforms-placeholder {
  padding: 24px;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  color: #334155;
}


/* Source: about */
/* ==========================================================================
       DESIGN TOKENS & RESET
       ========================================================================== */
    :root {
      --color-primary: #e74c3c;
      --color-primary-dark: #c0392b;
      --color-dark: #1a1a2e;
      --color-dark-secondary: #16213e;
      --color-white: #ffffff;
      --color-gray-light: #f8f9fa;
      --color-gray-border: #e9ecef;
      --color-gray-text: #6c757d;
      --color-text: #2c3e50;
      
      --font-sans: 'Inter', sans-serif;
      --container-max-width: 1200px;
      --transition: all 0.3s ease;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: var(--font-sans);
      font-size: 16px;
      line-height: 1.6;
      color: var(--color-text);
      background-color: var(--color-white);
      -webkit-font-smoothing: antialiased;
    }

    /* Layout Components */
    .container {
      width: 100%;
      max-width: var(--container-max-width);
      margin: 0 auto;
      padding: 0 20px;
    }

    section {
      padding: 60px 0;
    }

    .bg-light {
      background-color: var(--color-gray-light);
    }

    .bg-dark {
      background-color: var(--color-dark);
      color: var(--color-white);
    }

    /* Typography */
    h1, h2, h3, h4 {
      color: var(--color-dark);
      font-weight: 700;
      line-height: 1.3;
    }

    .bg-dark h2, .bg-dark h3 {
      color: var(--color-white);
    }

    .eyebrow {
      display: inline-block;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--color-primary);
      margin-bottom: 12px;
    }

    .section-title {
      font-size: 28px;
      margin-bottom: 16px;
      text-align: center;
    }

    .section-subtitle {
      font-size: 16px;
      color: var(--color-gray-text);
      text-align: center;
      max-width: 600px;
      margin: 0 auto 40px;
    }

    /* Buttons */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 12px 28px;
      font-size: 15px;
      font-weight: 600;
      border-radius: 6px;
      text-decoration: none;
      transition: var(--transition);
      cursor: pointer;
      border: none;
    }

    .btn-primary {
      background-color: var(--color-primary);
      color: var(--color-white);
    }

    .btn-primary:hover {
      background-color: var(--color-primary-dark);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
    }

    .btn-outline-light {
      background-color: transparent;
      color: var(--color-white);
      border: 2px solid var(--color-white);
    }

    .btn-outline-light:hover {
      background-color: var(--color-white);
      color: var(--color-dark);
      transform: translateY(-2px);
    }

    .btn-secondary {
      background-color: var(--color-dark-secondary);
      color: var(--color-white);
    }

    .btn-secondary:hover {
      background-color: var(--color-dark);
      transform: translateY(-2px);
    }

    /* SVG Base styling */
    .icon {
      width: 24px;
      height: 24px;
      fill: currentColor;
    }

    /* ==========================================================================
       SECTION 1: HERO HEADER
       ========================================================================== */
    .hero-section {
      padding: 40px 0 0;
    }

    .hero-section h1 {
      font-size: 32px;
      margin-bottom: 8px;
      text-align: center;
    }

    .hero-subtitle {
      font-size: 18px;
      color: var(--color-gray-text);
      text-align: center;
      margin-bottom: 24px;
    }

    .hero-banner-wrapper {
      position: relative;
      border-radius: 12px;
      overflow: hidden;
      height: 300px;
    }

    .hero-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .hero-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(26, 26, 46, 0.5);
    }

    /* Data Bar Overlay */
    .data-bar {
      position: relative;
      background-color: var(--color-white);
      border-radius: 12px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
      padding: 24px;
      margin-top: -40px;
      z-index: 10;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
      text-align: center;
    }

    .data-item-val {
      font-size: 28px;
      font-weight: 800;
      color: var(--color-primary);
      line-height: 1.2;
    }

    .data-item-lbl {
      font-size: 13px;
      color: var(--color-gray-text);
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    /* ==========================================================================
       SECTION 2: EEAT TEXT BLOCK
       ========================================================================== */
    .intro-section .content-p {
      max-width: 800px;
      margin: 0 auto 24px;
      color: var(--color-text);
      font-size: 16px;
      line-height: 1.8;
    }

    .intro-section a {
      color: var(--color-primary);
      text-decoration: underline;
      font-weight: 500;
    }

    .intro-section a:hover {
      color: var(--color-primary-dark);
    }

    /* ==========================================================================
       SECTION 3: TIMELINE
       ========================================================================== */
    .timeline-container {
      position: relative;
      padding-left: 20px;
    }

    .timeline-line {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 7px;
      width: 2px;
      background-color: var(--color-primary);
    }

    .timeline-event {
      position: relative;
      margin-bottom: 32px;
    }

    .timeline-node {
      position: absolute;
      left: -19px;
      top: 6px;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background-color: var(--color-primary);
      border: 3px solid var(--color-white);
    }

    .timeline-card {
      background-color: var(--color-white);
      border-radius: 8px;
      padding: 20px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
      border-left: 4px solid transparent;
      transition: var(--transition);
    }

    .timeline-card:hover {
      transform: translateY(-3px);
      border-left-color: var(--color-primary);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    }

    .timeline-year {
      font-size: 18px;
      font-weight: 800;
      color: var(--color-primary);
      margin-bottom: 4px;
    }

    .timeline-title {
      font-size: 16px;
      font-weight: 700;
      color: var(--color-dark);
      margin-bottom: 8px;
    }

    .timeline-desc {
      font-size: 14px;
      color: var(--color-gray-text);
      line-height: 1.5;
    }

    /* ==========================================================================
       SECTION 4: MISSION VISION VALUES
       ========================================================================== */
    .mvv-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 30px;
    }

    .mvv-card {
      background-color: var(--color-white);
      border-radius: 12px;
      padding: 32px;
      border: 1px solid var(--color-gray-border);
      transition: var(--transition);
    }

    .mvv-card:hover {
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
      border-color: var(--color-primary);
    }

    .mvv-icon-wrap {
      width: 48px;
      height: 48px;
      background-color: var(--color-gray-light);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--color-primary);
      margin-bottom: 20px;
    }

    .mvv-card h3 {
      font-size: 20px;
      margin-bottom: 12px;
    }

    .mvv-card p {
      font-size: 14px;
      color: var(--color-gray-text);
      line-height: 1.6;
    }

    /* ==========================================================================
       SECTION 5: CAPACITY DASHBOARD
       ========================================================================== */
    .cap-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
      margin-bottom: 48px;
    }

    .cap-card {
      background-color: var(--color-white);
      border-radius: 8px;
      padding: 24px;
      text-align: center;
      box-shadow: 0 4px 12px rgba(0,0,0,0.02);
    }

    .cap-num {
      font-size: 32px;
      font-weight: 800;
      color: var(--color-primary);
      line-height: 1.2;
      margin-bottom: 4px;
    }

    .cap-lbl {
      font-size: 14px;
      color: var(--color-dark);
      font-weight: 600;
    }

    .lines-title {
      font-size: 20px;
      text-align: center;
      margin-bottom: 24px;
    }

    .lines-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 24px;
    }

    .line-item {
      background-color: var(--color-white);
      padding: 20px;
      border-radius: 8px;
      border-left: 4px solid var(--color-primary);
      box-shadow: 0 4px 12px rgba(0,0,0,0.02);
    }

    .line-item h4 {
      font-size: 16px;
      margin-bottom: 6px;
    }

    .line-item p {
      font-size: 14px;
      color: var(--color-gray-text);
    }

    /* ==========================================================================
       SECTION 6: TEAM INTRODUCTION
       ========================================================================== */
    .team-layout {
      display: grid;
      grid-template-columns: 1fr;
      gap: 40px;
    }

    .team-info h3 {
      font-size: 24px;
      margin-bottom: 12px;
    }

    .team-desc-main {
      font-size: 16px;
      color: var(--color-gray-text);
      margin-bottom: 24px;
    }

    .management-list {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .member-item {
      padding-bottom: 16px;
      border-bottom: 1px solid var(--color-gray-border);
    }

    .member-item:last-child {
      border-bottom: none;
    }

    .member-name {
      font-size: 16px;
      font-weight: 700;
      color: var(--color-dark);
    }

    .member-role {
      font-size: 13px;
      font-weight: 600;
      color: var(--color-primary);
      margin-bottom: 4px;
    }

    .member-bio {
      font-size: 14px;
      color: var(--color-gray-text);
    }

    .team-images {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
    }

    .team-img {
      width: 100%;
      height: 220px;
      object-fit: cover;
      border-radius: 8px;
    }

    /* ==========================================================================
       SECTION 7: CTA CALL TO ACTION
       ========================================================================== */
    .cta-section {
      text-align: center;
      padding: 80px 0;
    }

    .cta-section h2 {
      font-size: 32px;
      margin-bottom: 12px;
    }

    .cta-section p {
      font-size: 18px;
      color: #a0a0b0;
      margin-bottom: 32px;
    }

    .cta-btns {
      display: flex;
      flex-direction: column;
      gap: 16px;
      max-width: 320px;
      margin: 0 auto;
    }

    /* ==========================================================================
       RESPONSIVE BREAKPOINTS (Tablet & Desktop)
       ========================================================================== */
    @media (min-width: 768px) {
      .hero-section h1 { font-size: 40px; }
      .section-title { font-size: 36px; }
      .hero-banner-wrapper { height: 400px; }
      
      .data-bar {
        grid-template-columns: repeat(5, 1fr);
        gap: 10px;
        padding: 24px 12px;
      }
      .data-item-val { font-size: 24px; }

      .mvv-grid { grid-template-columns: repeat(3, 1fr); }
      .cap-grid { grid-template-columns: repeat(4, 1fr); }
      .lines-grid { grid-template-columns: repeat(2, 1fr); }
      .team-images { grid-template-columns: repeat(2, 1fr); }
      .team-img-large { grid-column: span 2; height: 300px; }

      .cta-btns {
        flex-direction: row;
        max-width: none;
        justify-content: center;
      }
    }

    @media (min-width: 1024px) {
      .timeline-container { padding-left: 40px; }
      .timeline-line { left: 17px; }
      .timeline-node { left: -29px; width: 16px; height: 16px; top: 5px; }
      .timeline-card { padding: 24px; left: 0; }
      
      .lines-grid { grid-template-columns: repeat(3, 1fr); }
      .team-layout { grid-template-columns: 1.2fr 1fr; gap: 60px; }
    }


/* Source: blog-detail */
/* --- Design Tokens & Global Reset --- */
        :root {
            --primary: #e74c3c;
            --primary-hover: #c0392b;
            --dark: #1a1a2e;
            --light-bg: #f8f9fa;
            --border-color: #e9ecef;
            --text-main: #2c3e50;
            --text-dark: #1a1a2e;
            --text-muted: #7f8c8d;
            --white: #ffffff;
            --font-stack: 'Inter', sans-serif;
            --transition: all 0.3s ease;
            --shadow: 0 4px 15px rgba(0,0,0,0.05);
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: var(--font-stack);
            color: var(--text-main);
            background-color: var(--white);
            line-height: 1.8;
            font-size: 16px;
            -webkit-font-smoothing: antialiased;
        }

        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        a {
            color: var(--primary);
            text-decoration: none;
            transition: var(--transition);
        }

        a:hover {
            color: var(--primary-hover);
        }

        img {
            max-width: 100%;
            height: auto;
            display: block;
            border-radius: 8px;
        }

        /* --- Breadcrumbs --- */
        .breadcrumbs {
            padding: 20px 0;
            font-size: 0.88rem;
            color: var(--text-muted);
        }
        .breadcrumbs a {
            color: var(--text-muted);
        }
        .breadcrumbs a:hover {
            color: var(--primary);
        }
        .breadcrumbs span {
            margin: 0 8px;
        }

        /* --- Section 1: Article Header --- */
        .article-header {
            padding-bottom: 40px;
        }
        .category-tag {
            display: inline-block;
            background-color: var(--primary);
            color: var(--white);
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            padding: 4px 12px;
            border-radius: 4px;
            margin-bottom: 16px;
            letter-spacing: 0.5px;
        }
        .article-header h1 {
            font-size: 1.85rem;
            font-weight: 700;
            color: var(--text-dark);
            line-height: 1.3;
            margin-bottom: 12px;
        }
        .article-subtitle {
            font-size: 1.1rem;
            color: var(--text-muted);
            margin-bottom: 20px;
            line-height: 1.5;
        }
        .author-meta {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 0.85rem;
            color: var(--text-muted);
            margin-bottom: 30px;
        }
        .author-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background-color: #ddd;
            object-fit: cover;
        }
        .cover-wrapper {
            width: 100%;
            aspect-ratio: 16 / 9;
            overflow: hidden;
            border-radius: 12px;
            box-shadow: var(--shadow);
            background-color: #eee;
        }
        .cover-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* --- Mobile Mobile TOC Trigger --- */
        .mobile-contents-btn {
            display: block;
            background-color: var(--light-bg);
            border: 1px solid var(--border-color);
            padding: 12px 20px;
            border-radius: 6px;
            margin: 30px 0;
            font-weight: 600;
            color: var(--text-dark);
            cursor: pointer;
            text-align: center;
            transition: var(--transition);
        }
        .mobile-contents-btn:hover {
            border-color: var(--primary);
            color: var(--primary);
        }

        /* --- Section 2: Layout Wrapper --- */
        .layout-wrapper {
            display: flex;
            flex-direction: column;
            padding-bottom: 60px;
        }

        /* Right Sticky TOC panel */
        .sidebar-panel {
            width: 100%;
            margin-bottom: 40px;
            display: none; /* Controlled via JS toggle or Media queries */
        }
        .sidebar-panel.active-mobile {
            display: block;
        }
        .toc-box {
            position: sticky;
            top: 40px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 24px;
            background-color: var(--white);
            box-shadow: var(--shadow);
        }
        .toc-box h3 {
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--text-dark);
            margin-bottom: 16px;
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 8px;
        }
        .toc-list {
            list-style: none;
        }
        .toc-item {
            margin-bottom: 10px;
            font-size: 0.88rem;
        }
        .toc-item a {
            color: var(--text-muted);
            display: block;
            padding: 2px 0;
        }
        .toc-item a:hover, .toc-item.active a {
            color: var(--primary);
            font-weight: 500;
            padding-left: 4px;
        }
        .share-strip {
            margin-top: 24px;
            padding-top: 16px;
            border-top: 1px solid var(--border-color);
            display: flex;
            gap: 12px;
            align-items: center;
        }
        .share-label {
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--text-dark);
        }
        .share-icon {
            font-size: 0.9rem;
            color: var(--text-muted);
        }
        .share-icon:hover {
            color: var(--primary);
        }
        .update-stamp {
            font-size: 0.78rem;
            color: var(--text-muted);
            margin-top: 16px;
            display: block;
        }

        /* Left Editorial Content */
        .editorial-content {
            width: 100%;
        }

        /* Standard Typography Elements inside Editorial Area */
        .editorial-content h2 {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--text-dark);
            margin: 40px 0 20px 0;
            scroll-margin-top: 40px;
        }
        .editorial-content h3 {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--text-dark);
            margin: 30px 0 15px 0;
        }
        .editorial-content p {
            margin-bottom: 24px;
        }
        .editorial-content ul, .editorial-content ol {
            margin-bottom: 24px;
            padding-left: 20px;
        }
        .editorial-content li {
            margin-bottom: 8px;
        }

        /* Custom Box Structures */
        .callout-box {
            background-color: #fef5f3;
            border-left: 4px solid var(--primary);
            padding: 20px;
            border-radius: 0 8px 8px 0;
            margin-bottom: 24px;
            font-size: 0.95rem;
        }
        .inline-cta-box {
            background-color: var(--dark);
            color: var(--white);
            padding: 24px;
            border-radius: 8px;
            margin: 35px 0;
            text-align: center;
            box-shadow: var(--shadow);
        }
        .inline-cta-box p {
            margin-bottom: 16px;
            font-weight: 600;
            font-size: 1.05rem;
        }
        .inline-cta-box .btn-cta {
            display: inline-flex;
            background-color: var(--primary);
            color: var(--white);
            padding: 8px 24px;
            border-radius: 4px;
            font-size: 0.9rem;
            font-weight: 600;
            transition: var(--transition);
        }
        .inline-cta-box .btn-cta:hover {
            background-color: var(--primary-hover);
        }
        blockquote {
            background-color: var(--light-bg);
            border-left: 4px solid var(--text-muted);
            padding: 16px 20px;
            margin-bottom: 24px;
            font-style: italic;
        }

        /* Inline Media Attachments */
        .article-visual-wrapper {
            margin: 30px 0;
            text-align: center;
        }
        .article-visual-wrapper img {
            margin: 0 auto;
            box-shadow: var(--shadow);
            background-color: #eee;
        }
        .visual-caption {
            display: block;
            font-size: 0.85rem;
            color: var(--text-muted);
            margin-top: 8px;
            font-style: italic;
        }

        /* Matrix Data Table */
        .table-scroll-frame {
            width: 100%;
            overflow-x: auto;
            margin-bottom: 30px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            box-shadow: var(--shadow);
        }
        .matrix-data-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.9rem;
            background-color: var(--white);
            min-width: 600px;
            text-align: left;
        }
        .matrix-data-table th, .matrix-data-table td {
            padding: 12px 16px;
            border-bottom: 1px solid var(--border-color);
        }
        .matrix-data-table th {
            background-color: var(--dark);
            color: var(--white);
            font-weight: 600;
            text-transform: uppercase;
            font-size: 0.78rem;
            letter-spacing: 0.5px;
        }
        .matrix-data-table tbody tr:nth-child(even) {
            background-color: var(--light-bg);
        }

        /* --- Editorial FAQ Block --- */
        .editorial-faq {
            margin-top: 40px;
            border-top: 1px solid var(--border-color);
            padding-top: 30px;
        }
        .faq-card {
            border-bottom: 1px solid var(--border-color);
            padding: 16px 0;
        }
        .faq-card:last-child {
            border-bottom: none;
        }
        .faq-question {
            font-size: 1.05rem;
            font-weight: 600;
            color: var(--text-dark);
            margin-bottom: 8px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .faq-question::after {
            content: "+";
            font-weight: 700;
            color: var(--text-muted);
            margin-left: 10px;
        }
        .faq-card.open .faq-question::after {
            content: "−";
            color: var(--primary);
        }
        .faq-answer {
            font-size: 0.95rem;
            color: var(--text-main);
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out;
        }
        .faq-card.open .faq-answer {
            max-height: 200px;
            margin-top: 10px;
        }

        /* --- Section 3: Author Box --- */
        .author-card-panel {
            background-color: var(--light-bg);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 30px;
            margin: 40px 0 60px 0;
            display: flex;
            flex-direction: column;
            gap: 20px;
            align-items: center;
            text-align: center;
        }
        .author-profile-large {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            background-color: #ddd;
            object-fit: cover;
        }
        .author-info-side h4 {
            font-size: 1.2rem;
            color: var(--text-dark);
            margin-bottom: 4px;
        }
        .author-bio {
            font-size: 0.9rem;
            color: var(--text-muted);
            margin-bottom: 12px;
        }
        .btn-author-link {
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--primary);
        }

        /* --- Section 4: Related Articles Matrix --- */
        .related-articles-section {
            padding: 60px 0;
            border-top: 1px solid var(--border-color);
            background-color: var(--light-bg);
        }
        .related-title-head {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--text-dark);
            margin-bottom: 30px;
            text-align: center;
        }
        .related-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 24px;
        }
        .related-card {
            background-color: var(--white);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            overflow: hidden;
            box-shadow: var(--shadow);
            display: flex;
            flex-direction: column;
            transition: var(--transition);
        }
        .related-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.08);
        }
        .related-img {
            width: 100%;
            aspect-ratio: 16 / 9;
            object-fit: cover;
            background-color: #eee;
        }
        .related-body {
            padding: 20px;
            display: flex;
            flex-direction: column;
            flex-grow: 1;
        }
        .related-item-title {
            font-size: 1.05rem;
            font-weight: 700;
            color: var(--text-dark);
            margin-bottom: 10px;
            line-height: 1.4;
        }
        .related-meta {
            font-size: 0.78rem;
            color: var(--text-muted);
            margin-top: auto;
        }

        /* --- Section 5: Master CTA Footer Strip --- */
        .master-cta-footer {
            background-color: var(--dark);
            color: var(--white);
            text-align: center;
            padding: 60px 20px;
        }
        .master-cta-footer h2 {
            font-size: 1.8rem;
            font-weight: 700;
            margin-bottom: 8px;
        }
        .master-cta-footer p {
            color: #b2bec3;
            font-size: 1rem;
            margin-bottom: 25px;
        }
        .cta-footer-btn-group {
            display: flex;
            flex-direction: column;
            gap: 15px;
            max-width: 400px;
            margin: 0 auto;
        }
        .btn-footer {
            height: 46px;
            border-radius: 4px;
            font-size: 0.95rem;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
        }
        .btn-footer-primary {
            background-color: var(--primary);
            color: var(--white);
        }
        .btn-footer-primary:hover {
            background-color: var(--primary-hover);
        }
        .btn-footer-secondary {
            background-color: transparent;
            color: var(--white);
            border: 1px solid rgba(255,255,255,0.3);
        }
        .btn-footer-secondary:hover {
            background-color: rgba(255,255,255,0.05);
            border-color: var(--white);
        }

        /* --- Tablet Breakpoint Layouts (768px - 1023px) --- */
        @media (min-width: 768px) {
            .article-header h1 { font-size: 2.4rem; }
            .mobile-contents-btn { display: none; }
            
            .layout-wrapper {
                flex-direction: row;
                gap: 30px;
            }
            .sidebar-panel {
                display: block;
                width: 30%;
                order: 2;
            }
            .editorial-content {
                width: 70%;
                order: 1;
            }
            
            .author-card-panel {
                flex-direction: row;
                text-align: left;
                gap: 24px;
            }
            .author-profile-large { flex-shrink: 0; }

            .related-grid {
                grid-template-columns: repeat(3, 1fr);
            }

            .cta-footer-btn-group {
                flex-direction: row;
                max-width: 460px;
            }
            .btn-footer { flex: 1; }
        }

        /* --- Desktop Viewport Upgrades (≥1024px) --- */
        @media (min-width: 1024px) {
            .article-header h1 { font-size: 2.6rem; }
            .layout-wrapper { gap: 40px; }
        }


/* Source: blog-list */
/* --- Design Tokens & Global Reset --- */
        :root {
            --primary: #e74c3c;
            --primary-hover: #c0392b;
            --dark: #1a1a2e;
            --light-bg: #f8f9fa;
            --border-color: #e9ecef;
            --text-main: #333333;
            --text-muted: #6c757d;
            --white: #ffffff;
            --font-stack: 'Inter', system-ui, -apple-system, sans-serif;
            --shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            
            /* Category Badge Colors */
            --tag-buying: #e74c3c;
            --tag-technical: #3498db;
            --tag-installation: #2ecc71;
            --tag-industry: #f1c40f;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: var(--font-stack);
            color: var(--text-main);
            background-color: var(--white);
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
        }

        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        a {
            color: inherit;
            text-decoration: none;
            transition: var(--transition);
        }

        input, select, button {
            font-family: var(--font-stack);
        }

        /* --- Section 1: Header --- */
        .blog-header {
            background-color: var(--dark);
            color: var(--white);
            text-align: center;
            padding: 50px 0;
        }

        .blog-header h1 {
            font-size: 2.2rem;
            font-weight: 700;
            margin-bottom: 12px;
        }

        .blog-header p {
            font-size: 1.05rem;
            color: #b2bec3;
            margin-bottom: 25px;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
            padding: 0 15px;
        }

        .search-container {
            position: relative;
            max-width: 500px;
            margin: 0 auto;
            padding: 0 15px;
        }

        .search-input {
            width: 100%;
            height: 48px;
            background-color: var(--white);
            border: 2px solid transparent;
            border-radius: 24px;
            padding: 10px 20px 10px 45px;
            font-size: 1rem;
            color: var(--dark);
            outline: none;
            box-shadow: 0 4px 10px rgba(0,0,0,0.15);
            transition: var(--transition);
        }

        .search-input:focus {
            border-color: var(--primary);
            box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);
        }

        .search-icon {
            position: absolute;
            left: 32px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 1.1rem;
            color: var(--text-muted);
            pointer-events: none;
        }

        /* --- Section 2: Filter Controls --- */
        .filter-section {
            border-bottom: 1px solid var(--border-color);
            background-color: var(--white);
            padding: 15px 0;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: 0 2px 8px rgba(0,0,0,0.02);
        }

        .filter-toolbar {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .pill-container {
            display: flex;
            gap: 8px;
            overflow-x: auto;
            scrollbar-width: none;
            padding-bottom: 4px;
            -webkit-overflow-scrolling: touch;
        }

        .pill-container::-webkit-scrollbar {
            display: none;
        }

        .filter-pill {
            white-space: nowrap;
            background-color: var(--light-bg);
            border: 1px solid var(--border-color);
            border-radius: 20px;
            padding: 6px 16px;
            font-size: 0.88rem;
            font-weight: 500;
            color: var(--text-main);
            cursor: pointer;
            transition: var(--transition);
        }

        .filter-pill:hover {
            border-color: var(--primary);
            color: var(--primary);
        }

        .filter-pill.active {
            background-color: var(--primary);
            border-color: var(--primary);
            color: var(--white);
        }

        .sort-dropdown {
            height: 36px;
            padding: 0 30px 0 12px;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            background-color: var(--white);
            color: var(--text-main);
            font-size: 0.88rem;
            outline: none;
            cursor: pointer;
            appearance: none;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 10px center;
            background-size: 12px;
            width: 100%;
        }

        .sort-dropdown:focus {
            border-color: var(--primary);
        }

        /* --- Global Category Badge Styles --- */
        .badge {
            display: inline-block;
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            padding: 4px 10px;
            border-radius: 4px;
            color: var(--white);
            margin-bottom: 12px;
            letter-spacing: 0.5px;
        }
        .badge.buying-guides { background-color: var(--tag-buying); }
        .badge.technical { background-color: var(--tag-technical); }
        .badge.installation { background-color: var(--tag-installation); }
        .badge.industry { background-color: var(--tag-industry); color: var(--dark); }

        /* --- Section 3: Featured Post --- */
        .featured-section {
            padding: 40px 0;
            background-color: var(--white);
        }

        .featured-card {
            display: flex;
            flex-direction: column;
            border: 1px solid var(--border-color);
            border-radius: 12px;
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: var(--transition);
        }

        .featured-card:hover {
            box-shadow: 0 8px 24px rgba(0,0,0,0.08);
        }

        .featured-img-box {
            width: 100%;
            aspect-ratio: 16 / 9;
            overflow: hidden;
            background-color: #eee;
        }

        .featured-img-box img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }

        .featured-card:hover .featured-img-box img {
            transform: scale(1.03);
        }

        .featured-content-box {
            padding: 24px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .featured-title {
            font-size: 1.4rem;
            font-weight: 700;
            color: var(--dark);
            margin-bottom: 12px;
            line-height: 1.3;
        }

        .featured-title a:hover {
            color: var(--primary);
        }

        .featured-summary {
            font-size: 0.95rem;
            color: var(--text-muted);
            margin-bottom: 16px;
        }

        .post-meta {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 0.78rem;
            color: var(--text-muted);
            border-top: 1px solid var(--border-color);
            padding-top: 14px;
            margin-top: auto;
        }

        .author-avatar {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            object-fit: cover;
            background-color: #ddd;
        }

        .meta-divider {
            color: #ccc;
        }

        .btn-read-more {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: 38px;
            padding: 0 18px;
            background-color: var(--primary);
            color: var(--white);
            font-size: 0.88rem;
            font-weight: 600;
            border-radius: 4px;
            margin-top: 16px;
            align-self: flex-start;
            transition: var(--transition);
        }

        .btn-read-more:hover {
            background-color: var(--primary-hover);
            color: var(--white);
        }

        /* --- Section 4: Grid Block --- */
        .list-section {
            padding: 0 0 60px 0;
            background-color: var(--white);
        }

        .grid-layout {
            display: grid;
            grid-template-columns: 1fr;
            gap: 30px;
        }

        .blog-card {
            background-color: var(--white);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: var(--transition);
            display: flex;
            flex-direction: column;
        }

        .blog-card:hover {
            transform: translateY(-4px);
            border-color: var(--primary);
            box-shadow: 0 12px 24px rgba(0,0,0,0.08);
        }

        .card-img-box {
            width: 100%;
            aspect-ratio: 16 / 9;
            overflow: hidden;
            background-color: #eee;
        }

        .card-img-box img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }

        .blog-card:hover .card-img-box img {
            transform: scale(1.04);
        }

        .card-body {
            padding: 20px;
            display: flex;
            flex-direction: column;
            flex-grow: 1;
        }

        .card-title {
            font-size: 1.125rem;
            font-weight: 700;
            color: var(--dark);
            margin-bottom: 10px;
            line-height: 1.4;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            height: 3.15rem; /* Forces consistent spacing mapping 2 lines */
        }

        .card-title a:hover {
            color: var(--primary);
        }

        .card-summary {
            font-size: 0.88rem;
            color: var(--text-muted);
            margin-bottom: 20px;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            height: 3.96rem; /* Forces consistent spacing mapping 3 lines */
        }

        .pagination-container {
            text-align: center;
            margin-top: 50px;
        }

        .btn-load-more {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: 46px;
            padding: 0 32px;
            background-color: transparent;
            color: var(--primary);
            border: 2px solid var(--primary);
            font-size: 0.95rem;
            font-weight: 700;
            border-radius: 6px;
            cursor: pointer;
            transition: var(--transition);
        }

        .btn-load-more:hover {
            background-color: var(--primary);
            color: var(--white);
        }

        /* --- Section 5: Newsletter Strip --- */
        .newsletter-section {
            background-color: var(--dark);
            color: var(--white);
            padding: 50px 20px;
            text-align: center;
        }

        .newsletter-section h3 {
            font-size: 1.6rem;
            font-weight: 700;
            margin-bottom: 6px;
        }

        .newsletter-section p {
            font-size: 0.95rem;
            color: #b2bec3;
            margin-bottom: 24px;
        }

        .form-wrapper {
            max-width: 500px;
            margin: 0 auto;
        }

        .form-row {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .email-input {
            height: 44px;
            border-radius: 4px;
            border: 1px solid rgba(255,255,255,0.2);
            background-color: rgba(255,255,255,0.05);
            padding: 0 16px;
            color: var(--white);
            font-size: 0.95rem;
            outline: none;
            width: 100%;
        }

        .email-input:focus {
            border-color: var(--primary);
            background-color: rgba(255,255,255,0.1);
        }

        .btn-subscribe {
            height: 44px;
            background-color: var(--primary);
            color: var(--white);
            border: none;
            border-radius: 4px;
            font-size: 0.95rem;
            font-weight: 600;
            cursor: pointer;
            padding: 0 24px;
            transition: var(--transition);
        }

        .btn-subscribe:hover {
            background-color: var(--primary-hover);
        }

        .form-hint {
            display: block;
            font-size: 0.78rem;
            color: #6c757d;
            margin-top: 10px;
        }

        /* --- Section 6: CTA Framework --- */
        .cta-section {
            background-color: var(--light-bg);
            text-align: center;
            padding: 50px 20px;
            border-top: 1px solid var(--border-color);
        }

        .cta-section h3 {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--dark);
            margin-bottom: 24px;
        }

        .cta-btn-group {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
            max-width: 320px;
            margin: 0 auto;
        }

        .btn-flat {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 44px;
            border-radius: 4px;
            font-size: 0.95rem;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
        }

        .btn-flat-primary {
            background-color: var(--primary);
            color: var(--white);
        }

        .btn-flat-primary:hover {
            background-color: var(--primary-hover);
        }

        .btn-flat-secondary {
            background-color: transparent;
            color: var(--dark);
            border: 1px solid var(--dark);
        }

        .btn-flat-secondary:hover {
            background-color: rgba(26,26,46,0.04);
        }

        /* --- Tablet Breakpoint (768px - 1023px) --- */
        @media (min-width: 768px) {
            .blog-header { padding: 65px 0; }
            .blog-header h1 { font-size: 2.6rem; }
            
            .filter-toolbar {
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
            }
            .pill-container { padding-bottom: 0; }
            .sort-dropdown { width: 160px; }

            .featured-card { flex-direction: row; }
            .featured-img-box { width: 45%; aspect-ratio: auto; }
            .featured-content-box { width: 55%; padding: 32px; }
            .featured-title { font-size: 1.6rem; }

            .grid-layout {
                grid-template-columns: repeat(2, 1fr);
                gap: 25px;
            }

            .form-row { flex-direction: row; }
            .email-input { flex-grow: 1; }
            .btn-subscribe { flex-shrink: 0; }

            .cta-btn-group {
                flex-direction: row;
                max-width: 420px;
            }
        }

        /* --- Desktop Viewport Override (≥1024px) --- */
        @media (min-width: 1024px) {
            .featured-img-box { width: 50%; }
            .featured-content-box { width: 50%; padding: 40px; }
            .featured-title { font-size: 1.85rem; }

            .grid-layout {
                grid-template-columns: repeat(3, 1fr);
                gap: 30px;
            }
        }


/* Source: contact */
/* --- Design Tokens & Reset --- */
        :root {
            --primary: #e74c3c;
            --primary-hover: #c0392b;
            --dark: #1a1a2e;
            --light-bg: #f8f9fa;
            --border-color: #e9ecef;
            --text-main: #333333;
            --text-muted: #6c757d;
            --success: #2ecc71;
            --white: #ffffff;
            --font-stack: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: var(--font-stack);
            color: var(--text-main);
            background-color: var(--white);
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
        }

        a {
            color: var(--primary);
            text-decoration: none;
            transition: color 0.3s ease;
        }

        a:hover {
            color: var(--primary-hover);
        }

        img {
            max-width: 100%;
            height: auto;
            display: block;
        }

        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* --- Section 1: Header --- */
        .contact-header {
            background-color: var(--dark);
            color: var(--white);
            text-align: center;
            padding: 60px 0;
        }

        .contact-header h1 {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 12px;
        }

        .contact-header h2 {
            font-size: 1.25rem;
            font-weight: 500;
            color: var(--primary);
            margin-bottom: 16px;
        }

        .contact-header p {
            max-width: 700px;
            margin: 0 auto;
            color: #b2bec3;
            font-size: 1rem;
            padding: 0 15px;
        }

        /* --- Section 2: Split Layout (Info & RFQ) --- */
        .main-contact-section {
            padding: 60px 0;
            background-color: var(--white);
        }

        .split-layout {
            display: flex;
            flex-direction: column;
            gap: 40px;
        }

        /* Left Side: Contact Info */
        .contact-info-panel {
            width: 100%;
        }

        .info-block {
            margin-bottom: 32px;
        }

        .info-block h3 {
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--text-muted);
            margin-bottom: 12px;
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 6px;
        }

        .info-item {
            display: flex;
            align-items: flex-start;
            margin-bottom: 12px;
            font-size: 1rem;
        }

        .info-item .icon {
            margin-right: 12px;
            font-size: 1.1rem;
            flex-shrink: 0;
            margin-top: 2px;
        }

        .info-item .label {
            font-weight: 600;
            margin-right: 6px;
            min-width: 70px;
            display: inline-block;
        }

        .phone-highlight {
            font-size: 20px;
            font-weight: bold;
            color: var(--primary);
        }

        .address-text {
            white-space: pre-line;
        }

        .qr-container {
            display: flex;
            gap: 20px;
            margin-top: 15px;
        }

        .qr-box {
            text-align: center;
        }

        .qr-box img {
            border: 1px solid var(--border-color);
            border-radius: 6px;
            margin-bottom: 6px;
        }

        .qr-box span {
            display: block;
            font-size: 0.8rem;
            color: var(--text-muted);
        }

        /* Right Side: RFQ Form */
        .rfq-form-panel {
            width: 100%;
            background-color: var(--white);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 24px;
        }

        .form-header {
            margin-bottom: 24px;
        }

        .form-header h3 {
            font-size: 20px;
            font-weight: 700;
            color: var(--dark);
            margin-bottom: 4px;
        }

        .form-header p {
            color: var(--text-muted);
            font-size: 0.95rem;
        }

        .form-group-row {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .form-group {
            margin-bottom: 16px;
            display: flex;
            flex-direction: column;
        }

        .form-group.half-width {
            width: 100%;
        }

        .form-group label {
            font-size: 0.9rem;
            font-weight: 500;
            margin-bottom: 6px;
            color: var(--dark);
        }

        .form-group label .required {
            color: var(--primary);
            margin-left: 2px;
        }

        .form-control {
            height: 44px;
            border: 1px solid #ced4da;
            border-radius: 6px;
            padding: 10px 14px;
            font-family: var(--font-stack);
            font-size: 0.95rem;
            color: var(--text-main);
            background-color: var(--white);
            outline: none;
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
            width: 100%;
        }

        .form-control:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
        }

        select.form-control {
            appearance: none;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23495057' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 14px center;
            background-size: 16px;
            padding-right: 40px;
        }

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

        /* File Upload styling */
        .file-upload-wrapper {
            position: relative;
            margin-top: 6px;
        }

        .file-upload-label {
            display: inline-flex;
            align-items: center;
            padding: 8px 16px;
            background-color: var(--light-bg);
            border: 1px dashed #ced4da;
            border-radius: 6px;
            cursor: pointer;
            font-size: 0.9rem;
            font-weight: 500;
            transition: background-color 0.3s ease;
        }

        .file-upload-label:hover {
            background-color: #e9ecef;
        }

        .file-upload-input {
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            width: 100%;
            height: 100%;
            cursor: pointer;
            display: none;
        }

        .file-hint {
            font-size: 0.8rem;
            color: var(--text-muted);
            margin-top: 4px;
        }

        /* Checkbox styling */
        .checkbox-group {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            margin: 20px 0;
        }

        .checkbox-group input[type="checkbox"] {
            margin-top: 4px;
            accent-color: var(--primary);
            width: 16px;
            height: 16px;
        }

        .checkbox-group label {
            font-size: 0.9rem;
            color: var(--text-main);
            cursor: pointer;
        }

        /* Submit Button */
        .btn-submit {
            width: 100%;
            height: 48px;
            background-color: var(--primary);
            color: var(--white);
            border: none;
            border-radius: 6px;
            font-size: 16px;
            font-weight: 700;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.1s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .btn-submit:hover {
            background-color: var(--primary-hover);
        }

        .btn-submit:active {
            transform: scale(0.99);
        }

        .response-promise {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            margin-top: 16px;
            color: var(--success);
            font-size: 0.9rem;
            font-weight: 500;
        }

        /* Thank You Message States */
        .form-container-inner {
            transition: opacity 0.4s ease;
        }

        .thank-you-message {
            display: none;
            text-align: center;
            padding: 40px 20px;
        }

        .thank-you-message h4 {
            font-size: 24px;
            color: var(--success);
            margin-bottom: 12px;
        }

        .thank-you-message p {
            color: var(--text-main);
            font-size: 1.05rem;
        }

        /* --- Section 3: Google Map --- */
        .map-section {
            width: 100%;
            position: relative;
            background-color: var(--light-bg);
            line-height: 0; /* Clear inline gaps */
        }

        .map-iframe-wrapper {
            position: relative;
            width: 100%;
            height: 400px;
        }

        .map-iframe-wrapper iframe {
            width: 100%;
            height: 100%;
            border: 0;
        }

        .map-overlay-card {
            position: absolute;
            bottom: 20px;
            left: 20px;
            right: 20px;
            background-color: rgba(26, 26, 46, 0.95);
            color: var(--white);
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
            line-height: 1.6;
        }

        .map-overlay-card h4 {
            font-size: 1.1rem;
            margin-bottom: 8px;
            color: var(--primary);
        }

        .map-overlay-card p {
            font-size: 0.9rem;
            margin-bottom: 12px;
            color: #dcdde1;
        }

        .btn-directions {
            display: inline-flex;
            background-color: var(--primary);
            color: var(--white);
            padding: 8px 16px;
            border-radius: 4px;
            font-size: 0.85rem;
            font-weight: 600;
            transition: background-color 0.3s ease;
        }

        .btn-directions:hover {
            background-color: var(--primary-hover);
            color: var(--white);
        }

        /* --- Section 4: Global Offices --- */
        .offices-section {
            padding: 60px 0;
            background-color: var(--white);
        }

        .section-title {
            text-align: center;
            font-size: 1.75rem;
            font-weight: 700;
            color: var(--dark);
            margin-bottom: 32px;
        }

        .offices-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 20px;
        }

        .office-card {
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 20px;
            background-color: var(--white);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .office-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.05);
        }

        .office-region {
            font-size: 1.2rem;
            font-weight: 700;
            color: var(--dark);
            margin-bottom: 12px;
            border-left: 3px solid var(--primary);
            padding-left: 10px;
        }

        .office-details p {
            margin-bottom: 6px;
            font-size: 0.95rem;
        }

        .office-details span.label {
            color: var(--text-muted);
            font-weight: 500;
        }

        .office-market {
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px dashed var(--border-color);
            font-size: 0.85rem;
            color: var(--text-muted);
        }

        /* --- Section 5: Quick Portals --- */
        .portals-section {
            padding: 40px 0;
            background-color: var(--light-bg);
            border-top: 1px solid var(--border-color);
            border-bottom: 1px solid var(--border-color);
        }

        .portals-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 16px;
        }

        .portal-card {
            display: flex;
            align-items: center;
            background-color: var(--white);
            padding: 20px;
            border-radius: 8px;
            border: 1px solid var(--border-color);
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
        }

        .portal-card:hover {
            border-color: var(--primary);
            box-shadow: 0 4px 12px rgba(231, 76, 60, 0.08);
        }

        .portal-icon {
            font-size: 2rem;
            margin-right: 16px;
            flex-shrink: 0;
        }

        .portal-info h4 {
            font-size: 1rem;
            font-weight: 600;
            color: var(--dark);
        }

        /* --- Section 6: Response Guarantee --- */
        .guarantee-section {
            padding: 50px 0;
            background-color: #f1f2f6;
            text-align: center;
        }

        .guarantee-section h3 {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--dark);
            margin-bottom: 30px;
        }

        .guarantee-grid {
            display: flex;
            flex-direction: column;
            gap: 24px;
            max-width: 900px;
            margin: 0 auto;
        }

        .guarantee-item {
            background-color: var(--white);
            padding: 20px;
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            align-items: center;
            box-shadow: 0 2px 8px rgba(0,0,0,0.02);
        }

        .guarantee-icon {
            font-size: 1.5rem;
            color: var(--success);
            margin-bottom: 8px;
        }

        .guarantee-item h4 {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--dark);
            margin-bottom: 6px;
        }

        .guarantee-item p {
            font-size: 0.9rem;
            color: var(--text-muted);
        }

        /* --- Responsive Rules (Mobile-First Overrides) --- */
        
        /* Small Mobile Tweak (<480px) */
        @media (max-width: 479px) {
            .form-group-row {
                gap: 0;
            }
        }

        /* Tablet Breakpoint (768px - 1023px) */
        @media (min-width: 768px) {
            .split-layout {
                flex-direction: row;
                gap: 30px;
            }

            .contact-info-panel {
                width: 35%;
            }

            .rfq-form-panel {
                width: 65%;
                padding: 32px;
            }

            .form-group-row {
                flex-direction: row;
                gap: 16px;
            }

            .form-group.half-width {
                width: 50%;
            }

            .map-overlay-card {
                max-width: 320px;
                left: 30px;
                bottom: 30px;
                right: auto;
            }

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

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

            .guarantee-grid {
                flex-direction: row;
                justify-content: space-between;
            }

            .guarantee-item {
                flex: 1;
            }
        }

        /* Desktop Breakpoint (≥1024px) */
        @media (min-width: 1024px) {
            .split-layout {
                gap: 40px;
            }

            .contact-info-panel {
                width: 40%;
            }

            .rfq-form-panel {
                width: 60%;
            }

            .offices-grid {
                grid-template-columns: repeat(4, 1fr);
            }

            .portals-grid {
                grid-template-columns: repeat(4, 1fr);
            }
        }


/* Source: factory */
/* --- Design Tokens & Reset --- */
        :root {
            --primary: #e74c3c;
            --primary-hover: #c0392b;
            --dark: #1a1a2e;
            --dark-muted: #2c2c44;
            --light-bg: #f8f9fa;
            --border-color: #e9ecef;
            --text-main: #333333;
            --text-muted: #6c757d;
            --white: #ffffff;
            --font-stack: 'Inter', sans-serif;
            --shadow: 0 4px 6px rgba(0,0,0,0.05);
            --transition: all 0.3s ease;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: var(--font-stack);
            color: var(--text-main);
            background-color: var(--white);
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
        }

        /* --- Global Structural Elements --- */
        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        section {
            padding: 60px 0;
        }

        .section-header {
            text-align: center;
            margin-bottom: 40px;
            padding: 0 10px;
        }

        .section-header .eyebrow {
            font-size: 0.85rem;
            font-weight: 700;
            letter-spacing: 2px;
            color: var(--primary);
            text-transform: uppercase;
            margin-bottom: 8px;
            display: block;
        }

        .section-header h2 {
            font-size: 1.85rem;
            font-weight: 700;
            color: var(--dark);
            margin-bottom: 12px;
        }

        .section-header p {
            font-size: 1rem;
            color: var(--text-muted);
            max-width: 600px;
            margin: 0 auto;
        }

        a {
            color: var(--primary);
            text-decoration: none;
            transition: var(--transition);
        }

        a:hover {
            color: var(--primary-hover);
        }

        /* --- Section 1: Hero & Video --- */
        .hero-video-section {
            background-color: var(--dark);
            color: var(--white);
            padding: 50px 0 0 0;
            text-align: center;
        }

        .hero-video-section h1 {
            font-size: 2.2rem;
            font-weight: 700;
            margin-bottom: 10px;
        }

        .hero-video-section .subtitle {
            font-size: 1.1rem;
            color: var(--primary);
            font-weight: 500;
            margin-bottom: 30px;
        }

        .video-container {
            position: relative;
            width: 100%;
            max-width: 1000px;
            margin: 0 auto;
            aspect-ratio: 16 / 9;
            background-color: #000;
            border-radius: 8px 8px 0 0;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
        }

        .video-placeholder {
            width: 100%;
            height: 100%;
            object-fit: cover;
            cursor: pointer;
        }

        .play-btn {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 70px;
            height: 70px;
            background-color: rgba(231, 76, 60, 0.9);
            border: none;
            border-radius: 50%;
            color: var(--white);
            font-size: 1.8rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            padding-left: 5px;
            transition: var(--transition);
            box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.4);
            animation: pulse 2s infinite;
        }

        .play-btn:hover {
            background-color: var(--primary);
            transform: translate(-50%, -50%) scale(1.1);
        }

        @keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7); }
            70% { box-shadow: 0 0 0 15px rgba(231, 76, 60, 0); }
            100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0); }
        }

        /* Stats Bar */
        .stats-bar {
            background-color: var(--light-bg);
            border-bottom: 1px solid var(--border-color);
            padding: 30px 0;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            text-align: center;
        }

        .stat-item .stat-number {
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--primary);
            display: block;
            margin-bottom: 4px;
        }

        .stat-item .stat-label {
            font-size: 0.85rem;
            color: var(--text-muted);
            font-weight: 500;
        }

        /* --- Section 2: Workshop Gallery --- */
        .gallery-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 25px;
        }

        .workshop-card {
            background-color: var(--white);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: var(--transition);
            display: flex;
            flex-direction: column;
            cursor: pointer;
        }

        .workshop-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 24px rgba(0,0,0,0.08);
        }

        .img-wrapper {
            position: relative;
            width: 100%;
            height: 200px;
            overflow: hidden;
            background-color: #eee;
        }

        .img-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }

        .workshop-card:hover .img-wrapper img {
            transform: scale(1.06);
        }

        .card-content {
            padding: 20px;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }

        .card-content h3 {
            font-size: 1.15rem;
            font-weight: 700;
            color: var(--dark);
            margin-bottom: 2px;
        }

        .card-content .zh-title {
            font-size: 0.85rem;
            color: var(--primary);
            font-weight: 500;
            margin-bottom: 12px;
            display: block;
        }

        .card-content p {
            font-size: 0.9rem;
            color: var(--text-muted);
            line-height: 1.5;
            margin-bottom: 15px;
        }

        .card-footer-link {
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--primary);
            margin-top: auto;
            opacity: 0;
            transform: translateX(-5px);
            transition: var(--transition);
        }

        .workshop-card:hover .card-footer-link {
            opacity: 1;
            transform: translateX(0);
        }

        /* --- Section 3: 10-Stage QC Process --- */
        .qc-section {
            background-color: var(--light-bg);
            border-top: 1px solid var(--border-color);
            border-bottom: 1px solid var(--border-color);
        }

        .qc-timeline {
            display: flex;
            flex-direction: column;
            gap: 20px;
            position: relative;
            padding-left: 20px;
        }

        /* Vertical line for mobile */
        .qc-timeline::before {
            content: '';
            position: absolute;
            left: 20px;
            top: 0;
            bottom: 0;
            width: 2px;
            background-color: var(--border-color);
            z-index: 1;
        }

        .qc-step {
            position: relative;
            background-color: var(--white);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 16px 16px 16px 30px;
            box-shadow: var(--shadow);
            z-index: 2;
            cursor: pointer;
            transition: var(--transition);
        }

        .qc-step:hover {
            border-color: var(--primary);
            background-color: #fffaf9;
        }

        .step-badge {
            position: absolute;
            left: -20px;
            top: 16px;
            width: 40px;
            height: 40px;
            background-color: var(--primary);
            color: var(--white);
            border-radius: 50%;
            font-size: 0.95rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 3px solid var(--white);
            box-shadow: var(--shadow);
        }

        .step-meta {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 4px;
        }

        .step-icon {
            font-size: 1.2rem;
        }

        .step-title-en {
            font-size: 0.95rem;
            font-weight: 700;
            color: var(--dark);
        }

        .step-desc-zh {
            font-size: 0.85rem;
            color: var(--text-muted);
        }

        /* Accordion Expansion Detail */
        .step-detail-expanded {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out;
            font-size: 0.85rem;
            color: #555;
            margin-top: 0;
            padding-top: 0;
            border-top: 0 dashed transparent;
        }

        .qc-step.active .step-detail-expanded {
            max-height: 100px;
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px dashed var(--border-color);
        }

        /* --- Section 4: Equipment --- */
        .table-responsive-wrapper {
            width: 100%;
            overflow-x: auto;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            box-shadow: var(--shadow);
        }

        table.equipment-table {
            width: 100%;
            border-collapse: collapse;
            text-align: left;
            font-size: 0.9rem;
            background-color: var(--white);
            min-width: 650px;
        }

        table.equipment-table th, table.equipment-table td {
            padding: 14px 18px;
            border-bottom: 1px solid var(--border-color);
        }

        table.equipment-table th {
            background-color: var(--dark);
            color: var(--white);
            font-weight: 600;
            text-transform: uppercase;
            font-size: 0.8rem;
            letter-spacing: 0.5px;
        }

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

        table.equipment-table tbody tr:nth-child(even) {
            background-color: #fdfdfd;
        }

        table.equipment-table tbody tr:hover {
            background-color: rgba(231, 76, 60, 0.02);
        }

        /* --- Section 5: Warehouse & Logistics --- */
        .warehouse-layout {
            display: flex;
            flex-direction: column;
            gap: 35px;
        }

        .logistics-text-content h3 {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--dark);
            margin-bottom: 18px;
        }

        .logistics-list {
            list-style: none;
        }

        .logistics-list li {
            position: relative;
            padding-left: 24px;
            margin-bottom: 14px;
            font-size: 0.95rem;
            color: #444;
        }

        .logistics-list li::before {
            content: "✓";
            position: absolute;
            left: 0;
            top: 0;
            color: var(--primary);
            font-weight: 700;
        }

        .logistics-media-gallery {
            display: grid;
            grid-template-columns: 1fr;
            gap: 15px;
        }

        .media-box {
            position: relative;
            border-radius: 6px;
            overflow: hidden;
            box-shadow: var(--shadow);
            height: 180px;
            background-color: #eee;
        }

        .media-box img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .media-caption {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(transparent, rgba(0,0,0,0.75));
            color: var(--white);
            padding: 12px 15px;
            font-size: 0.85rem;
            font-weight: 500;
        }

        /* --- Section 6: CTA Banner --- */
        .cta-dark-banner {
            background-color: var(--dark);
            color: var(--white);
            text-align: center;
            padding: 65px 20px;
        }

        .cta-dark-banner h3 {
            font-size: 1.85rem;
            font-weight: 700;
            margin-bottom: 8px;
        }

        .cta-dark-banner p {
            font-size: 1rem;
            color: #b2bec3;
            margin-bottom: 28px;
        }

        .cta-btn-group {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 15px;
            max-width: 400px;
            margin: 0 auto;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 48px;
            border-radius: 4px;
            font-size: 0.95rem;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
        }

        .btn-primary {
            background-color: var(--primary);
            color: var(--white);
            border: none;
        }

        .btn-primary:hover {
            background-color: var(--primary-hover);
            color: var(--white);
        }

        .btn-secondary {
            background-color: transparent;
            color: var(--white);
            border: 1px solid rgba(255,255,255,0.3);
        }

        .btn-secondary:hover {
            background-color: rgba(255,255,255,0.05);
            border-color: var(--white);
            color: var(--white);
        }

        /* --- Lightbox Modal --- */
        .lightbox-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(26, 26, 46, 0.95);
            z-index: 1000;
            justify-content: center;
            align-items: center;
            padding: 20px;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .lightbox-modal.show {
            display: flex;
            opacity: 1;
        }

        .lightbox-wrapper {
            background-color: var(--white);
            max-width: 700px;
            width: 100%;
            border-radius: 8px;
            overflow: hidden;
            position: relative;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        }

        .lightbox-img {
            width: 100%;
            max-height: 400px;
            object-fit: cover;
            background-color: #eee;
        }

        .lightbox-info {
            padding: 25px;
        }

        .lightbox-info h4 {
            font-size: 1.3rem;
            color: var(--dark);
            margin-bottom: 4px;
        }

        .lightbox-info .zh-subtitle {
            font-size: 0.9rem;
            color: var(--primary);
            font-weight: 500;
            margin-bottom: 12px;
            display: block;
        }

        .lightbox-info p {
            font-size: 0.95rem;
            color: var(--text-muted);
            line-height: 1.6;
        }

        .close-lightbox {
            position: absolute;
            top: 15px;
            right: 15px;
            width: 36px;
            height: 36px;
            background-color: rgba(0,0,0,0.5);
            border-radius: 50%;
            border: none;
            color: var(--white);
            font-size: 1.2rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
            z-index: 10;
        }

        .close-lightbox:hover {
            background-color: rgba(0,0,0,0.8);
        }

        /* --- Tablet Breakpoint (≥768px) --- */
        @media (min-width: 768px) {
            section { padding: 80px 0; }
            .section-header h2 { font-size: 2.2rem; }
            
            .hero-video-section h1 { font-size: 2.8rem; }
            
            .stats-grid {
                grid-template-columns: repeat(4, 1fr);
            }
            .stat-item .stat-number { font-size: 2.2rem; }

            .gallery-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .img-wrapper { height: 220px; }

            .warehouse-layout {
                flex-direction: row;
                align-items: center;
            }
            .logistics-text-content, .logistics-media-gallery {
                width: 50%;
            }
            .logistics-media-gallery {
                grid-template-columns: repeat(2, 1fr);
            }
            .media-box:first-child {
                grid-column: span 2;
                height: 200px;
            }

            .cta-btn-group {
                flex-direction: row;
                max-width: 440px;
                gap: 20px;
            }
        }

        /* --- Desktop Grid Layout Override (≥1024px) --- */
        @media (min-width: 1024px) {
            .gallery-grid {
                grid-template-columns: repeat(3, 1fr);
            }

            /* Complex Horizontal Layout Rewrite for QC 10-Stage Process Grid */
            .qc-timeline {
                display: grid;
                grid-template-columns: repeat(5, 1fr);
                gap: 25px 20px;
                padding-left: 0;
            }

            .qc-timeline::before {
                display: none; /* Strip out vertical line elements */
            }

            .qc-step {
                padding: 55px 15px 15px 15px;
                text-align: center;
            }

            .step-badge {
                left: 50%;
                top: -20px;
                transform: translateX(-50%);
            }

            .step-meta {
                flex-direction: column;
                justify-content: center;
                align-items: center;
                gap: 4px;
            }

            /* Custom Arrow Tracking Mechanics on Grid Flow Row 1 */
            .qc-step:not(:nth-child(5)):not(:nth-child(10))::after {
                content: "→";
                position: absolute;
                right: -15px;
                top: 50%;
                transform: translateY(-50%);
                color: #ced4da;
                font-size: 1.2rem;
                z-index: 5;
                pointer-events: none;
            }

            .qc-step.active .step-detail-expanded {
                max-height: 120px;
            }
        }


/* Source: faq */
/* --- Design Tokens & Reset --- */
        :root {
            --primary: #e74c3c;
            --primary-hover: #c0392b;
            --dark: #1a1a2e;
            --light-bg: #f8f9fa;
            --border-color: #e9ecef;
            --text-main: #333333;
            --text-muted: #6c757d;
            --white: #ffffff;
            --success: #2ecc71;
            --success-hover: #27ae60;
            --font-stack: 'Inter', sans-serif;
            --shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            --transition: all 0.25s ease;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: var(--font-stack);
            color: var(--text-main);
            background-color: var(--white);
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
        }

        .container {
            width: 100%;
            max-width: 1000px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* --- Section 1: Header & Search --- */
        .faq-header {
            background-color: var(--dark);
            color: var(--white);
            text-align: center;
            padding: 50px 0;
        }

        .faq-header h1 {
            font-size: 2.2rem;
            font-weight: 700;
            margin-bottom: 12px;
        }

        .faq-header p {
            font-size: 1.05rem;
            color: #b2bec3;
            margin-bottom: 30px;
            max-width: 650px;
            margin-left: auto;
            margin-right: auto;
        }

        .search-wrapper {
            position: relative;
            max-width: 600px;
            margin: 0 auto;
        }

        .search-input {
            width: 100%;
            height: 54px;
            background-color: var(--white);
            border: 2px solid transparent;
            border-radius: 27px;
            padding: 10px 25px 10px 55px;
            font-family: var(--font-stack);
            font-size: 1.05rem;
            color: var(--dark);
            outline: none;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
            transition: var(--transition);
        }

        .search-input:focus {
            border-color: var(--primary);
            box-shadow: 0 4px 20px rgba(231, 76, 60, 0.25);
        }

        .search-icon {
            position: absolute;
            left: 22px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 1.2rem;
            color: var(--text-muted);
            pointer-events: none;
        }

        /* --- Section 2: Tab Navigation --- */
        .nav-section {
            background-color: var(--light-bg);
            padding: 20px 0;
            position: sticky;
            top: 0;
            z-index: 100;
            border-bottom: 1px solid var(--border-color);
            box-shadow: 0 2px 5px rgba(0,0,0,0.02);
        }

        .tab-container {
            display: flex;
            gap: 10px;
            overflow-x: auto;
            scrollbar-width: none; /* Firefox */
            padding-bottom: 2px;
        }

        .tab-container::-webkit-scrollbar {
            display: none; /* Safari/Chrome */
        }

        .tab-btn {
            white-space: nowrap;
            background-color: var(--white);
            border: 1px solid var(--border-color);
            border-radius: 20px;
            padding: 8px 18px;
            font-family: var(--font-stack);
            font-size: 0.9rem;
            font-weight: 500;
            color: var(--text-main);
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .tab-btn:hover {
            border-color: var(--primary);
            color: var(--primary);
            background-color: rgba(231, 76, 60, 0.02);
        }

        .tab-btn.active {
            background-color: var(--primary);
            border-color: var(--primary);
            color: var(--white);
            box-shadow: 0 4px 10px rgba(231, 76, 60, 0.2);
        }

        .tab-count {
            font-size: 0.75rem;
            opacity: 0.8;
            background-color: rgba(0,0,0,0.08);
            padding: 2px 6px;
            border-radius: 10px;
        }

        .tab-btn.active .tab-count {
            background-color: rgba(255,255,255,0.2);
        }

        /* --- Section 3: FAQ Body --- */
        .faq-section {
            padding: 40px 0 60px 0;
        }

        .category-block {
            margin-bottom: 50px;
            scroll-margin-top: 110px; /* Offset for sticky nav */
        }

        .category-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--dark);
            margin-bottom: 20px;
            padding-left: 14px;
            border-left: 4px solid var(--primary);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .accordion-wrapper {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .faq-item {
            border: 1px solid var(--border-color);
            border-radius: 8px;
            overflow: hidden;
            background-color: var(--white);
            box-shadow: var(--shadow);
            transition: var(--transition);
        }

        .faq-question-row {
            padding: 16px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            user-select: none;
            transition: var(--transition);
        }

        .faq-question-row:hover {
            background-color: var(--light-bg);
        }

        .faq-q-text {
            display: flex;
            gap: 12px;
            font-weight: 600;
            font-size: 1rem;
            color: var(--dark);
            padding-right: 15px;
        }

        .q-prefix {
            color: var(--primary);
            font-weight: 700;
        }

        .faq-toggle-icon {
            font-size: 1.2rem;
            font-weight: 600;
            color: var(--text-muted);
            transition: var(--transition);
            flex-shrink: 0;
        }

        .faq-answer-block {
            background-color: var(--light-bg);
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.35s cubic-bezier(0, 1, 0, 1);
        }

        .faq-item.open .faq-answer-block {
            max-height: 800px;
            transition: max-height 0.4s cubic-bezier(1, 0, 1, 0);
        }

        .faq-item.open .faq-toggle-icon {
            transform: rotate(45deg);
            color: var(--primary);
        }

        .faq-answer-inner {
            padding: 20px 20px 20px 44px;
            font-size: 0.95rem;
            color: #444;
            border-top: 1px solid var(--border-color);
        }

        .faq-answer-inner a {
            color: var(--primary);
            text-decoration: none;
            font-weight: 500;
            border-bottom: 1px dashed var(--primary);
        }

        .faq-answer-inner a:hover {
            color: var(--primary-hover);
            border-bottom-style: solid;
        }

        .no-results {
            display: none;
            text-align: center;
            padding: 40px;
            color: var(--text-muted);
            font-size: 1.1rem;
            background-color: var(--light-bg);
            border-radius: 8px;
            border: 1px dashed var(--border-color);
        }

        /* --- Section 4: CTA Area --- */
        .cta-section {
            background-color: var(--dark);
            color: var(--white);
            text-align: center;
            padding: 55px 20px;
        }

        .cta-section h2 {
            font-size: 1.8rem;
            font-weight: 700;
            margin-bottom: 6px;
        }

        .cta-section p {
            color: #b2bec3;
            font-size: 1rem;
            margin-bottom: 30px;
        }

        .cta-btn-grid {
            display: flex;
            flex-direction: column;
            gap: 15px;
            max-width: 500px;
            margin: 0 auto;
        }

        .btn-cta {
            height: 46px;
            border-radius: 6px;
            font-size: 0.95rem;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: var(--transition);
            text-decoration: none;
            width: 100%;
        }

        .btn-whatsapp {
            background-color: var(--success);
            color: var(--white);
        }

        .btn-whatsapp:hover {
            background-color: var(--success-hover);
        }

        .btn-email {
            background-color: var(--primary);
            color: var(--white);
        }

        .btn-email:hover {
            background-color: var(--primary-hover);
        }

        .btn-outline {
            background-color: transparent;
            color: var(--white);
            border: 1px solid rgba(255,255,255,0.4);
        }

        .btn-outline:hover {
            background-color: rgba(255,255,255,0.06);
            border-color: var(--white);
        }

        /* --- Tablet Breakpoint (768px - 1023px) --- */
        @media (min-width: 768px) {
            .faq-header { padding: 65px 0; }
            .faq-header h1 { font-size: 2.6rem; }
            .tab-container { justify-content: center; }
            .cta-btn-grid {
                flex-direction: row;
                max-width: 650px;
            }
            .btn-cta { flex: 1; }
        }

        /* --- Desktop Breakpoint (≥1024px) --- */
        @media (min-width: 1024px) {
            .category-block { margin-bottom: 60px; }
            .category-title { font-size: 1.65rem; }
        }


/* Source: footer */
/* ==========================================================================
       CSS Variables & Reset (Mobile First)
       ========================================================================== */
    :root {
      /* Brand Colors */
      --color-primary: #e74c3c;
      --color-primary-dark: #c0392b;
      
      /* Footer Specific Colors */
      --color-dark: #1a1a2e;        /* Main background */
      --color-dark-mid: #16213e;    /* Contact bar background */
      --color-dark-deep: #0d0d1a;   /* Bottom bar background */
      --color-dark-elevated: #2a2a4e; /* Social icon & input background */
      
      /* Text Colors */
      --color-white: #ffffff;
      --color-gray-light: #a0a0b0;  /* Standard links/text */
      --color-gray-dark: #707080;   /* Bottom bar text */
      
      /* Typography */
      --font-sans: 'Inter', sans-serif;
      --container-max: 1200px;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: var(--font-sans);
      background-color: #f8f9fa; /* Page body background for contrast */
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }

    main {
      flex-grow: 1;
    }

    a {
      text-decoration: none;
      color: inherit;
      transition: all 0.2s ease;
    }

    ul {
      list-style: none;
    }

    button, input {
      font-family: inherit;
      border: none;
      outline: none;
    }

    .container {
      width: 100%;
      max-width: var(--container-max);
      margin: 0 auto;
      padding: 0 16px;
    }

    svg {
      width: 20px;
      height: 20px;
      fill: currentColor;
    }

    /* ==========================================================================
       Footer Main Area
       ========================================================================== */
    footer {
      background-color: var(--color-dark);
      color: var(--color-gray-light);
      font-size: 14px;
    }

    .footer-main {
      padding: 64px 0 40px;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1fr; /* Mobile: 1 column */
      gap: 40px;
    }

    .footer-col h4 {
      color: var(--color-white);
      font-size: 14px;
      text-transform: uppercase;
      letter-spacing: 2px;
      margin-bottom: 20px;
      font-weight: 700;
    }

    .footer-col ul li a {
      display: inline-block; /* Required for transform */
      line-height: 2.2;
      color: var(--color-gray-light);
    }

    .footer-col ul li a:hover {
      color: var(--color-primary);
      transform: translateX(4px);
    }

    /* Newsletter Section */
    .newsletter-desc {
      margin-bottom: 16px;
      line-height: 1.5;
    }

    .newsletter-form {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-bottom: 24px;
    }

    .newsletter-form input {
      background-color: var(--color-dark-elevated);
      color: var(--color-white);
      padding: 12px 16px;
      border-radius: 6px;
      width: 100%;
      border: 1px solid transparent;
      transition: border-color 0.2s;
    }
    
    .newsletter-form input::placeholder {
      color: #6c757d;
    }

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

    .btn-subscribe {
      background-color: var(--color-primary);
      color: var(--color-white);
      padding: 12px 24px;
      border-radius: 6px;
      font-weight: 500;
      cursor: pointer;
      text-align: center;
      transition: background-color 0.2s, transform 0.1s;
    }

    .btn-subscribe:hover {
      background-color: var(--color-primary-dark);
    }

    .btn-subscribe:active {
      transform: translateY(1px);
    }

    /* Social Links */
    .social-section {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .social-label {
      color: var(--color-white);
      font-weight: 500;
    }

    .social-icons {
      display: flex;
      gap: 12px;
    }

    .social-icons a {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: var(--color-dark-elevated);
      color: var(--color-white);
      transition: background-color 0.2s, transform 0.2s;
    }

    .social-icons a:hover {
      background-color: var(--color-primary);
      transform: translateY(-2px);
    }

    /* ==========================================================================
       Contact Info Bar
       ========================================================================== */
    .footer-contact {
      background-color: var(--color-dark-mid);
      padding: 24px 0;
    }

    .footer-contact-inner {
      display: flex;
      flex-direction: column; /* Mobile: Stack vertically */
      gap: 16px;
      align-items: flex-start;
    }

    .contact-item {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .contact-item a:hover {
      color: var(--color-primary);
    }

    .contact-separator {
      display: none; /* Hidden on mobile */
      color: var(--color-dark-elevated);
    }

    /* ==========================================================================
       Bottom Bar
       ========================================================================== */
    .footer-bottom {
      background-color: var(--color-dark-deep);
      border-top: 1px solid var(--color-dark-elevated);
      padding: 20px 0;
      color: var(--color-gray-dark);
      font-size: 12px;
    }

    .footer-bottom-inner {
      display: flex;
      flex-direction: column; /* Mobile: Stack vertically */
      gap: 12px;
      text-align: center;
      align-items: center;
    }

    .footer-links a, .footer-langs a {
      margin: 0 4px;
    }

    .footer-links a:hover, .footer-langs a:hover {
      color: var(--color-white);
    }

    /* ==========================================================================
       Responsive Rules
       ========================================================================== */
    /* Tablet (768px - 1023px) */
    @media (min-width: 768px) {
      .footer-grid {
        grid-template-columns: repeat(2, 1fr); /* 2x2 Grid */
      }
      
      .newsletter-form {
        flex-direction: row;
      }
      
      .newsletter-form input {
        flex-grow: 1;
      }
      
      .btn-subscribe {
        width: auto;
      }

      .footer-bottom-inner {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
      }
    }

    /* Desktop (1024px and up) */
    @media (min-width: 1024px) {
      .footer-grid {
        grid-template-columns: repeat(4, 1fr); /* 4 columns */
      }

      .footer-contact {
        padding: 16px 0;
      }

      .footer-contact-inner {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 16px;
      }

      .contact-separator {
        display: inline-block;
      }
    }


/* Source: header */
/* ==========================================================================
       CSS Variables & Reset (Mobile First)
       ========================================================================== */
    :root {
      --color-primary: #e74c3c;
      --color-primary-dark: #c0392b;
      --color-dark: #1a1a2e;
      --color-white: #ffffff;
      --color-gray-light: #f8f9fa;
      --color-gray-border: #e9ecef;
      --color-gray-text: #6c757d;
      --color-text: #2c3e50;
      
      --font-sans: 'Inter', sans-serif;
      --container-max: 1200px;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: var(--font-sans);
      color: var(--color-text);
      background-color: var(--color-gray-light);
      line-height: 1.5;
    }

    a {
      text-decoration: none;
      color: inherit;
      transition: color 0.2s ease;
    }

    ul {
      list-style: none;
    }

    button {
      background: none;
      border: none;
      font-family: inherit;
      cursor: pointer;
    }

    .container {
      width: 100%;
      max-width: var(--container-max);
      margin: 0 auto;
      padding: 0 16px;
    }

    svg {
      width: 16px;
      height: 16px;
      fill: currentColor;
    }

    /* ==========================================================================
       Layer 1: Top Bar
       ========================================================================== */
    .top-bar {
      background-color: var(--color-dark);
      color: #d3d3d3;
      height: 40px;
      font-size: 13px;
    }

    .top-bar-inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 100%;
    }

    .top-bar-contact {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .top-bar-contact a {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .top-bar-contact a:hover {
      color: var(--color-primary);
    }

    /* Hide email on mobile */
    .contact-email {
      display: none;
    }

    /* Language Switcher */
    .lang-switcher {
      position: relative;
    }

    .lang-trigger {
      color: #d3d3d3;
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      padding: 4px 0;
      transition: color 0.2s ease;
    }

    .lang-trigger:hover {
      color: var(--color-white);
    }

    .lang-dropdown {
      position: absolute;
      top: 100%;
      right: 0;
      width: 160px;
      background: var(--color-white);
      color: var(--color-text);
      border-radius: 6px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      opacity: 0;
      visibility: hidden;
      transform: translateY(10px);
      transition: all 0.2s ease;
      z-index: 1000;
      overflow: hidden;
    }

    .lang-dropdown.active {
      opacity: 1;
      visibility: visible;
      transform: translateY(4px);
    }

    .lang-dropdown li a {
      display: flex;
      align-items: center;
      padding: 10px 16px;
      font-size: 14px;
      border-bottom: 1px solid var(--color-gray-border);
    }

    .lang-dropdown li:last-child a {
      border-bottom: none;
    }

    .lang-dropdown li a:hover {
      background: var(--color-gray-light);
      color: var(--color-primary);
    }

    .lang-dropdown .current {
      font-weight: 700;
      color: var(--color-primary);
      justify-content: space-between;
    }

    /* ==========================================================================
       Layer 2 & Main Header (Mobile Layout)
       ========================================================================== */
    .site-header {
      position: relative;
      width: 100%;
      z-index: 900;
      background: var(--color-white);
      border-bottom: 1px solid var(--color-gray-border);
    }

    /* Sticky behavior wrapper */
    .header-wrapper {
      position: relative;
      width: 100%;
      background: var(--color-white);
      transition: all 0.3s ease;
    }

    .header-wrapper.is-sticky {
      position: fixed;
      top: 0;
      left: 0;
      box-shadow: 0 4px 16px rgba(0,0,0,0.08);
      animation: slideDown 0.3s ease forwards;
    }

    @keyframes slideDown {
      from { transform: translateY(-100%); }
      to { transform: translateY(0); }
    }

    .main-nav {
      height: 60px; /* Mobile height */
      transition: height 0.3s ease;
    }

    .nav-inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 100%;
    }

    .logo img {
      height: 36px;
      width: auto;
      display: block;
    }

    .nav-menu, .nav-cta {
      display: none; /* Hidden on mobile */
    }

    /* Hamburger Menu Button */
    .hamburger {
      width: 32px;
      height: 24px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      z-index: 1001;
    }

    .hamburger span {
      display: block;
      width: 100%;
      height: 2px;
      background-color: var(--color-dark);
      transition: all 0.3s ease;
      border-radius: 2px;
    }

    /* ==========================================================================
       Mobile Drawer
       ========================================================================== */
    .mobile-drawer {
      position: fixed;
      top: 0;
      right: -100%;
      width: 100%;
      max-width: 360px;
      height: 100vh;
      background: var(--color-white);
      box-shadow: -4px 0 24px rgba(0,0,0,0.1);
      z-index: 1000;
      transition: right 0.4s cubic-bezier(0.77,0.2,0.05,1);
      display: flex;
      flex-direction: column;
      overflow-y: auto;
    }

    .mobile-drawer.active {
      right: 0;
    }

    .drawer-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      background: rgba(0,0,0,0.5);
      z-index: 999;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
    }

    .drawer-overlay.active {
      opacity: 1;
      visibility: visible;
    }

    .drawer-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px;
      border-bottom: 1px solid var(--color-gray-border);
    }

    .btn-close {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .drawer-body {
      padding: 20px;
      flex-grow: 1;
    }

    .drawer-nav li {
      border-bottom: 1px solid var(--color-gray-border);
    }

    .drawer-nav li a, .drawer-nav li button {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      padding: 16px 0;
      font-size: 16px;
      font-weight: 500;
      color: var(--color-dark);
      text-align: left;
    }

    .drawer-nav li a:hover, .drawer-nav li button:hover {
      color: var(--color-primary);
    }

    /* Mobile Accordion (Products) */
    .drawer-submenu {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;
      background: var(--color-gray-light);
      margin: 0 -20px;
      padding: 0 20px;
    }

    .drawer-submenu.expanded {
      max-height: 400px;
    }

    .drawer-submenu li {
      border-bottom: none;
    }

    .drawer-submenu a {
      font-size: 14px;
      font-weight: 400;
      padding: 12px 0 12px 16px;
      color: var(--color-text);
    }

    .drawer-footer {
      padding: 20px;
      background: var(--color-gray-light);
    }

    .drawer-contact-item {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 16px;
      font-size: 14px;
      color: var(--color-dark);
    }

    .btn-primary {
      display: block;
      width: 100%;
      background: var(--color-primary);
      color: var(--color-white);
      text-align: center;
      padding: 14px;
      border-radius: 6px;
      font-weight: 500;
      font-size: 15px;
      transition: background 0.2s;
    }

    .btn-primary:hover {
      background: var(--color-primary-dark);
    }

    /* ==========================================================================
       Desktop Layout (min-width: 1024px)
       ========================================================================== */
    @media (min-width: 768px) {
      .contact-email { display: flex; }
      .contact-separator { margin: 0 8px; opacity: 0.5; }
    }

    @media (min-width: 1024px) {
      .hamburger, .mobile-drawer, .drawer-overlay {
        display: none !important;
      }

      .main-nav {
        height: 72px; /* Normal desktop height */
      }
      
      .header-wrapper.is-sticky .main-nav {
        height: 60px; /* Sticky desktop height */
      }

      .logo img {
        height: 48px;
      }

      .header-wrapper.is-sticky .logo img {
        height: 40px; /* Shrink logo slightly on sticky */
      }

      .nav-menu {
        display: flex;
        align-items: center;
        gap: 32px;
        height: 100%;
      }

      .nav-menu > li {
        height: 100%;
        display: flex;
        align-items: center;
      }

      .nav-menu > li > a {
        font-size: 15px;
        font-weight: 500;
        color: var(--color-dark);
        display: flex;
        align-items: center;
        gap: 6px;
        position: relative;
      }

      .nav-menu > li > a:hover {
        color: var(--color-primary);
      }

      /* Hover underline effect */
      .nav-menu > li > a::after {
        content: '';
        position: absolute;
        bottom: -4px;
        left: 0;
        width: 0;
        height: 2px;
        background: var(--color-primary);
        transition: width 0.3s ease;
      }
      .nav-menu > li > a:hover::after {
        width: 100%;
      }

      .nav-cta {
        display: inline-block;
        width: auto;
        padding: 12px 24px;
      }

      /* Layer 3: Mega Menu Desktop */
      .has-mega-menu {
        position: relative;
      }

      .mega-menu {
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%) translateY(15px);
        width: 400px;
        background: var(--color-white);
        border-radius: 12px;
        box-shadow: 0 8px 24px rgba(0,0,0,0.12);
        padding: 16px;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        z-index: 1000;
      }

      .has-mega-menu:hover .mega-menu {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
      }

      .mega-item {
        display: flex;
        align-items: center;
        padding: 12px;
        border-radius: 8px;
        transition: background 0.2s;
        gap: 16px;
      }

      .mega-item:hover {
        background: var(--color-gray-light);
      }

      .mega-item img {
        width: 48px;
        height: 48px;
        border-radius: 6px;
        object-fit: cover;
        background: var(--color-gray-border);
      }

      .mega-text {
        flex-grow: 1;
      }

      .mega-title {
        font-size: 14px;
        font-weight: 500;
        color: var(--color-dark);
        margin-bottom: 2px;
        transition: color 0.2s;
      }

      .mega-desc {
        font-size: 12px;
        color: var(--color-gray-text);
      }

      .mega-item:hover .mega-title {
        color: var(--color-primary);
      }

      .mega-arrow {
        color: var(--color-gray-text);
        transition: transform 0.2s, color 0.2s;
      }

      .mega-item:hover .mega-arrow {
        transform: translateX(4px);
        color: var(--color-primary);
      }

      .mega-footer {
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid var(--color-gray-border);
        text-align: center;
      }

      .mega-footer a {
        display: inline-block;
        font-size: 14px;
        font-weight: 500;
        color: var(--color-primary);
      }
      .mega-footer a:hover {
        text-decoration: underline;
      }
    }


/* Source: homepage */
/* ================= CSS VARIABLES & RESET ================= */
    :root {
      --primary: #e74c3c;
      --primary-hover: #c0392b;
      --dark: #1a1a2e;
      --dark-form: #16213e;
      --white: #ffffff;
      --gray-light: #f8f9fa;
      --gray-border: #e9ecef;
      --gray-text: #6c757d;
      --text: #2c3e50;
      
      --font: 'Inter', sans-serif;
      --container-width: 1200px;
      --transition: all 0.3s ease;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: var(--font); color: var(--text); background: var(--white); line-height: 1.6; }
    a { text-decoration: none; color: inherit; transition: var(--transition); }
    ul { list-style: none; }
    img { max-width: 100%; height: auto; display: block; }
    
    .container { max-width: var(--container-width); margin: 0 auto; padding: 0 20px; }
    .section { padding: 60px 0; }
    .bg-light { background-color: var(--gray-light); }
    .bg-dark { background-color: var(--dark); color: var(--white); }
    
    /* ================= TYPOGRAPHY & HEADERS ================= */
    .section-header { text-align: center; margin-bottom: 40px; }
    .eyebrow { display: inline-block; font-size: 13px; font-weight: 600; color: var(--primary); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 12px; }
    h2 { font-size: 28px; font-weight: 700; color: var(--dark); margin-bottom: 16px; line-height: 1.3; }
    .bg-dark h2 { color: var(--white); }
    .subtitle { font-size: 16px; color: var(--gray-text); max-width: 600px; margin: 0 auto; }
    
    /* ================= BUTTONS ================= */
    .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 28px; font-size: 15px; font-weight: 600; border-radius: 6px; cursor: pointer; transition: var(--transition); border: 2px solid transparent; }
    .btn-primary { background: var(--primary); color: var(--white); }
    .btn-primary:hover { background: var(--primary-hover); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3); }
    .btn-outline { background: transparent; color: var(--dark); border-color: var(--dark); }
    .btn-outline:hover { background: var(--dark); color: var(--white); }
    .btn-outline-light { background: transparent; color: var(--white); border-color: var(--white); }
    .btn-outline-light:hover { background: var(--white); color: var(--dark); }

    /* ================= HEADER ================= */
    header { background: var(--white); border-bottom: 1px solid var(--gray-border); padding: 16px 0; position: sticky; top: 0; z-index: 100; }
    .header-inner { display: flex; justify-content: space-between; align-items: center; }
    .nav-links { display: none; gap: 24px; font-weight: 500; }
    .nav-links a:hover { color: var(--primary); }

    /* ================= SECTION 1: HERO ================= */
    .hero { position: relative; padding: 60px 0; background: linear-gradient(rgba(26,26,46,0.8), rgba(26,26,46,0.8)), url('assets/images/generated/factory-campus.png') center/cover; color: var(--white); }
    .hero-inner { display: flex; flex-direction: column; gap: 40px; align-items: center; }
    .hero-content { flex: 1; text-align: center; }
    .hero-content .eyebrow { color: var(--primary); }
    .hero-content h1 { font-size: 36px; font-weight: 800; margin-bottom: 20px; line-height: 1.2; }
    .hero-content p { font-size: 18px; color: #d1d5db; margin-bottom: 32px; }
    .hero-actions { display: flex; flex-direction: column; gap: 16px; justify-content: center; margin-bottom: 32px; }
    .trust-badges { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; font-size: 14px; font-weight: 500; }
    .trust-badges span { display: flex; align-items: center; gap: 6px; }
    .hero-media { flex: 1; width: 100%; max-width: 500px; border-radius: 12px; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.3); }

    /* ================= SECTION 2: PRODUCTS ================= */
    .grid-products { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .product-card { background: var(--white); border: 1px solid var(--gray-border); border-radius: 12px; overflow: hidden; transition: var(--transition); }
    .product-card:hover { transform: translateY(-4px); border-color: var(--primary); box-shadow: 0 12px 24px rgba(0,0,0,0.08); }
    .product-img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
    .product-info { padding: 20px; }
    .product-info h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
    .product-info p { font-size: 13px; color: var(--gray-text); margin-bottom: 16px; line-height: 1.4; }
    .product-link { color: var(--primary); font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
    .product-link:hover { gap: 8px; }

    /* ================= SECTION 3: ADVANTAGES ================= */
    .grid-advantages { display: grid; grid-template-columns: 1fr; gap: 24px; }
    .adv-card { background: var(--white); padding: 28px; border-radius: 12px; transition: var(--transition); box-shadow: 0 4px 12px rgba(0,0,0,0.03); }
    .adv-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.08); }
    .adv-icon { width: 48px; height: 48px; background: var(--gray-light); border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
    .adv-icon svg { width: 24px; height: 24px; fill: var(--primary); }
    .adv-card h3 { font-size: 20px; font-weight: 700; margin-bottom: 12px; }
    .adv-specs { font-size: 14px; color: var(--gray-text); line-height: 1.8; margin-bottom: 16px; padding-left: 20px; list-style-type: disc; }
    .adv-tag { display: inline-block; background: #fee2e2; color: var(--primary); font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 20px; }

    /* ================= SECTION 4: BENEFITS ================= */
    .grid-benefits { display: grid; grid-template-columns: 1fr; gap: 24px; }
    .benefit-card { display: flex; gap: 16px; background: var(--white); padding: 24px; border-radius: 12px; border: 1px solid var(--gray-border); transition: var(--transition); }
    .benefit-card:hover { border-color: var(--primary); }
    .benefit-num { width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: var(--white); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; }
    .benefit-content h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
    .benefit-content p { font-size: 13px; color: var(--gray-text); }

    /* ================= SECTION 5: BRANDS ================= */
    .grid-brands { display: grid; grid-template-columns: 1fr; gap: 24px; }
    .brand-card { background: var(--white); padding: 32px; border-radius: 12px; text-align: center; border: 1px solid var(--gray-border); transition: var(--transition); }
    .brand-card:hover { border-color: var(--primary); transform: translateY(-4px); }
    .brand-logo { width: 120px; height: 60px; margin: 0 auto 20px; object-fit: contain; }
    .brand-card h3 { font-size: 24px; font-weight: 700; margin-bottom: 8px; }
    .brand-pos { display: inline-block; padding: 4px 12px; border-radius: 4px; font-size: 12px; font-weight: 600; margin-bottom: 16px; background: var(--gray-light); color: var(--text); }
    .brand-card p { font-size: 14px; color: var(--gray-text); }

    /* ================= SECTION 6: FACTORY & COUNTERS ================= */
    .factory-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 40px; }
    .gallery-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 8px; transition: var(--transition); cursor: pointer; }
    .gallery-img:hover { transform: scale(1.02); filter: brightness(0.9); }
    .counters { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-around; text-align: center; }
    .counter-item { flex: 1; min-width: 120px; }
    .counter-num { font-size: 40px; font-weight: 800; color: var(--primary); margin-bottom: 4px; }
    .counter-label { font-size: 14px; font-weight: 600; color: var(--text); }
    .counter-desc { font-size: 12px; color: var(--gray-text); }

    /* ================= SECTION 7: CERTIFICATIONS ================= */
    .certs-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
    .cert-card { background: var(--white); padding: 12px; border-radius: 8px; border: 1px solid var(--gray-border); transition: var(--transition); }
    .cert-card:hover { transform: translateY(-4px); border-color: var(--primary); }
    .cert-card img { width: 120px; height: 80px; object-fit: contain; }

    /* ================= SECTION 8: TESTIMONIALS ================= */
    .testimonial-slider { position: relative; max-width: 800px; margin: 0 auto 40px; text-align: center; }
    .slide { display: none; padding: 0 20px; animation: fade 0.5s ease-in-out; }
    .slide.active { display: block; }
    .slide blockquote { font-size: 18px; font-style: italic; color: var(--dark); margin-bottom: 24px; line-height: 1.6; }
    .slide-author { font-weight: 700; color: var(--primary); }
    .slide-company { font-size: 14px; color: var(--gray-text); }
    .slider-dots { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }
    .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--gray-border); cursor: pointer; }
    .dot.active { background: var(--primary); }
    @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
    .flag-wall { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; font-size: 24px; }

    /* ================= SECTION 9: CTA & FORM ================= */
    .cta-grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
    .cta-left h2 { font-size: 32px; margin-bottom: 12px; }
    .cta-left .subtitle { color: #a0a0b0; margin: 0 0 24px 0; }
    .cta-bullets { margin-bottom: 32px; }
    .cta-bullets li { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-size: 15px; }
    .cta-bullets svg { width: 20px; height: 20px; fill: var(--primary); }
    .cta-contact-methods { display: flex; flex-direction: column; gap: 16px; }
    .phone-link { font-size: 24px; font-weight: 700; color: var(--white); }
    .phone-link:hover { color: var(--primary); }
    .btn-whatsapp { background: #25d366; color: var(--white); }
    .btn-whatsapp:hover { background: #128c7e; }
    
    .rfq-form { background: var(--dark-form); padding: 32px; border-radius: 12px; }
    .form-group { margin-bottom: 16px; }
    .form-control { width: 100%; padding: 12px 16px; background: var(--white); border: 1px solid var(--gray-border); border-radius: 6px; font-family: inherit; font-size: 15px; color: var(--dark); transition: var(--transition); }
    .form-control:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.2); }
    textarea.form-control { min-height: 100px; resize: vertical; }
    .form-check { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: #a0a0b0; }
    .form-check input { margin-top: 4px; }
    .btn-submit { width: 100%; height: 48px; font-size: 16px; margin-top: 16px; }

    /* ================= RESPONSIVE DESIGN ================= */
    @media (min-width: 768px) {
      h2 { font-size: 36px; }
      .nav-links { display: flex; }
      .hero { padding: 100px 0; }
      .hero-inner { flex-direction: row; text-align: left; }
      .hero-content { text-align: left; }
      .hero-content h1 { font-size: 48px; }
      .hero-actions { flex-direction: row; justify-content: flex-start; }
      .trust-badges { justify-content: flex-start; }
      .grid-products { grid-template-columns: repeat(3, 1fr); }
      .grid-advantages { grid-template-columns: repeat(2, 1fr); }
      .grid-benefits { grid-template-columns: repeat(2, 1fr); }
      .grid-brands { grid-template-columns: repeat(3, 1fr); }
      .cta-grid { grid-template-columns: 1fr 1fr; align-items: center; }
    }

    @media (min-width: 1024px) {
      .grid-products { grid-template-columns: repeat(5, 1fr); }
      .grid-advantages { grid-template-columns: repeat(4, 1fr); }
      .grid-benefits { grid-template-columns: repeat(3, 1fr); }
      .factory-gallery { grid-template-columns: repeat(4, 1fr); }
      .counter-num { font-size: 48px; }
    }


/* Source: product-detail */
:root {
            --primary-color: #e74c3c; /* Orange */
            --dark-color: #1a1a2e;    /* Deep Blue */
            --text-color: #333333;
            --gray-light: #f4f4f4;
            --gray-medium: #888888;
            --white: #ffffff;
            --transition: all 0.3s ease;
            --container-width: 1200px;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Inter', sans-serif; line-height: 1.6; color: var(--text-color); background-color: var(--white); }
        a { text-decoration: none; color: inherit; }
        ul { list-style: none; }
        img { max-width: 100%; height: auto; display: block; }

        .container { max-width: var(--container-width); margin: 0 auto; padding: 0 20px; }
        .btn { display: inline-block; padding: 12px 28px; font-weight: 600; border-radius: 4px; cursor: pointer; transition: var(--transition); text-align: center; border: none; }
        .btn-primary { background: var(--primary-color); color: var(--white); }
        .btn-primary:hover { background: #c0392b; transform: translateY(-2px); }
        .btn-outline { background: transparent; border: 2px solid var(--primary-color); color: var(--primary-color); }
        .btn-outline:hover { background: var(--primary-color); color: var(--white); }

        /* Header Mockup */
        header { background: var(--dark-color); color: white; padding: 1rem 0; }
        .nav-placeholder { display: flex; justify-content: space-between; align-items: center; }
        .logo { font-size: 1.5rem; font-weight: 700; color: var(--primary-color); }

        /* Section 1: Breadcrumbs */
        .breadcrumbs { padding: 20px 0; font-size: 0.9rem; color: var(--gray-medium); }
        .breadcrumbs a:hover { color: var(--primary-color); }

        /* Section 2: Product Main Area */
        .product-main { display: flex; flex-direction: column; gap: 40px; margin-bottom: 60px; }
        
        /* Left: Gallery */
        .gallery-container { width: 100%; }
        .main-image { border: 1px solid #eee; margin-bottom: 10px; cursor: zoom-in; position: relative;}
        .thumbnails { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
        .thumb { border: 1px solid #eee; cursor: pointer; position: relative; }
        .thumb.active { border-color: var(--primary-color); }
        .thumb-360::after { content: "360°"; position: absolute; inset:0; background: rgba(0,0,0,0.4); color: white; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: bold; }

        /* Right: Info */
        .product-info { width: 100%; }
        .sku-title { font-size: 1.8rem; color: var(--dark-color); margin-bottom: 5px; font-weight: 700; }
        .product-subtitle { font-size: 1.1rem; color: var(--gray-medium); margin-bottom: 15px; }
        .rating-row { display: flex; align-items: center; gap: 10px; margin-bottom: 25px; color: #f1c40f; }
        .rating-row span { color: var(--gray-medium); font-size: 0.9rem; }
        
        .specs-brief { margin-bottom: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; background: var(--gray-light); padding: 20px; border-radius: 8px; }
        .spec-item { font-size: 0.95rem; }
        .spec-label { font-weight: 600; color: var(--dark-color); }

        .fitment-brief { margin-bottom: 30px; border-left: 4px solid var(--primary-color); padding-left: 15px; }
        .fitment-brief h4 { margin-bottom: 5px; font-size: 1rem; }

        .cta-group { display: flex; flex-direction: column; gap: 15px; margin-bottom: 20px; }
        .utility-links { display: flex; gap: 20px; font-size: 0.9rem; color: var(--gray-medium); }
        .utility-links a:hover { color: var(--primary-color); }

        /* Section 3: Tabs */
        .tabs-section { margin-bottom: 60px; }
        .tab-list { display: flex; border-bottom: 2px solid var(--gray-light); overflow-x: auto; white-space: nowrap; }
        .tab-btn { padding: 15px 25px; cursor: pointer; font-weight: 600; border-bottom: 3px solid transparent; }
        .tab-btn.active { color: var(--primary-color); border-bottom-color: var(--primary-color); }
        .tab-content { padding: 30px 0; display: none; }
        .tab-content.active { display: block; }

        /* Specific Tab Styles */
        .spec-table { width: 100%; border-collapse: collapse; }
        .spec-table tr:nth-child(even) { background: var(--gray-light); }
        .spec-table td, .spec-table th { padding: 12px; text-align: left; border-bottom: 1px solid #eee; }
        .spec-category { font-weight: bold; background: #eee !important; }

        .fitment-table { width: 100%; border-collapse: collapse; }
        .fitment-table th { background: var(--dark-color); color: white; padding: 12px; }
        .fitment-table td { padding: 12px; border-bottom: 1px solid #eee; }

        /* Review Bars */
        .review-summary { display: grid; grid-template-columns: 1fr 2fr; gap: 30px; align-items: center; margin-bottom: 40px; }
        .bar-container { display: flex; align-items: center; gap: 10px; font-size: 0.8rem; margin-bottom: 5px; }
        .bar { height: 8px; background: #eee; flex-grow: 1; border-radius: 4px; overflow: hidden; }
        .bar-fill { height: 100%; background: #f1c40f; }

        /* Section 4: Tech Advantages */
        .advantages { background: var(--gray-light); padding: 60px 0; }
        .grid-3 { display: grid; grid-template-columns: 1fr; gap: 30px; }
        .card { background: white; padding: 30px; border-radius: 8px; text-align: center; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
        .card h3 { color: var(--primary-color); margin-bottom: 15px; }

        /* Section 5: Installation */
        .installation { padding: 60px 0; }
        .split-layout { display: flex; flex-direction: column; gap: 40px; }
        .steps { padding-left: 20px; }
        .steps li { margin-bottom: 15px; }

        /* Section 6: Related Products */
        .related { padding: 60px 0; border-top: 1px solid #eee; }
        .grid-4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
        .product-card { border: 1px solid #eee; padding: 15px; text-align: center; border-radius: 4px; transition: var(--transition); }
        .product-card:hover { border-color: var(--primary-color); }
        .product-card h4 { margin: 10px 0; font-size: 0.9rem; }

        /* Section 7: RFQ Area */
        .rfq-section { background: var(--dark-color); color: white; padding: 60px 0; text-align: center; }
        .rfq-section h2 { font-size: 2rem; margin-bottom: 20px; }
        .rfq-form { max-width: 600px; margin: 30px auto; display: grid; grid-template-columns: 1fr; gap: 15px; }
        .rfq-form input, .rfq-form textarea { padding: 12px; border-radius: 4px; border: none; width: 100%; }
        .contact-info { margin-top: 20px; color: var(--primary-color); font-weight: bold; }

        /* Footer Mockup */
        footer { background: #111; color: #888; padding: 40px 0; font-size: 0.8rem; text-align: center; }

        /* Responsive Breakpoints */
        @media (min-width: 768px) {
            .product-main { flex-direction: row; }
            .gallery-container { width: 40%; }
            .product-info { width: 60%; }
            .grid-4 { grid-template-columns: repeat(4, 1fr); }
            .split-layout { flex-direction: row; }
            .split-layout > div { flex: 1; }
        }

        @media (min-width: 1024px) {
            .gallery-container { width: 45%; }
            .product-info { width: 55%; }
            .grid-3 { grid-template-columns: repeat(3, 1fr); }
            .sku-title { font-size: 2.4rem; }
            .cta-group { flex-direction: row; }
            .rfq-form { grid-template-columns: 1fr 1fr; }
            .rfq-form textarea, .rfq-form .btn { grid-column: span 2; }
        }

        /* Mobile Accordion Style for Tabs < 480px */
        @media (max-width: 480px) {
            .tab-list { display: none; }
            .tab-content { display: block; border-bottom: 1px solid #eee; margin-bottom: 10px; }
            .tab-content::before { content: attr(data-title); display: block; font-weight: bold; background: var(--gray-light); padding: 10px; margin-bottom: 10px; color: var(--primary-color); }
        }


/* Source: product-list */
/* Global Variables */
    :root {
      --color-primary: #e74c3c;
      --color-primary-dark: #c0392b;
      --color-dark: #1a1a2e;
      --color-white: #ffffff;
      --color-gray-light: #f8f9fa;
      --color-gray-border: #e9ecef;
      --color-gray-text: #6c757d;
      --color-text: #2c3e50;
      
      /* Category Specific Color - Gen 3 */
      --color-category: #27ae60;
      --color-category-light: #e9f7ef;

      --font-main: 'Inter', sans-serif;
      --container-width: 1200px;
      --transition: all 0.3s ease;
    }

    /* Reset & Base Styles */
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: var(--font-main); color: var(--color-text); line-height: 1.6; background-color: var(--color-white); }
    a { text-decoration: none; color: inherit; transition: var(--transition); }
    ul { list-style: none; }
    img { max-width: 100%; height: auto; display: block; }
    
    .container { width: 100%; max-width: var(--container-width); margin: 0 auto; padding: 0 16px; }
    .section { padding: 60px 0; }
    .section-light { background-color: var(--color-gray-light); }
    .section-dark { background-color: var(--color-dark); color: var(--color-white); }

    /* Typography */
    h1, h2, h3, h4 { color: var(--color-dark); font-weight: 700; line-height: 1.3; }
    .section-dark h2 { color: var(--color-white); }
    .text-gray { color: var(--color-gray-text); }
    .text-primary { color: var(--color-primary); }
    .text-category { color: var(--color-category); }

    /* Buttons */
    .btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 24px; font-weight: 600; border-radius: 6px; cursor: pointer; transition: var(--transition); border: 2px solid transparent; font-size: 15px; }
    .btn-primary { background-color: var(--color-primary); color: var(--color-white); }
    .btn-primary:hover { background-color: var(--color-primary-dark); transform: translateY(-2px); }
    .btn-outline-dark { background-color: transparent; border-color: var(--color-dark); color: var(--color-dark); }
    .btn-outline-dark:hover { background-color: var(--color-dark); color: var(--color-white); }
    .btn-outline-cat { background-color: transparent; border-color: var(--color-category); color: var(--color-category); padding: 8px 16px; font-size: 13px; }
    .btn-outline-cat:hover { background-color: var(--color-category); color: var(--color-white); }

    /* Component: Header (Placeholder) */
    .site-header { background: var(--color-white); border-bottom: 1px solid var(--color-gray-border); padding: 16px 0; position: sticky; top: 0; z-index: 100; }
    .site-header .container { display: flex; justify-content: space-between; align-items: center; }
    .logo { font-size: 20px; font-weight: 700; color: var(--color-dark); }

    /* Section 1: Page Header & Breadcrumbs */
    .page-header { padding: 40px 0; background-color: var(--color-gray-light); }
    .breadcrumbs { font-size: 12px; color: var(--color-gray-text); margin-bottom: 24px; }
    .breadcrumbs a:hover { color: var(--color-primary); }
    .breadcrumbs span { margin: 0 8px; }
    .header-content { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
    .header-text h1 { font-size: 32px; margin-bottom: 16px; }
    .header-text p { font-size: 16px; color: var(--color-gray-text); max-width: 600px; }
    .header-image img { border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }

    /* Section 2: SEO Overview */
    .seo-overview { padding: 40px 0; font-size: 16px; line-height: 1.8; color: var(--color-text); }
    .seo-overview a { color: var(--color-primary); text-decoration: underline; }

    /* Section 3: Catalog Layout */
    .catalog-layout { display: grid; grid-template-columns: 1fr; gap: 32px; position: relative; }
    
    /* Sidebar Filters */
    .sidebar { display: none; } /* Hidden on mobile by default */
    .sidebar.active { display: block; position: fixed; top: 0; left: 0; width: 280px; height: 100vh; background: var(--color-white); z-index: 1000; padding: 24px; overflow-y: auto; box-shadow: 2px 0 10px rgba(0,0,0,0.1); }
    .filter-overlay { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.5); z-index: 999; }
    .filter-overlay.active { display: block; }
    .close-filter { display: block; text-align: right; font-size: 24px; cursor: pointer; margin-bottom: 20px; color: var(--color-dark); }
    
    .filter-group { margin-bottom: 24px; border-bottom: 1px solid var(--color-gray-border); padding-bottom: 24px; }
    .filter-group h4 { font-size: 15px; margin-bottom: 12px; }
    .filter-item { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 14px; color: var(--color-gray-text); cursor: pointer; }
    .filter-item input { cursor: pointer; }
    .filter-search { width: 100%; padding: 10px; border: 1px solid var(--color-gray-border); border-radius: 6px; font-family: inherit; font-size: 14px; margin-top: 8px; }
    .filter-search:focus { outline: none; border-color: var(--color-primary); }
    
    .mobile-filter-btn { display: flex; width: 100%; margin-bottom: 24px; justify-content: center; gap: 8px; }

    /* Product Grid */
    .product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .product-card { background: var(--color-white); border: 1px solid var(--color-gray-border); border-radius: 8px; overflow: hidden; transition: var(--transition); display: flex; flex-direction: column; }
    .product-card:hover { transform: translateY(-4px); border-color: var(--color-category); box-shadow: 0 10px 20px rgba(0,0,0,0.05); }
    .product-image { position: relative; padding-top: 100%; background: var(--color-white); }
    .product-image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
    .product-content { padding: 16px; display: flex; flex-direction: column; flex-grow: 1; }
    .p-model { font-size: 14px; font-weight: 600; color: var(--color-text); margin-bottom: 4px; }
    .p-position { font-size: 12px; color: var(--color-gray-text); margin-bottom: 4px; }
    .p-name { font-size: 14px; font-weight: 700; color: var(--color-dark); margin-bottom: 12px; }
    .p-specs { font-size: 12px; color: var(--color-gray-text); background: var(--color-gray-light); padding: 8px; border-radius: 4px; margin-bottom: 12px; }
    .p-fit { font-size: 12px; font-weight: 500; color: var(--color-dark); margin-bottom: 16px; border-left: 2px solid var(--color-category); padding-left: 8px; }
    .p-action { margin-top: auto; }
    .p-action .btn { width: 100%; }

    /* Section 4: Technical Specs Table */
    .section-title { font-size: 28px; margin-bottom: 32px; text-align: center; }
    .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--color-gray-border); border-radius: 8px; }
    .specs-table { width: 100%; border-collapse: collapse; min-width: 800px; text-align: left; }
    .specs-table th, .specs-table td { padding: 16px; font-size: 14px; border-bottom: 1px solid var(--color-gray-border); }
    .specs-table th { background-color: var(--color-dark); color: var(--color-white); font-weight: 600; white-space: nowrap; }
    .specs-table tr:nth-child(even) { background-color: var(--color-gray-light); }
    .specs-table tr:hover { background-color: var(--color-category-light); }
    .table-actions { text-align: center; margin-bottom: 24px; }

    /* Section 5: Compatible Vehicles */
    .logo-ticker-wrap { overflow: hidden; position: relative; padding: 20px 0; }
    .logo-ticker { display: flex; gap: 40px; align-items: center; overflow-x: auto; padding-bottom: 20px; scrollbar-width: none; }
    .logo-ticker::-webkit-scrollbar { display: none; }
    .logo-item { min-width: 100px; height: 60px; display: flex; align-items: center; justify-content: center; filter: grayscale(100%); opacity: 0.6; transition: var(--transition); }
    .logo-item:hover { filter: grayscale(0%); opacity: 1; }
    .logo-item img { max-height: 100%; max-width: 100%; object-fit: contain; }
    .logo-link { display: block; text-align: center; margin-top: 20px; font-size: 14px; color: var(--color-primary); font-weight: 600; }
    .logo-link:hover { text-decoration: underline; }

    /* Section 6: Related Products */
    .related-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
    .related-card { background: var(--color-white); border-radius: 12px; overflow: hidden; border: 1px solid var(--color-gray-border); transition: var(--transition); }
    .related-card:hover { transform: translateY(-4px); box-shadow: 0 10px 20px rgba(0,0,0,0.08); }
    .related-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
    .related-content { padding: 20px; }
    .related-content h3 { font-size: 18px; margin-bottom: 8px; }
    .related-content p { font-size: 14px; color: var(--color-gray-text); margin-bottom: 16px; }
    .related-content a { color: var(--color-primary); font-weight: 600; font-size: 14px; }

    /* Section 7: RFQ CTA */
    .rfq-container { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
    .rfq-text h2 { font-size: 32px; margin-bottom: 16px; }
    .rfq-form { background: var(--color-white); padding: 24px; border-radius: 8px; }
    .form-group { margin-bottom: 16px; }
    .form-control { width: 100%; padding: 12px 16px; border: 1px solid var(--color-gray-border); border-radius: 4px; font-family: inherit; font-size: 14px; }
    .form-control:focus { outline: none; border-color: var(--color-primary); }
    textarea.form-control { min-height: 100px; resize: vertical; }
    .btn-submit { width: 100%; }

    /* Section 8: FAQ */
    .faq-container { max-width: 800px; margin: 0 auto; }
    details { background: var(--color-white); border: 1px solid var(--color-gray-border); border-radius: 8px; margin-bottom: 16px; overflow: hidden; }
    summary { padding: 20px; font-size: 16px; font-weight: 600; color: var(--color-dark); cursor: pointer; list-style: none; position: relative; padding-right: 40px; }
    summary::-webkit-details-marker { display: none; }
    summary::after { content: '+'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 20px; color: var(--color-primary); transition: transform 0.3s; }
    details[open] summary::after { content: '−'; }
    .faq-content { padding: 0 20px 20px; font-size: 15px; color: var(--color-gray-text); line-height: 1.6; }

    /* Responsive Media Queries */
    @media (min-width: 768px) {
      .header-content { grid-template-columns: 1fr 1fr; }
      .header-text h1 { font-size: 36px; }
      
      .mobile-filter-btn { display: none; }
      .sidebar { display: block; }
      .close-filter { display: none; }
      .catalog-layout { grid-template-columns: 250px 1fr; }
      .product-grid { grid-template-columns: repeat(3, 1fr); }
      
      .related-grid { grid-template-columns: repeat(3, 1fr); }
      .rfq-container { grid-template-columns: 1fr 1fr; }
    }

    @media (min-width: 1024px) {
      .product-grid { grid-template-columns: repeat(4, 1fr); }
    }

    @media (max-width: 480px) {
      .product-grid { grid-template-columns: 1fr; }
    }


/* Source: quality */
/* --- Design Tokens & Global Reset --- */
        :root {
            --primary: #e74c3c;
            --primary-hover: #c0392b;
            --dark: #1a1a2e;
            --light-bg: #f8f9fa;
            --border-color: #e9ecef;
            --text-main: #333333;
            --text-muted: #6c757d;
            --white: #ffffff;
            --font-stack: 'Inter', system-ui, -apple-system, sans-serif;
            --shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            --transition: all 0.3s ease;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: var(--font-stack);
            color: var(--text-main);
            background-color: var(--white);
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
        }

        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        section {
            padding: 60px 0;
        }

        .section-header {
            text-align: center;
            margin-bottom: 40px;
        }

        .section-header .eyebrow {
            font-size: 0.85rem;
            font-weight: 700;
            letter-spacing: 2px;
            color: var(--primary);
            text-transform: uppercase;
            margin-bottom: 8px;
            display: block;
        }

        .section-header h2 {
            font-size: 1.85rem;
            font-weight: 700;
            color: var(--dark);
            margin-bottom: 12px;
        }

        .section-header p {
            font-size: 1rem;
            color: var(--text-muted);
            max-width: 600px;
            margin: 0 auto;
        }

        a {
            color: var(--primary);
            text-decoration: none;
            transition: var(--transition);
        }

        a:hover {
            color: var(--primary-hover);
        }

        /* --- Section 1: Page Header --- */
        .qa-header {
            background-color: var(--dark);
            color: var(--white);
            text-align: center;
            padding: 60px 0;
        }

        .qa-header h1 {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 12px;
        }

        .qa-header h2 {
            font-size: 1.25rem;
            font-weight: 500;
            color: var(--primary);
            margin-bottom: 16px;
        }

        .qa-header p {
            max-width: 750px;
            margin: 0 auto;
            color: #b2bec3;
            font-size: 1rem;
            padding: 0 15px;
        }

        /* --- Section 2: Four-No Accordion --- */
        .accordion-container {
            max-width: 900px;
            margin: 0 auto;
        }

        .accordion-item {
            border: 1px solid var(--border-color);
            border-radius: 8px;
            margin-bottom: 16px;
            overflow: hidden;
            box-shadow: var(--shadow);
        }

        .accordion-header {
            background-color: var(--white);
            padding: 18px 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            transition: var(--transition);
            user-select: none;
        }

        .accordion-header:hover {
            background-color: var(--light-bg);
        }

        .accordion-title-block {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .accordion-number {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary);
        }

        .accordion-header h3 {
            font-size: 1.15rem;
            font-weight: 600;
            color: var(--dark);
        }

        .accordion-icon {
            font-size: 1.2rem;
            font-weight: 700;
            color: var(--text-muted);
            transition: var(--transition);
        }

        .accordion-content {
            background-color: var(--light-bg);
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s cubic-bezier(0, 1, 0, 1);
        }

        .accordion-item.active .accordion-content {
            max-height: 2000px; /* High value to allow complete expansion */
            transition: max-height 0.4s cubic-bezier(1, 0, 1, 0);
        }

        .accordion-item.active .accordion-icon {
            transform: rotate(45deg);
            color: var(--primary);
        }

        .inner-content {
            padding: 32px;
        }

        .inner-content h4 {
            font-size: 1.2rem;
            color: var(--dark);
            margin-bottom: 16px;
            font-weight: 700;
        }

        .problem-box {
            background-color: rgba(231, 76, 60, 0.05);
            border-left: 4px solid var(--primary);
            padding: 12px 16px;
            border-radius: 0 4px 4px 0;
            margin-bottom: 20px;
            font-size: 0.95rem;
        }

        .solution-block h5, .data-block h5 {
            font-size: 0.95rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--dark);
            margin-bottom: 12px;
            font-weight: 700;
        }

        .solution-list {
            list-style: none;
            margin-bottom: 24px;
        }

        .solution-list li {
            position: relative;
            padding-left: 20px;
            margin-bottom: 8px;
            font-size: 0.95rem;
        }

        .solution-list li::before {
            content: "•";
            position: absolute;
            left: 0;
            color: var(--primary);
            font-weight: bold;
        }

        .nested-list {
            list-style: none;
            padding-left: 20px;
            margin-top: 6px;
        }

        .nested-list li::before {
            content: "-";
            position: absolute;
            left: 5px;
            color: var(--text-muted);
        }

        /* Inner Content Tables */
        .content-table-wrapper {
            width: 100%;
            overflow-x: auto;
            margin-bottom: 24px;
            border-radius: 6px;
            border: 1px solid var(--border-color);
        }

        .content-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.9rem;
            background-color: var(--white);
            min-width: 450px;
        }

        .content-table th, .content-table td {
            padding: 10px 14px;
            border-bottom: 1px solid var(--border-color);
            text-align: left;
        }

        .content-table th {
            background-color: #eee;
            color: var(--dark);
            font-weight: 600;
        }

        .diagram-placeholder {
            margin-top: 20px;
            border-radius: 6px;
            overflow: hidden;
            border: 1px dashed #ced4da;
        }

        /* --- Section 3: Comparison Matrix Table --- */
        .matrix-section {
            background-color: var(--light-bg);
            border-top: 1px solid var(--border-color);
            border-bottom: 1px solid var(--border-color);
        }

        .matrix-wrapper {
            width: 100%;
            overflow-x: auto;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            box-shadow: var(--shadow);
        }

        .matrix-table {
            width: 100%;
            border-collapse: collapse;
            text-align: left;
            font-size: 0.95rem;
            background-color: var(--white);
            min-width: 750px;
        }

        .matrix-table th, .matrix-table td {
            padding: 14px 18px;
            border-bottom: 1px solid var(--border-color);
        }

        .matrix-table th {
            background-color: var(--dark);
            color: var(--white);
            font-weight: 600;
            text-transform: uppercase;
            font-size: 0.8rem;
            letter-spacing: 0.5px;
        }

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

        .matrix-table tbody tr:hover {
            background-color: rgba(231, 76, 60, 0.01);
        }

        .matrix-diff {
            font-weight: 600;
            color: var(--primary);
        }

        /* --- Section 4: Certifications Grid --- */
        .certs-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 20px;
        }

        .cert-card {
            background-color: var(--white);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 24px;
            text-align: center;
            box-shadow: var(--shadow);
            transition: var(--transition);
            cursor: pointer;
        }

        .cert-card:hover {
            transform: translateY(-5px);
            border-color: var(--primary);
            box-shadow: 0 8px 20px rgba(0,0,0,0.08);
        }

        .cert-img-wrapper {
            width: 100%;
            height: 160px;
            background-color: var(--light-bg);
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            overflow: hidden;
        }

        .cert-card h4 {
            font-size: 1.05rem;
            color: var(--dark);
            margin-bottom: 6px;
            font-weight: 700;
        }

        .cert-meta {
            font-size: 0.85rem;
            color: var(--text-muted);
            line-height: 1.4;
        }

        /* --- Section 5: OEM/ODM Capabilities --- */
        .capabilities-section {
            background-color: var(--light-bg);
            border-top: 1px solid var(--border-color);
            border-bottom: 1px solid var(--border-color);
        }

        .capabilities-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 24px;
        }

        .cap-card {
            background-color: var(--white);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 30px;
            box-shadow: var(--shadow);
            transition: var(--transition);
        }

        .cap-card:hover {
            box-shadow: 0 6px 15px rgba(0,0,0,0.06);
        }

        .cap-icon {
            font-size: 2rem;
            color: var(--primary);
            margin-bottom: 16px;
            display: inline-block;
        }

        .cap-card h4 {
            font-size: 1.2rem;
            font-weight: 700;
            color: var(--dark);
            margin-bottom: 12px;
        }

        .cap-card p {
            font-size: 0.95rem;
            color: var(--text-muted);
        }

        /* --- Section 6: Report Downloads --- */
        .reports-list-wrapper {
            max-width: 800px;
            margin: 0 auto;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            box-shadow: var(--shadow);
            overflow: hidden;
        }

        .report-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 24px;
            background-color: var(--white);
            border-bottom: 1px solid var(--border-color);
            transition: var(--transition);
        }

        .report-item:last-child {
            border-bottom: none;
        }

        .report-item:hover {
            background-color: var(--light-bg);
        }

        .report-info-side {
            display: flex;
            align-items: center;
            gap: 14px;
        }

        .file-icon {
            font-size: 1.5rem;
            color: var(--primary);
        }

        .report-name {
            font-size: 0.95rem;
            font-weight: 600;
            color: var(--dark);
        }

        .file-format {
            font-size: 0.75rem;
            background-color: #dfe4ea;
            color: #2f3542;
            padding: 2px 6px;
            border-radius: 4px;
            font-weight: 700;
        }

        .btn-download {
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--primary);
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }

        .btn-download:hover {
            color: var(--primary-hover);
        }

        /* --- Section 7: CTA Banner --- */
        .cta-dark-banner {
            background-color: var(--dark);
            color: var(--white);
            text-align: center;
            padding: 60px 20px;
        }

        .cta-dark-banner h3 {
            font-size: 1.85rem;
            font-weight: 700;
            margin-bottom: 8px;
        }

        .cta-dark-banner p {
            font-size: 1rem;
            color: #b2bec3;
            margin-bottom: 24px;
        }

        .btn-cta {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background-color: var(--primary);
            color: var(--white);
            padding: 12px 32px;
            border-radius: 4px;
            font-size: 1rem;
            font-weight: 600;
            transition: var(--transition);
        }

        .btn-cta:hover {
            background-color: var(--primary-hover);
            color: var(--white);
        }

        /* --- Modal Component Layer --- */
        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(26, 26, 46, 0.9);
            z-index: 1000;
            justify-content: center;
            align-items: center;
            padding: 20px;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .modal-overlay.show {
            display: flex;
            opacity: 1;
        }

        .modal-wrapper {
            background-color: var(--white);
            max-width: 600px;
            width: 100%;
            border-radius: 8px;
            overflow: hidden;
            position: relative;
            box-shadow: 0 10px 25px rgba(0,0,0,0.3);
        }

        .modal-close-btn {
            position: absolute;
            top: 12px;
            right: 12px;
            width: 32px;
            height: 32px;
            background-color: rgba(0,0,0,0.4);
            border-radius: 50%;
            border: none;
            color: var(--white);
            font-size: 1.2rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
            z-index: 5;
        }

        .modal-close-btn:hover {
            background-color: rgba(0,0,0,0.7);
        }

        .modal-img {
            width: 100%;
            height: auto;
            display: block;
            background-color: #eee;
        }

        .modal-caption-area {
            padding: 20px;
            text-align: center;
        }

        .modal-caption-area h5 {
            font-size: 1.15rem;
            color: var(--dark);
            font-weight: 700;
        }

        /* --- Responsive Viewport Adaptation Overrides --- */
        @media (min-width: 480px) {
            .certs-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (min-width: 768px) {
            section {
                padding: 80px 0;
            }
            .section-header h2 {
                font-size: 2.2rem;
            }
            .certs-grid {
                grid-template-columns: repeat(3, 1fr);
            }
            .capabilities-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        @media (min-width: 1024px) {
            .certs-grid {
                grid-template-columns: repeat(6, 1fr);
            }
        }


/* Source: style-guide */
/* ==========================================================================
       1. GLOBAL DESIGN TOKENS (CSS Variables)
       ========================================================================== */
    :root {
      /* 1. Brand Colors */
      --color-primary: #e74c3c;
      --color-primary-dark: #c0392b;
      --color-primary-light: #ff6b5b;
      --color-dark: #1a1a2e;
      --color-dark-secondary: #16213e;
      --color-white: #ffffff;
      --color-gray-light: #f8f9fa;
      --color-gray-border: #e9ecef;
      --color-gray-text: #6c757d;
      --color-text: #2c3e50;
      --color-text-heading: #1a1a2e;

      /* Semantic Colors */
      --color-success: #27ae60;
      --color-warning: #f39c12;
      --color-info: #3498db;

      /* Product Colors */
      --color-gen1: #e74c3c;
      --color-gen2: #3498db;
      --color-gen3: #27ae60;
      --color-housing: #9b59b6;
      --color-pulley: #f39c12;

      /* 2. Typography */
      --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

      /* Font Weights */
      --font-regular: 400;
      --font-medium: 500;
      --font-bold: 700;
      --font-extra-bold: 800;

      /* Desktop Font Sizes */
      --text-hero: 48px;
      --lh-hero: 56px;
      --text-h1: 36px;
      --lh-h1: 44px;
      --text-h2: 28px;
      --lh-h2: 36px;
      --text-h3: 22px;
      --lh-h3: 30px;
      --text-h4: 18px;
      --lh-h4: 26px;
      --text-body: 16px;
      --lh-body: 26px;
      --text-small: 14px;
      --lh-small: 22px;
      --text-caption: 12px;
      --lh-caption: 18px;
      --text-button: 15px;

      /* 3. Spacing */
      --space-xs: 4px;
      --space-sm: 8px;
      --space-md: 16px;
      --space-lg: 24px;
      --space-xl: 40px;
      --space-2xl: 64px;
      --space-3xl: 96px;

      /* Section Spacing Variables */
      --section-padding-y: 80px;
      --section-gap: 32px;
      --card-padding: 24px;
      --container-max-width: 1200px;
    }

    /* Mobile overrides (< 768px) */
    @media (max-width: 768px) {
      :root {
        --text-hero: 32px;
        --lh-hero: 40px;
        --text-h1: 28px;
        --lh-h1: 36px;
        --text-h2: 24px;
        --lh-h2: 32px;
        --text-h3: 20px;
        --lh-h3: 28px;
        --text-h4: 16px;
        --lh-h4: 24px;
        --text-body: 15px;
        --lh-body: 24px;
        --text-small: 13px;
        --lh-small: 20px;
        --text-button: 14px;
        
        --section-padding-y: 48px;
        --section-gap: 24px;
        --card-padding: 16px;
      }
    }

    /* Tablet overrides (768px - 1023px) */
    @media (min-width: 768px) and (max-width: 1023px) {
      :root {
        --text-hero: 40px;
        --section-padding-y: 64px;
      }
    }

    /* ==========================================================================
       BASE STYLES
       ========================================================================== */
    body {
      font-family: var(--font-sans);
      font-size: var(--text-body);
      line-height: var(--lh-body);
      color: var(--color-text);
      background-color: var(--color-white);
      margin: 0;
      padding: 0;
      -webkit-font-smoothing: antialiased;
    }

    h1, h2, h3, h4, h5, h6 {
      color: var(--color-text-heading);
      margin-top: 0;
      font-weight: var(--font-bold);
    }

    h1 { font-size: var(--text-h1); line-height: var(--lh-h1); }
    h2 { font-size: var(--text-h2); line-height: var(--lh-h2); }
    h3 { font-size: var(--text-h3); line-height: var(--lh-h3); }
    h4 { font-size: var(--text-h4); line-height: var(--lh-h4); }

    section {
      padding: var(--section-padding-y) 0;
    }

    /* ==========================================================================
       5. CORE COMPONENTS
       ========================================================================== */
    /* 5.1 Buttons */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      font-family: var(--font-sans);
      line-height: 1;
    }

    .btn-primary {
      background: var(--color-primary);
      color: #fff;
      padding: 12px 28px;
      border-radius: 6px;
      font-size: var(--text-button);
      font-weight: var(--font-medium);
      border: none;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .btn-primary:hover {
      background: var(--color-primary-dark);
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
    }

    .btn-secondary {
      background: transparent;
      color: var(--color-primary);
      padding: 12px 28px;
      border-radius: 6px;
      font-size: var(--text-button);
      font-weight: var(--font-medium);
      border: 2px solid var(--color-primary);
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .btn-secondary:hover {
      background: var(--color-primary);
      color: #fff;
    }

    .btn-dark {
      background: var(--color-dark);
      color: #fff;
      padding: 12px 28px;
      border-radius: 6px;
      font-size: var(--text-button);
      font-weight: var(--font-medium);
      border: none;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .btn-dark:hover {
      background: var(--color-dark-secondary);
      transform: translateY(-1px);
    }

    /* 5.2 Cards */
    .card {
      background: #fff;
      border: 1px solid var(--color-gray-border);
      border-radius: 12px;
      padding: var(--card-padding);
      transition: all 0.3s ease;
    }
    .card:hover {
      border-color: var(--color-primary);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
      transform: translateY(-4px);
    }

    /* 5.3 Inputs */
    .input {
      width: 100%;
      padding: 12px 16px;
      border: 1px solid var(--color-gray-border);
      border-radius: 6px;
      font-size: var(--text-button); /* using button size for inputs ~15px */
      font-family: var(--font-sans);
      background: #fff;
      transition: border-color 0.2s;
      box-sizing: border-box;
    }
    .input:focus {
      outline: none;
      border-color: var(--color-primary);
      box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
    }

    /* 5.4 Section Headers */
    .section-header {
      margin-bottom: var(--section-gap);
    }
    .section-eyebrow {
      display: inline-block;
      font-size: 13px;
      font-weight: var(--font-medium);
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--color-primary);
      margin-bottom: 12px;
    }
    .section-title {
      font-size: 32px;
      font-weight: var(--font-bold);
      color: var(--color-dark);
      margin-bottom: 16px;
    }
    .section-subtitle {
      font-size: 16px;
      color: var(--color-gray-text);
      max-width: 600px;
      margin: 0 auto;
    }

    /* ==========================================================================
       6. UTILITY CLASSES
       ========================================================================== */
    .container {
      max-width: var(--container-max-width);
      margin: 0 auto;
      padding: 0 16px;
    }

    .text-center { text-align: center; }
    .text-left { text-align: left; }
    .text-right { text-align: right; }

    .bg-white { background: var(--color-white); }
    .bg-light { background: var(--color-gray-light); }
    .bg-dark { background: var(--color-dark); color: #fff; }
    .bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4 { color: #fff; }

    .grid { display: grid; gap: var(--space-lg); }
    .grid-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-4 { grid-template-columns: repeat(4, 1fr); }
    .grid-5 { grid-template-columns: repeat(5, 1fr); }

    @media (max-width: 768px) {
      .grid-2, .grid-3, .grid-4, .grid-5 {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    @media (max-width: 480px) {
      .grid-2, .grid-3, .grid-4, .grid-5 {
        grid-template-columns: 1fr;
      }
    }

    /* ==========================================================================
       9. FLOATING ELEMENTS
       ========================================================================== */
    .whatsapp-float {
      position: fixed;
      bottom: 24px;
      right: 24px;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: #25d366;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 999;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      transition: transform 0.2s ease;
    }
    .whatsapp-float:hover {
      transform: scale(1.05);
    }
    .whatsapp-float svg {
      width: 32px;
      height: 32px;
      fill: #fff;
    }

    .scroll-top {
      position: fixed;
      bottom: 24px;
      right: 88px;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: var(--color-dark);
      color: #fff;
      display: flex; /* Normally "none", changed to flex for preview */
      align-items: center;
      justify-content: center;
      z-index: 998;
      cursor: pointer;
      border: none;
      transition: background 0.2s;
    }
    .scroll-top:hover {
      background: var(--color-primary);
    }
    .scroll-top svg {
      width: 20px;
      height: 20px;
      fill: #fff;
    }
    
    /* Extra styles just for making the style guide page look nice */
    .sg-section { margin-bottom: 60px; padding-bottom: 40px; border-bottom: 1px solid var(--color-gray-border); }
    .color-swatch { width: 100px; height: 100px; border-radius: 8px; margin-bottom: 8px; border: 1px solid var(--color-gray-border); }
    .swatch-label { font-size: 13px; font-weight: 500; font-family: var(--font-mono); }

/* ==========================================================================
   Awesome Website Prompts & Skills inspired design polish
   B2B industrial brand system for Huayuan Bearing
   ========================================================================== */
:root {
  --hy-red: #e60012;
  --hy-red-dark: #b8000e;
  --hy-ink: #101421;
  --hy-navy: #16213e;
  --hy-steel: #667085;
  --hy-line: rgba(16, 20, 33, 0.1);
  --hy-gold: #f2a900;
  --hy-mist: #f6f8fb;
  --hy-panel: rgba(255, 255, 255, 0.86);
  --hy-shadow: 0 22px 60px rgba(16, 20, 33, 0.13);
  --hy-radius: 8px;
}

html { scroll-behavior: smooth; }

body {
  color: var(--hy-ink);
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 42%, #ffffff 100%);
  text-rendering: optimizeLegibility;
}

.site-header {
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid rgba(230, 0, 18, 0.12);
  box-shadow: 0 10px 34px rgba(16, 20, 33, 0.06);
}

.top-bar { background: linear-gradient(90deg, var(--hy-ink), var(--hy-navy)); }
.header-wrapper { backdrop-filter: blur(18px); }
.header-wrapper.is-sticky {
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid rgba(230, 0, 18, 0.14);
}

.nav-inner { min-height: 76px; gap: 24px; }
.logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 170px;
}

.logo img,
.custom-logo-link img,
.hy-brand-logo {
  width: auto;
  max-width: 112px;
  max-height: 52px;
  object-fit: contain;
}

.site-title {
  color: var(--hy-ink);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.15;
}

.nav-menu > li > a,
.drawer-nav a,
.drawer-nav button {
  position: relative;
  font-weight: 700;
  letter-spacing: 0;
}

.nav-menu > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 2px;
  background: linear-gradient(90deg, var(--hy-red), var(--hy-gold));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.22s ease;
}

.nav-menu > li > a:hover::after { transform: scaleX(1); }

.btn-primary,
.btn.btn-primary,
.btn-submit,
.btn-subscribe,
.nav-cta {
  background: linear-gradient(135deg, var(--hy-red), var(--hy-red-dark));
  color: #fff;
  border: 0;
  border-radius: var(--hy-radius);
  box-shadow: 0 12px 28px rgba(230, 0, 18, 0.24);
}

.btn-primary:hover,
.btn.btn-primary:hover,
.btn-submit:hover,
.btn-subscribe:hover,
.nav-cta:hover {
  background: linear-gradient(135deg, #ff1a2c, var(--hy-red-dark));
  box-shadow: 0 16px 36px rgba(230, 0, 18, 0.32);
}

.hy-page-shell { overflow: hidden; }

.section,
.hero,
.hero-video-section,
.page-hero,
.product-hero,
.contact-hero,
.quality-hero { position: relative; }

.hero,
.hero-video-section,
.page-hero,
.product-hero,
.contact-hero,
.quality-hero {
  background:
    linear-gradient(135deg, rgba(16, 20, 33, 0.91), rgba(22, 33, 62, 0.82)),
    url("assets/images/generated/factory-campus.png") center / cover no-repeat;
  color: #fff;
}

.hero::before,
.hero-video-section::before,
.page-hero::before,
.product-hero::before,
.contact-hero::before,
.quality-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.75), transparent);
}

.hero > *,
.hero-video-section > *,
.page-hero > *,
.product-hero > *,
.contact-hero > *,
.quality-hero > * {
  position: relative;
  z-index: 1;
}

.eyebrow,
.section-kicker,
.category-badge,
.article-category {
  color: var(--hy-red);
  font-weight: 800;
  letter-spacing: 1.2px;
}

h1, h2, h3, .section-title { letter-spacing: 0; }

.hero h1,
.hero-video-section h1,
.page-hero h1,
.contact-hero h1,
.quality-hero h1 {
  max-width: 880px;
  color: #fff;
  text-wrap: balance;
}

.subtitle,
.hero-subtitle,
.section-subtitle { color: #64748b; }
.hero .subtitle,
.hero-subtitle,
.hero p,
.hero-video-section .subtitle { color: rgba(255, 255, 255, 0.82); }

.product-card,
.adv-card,
.benefit-card,
.brand-card,
.cert-card,
.blog-card,
.featured-card,
.workshop-card,
.office-card,
.portal-card,
.guarantee-item,
.rfq-form-panel,
.contact-info-card {
  border: 1px solid rgba(16, 20, 33, 0.09);
  border-radius: var(--hy-radius);
  box-shadow: 0 12px 34px rgba(16, 20, 33, 0.08);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.product-card:hover,
.adv-card:hover,
.benefit-card:hover,
.brand-card:hover,
.cert-card:hover,
.blog-card:hover,
.featured-card:hover,
.workshop-card:hover,
.office-card:hover,
.portal-card:hover,
.guarantee-item:hover {
  transform: translateY(-6px);
  border-color: rgba(230, 0, 18, 0.28);
  box-shadow: var(--hy-shadow);
}

.product-img,
.gallery-img,
.featured-img img,
.blog-img img,
.workshop-img img,
.video-placeholder,
.hero-image,
.team-img {
  object-fit: cover;
  filter: saturate(1.03) contrast(1.02);
}

.grid-brands { align-items: stretch; }
.brand-card {
  min-height: 250px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.brand-logo {
  width: 100%;
  height: 88px;
  max-width: 220px;
  object-fit: contain;
  margin: 0 auto 18px;
  padding: 8px;
}

.brand-card h3 { color: var(--hy-ink); }
.brand-pos {
  align-self: center;
  border-radius: 999px;
}

.footer-main {
  background: linear-gradient(135deg, #0c1020 0%, #141d36 58%, #1a1320 100%);
  border-top: 4px solid var(--hy-red);
}

.footer-grid {
  grid-template-columns: minmax(240px, 1.35fr) repeat(4, minmax(150px, 1fr));
  gap: 34px;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: #fff;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 16px;
}

.footer-brand img {
  width: auto;
  max-width: 92px;
  max-height: 52px;
  object-fit: contain;
  background: #fff;
  border-radius: 6px;
  padding: 5px;
}

.footer-brand-copy {
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.65;
  margin: 0 0 18px;
}

.footer-brand-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.footer-brand-row img {
  width: 100%;
  height: 42px;
  object-fit: contain;
  background: #fff;
  border-radius: 6px;
  padding: 5px;
}

.footer-contact,
.footer-bottom { background: #080b14; }

.form-control,
input,
select,
textarea { border-radius: var(--hy-radius); }

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--hy-red);
  box-shadow: 0 0 0 4px rgba(230, 0, 18, 0.12);
}

.hy-wpforms-placeholder {
  border-color: rgba(230, 0, 18, 0.25);
  background: #fff7f7;
}

@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav-inner { min-height: 66px; }
}

@media (max-width: 640px) {
  .logo { min-width: 0; }
  .logo img,
  .custom-logo-link img,
  .hy-brand-logo {
    max-width: 86px;
    max-height: 42px;
  }
  .site-title { display: none; }
  .footer-grid { grid-template-columns: 1fr; }
  .brand-logo { height: 76px; }
}

/* Huayuan inquiry plugin and Cooperation page */
.hyb-inquiry-form {
  font-family: inherit;
}

.bg-dark .hyb-label,
.bg-dark .hyb-consent,
.coop-form-panel .hyb-label,
.coop-form-panel .hyb-consent {
  color: rgba(255, 255, 255, 0.88);
}

.bg-dark .hyb-checkbox-grid,
.coop-form-panel .hyb-checkbox-grid {
  border-color: rgba(255, 255, 255, 0.14);
}

.bg-dark .hyb-form-status.is-success,
.coop-form-panel .hyb-form-status.is-success {
  color: #76e39a;
}

.bg-dark .hyb-form-status.is-error,
.coop-form-panel .hyb-form-status.is-error {
  color: #ff9a8f;
}

.hy-page-cooperation {
  background: #f8fafc;
}

.coop-hero {
  padding: 72px 0 48px;
  background:
    linear-gradient(115deg, rgba(16, 24, 39, 0.94), rgba(16, 24, 39, 0.72)),
    #101827;
  color: #fff;
}

.coop-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(360px, 1.08fr);
  gap: 48px;
  align-items: center;
}

.coop-hero-copy h1 {
  max-width: 720px;
  margin: 12px 0 18px;
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.02;
  letter-spacing: 0;
}

.coop-hero-copy p {
  max-width: 660px;
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 18px;
  line-height: 1.7;
}

.coop-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

.btn-outline-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid currentColor;
  border-radius: 6px;
  color: inherit;
  font-weight: 800;
  text-decoration: none;
}

.coop-hero-media {
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}

.coop-hero-media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.coop-benefit-list {
  display: grid;
  gap: 18px;
}

.coop-benefit-card {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  padding: 28px;
  border: 1px solid rgba(16, 24, 39, 0.1);
  border-radius: 8px;
  background: #fff;
}

.coop-benefit-card.is-reversed {
  background: #111827;
  color: #fff;
}

.coop-benefit-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--hy-red);
  color: #fff;
  font-weight: 900;
}

.coop-benefit-card h3,
.coop-step h3,
.coop-brand-card h3 {
  margin: 0 0 10px;
  letter-spacing: 0;
}

.coop-benefit-card p,
.coop-step p,
.coop-brand-card p,
.coop-form-copy p {
  color: inherit;
  opacity: 0.78;
  line-height: 1.68;
}

.coop-benefit-card a {
  color: var(--hy-red);
  font-weight: 800;
}

.coop-step-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.coop-step {
  min-height: 230px;
  padding: 24px;
  border: 1px solid rgba(16, 24, 39, 0.1);
  border-radius: 8px;
  background: #fff;
}

.coop-step span {
  display: inline-block;
  margin-bottom: 18px;
  color: var(--hy-red);
  font-weight: 900;
}

.coop-step strong {
  display: inline-block;
  margin-top: 12px;
  color: #111827;
}

.coop-brand-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.coop-brand-card {
  padding: 28px;
  border: 1px solid rgba(16, 24, 39, 0.1);
  border-radius: 8px;
  background: #fff;
}

.coop-brand-card img {
  display: block;
  width: 100%;
  height: 86px;
  object-fit: contain;
  margin-bottom: 18px;
  border-radius: 6px;
  background: #fff;
}

.coop-brand-card > span {
  display: inline-flex;
  margin-bottom: 12px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(230, 0, 18, 0.09);
  color: var(--hy-red);
  font-size: 12px;
  font-weight: 900;
}

.coop-brand-meta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(16, 24, 39, 0.1);
}

.coop-brand-meta em {
  color: #64748b;
  font-style: normal;
  font-weight: 800;
}

.coop-form-section {
  background: #101827;
  color: #fff;
}

.coop-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.76fr) minmax(420px, 1fr);
  gap: 48px;
  align-items: start;
}

.coop-form-copy ul {
  display: grid;
  gap: 12px;
  margin: 24px 0 0;
  padding-left: 20px;
  color: rgba(255, 255, 255, 0.82);
}

.coop-form-panel {
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
}

.coop-closing-cta {
  text-align: center;
  background: #fff;
}

.coop-closing-cta .coop-hero-actions {
  justify-content: center;
}

@media (max-width: 1024px) {
  .coop-hero-inner,
  .coop-form-grid {
    grid-template-columns: 1fr;
  }

  .coop-step-grid,
  .coop-brand-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .coop-hero {
    padding-top: 48px;
  }

  .coop-benefit-card,
  .coop-step-grid,
  .coop-brand-grid {
    grid-template-columns: 1fr;
  }

  .coop-form-panel {
    padding: 18px;
  }
}