*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --primary-50: #e8f0fe; --primary-100: #d2e3fc; --primary-200: #a6c8fa;
      --primary-500: #0f52ba; --primary-600: #0b3d8a; --primary-700: #092d6b;
      --primary-800: #061e4a; --primary-900: #030f29;
      --accent-500: #f97316; --accent-600: #ea580c;
      --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb;
      --gray-300: #d1d5db; --gray-400: #9ca3af; --gray-500: #6b7280;
      --gray-600: #4b5563; --gray-700: #374151; --gray-800: #1f2937;
      --gray-900: #111827; --gray-950: #030712;
      --green-500: #22c55e; --green-600: #16a34a;
    }
    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #1f2937; line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
    a { text-decoration: none; color: inherit; }
    img { max-width: 100%; display: block; }
    button, input, select, textarea { font: inherit; }

    /* Animations */
    @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    .anim-up { animation: fadeInUp 0.8s ease-out forwards; }
    .anim-up-d1 { animation: fadeInUp 0.8s 0.1s ease-out forwards; opacity: 0; }
    .anim-up-d2 { animation: fadeInUp 0.8s 0.2s ease-out forwards; opacity: 0; }
    .anim-up-d3 { animation: fadeInUp 0.8s 0.3s ease-out forwards; opacity: 0; }
    .anim-up-d4 { animation: fadeInUp 0.8s 0.4s ease-out forwards; opacity: 0; }

    /* Layout */
    .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
    .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
    .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
    .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

    /* Header */
    .header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(255,255,255,0.95); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(0,0,0,0.05); }
    .header-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
    .logo { display: flex; align-items: center; gap: 12px; }
    .logo-icon { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, var(--primary-500), var(--primary-700)); display: flex; align-items: center; justify-content: center; color: white; font-weight: 700; font-size: 16px; box-shadow: 0 4px 12px rgba(15,82,186,0.3); }
    .logo-text { font-size: 18px; font-weight: 700; color: var(--gray-900); }
    .logo-sub { font-size: 10px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--primary-500); }
    .nav { display: flex; align-items: center; gap: 4px; }
    .nav a { padding: 8px 14px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--gray-600); transition: all 0.2s; }
    .nav a:hover, .nav a.active { color: var(--primary-600); background: var(--primary-50); }
    .header-actions { display: flex; align-items: center; gap: 12px; }
    .btn-quote { display: inline-flex; align-items: center; padding: 10px 20px; border-radius: 12px; background: linear-gradient(135deg, var(--accent-500), var(--accent-600)); color: white; font-size: 14px; font-weight: 600; box-shadow: 0 4px 14px rgba(249,115,22,0.3); transition: all 0.3s; }
    .btn-quote:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(249,115,22,0.4); }

    /* Hero */
    .hero { min-height: 90vh; display: flex; align-items: center; padding-top: 72px; background: linear-gradient(135deg, #030f29 0%, #092d6b 30%, #0f52ba 70%, #1a6bdf 100%); position: relative; overflow: hidden; }
    .hero-bg { position: absolute; inset: 0; background: url('../banners/pump-truck.svg') center/cover no-repeat; opacity: 0.55; }
    .hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3,15,41,0.95) 0%, rgba(11,61,138,0.75) 50%, rgba(15,82,186,0.4) 100%); }
    .hero::before { content: ''; position: absolute; top: -100px; right: -100px; width: 400px; height: 400px; border-radius: 50%; background: rgba(78,145,245,0.1); filter: blur(60px); z-index: 1; }
    .hero::after { content: ''; position: absolute; bottom: 50px; left: -50px; width: 300px; height: 300px; border-radius: 50%; background: rgba(249,115,22,0.08); filter: blur(60px); z-index: 1; }
    .hero-wave { position: absolute; bottom: 0; left: 0; right: 0; }
    .hero-content { position: relative; z-index: 2; padding: 80px 0; }
    .hero-badge { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 100px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); font-size: 14px; color: var(--primary-200); backdrop-filter: blur(4px); }
    .hero h1 { margin-top: 24px; font-size: 64px; font-weight: 800; line-height: 1.1; color: white; max-width: 700px; }
    .hero h1 span { background: linear-gradient(90deg, #a6c8fa, #7aacf7, #fb923c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
    .hero p { margin-top: 24px; font-size: 18px; color: rgba(166,200,250,0.8); max-width: 560px; line-height: 1.7; }
    .hero-btns { display: flex; gap: 16px; margin-top: 32px; flex-wrap: wrap; }
    .btn-primary { display: inline-flex; align-items: center; gap: 8px; padding: 16px 32px; border-radius: 12px; background: linear-gradient(135deg, var(--accent-500), var(--accent-600)); color: white; font-size: 16px; font-weight: 700; box-shadow: 0 8px 24px rgba(249,115,22,0.35); transition: all 0.3s; }
    .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(249,115,22,0.45); }
    .btn-secondary { display: inline-flex; align-items: center; gap: 8px; padding: 16px 32px; border-radius: 12px; background: rgba(255,255,255,0.1); color: white; font-size: 16px; font-weight: 700; border: 1px solid rgba(255,255,255,0.3); backdrop-filter: blur(4px); transition: all 0.3s; }
    .btn-secondary:hover { background: rgba(255,255,255,0.2); }

    /* Stats Bar */
    .stats-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 64px; }
    .stat-card { background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2); border-radius: 16px; padding: 20px; text-align: center; }
    .stat-card .number { font-size: 30px; font-weight: 800; color: white; }
    .stat-card .label { font-size: 13px; color: var(--primary-200); margin-top: 4px; }

    /* Section Common */
    .section { padding: 96px 0; }
    .section-gray { background: linear-gradient(180deg, var(--gray-50), white); }
    .section-header { text-align: center; max-width: 600px; margin: 0 auto 64px; }
    .section-tag { display: inline-block; padding: 6px 16px; border-radius: 100px; background: var(--primary-50); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--primary-600); }
    .section-header h2 { margin-top: 16px; font-size: 36px; font-weight: 800; color: var(--gray-900); }
    .section-header p { margin-top: 16px; font-size: 18px; color: var(--gray-500); }

    /* Why Choose Us Cards */
    .why-card { background: white; border-radius: 16px; padding: 32px; box-shadow: 0 4px 24px rgba(0,0,0,0.06); transition: all 0.3s cubic-bezier(0.4,0,0.2,1); position: relative; overflow: hidden; }
    .why-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--primary-500), #4e91f5, var(--accent-500)); }
    .why-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(15,82,186,0.12); }
    .why-icon { width: 56px; height: 56px; border-radius: 12px; background: linear-gradient(135deg, var(--primary-500), var(--primary-700)); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(15,82,186,0.2); }
    .why-icon svg { width: 28px; height: 28px; color: white; fill: none; stroke: currentColor; stroke-width: 2; }
    .why-number { font-size: 40px; font-weight: 800; color: var(--primary-600); margin-top: 20px; }
    .why-card h3 { font-size: 18px; font-weight: 700; color: var(--gray-900); margin-top: 8px; }
    .why-card p { font-size: 14px; color: var(--gray-500); margin-top: 8px; line-height: 1.6; }

    /* Product Cards */
    .product-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 48px; }
    .filter-btn { padding: 10px 20px; border-radius: 100px; font-size: 14px; font-weight: 500; border: none; cursor: pointer; transition: all 0.2s; background: white; color: var(--gray-600); box-shadow: 0 1px 4px rgba(0,0,0,0.08); border: 1px solid var(--gray-200); }
    .filter-btn:hover { border-color: var(--primary-500); color: var(--primary-600); }
    .filter-btn.active { background: var(--primary-500); color: white; border-color: var(--primary-500); box-shadow: 0 4px 12px rgba(15,82,186,0.3); }
    .product-card { background: white; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,0.06); border: 1px solid var(--gray-100); transition: all 0.3s cubic-bezier(0.4,0,0.2,1); }
    .product-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(15,82,186,0.12); }
    .product-img { aspect-ratio: 4/3; background: linear-gradient(135deg, var(--gray-100), var(--gray-200)); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
    .product-img .badge { position: absolute; top: 12px; left: 12px; padding: 4px 12px; border-radius: 100px; background: var(--primary-500); color: white; font-size: 12px; font-weight: 700; box-shadow: 0 2px 8px rgba(15,82,186,0.3); }
    .product-img .placeholder { text-align: center; color: var(--gray-300); }
    .product-img .placeholder svg { width: 64px; height: 64px; margin: 0 auto; }
    .product-body { padding: 24px; }
    .product-body h3 { font-size: 18px; font-weight: 700; color: var(--gray-900); }
    .product-body p { font-size: 14px; color: var(--gray-500); margin-top: 8px; }
    .product-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
    .product-footer .tag { font-size: 12px; font-weight: 500; color: var(--gray-400); text-transform: uppercase; letter-spacing: 0.5px; }
    .btn-inquiry { display: inline-flex; align-items: center; gap: 4px; padding: 8px 16px; border-radius: 8px; background: var(--accent-500); color: white; font-size: 12px; font-weight: 700; transition: all 0.3s; }
    .btn-inquiry:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(249,115,22,0.3); }
    .view-all { display: inline-flex; align-items: center; gap: 8px; margin-top: 48px; padding: 16px 32px; border-radius: 12px; background: white; color: var(--primary-600); font-size: 16px; font-weight: 700; box-shadow: 0 4px 16px rgba(0,0,0,0.06); border: 1px solid var(--primary-100); transition: all 0.3s; }
    .view-all:hover { box-shadow: 0 8px 24px rgba(15,82,186,0.12); border-color: var(--primary-300); }

    /* Cases */
    .case-card { border-radius: 16px; overflow: hidden; aspect-ratio: 4/3; position: relative; box-shadow: 0 4px 24px rgba(0,0,0,0.1); transition: all 0.3s; }
    .case-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(15,82,186,0.15); }
    .case-card .overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; background: linear-gradient(to top, rgba(3,15,41,0.9), rgba(3,15,41,0.3), transparent); }
    .case-card .region { display: inline-block; width: fit-content; padding: 4px 12px; border-radius: 100px; background: var(--accent-500); color: white; font-size: 12px; font-weight: 700; margin-bottom: 8px; }
    .case-card h3 { font-size: 18px; font-weight: 700; color: white; }
    .case-card p { font-size: 14px; color: var(--primary-200); margin-top: 4px; }

    /* Contact */
    .contact-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 32px; }
    .contact-form { background: white; border-radius: 16px; padding: 32px; box-shadow: 0 8px 32px rgba(0,0,0,0.08); border: 1px solid var(--gray-100); }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
    .form-group { margin-bottom: 20px; }
    .form-group label { display: block; font-size: 14px; font-weight: 500; color: var(--gray-700); margin-bottom: 6px; }
    .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--gray-200); background: var(--gray-50); font-size: 14px; outline: none; transition: all 0.2s; }
    .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--primary-500); background: white; box-shadow: 0 0 0 3px rgba(15,82,186,0.1); }
    .form-group textarea { resize: none; height: 120px; }
    .btn-submit { width: 100%; padding: 16px; border-radius: 12px; background: linear-gradient(135deg, var(--accent-500), var(--accent-600)); color: white; font-size: 16px; font-weight: 700; border: none; cursor: pointer; box-shadow: 0 4px 14px rgba(249,115,22,0.3); transition: all 0.3s; }
    .btn-submit:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(249,115,22,0.4); }
    .contact-info { display: flex; flex-direction: column; gap: 24px; }
    .info-card { background: white; border-radius: 16px; padding: 24px; box-shadow: 0 4px 16px rgba(0,0,0,0.06); border: 1px solid var(--gray-100); }
    .info-card h3 { font-size: 18px; font-weight: 700; color: var(--gray-900); margin-bottom: 16px; }
    .info-item { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
    .info-icon { width: 40px; height: 40px; border-radius: 8px; background: var(--primary-50); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .info-icon svg { width: 20px; height: 20px; stroke: var(--primary-600); fill: none; stroke-width: 2; }
    .info-label { font-size: 11px; font-weight: 500; color: var(--gray-400); text-transform: uppercase; letter-spacing: 0.5px; }
    .info-value { font-size: 14px; font-weight: 600; color: var(--gray-900); }
    .whatsapp-btn { display: flex; align-items: center; gap: 16px; padding: 20px; border-radius: 16px; background: linear-gradient(135deg, #22c55e, #16a34a); box-shadow: 0 4px 16px rgba(34,197,94,0.3); transition: all 0.3s; }
    .whatsapp-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(34,197,94,0.4); }
    .whatsapp-btn .wa-icon { width: 48px; height: 48px; border-radius: 12px; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; }
    .whatsapp-btn .wa-icon svg { width: 28px; height: 28px; fill: white; }
    .whatsapp-btn .wa-text { font-size: 14px; font-weight: 700; color: white; }
    .whatsapp-btn .wa-sub { font-size: 12px; color: rgba(255,255,255,0.8); }
    .hours-card { background: var(--primary-50); border-radius: 16px; padding: 24px; border: 1px solid var(--primary-100); }
    .hours-card h4 { font-size: 14px; font-weight: 700; color: var(--primary-900); }
    .hours-card p { font-size: 14px; color: var(--primary-700); margin-top: 8px; }
    .hours-card .sub { font-size: 12px; color: var(--primary-500); margin-top: 4px; }

    /* FAQ */
    .faq-list { max-width: 720px; margin: 0 auto; }
    .faq-item { background: var(--gray-50); border-radius: 16px; border: 1px solid var(--gray-100); margin-bottom: 16px; overflow: hidden; }
    .faq-item summary { display: flex; align-items: center; justify-content: space-between; padding: 24px; font-size: 16px; font-weight: 600; color: var(--gray-900); cursor: pointer; transition: background 0.2s; list-style: none; }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary:hover { background: var(--gray-100); }
    .faq-item summary .arrow { width: 20px; height: 20px; transition: transform 0.3s; flex-shrink: 0; margin-left: 16px; }
    .faq-item[open] summary .arrow { transform: rotate(180deg); }
    .faq-answer { padding: 0 24px 24px; font-size: 14px; color: var(--gray-600); line-height: 1.7; }

    /* CTA */
    .cta { padding: 80px 0; background: linear-gradient(135deg, #030f29 0%, #092d6b 30%, #0f52ba 70%, #1a6bdf 100%); position: relative; overflow: hidden; text-align: center; }
    .cta::before { content: ''; position: absolute; top: -50px; right: -50px; width: 250px; height: 250px; border-radius: 50%; background: rgba(78,145,245,0.15); filter: blur(60px); }
    .cta h2 { font-size: 36px; font-weight: 800; color: white; position: relative; }
    .cta p { font-size: 18px; color: var(--primary-200); margin-top: 16px; position: relative; }
    .cta-btns { display: flex; justify-content: center; gap: 16px; margin-top: 32px; flex-wrap: wrap; position: relative; }

    /* Footer */
    .footer { background: linear-gradient(180deg, var(--gray-900), var(--gray-950)); color: var(--gray-300); padding: 64px 0 0; }
    .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
    .footer-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
    .footer-logo span { font-size: 18px; font-weight: 700; color: white; }
    .footer-desc { font-size: 14px; color: var(--gray-400); line-height: 1.7; max-width: 400px; }
    .footer h4 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: white; margin-bottom: 16px; }
    .footer ul { list-style: none; }
    .footer ul li { margin-bottom: 10px; }
    .footer ul li a { font-size: 14px; color: var(--gray-400); transition: color 0.2s; }
    .footer ul li a:hover { color: white; }
    .footer-bottom { margin-top: 48px; border-top: 1px solid rgba(255,255,255,0.08); padding: 24px 0; text-align: center; font-size: 14px; color: var(--gray-500); }

    /* Banner Gallery */
    .banner-gallery { display: grid; gap: 24px; }
    .banner-item { position: relative; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,0.12); aspect-ratio: 16/9; background: #030f29; transition: all 0.3s; cursor: pointer; }
    .banner-item:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(15,82,186,0.2); }
    .banner-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .banner-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px 24px; background: linear-gradient(to top, rgba(3,15,41,0.95), transparent); }
    .banner-caption h3 { font-size: 20px; font-weight: 700; color: white; }
    .banner-caption p { font-size: 13px; color: var(--primary-200); margin-top: 4px; }
    .banner-num { position: absolute; top: 16px; right: 16px; padding: 4px 12px; border-radius: 100px; background: var(--accent-500); color: white; font-size: 12px; font-weight: 700; box-shadow: 0 4px 12px rgba(249,115,22,0.4); }

    /* OEM Search */
    .oem-search-hero { margin-top: 32px; max-width: 640px; }
    .oem-label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--primary-200); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; }
    .oem-label::before { content: ''; width: 24px; height: 2px; background: var(--accent-500); }
    .oem-box { display: flex; background: white; border-radius: 16px; padding: 6px; box-shadow: 0 20px 50px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.1); overflow: hidden; }
    .oem-brand-select { padding: 0 18px; border: none; outline: none; background: transparent; font-size: 14px; font-weight: 600; color: var(--gray-700); border-right: 1px solid var(--gray-200); cursor: pointer; min-width: 130px; }
    .oem-input { flex: 1; padding: 14px 18px; border: none; outline: none; background: transparent; font-size: 15px; color: var(--gray-900); }
    .oem-input::placeholder { color: var(--gray-400); }
    .oem-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: 12px; background: linear-gradient(135deg, var(--accent-500), var(--accent-600)); color: white; font-weight: 700; border: none; cursor: pointer; font-size: 14px; box-shadow: 0 4px 14px rgba(249,115,22,0.4); transition: all 0.2s; white-space: nowrap; }
    .oem-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(249,115,22,0.5); }
    .oem-popular { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
    .oem-popular-label { font-size: 12px; color: rgba(166,200,250,0.7); }
    .oem-tag { padding: 4px 12px; border-radius: 100px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); font-size: 12px; color: white; cursor: pointer; transition: all 0.2s; font-family: 'Courier New', monospace; font-weight: 600; }
    .oem-tag:hover { background: rgba(249,115,22,0.2); border-color: var(--accent-500); }

    /* OEM Section (standalone) */
    .oem-section { background: linear-gradient(135deg, #061e4a 0%, #0f52ba 100%); padding: 80px 0; position: relative; overflow: hidden; }
    .oem-section::before { content: ''; position: absolute; top: -100px; right: -100px; width: 400px; height: 400px; border-radius: 50%; background: rgba(249,115,22,0.08); filter: blur(80px); }
    .oem-section-inner { position: relative; z-index: 2; max-width: 900px; margin: 0 auto; text-align: center; padding: 0 24px; }
    .oem-section h2 { font-size: 36px; font-weight: 800; color: white; }
    .oem-section h2 span { color: var(--accent-500); }
    .oem-section > div > p { color: rgba(166,200,250,0.85); font-size: 17px; margin-top: 12px; }
    .oem-section .oem-box { margin-top: 32px; padding: 8px; }
    .oem-section .oem-input { padding: 18px 20px; font-size: 16px; }
    .oem-section .oem-btn { padding: 16px 32px; font-size: 16px; }
    .oem-brand-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 24px; }
    .oem-chip { padding: 8px 18px; border-radius: 100px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); color: white; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
    .oem-chip:hover, .oem-chip.active { background: var(--accent-500); border-color: var(--accent-500); }

    /* Search Results Modal/Display */
    .oem-results { display: none; max-width: 800px; margin: 32px auto 0; background: white; border-radius: 20px; padding: 24px; box-shadow: 0 30px 60px rgba(0,0,0,0.3); text-align: left; }
    .oem-results.show { display: block; animation: fadeInUp 0.4s ease-out; }
    .oem-results-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid var(--gray-100); margin-bottom: 16px; }
    .oem-results-header h4 { font-size: 16px; font-weight: 700; color: var(--gray-900); }
    .oem-results-close { background: var(--gray-100); border: none; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 16px; color: var(--gray-600); }
    .oem-result-item { display: flex; align-items: center; gap: 16px; padding: 14px; border-radius: 12px; transition: background 0.2s; cursor: pointer; }
    .oem-result-item:hover { background: var(--gray-50); }
    .oem-result-icon { width: 60px; height: 60px; border-radius: 10px; background: linear-gradient(135deg, var(--primary-50), var(--primary-100)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .oem-result-icon svg { width: 30px; height: 30px; stroke: var(--primary-600); fill: none; stroke-width: 1.5; }
    .oem-result-info { flex: 1; }
    .oem-result-info h5 { font-size: 15px; font-weight: 700; color: var(--gray-900); }
    .oem-result-info .meta { display: flex; gap: 12px; margin-top: 4px; font-size: 12px; color: var(--gray-500); }
    .oem-result-info .meta code { background: var(--gray-100); padding: 2px 8px; border-radius: 4px; font-family: 'Courier New', monospace; font-weight: 600; color: var(--primary-600); }
    .oem-result-brand { padding: 4px 10px; border-radius: 100px; background: var(--primary-50); color: var(--primary-600); font-size: 11px; font-weight: 700; }
    .oem-result-cta { padding: 8px 16px; border-radius: 8px; background: var(--accent-500); color: white; font-size: 13px; font-weight: 700; }

    /* How It Works */
    .how-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; }
    .how-grid::before { content: ''; position: absolute; top: 40px; left: 12%; right: 12%; height: 2px; background: repeating-linear-gradient(90deg, var(--primary-200) 0, var(--primary-200) 8px, transparent 8px, transparent 14px); z-index: 0; }
    .how-step { position: relative; z-index: 1; text-align: center; padding: 0 8px; }
    .how-number { display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, var(--primary-500), var(--primary-700)); color: white; font-size: 28px; font-weight: 900; box-shadow: 0 10px 24px rgba(15,82,186,0.25); margin-bottom: 20px; border: 6px solid white; }
    .how-step.accent .how-number { background: linear-gradient(135deg, var(--accent-500), var(--accent-600)); box-shadow: 0 10px 24px rgba(249,115,22,0.25); }
    .how-step h3 { font-size: 17px; font-weight: 700; color: var(--gray-900); margin-bottom: 8px; }
    .how-step p { font-size: 13px; line-height: 1.6; color: var(--gray-500); }
    .how-step .step-time { display: inline-block; margin-top: 10px; padding: 3px 10px; border-radius: 100px; background: var(--primary-50); color: var(--primary-600); font-size: 11px; font-weight: 700; }

    /* Sticky WhatsApp FAB */
    .fab-whatsapp { position: fixed; bottom: 24px; right: 24px; z-index: 90; display: flex; align-items: center; gap: 10px; padding: 14px 22px 14px 16px; border-radius: 100px; background: linear-gradient(135deg, #22c55e, #16a34a); color: white; text-decoration: none; box-shadow: 0 12px 32px rgba(34,197,94,0.4), 0 0 0 4px rgba(34,197,94,0.15); font-weight: 700; font-size: 14px; transition: all 0.3s; animation: fabPulse 2.5s ease-in-out infinite; }
    .fab-whatsapp:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 16px 40px rgba(34,197,94,0.55), 0 0 0 6px rgba(34,197,94,0.2); }
    .fab-whatsapp svg { width: 22px; height: 22px; fill: white; }
    .fab-whatsapp .fab-pulse { position: absolute; top: -4px; right: -4px; width: 12px; height: 12px; border-radius: 50%; background: #ef4444; border: 2px solid white; animation: pulseDot 1.5s ease-in-out infinite; }
    @keyframes fabPulse { 0%,100% { box-shadow: 0 12px 32px rgba(34,197,94,0.4), 0 0 0 4px rgba(34,197,94,0.15); } 50% { box-shadow: 0 12px 32px rgba(34,197,94,0.4), 0 0 0 12px rgba(34,197,94,0); } }
    @keyframes pulseDot { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.3); opacity: 0.7; } }

    /* Live Activity ticker */
    .activity-bar { background: linear-gradient(90deg, rgba(34,197,94,0.05), rgba(15,82,186,0.05)); border-top: 1px solid rgba(34,197,94,0.1); border-bottom: 1px solid rgba(15,82,186,0.1); padding: 12px 0; overflow: hidden; }
    .activity-track { display: flex; gap: 64px; align-items: center; animation: scroll-x 30s linear infinite; white-space: nowrap; }
    .activity-bar:hover .activity-track { animation-play-state: paused; }
    .activity-item { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gray-600); }
    .activity-item .dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,0.2); flex-shrink: 0; animation: pulseDot 2s ease-in-out infinite; }
    .activity-item strong { color: var(--primary-600); font-weight: 700; }
    @keyframes scroll-x { from { transform: translateX(0); } to { transform: translateX(-50%); } }

    /* Trust badges */
    .trust-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
    .trust-badge { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 14px; background: white; border: 1px solid var(--gray-100); box-shadow: 0 2px 8px rgba(0,0,0,0.04); transition: all 0.2s; }
    .trust-badge:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.08); border-color: var(--primary-200); }
    .trust-icon { width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(135deg, var(--primary-50), var(--primary-100)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 18px; color: var(--primary-600); font-weight: 900; }
    .trust-text { display: flex; flex-direction: column; }
    .trust-text strong { font-size: 13px; font-weight: 700; color: var(--gray-900); }
    .trust-text span { font-size: 11px; color: var(--gray-500); }

    /* Testimonials */
    .testimonial-card { background: white; border-radius: 20px; padding: 32px; box-shadow: 0 8px 32px rgba(0,0,0,0.06); border: 1px solid var(--gray-100); position: relative; transition: all 0.3s; }
    .testimonial-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(15,82,186,0.1); }
    .testimonial-card::before { content: '\\201C'; position: absolute; top: 16px; right: 24px; font-size: 80px; line-height: 1; color: var(--primary-100); font-family: Georgia, serif; }
    .testimonial-stars { color: #fbbf24; font-size: 18px; letter-spacing: 2px; margin-bottom: 14px; }
    .testimonial-quote { font-size: 15px; line-height: 1.7; color: var(--gray-700); margin-bottom: 24px; position: relative; z-index: 1; }
    .testimonial-meta { display: flex; align-items: center; gap: 14px; padding-top: 20px; border-top: 1px solid var(--gray-100); }
    .testimonial-avatar { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--primary-500), var(--primary-700)); color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; flex-shrink: 0; }
    .testimonial-info { display: flex; flex-direction: column; }
    .testimonial-info strong { font-size: 14px; font-weight: 700; color: var(--gray-900); }
    .testimonial-info span { font-size: 12px; color: var(--gray-500); }

    /* World map */
    .map-wrap { position: relative; max-width: 900px; margin: 0 auto; }
    .map-wrap svg { width: 100%; height: auto; }
    .map-dot { fill: var(--accent-500); animation: pulseDot 2s ease-in-out infinite; }
    .map-dot.big { fill: var(--primary-500); }
    .map-stats { display: flex; flex-wrap: wrap; gap: 32px; justify-content: center; margin-top: 32px; }
    .map-stat { text-align: center; }
    .map-stat .num { font-size: 36px; font-weight: 900; color: var(--primary-600); }
    .map-stat .lbl { font-size: 12px; color: var(--gray-500); text-transform: uppercase; letter-spacing: 1px; margin-top: 4px; }

    /* World map animations */
    .wm-route { animation: routeDraw 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
    @keyframes routeDraw { from { stroke-dashoffset: 600; } to { stroke-dashoffset: 0; } }

    .wm-dest { opacity: 0; animation: destAppear 0.5s ease-out forwards; transform-origin: center; transform-box: fill-box; }
    @keyframes destAppear { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }

    .wm-dest-ring1 { animation: ringPulse 2.5s ease-out infinite; transform-origin: center; transform-box: fill-box; }
    .wm-dest-ring2 { animation: ringPulse 2.5s ease-out infinite 0.4s; transform-origin: center; transform-box: fill-box; }
    @keyframes ringPulse { 0% { transform: scale(0.5); opacity: 0.6; } 100% { transform: scale(2.2); opacity: 0; } }

    .wm-origin-ring { animation: ringPulse 2s ease-out infinite; transform-origin: center; transform-box: fill-box; }
    .wm-origin-ring2 { animation: ringPulse 2s ease-out infinite 0.4s; transform-origin: center; transform-box: fill-box; }
    .wm-halo { animation: haloPulse 3s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
    @keyframes haloPulse { 0%,100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.2); } }

    .wm-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 24px; max-width: 900px; margin-left: auto; margin-right: auto; }
    .wm-chip { display: inline-flex; align-items: center; gap: 4px; padding: 6px 14px; border-radius: 100px; background: white; border: 1px solid var(--gray-200); font-size: 13px; font-weight: 600; color: var(--gray-700); opacity: 0; animation: chipIn 0.5s ease-out forwards; box-shadow: 0 1px 3px rgba(0,0,0,0.04); transition: all 0.2s; cursor: default; }
    .wm-chip:hover { border-color: var(--accent-500); color: var(--accent-600); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(249,115,22,0.15); }
    @keyframes chipIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

    /* Product Detail page */
    .pd-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 32px; }
    .pd-gallery-col { position: relative; }
    .pd-gallery { position: relative; aspect-ratio: 1; border-radius: 20px; overflow: hidden; background: linear-gradient(135deg, var(--gray-100), var(--gray-200)); display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 40px rgba(0,0,0,0.08); }
    .pd-gallery img { width: 100%; height: 100%; object-fit: cover; }
    .pd-gallery .pd-badge { position: absolute; top: 20px; left: 20px; padding: 6px 16px; border-radius: 100px; background: var(--primary-500); color: white; font-size: 12px; font-weight: 800; box-shadow: 0 4px 12px rgba(15,82,186,0.3); }
    .pd-gallery .pd-hot { position: absolute; top: 20px; right: 20px; padding: 6px 12px; border-radius: 100px; background: var(--accent-500); color: white; font-size: 11px; font-weight: 800; box-shadow: 0 4px 12px rgba(249,115,22,0.4); }
    .pd-gallery .pd-placeholder { text-align: center; color: var(--gray-400); }
    .pd-gallery .pd-placeholder svg { width: 100px; height: 100px; margin: 0 auto 12px; }
    .pd-trust-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
    .pd-trust-item { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--primary-50); border-radius: 10px; font-size: 12px; font-weight: 600; color: var(--gray-700); }
    .pd-info h1 { font-size: 32px; font-weight: 800; color: var(--gray-900); margin-bottom: 14px; line-height: 1.2; }
    .pd-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
    .pd-tag { padding: 6px 14px; border-radius: 100px; font-size: 12px; font-weight: 700; }
    .pd-tag.brand { background: var(--primary-50); color: var(--primary-600); }
    .pd-tag.cat { background: var(--gray-100); color: var(--gray-700); }
    .pd-tag.hot { background: #fff7ed; color: #ea580c; }
    .pd-oem-box { background: linear-gradient(135deg, var(--primary-50), white); border: 1px solid var(--primary-100); border-radius: 14px; padding: 20px; margin-bottom: 24px; }
    .pd-oem-box .lbl { font-size: 11px; font-weight: 700; color: var(--primary-500); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 6px; }
    .pd-oem-box .val { font-size: 24px; font-weight: 800; color: var(--gray-900); font-family: 'Courier New', monospace; letter-spacing: 0.5px; }
    .pd-specs { background: white; border: 1px solid var(--gray-100); border-radius: 14px; overflow: hidden; margin-bottom: 24px; }
    .pd-specs h3 { padding: 14px 20px; font-size: 13px; font-weight: 800; color: var(--gray-700); background: var(--gray-50); text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px solid var(--gray-100); }
    .specs-table { width: 100%; border-collapse: collapse; }
    .specs-table tr:nth-child(even) { background: var(--gray-50); }
    .specs-table td { padding: 12px 20px; font-size: 13px; border-bottom: 1px solid var(--gray-100); }
    .specs-table td:first-child { color: var(--gray-500); font-weight: 600; width: 140px; }
    .specs-table td:last-child { color: var(--gray-900); font-weight: 600; }
    .specs-table tr:last-child td { border-bottom: none; }
    .specs-table code { background: var(--primary-50); padding: 2px 8px; border-radius: 4px; font-size: 13px; color: var(--primary-700); font-weight: 700; }
    .pd-cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
    .pd-cta-row .btn-primary, .pd-cta-row .btn-secondary { flex: 1; min-width: 180px; justify-content: center; }
    .pd-cta-pulse { animation: ctaPulse 2s infinite; }
    @keyframes ctaPulse { 0%,100% { box-shadow: 0 4px 14px rgba(15,82,186,0.3); } 50% { box-shadow: 0 4px 24px rgba(15,82,186,0.5); } }
    .pd-cta-hint { font-size: 12px; color: var(--gray-500); margin-bottom: 20px; }
    .pd-share { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--gray-50); border-radius: 12px; }
    .pd-share-label { font-size: 12px; font-weight: 600; color: var(--gray-500); }
    .pd-share-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--gray-200); background: white; cursor: pointer; transition: all 0.2s; text-decoration: none; }
    .pd-share-btn:hover { border-color: var(--primary-300); background: var(--primary-50); }
    .pd-related-title { font-size: 22px; font-weight: 800; color: var(--gray-900); margin-bottom: 24px; margin-top: 80px; text-align: center; }
    @media (max-width: 768px) {
      .pd-wrap { grid-template-columns: 1fr; gap: 24px; }
      .pd-trust-strip { grid-template-columns: 1fr 1fr; gap: 8px; }
      .pd-info h1 { font-size: 24px; }
      .pd-oem-box .val { font-size: 18px; }
      .specs-table td:first-child { width: 110px; }
    }

    /* Product detail layout with sidebar */
    .pd-layout { display: grid; grid-template-columns: 1fr 280px; gap: 32px; align-items: start; }
    .pd-main { min-width: 0; }
    .pd-sidebar { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 16px; }
    .pd-sidebar .sidebar-card { background: white; border: 1px solid var(--gray-100); border-radius: 14px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
    .pd-sidebar .sidebar-card h4 { font-size: 14px; font-weight: 700; color: var(--gray-900); margin-bottom: 12px; }
    .pd-sidebar .sidebar-search { display: flex; gap: 6px; }
    .pd-sidebar .sidebar-search input { flex: 1; padding: 8px 12px; border: 1px solid var(--gray-200); border-radius: 8px; font-size: 13px; }
    .pd-sidebar .sidebar-search input:focus { outline: none; border-color: var(--primary-500); box-shadow: 0 0 0 3px rgba(15,82,186,0.1); }
    .pd-sidebar .sidebar-search button { padding: 8px 14px; background: var(--primary-500); color: white; border: none; border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer; }
    .pd-sidebar .sidebar-search button:hover { background: var(--primary-600); }
    .sidebar-cat-list { list-style: none; }
    .sidebar-cat-list li a { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-radius: 8px; font-size: 13px; color: var(--gray-700); text-decoration: none; transition: all 0.15s; }
    .sidebar-cat-list li a:hover { background: var(--gray-50); color: var(--primary-600); }
    .sidebar-cat-list li.active a { background: var(--primary-50); color: var(--primary-600); font-weight: 700; }
    .sidebar-cat-list li a span { font-size: 11px; background: var(--gray-100); padding: 2px 8px; border-radius: 100px; color: var(--gray-500); font-weight: 600; }
    .sidebar-brands { display: flex; flex-wrap: wrap; gap: 6px; }
    .sidebar-brand-tag { padding: 5px 12px; border-radius: 100px; border: 1px solid var(--gray-200); font-size: 12px; color: var(--gray-600); text-decoration: none; transition: all 0.15s; font-weight: 500; }
    .sidebar-brand-tag:hover { border-color: var(--primary-300); color: var(--primary-600); background: var(--primary-50); }
    .sidebar-brand-tag.active { background: var(--primary-500); color: white; border-color: var(--primary-500); }
    .pd-sidebar .sidebar-cta { background: linear-gradient(135deg, var(--primary-50), white); border-color: var(--primary-100); text-align: center; }
    .pd-sidebar .sidebar-cta p:first-child { font-size: 14px; font-weight: 700; color: var(--gray-800); margin-bottom: 12px; }

    /* Product description SEO block */
    .pd-description { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--gray-100); }
    .pd-description h2 { font-size: 22px; font-weight: 800; color: var(--gray-900); margin-bottom: 16px; }
    .pd-description h3 { font-size: 16px; font-weight: 700; color: var(--gray-800); margin: 24px 0 12px; }
    .pd-description p { font-size: 14px; line-height: 1.8; color: var(--gray-600); margin-bottom: 12px; }
    .pd-description ul { padding-left: 20px; margin-bottom: 16px; }
    .pd-description li { font-size: 14px; line-height: 1.8; color: var(--gray-600); margin-bottom: 6px; }
    .pd-description strong { color: var(--gray-800); }

    @media (max-width: 1024px) {
      .pd-layout { grid-template-columns: 1fr; }
      .pd-sidebar { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    }
    @media (max-width: 640px) {
      .pd-sidebar { grid-template-columns: 1fr; }
    }

    /* Breadcrumb */
    .breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gray-500); margin-bottom: 24px; }
    .breadcrumb a { color: var(--gray-500); transition: color 0.2s; }
    .breadcrumb a:hover { color: var(--primary-600); }
    .breadcrumb .sep { color: var(--gray-300); }
    .breadcrumb .current { color: var(--gray-900); font-weight: 600; }

    /* Language switcher */
    .lang-btn:hover { border-color: var(--primary-300); color: var(--primary-600); }
    .lang-menu.open { display: block !important; }
    .lang-menu a:hover { background: var(--primary-50); color: var(--primary-600); }

    /* Hero quick search strip */
    .hero-quick-search { margin-top: 28px; display: flex; gap: 8px; background: rgba(255,255,255,0.12); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2); border-radius: 14px; padding: 6px; max-width: 560px; }
    .hero-quick-search input { flex: 1; padding: 12px 16px; border: none; outline: none; background: transparent; color: white; font-size: 14px; }
    .hero-quick-search input::placeholder { color: rgba(255,255,255,0.6); }
    .hero-quick-search button { display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; border-radius: 10px; background: linear-gradient(135deg, var(--accent-500), var(--accent-600)); color: white; font-weight: 700; border: none; cursor: pointer; font-size: 13px; white-space: nowrap; }
    .hero-quick-hint { margin-top: 10px; font-size: 12px; color: rgba(166,200,250,0.7); }
    .hero-quick-hint code { padding: 2px 8px; border-radius: 4px; background: rgba(255,255,255,0.1); font-family: 'Courier New', monospace; color: white; margin: 0 3px; cursor: pointer; transition: background 0.2s; }
    .hero-quick-hint code:hover { background: rgba(249,115,22,0.3); }

    /* Brand trust strip */
    .brand-strip { padding: 40px 0; background: white; border-bottom: 1px solid var(--gray-100); }
    .brand-strip-label { text-align: center; font-size: 12px; font-weight: 700; letter-spacing: 2px; color: var(--gray-400); text-transform: uppercase; margin-bottom: 24px; }
    .brand-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; }
    .brand-logo-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 16px 28px; border-radius: 12px; transition: all 0.2s; cursor: pointer; opacity: 0.65; min-width: 130px; border: 1px solid transparent; }
    .brand-logo-item:hover { opacity: 1; background: var(--gray-50); border-color: var(--gray-100); transform: translateY(-2px); }
    .brand-logo-mark { font-size: 20px; font-weight: 900; letter-spacing: -0.5px; color: var(--gray-800); font-family: 'Arial Black', 'Arial', sans-serif; }
    .brand-logo-sub { font-size: 9px; font-weight: 600; color: var(--gray-400); text-transform: uppercase; letter-spacing: 1.5px; }

    /* Responsive */
    @media (max-width: 1024px) {
      .nav { display: none; }
      .hero h1 { font-size: 48px; }
      .grid-4 { grid-template-columns: repeat(2, 1fr); }
      .contact-grid { grid-template-columns: 1fr; }
      .footer-grid { grid-template-columns: 1fr 1fr; }
      .how-grid { grid-template-columns: repeat(2, 1fr); }
      .how-grid::before { display: none; }
      .pd-wrap { grid-template-columns: 1fr; gap: 32px; }
    }
    @media (max-width: 768px) {
      .hero h1 { font-size: 36px; }
      .hero { min-height: 80vh; }
      .stats-bar { grid-template-columns: repeat(2, 1fr); }
      .grid-3, .grid-2 { grid-template-columns: 1fr; }
      .section { padding: 64px 0; }
      .section-header h2 { font-size: 28px; }
      .form-row { grid-template-columns: 1fr; }
      .footer-grid { grid-template-columns: 1fr; }
      .hero-btns { flex-direction: column; }
      .how-grid { grid-template-columns: 1fr; }
      .brand-logos { gap: 8px; }
      .brand-logo-item { min-width: 110px; padding: 12px 16px; }
      .about-who-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
    }

    /* Video Grid */
    .video-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
    .video-grid-full { grid-template-columns: repeat(4, 1fr); }
    .video-card { background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.08); transition: transform 0.3s, box-shadow 0.3s; }
    .video-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
    .video-card-featured { grid-column: 1 / -1; max-width: 720px; margin: 0 auto; }
    .video-embed { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; background: #1e293b; }
    .video-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
    /* Click-to-load YouTube facade */
    .video-facade { cursor: pointer; }
    .video-facade img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s, opacity 0.3s; }
    .video-facade:hover img { transform: scale(1.04); opacity: 0.85; }
    .video-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4)); transition: transform 0.2s; opacity: 0.92; }
    .video-facade:hover .video-play-btn { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
    .video-info { padding: 1rem 1.25rem; }
    .video-info h3 { font-size: 1rem; margin-bottom: 0.35rem; color: #1e293b; }
    .video-info p { font-size: 0.875rem; color: #64748b; margin: 0; }
    .video-tag { display: inline-block; margin-top: 0.5rem; padding: 2px 10px; border-radius: 99px; font-size: 0.75rem; font-weight: 600; background: #eff6ff; color: #0f52ba; }
    .video-cta { text-align: center; margin-top: 2.5rem; padding: 2rem; background: #f8fafc; border-radius: 12px; }
    .video-cta p { margin-bottom: 1rem; color: #475569; }
    .video-cta .btn-primary { display: inline-flex; align-items: center; gap: 8px; }
    @media (max-width: 1024px) {
      .video-grid, .video-grid-full { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 600px) {
      .video-grid, .video-grid-full { grid-template-columns: 1fr; }
      .video-card-featured { max-width: 100%; }
    }

    /* Hamburger + Mobile Nav */
    .hamburger { display: none; flex-direction: column; gap: 5px; padding: 8px; background: none; border: none; cursor: pointer; z-index: 101; }
    .hamburger span { display: block; width: 24px; height: 2.5px; background: var(--gray-800); border-radius: 2px; transition: all 0.3s; }
    @media (max-width: 1024px) {
      .hamburger { display: flex; }
    }
    /* Compact header on small phones: keep logo on one line */
    @media (max-width: 520px) {
      .header-inner { height: 60px; gap: 8px; }
      .header-inner .logo { flex-shrink: 0; }
      .logo-icon { width: 34px; height: 34px; font-size: 14px; border-radius: 10px; }
      .logo-text { font-size: 15px; white-space: nowrap; }
      .logo-sub { display: none; }
      .header-actions .lang-btn { padding: 6px 8px; font-size: 12px; }
      .header-actions .btn-quote { padding: 8px 12px; font-size: 12px; white-space: nowrap; }
      .hamburger { padding: 6px; }
    }
    @media (max-width: 380px) {
      .header-actions .lang-btn #lang-code { display: none; }
    }
    .mobile-nav { position: fixed; top: 0; right: -300px; width: 280px; height: 100vh; background: white; z-index: 200; box-shadow: -4px 0 24px rgba(0,0,0,0.15); transition: right 0.3s ease; overflow-y: auto; }
    .mobile-nav.open { right: 0; }
    .mobile-nav-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-bottom: 1px solid var(--gray-100); }
    .mobile-nav-close { background: none; border: none; font-size: 28px; color: var(--gray-600); cursor: pointer; padding: 4px 8px; }
    .mobile-nav-links { display: flex; flex-direction: column; padding: 12px 0; }
    .mobile-nav-links a { padding: 14px 24px; font-size: 15px; font-weight: 500; color: var(--gray-700); border-left: 3px solid transparent; transition: all 0.2s; }
    .mobile-nav-links a:hover, .mobile-nav-links a.active { background: var(--primary-50); color: var(--primary-600); border-left-color: var(--primary-500); }

    /* Product Sidebar */
    .products-layout { display: grid; grid-template-columns: 260px 1fr; gap: 32px; }
    .product-sidebar { position: sticky; top: 90px; align-self: start; }
    .sidebar-card { background: white; border-radius: 14px; border: 1px solid var(--gray-100); box-shadow: 0 2px 12px rgba(0,0,0,0.04); padding: 20px; margin-bottom: 20px; }
    .sidebar-card h4 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--gray-500); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--gray-100); }
    .sidebar-cat-list { list-style: none; }
    .sidebar-cat-list li { margin-bottom: 2px; }
    .sidebar-cat-list li a { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-radius: 8px; font-size: 14px; color: var(--gray-700); transition: all 0.15s; }
    .sidebar-cat-list li a:hover, .sidebar-cat-list li a.active { background: var(--primary-50); color: var(--primary-600); font-weight: 600; }
    .sidebar-cat-count { font-size: 11px; background: var(--gray-100); color: var(--gray-500); padding: 2px 8px; border-radius: 100px; font-weight: 600; }
    .sidebar-search { display: flex; gap: 6px; }
    .sidebar-search input { flex: 1; padding: 10px 14px; border: 1px solid var(--gray-200); border-radius: 10px; font-size: 13px; background: var(--gray-50); outline: none; transition: border-color 0.2s; }
    .sidebar-search input:focus { border-color: var(--primary-500); background: white; }
    .sidebar-search button { padding: 10px 14px; border-radius: 10px; background: var(--accent-500); color: white; border: none; cursor: pointer; font-weight: 700; font-size: 13px; }
    .sidebar-promo { background: linear-gradient(135deg, var(--primary-500), var(--primary-700)); border-radius: 14px; padding: 20px; color: white; text-align: center; }
    .sidebar-promo h4 { font-size: 15px; font-weight: 700; margin-bottom: 6px; color: white; border: none; padding: 0; text-transform: none; letter-spacing: 0; }
    .sidebar-promo p { font-size: 13px; opacity: 0.85; margin-bottom: 12px; }
    .sidebar-promo a { display: inline-block; padding: 8px 18px; border-radius: 8px; background: white; color: var(--primary-600); font-size: 13px; font-weight: 700; }
    @media (max-width: 1024px) {
      .products-layout { grid-template-columns: 1fr; }
      .product-sidebar { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
      .sidebar-card { margin-bottom: 0; }
    }
    @media (max-width: 600px) {
      .product-sidebar { grid-template-columns: 1fr; }
    }

    /* ===== Inquiry Cart System ===== */
    .inquiry-fab { position: fixed; bottom: 100px; right: 24px; z-index: 900; width: 52px; height: 52px; border-radius: 50%; background: var(--primary-500); color: white; border: none; cursor: pointer; box-shadow: 0 4px 16px rgba(15,82,186,0.35); display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
    .inquiry-fab:hover { transform: scale(1.08); box-shadow: 0 6px 24px rgba(15,82,186,0.45); }
    .inquiry-fab.has-items { animation: fab-pulse 2s infinite; }
    @keyframes fab-pulse { 0%,100% { box-shadow: 0 4px 16px rgba(15,82,186,0.35); } 50% { box-shadow: 0 4px 24px rgba(15,82,186,0.6); } }
    .inquiry-badge { position: absolute; top: -4px; right: -4px; width: 20px; height: 20px; border-radius: 50%; background: #ef4444; color: white; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }

    .inquiry-toast { position: fixed; bottom: 160px; right: 24px; z-index: 950; background: #065f46; color: white; padding: 10px 18px; border-radius: 10px; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.15); opacity: 0; transform: translateY(10px); transition: all 0.3s; pointer-events: none; }
    .inquiry-toast.show { opacity: 1; transform: translateY(0); }

    .inquiry-drawer { position: fixed; inset: 0; z-index: 1100; display: flex; justify-content: flex-end; visibility: hidden; }
    .inquiry-drawer.open { visibility: visible; }
    .inquiry-drawer-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.4); opacity: 0; transition: opacity 0.3s; }
    .inquiry-drawer.open .inquiry-drawer-backdrop { opacity: 1; }
    .inquiry-drawer-panel { position: relative; width: 420px; max-width: 90vw; height: 100%; background: white; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); box-shadow: -4px 0 24px rgba(0,0,0,0.1); }
    .inquiry-drawer.open .inquiry-drawer-panel { transform: translateX(0); }
    .inquiry-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid #f3f4f6; }
    .inquiry-drawer-header h3 { font-size: 18px; font-weight: 800; color: #111827; display: flex; align-items: center; gap: 8px; }
    .inquiry-drawer-header h3 span { background: var(--primary-500); color: white; font-size: 12px; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
    .inquiry-drawer-close { width: 36px; height: 36px; border: none; background: #f3f4f6; border-radius: 50%; font-size: 22px; cursor: pointer; color: #6b7280; display: flex; align-items: center; justify-content: center; }
    .inquiry-drawer-close:hover { background: #e5e7eb; }

    .inquiry-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #9ca3af; padding: 40px; text-align: center; }
    .inquiry-empty p { font-size: 16px; font-weight: 700; color: #6b7280; }
    .inquiry-empty span { font-size: 13px; }

    .inquiry-list { flex: 1; overflow-y: auto; padding: 16px 24px; }
    .inq-item { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid #f3f4f6; align-items: flex-start; }
    .inq-item-img { width: 56px; height: 56px; border-radius: 8px; overflow: hidden; background: #f9fafb; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
    .inq-item-img img { width: 100%; height: 100%; object-fit: cover; }
    .inq-placeholder { font-size: 14px; font-weight: 800; color: #d1d5db; }
    .inq-item-info { flex: 1; min-width: 0; }
    .inq-item-name { font-size: 13px; font-weight: 700; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .inq-item-meta { font-size: 12px; color: #6b7280; margin-top: 2px; }
    .inq-item-qty { margin-top: 6px; display: flex; align-items: center; gap: 6px; }
    .inq-item-qty label { font-size: 12px; color: #6b7280; }
    .inq-item-qty input { width: 52px; padding: 4px 8px; border: 1px solid #e5e7eb; border-radius: 6px; font-size: 13px; text-align: center; }
    .inq-item-remove { width: 28px; height: 28px; border: none; background: none; color: #9ca3af; font-size: 20px; cursor: pointer; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .inq-item-remove:hover { background: #fee2e2; color: #ef4444; }

    .inquiry-actions { padding: 16px 24px; border-top: 1px solid #f3f4f6; display: flex; flex-direction: column; gap: 8px; }
    .inq-btn-wa { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border-radius: 10px; border: none; background: #16a34a; color: white; font-size: 14px; font-weight: 700; cursor: pointer; transition: all 0.15s; }
    .inq-btn-wa:hover { background: #15803d; }
    .inq-btn-email { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border-radius: 10px; border: none; background: var(--primary-500); color: white; font-size: 14px; font-weight: 700; cursor: pointer; transition: all 0.15s; }
    .inq-btn-email:hover { background: var(--primary-600); }
    .inq-btn-clear { padding: 8px; border: none; background: none; color: #9ca3af; font-size: 12px; cursor: pointer; }
    .inq-btn-clear:hover { color: #ef4444; }

    .btn-add-inquiry { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 8px; border: 1.5px solid var(--primary-500); background: white; color: var(--primary-600); font-size: 11px; font-weight: 700; cursor: pointer; transition: all 0.15s; white-space: nowrap; }
    .btn-add-inquiry:hover { background: var(--primary-50); }
    .btn-add-inquiry.added { background: #f0fdf4; border-color: #16a34a; color: #16a34a; pointer-events: none; }

    /* ===== Factory Gallery ===== */
    .factory-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .fg-item { position: relative; border-radius: 16px; overflow: hidden; background: #f9fafb; border: 1px solid var(--gray-100); transition: all 0.25s; }
    .fg-item:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.1); }
    .fg-item.fg-large { grid-column: span 2; }
    .fg-item img { width: 100%; height: 240px; object-fit: cover; display: block; }
    .fg-item.fg-large img { height: 300px; }
    .fg-caption { padding: 16px 20px; }
    .fg-caption h4 { font-size: 15px; font-weight: 700; color: var(--gray-900); margin-bottom: 4px; }
    .fg-caption p { font-size: 13px; color: var(--gray-500); line-height: 1.5; }
    @media (max-width: 1024px) {
      .factory-gallery { grid-template-columns: repeat(2, 1fr); }
      .fg-item.fg-large { grid-column: span 2; }
    }
    @media (max-width: 640px) {
      .factory-gallery { grid-template-columns: 1fr; }
      .fg-item.fg-large { grid-column: span 1; }
      .fg-item img, .fg-item.fg-large img { height: 200px; }
    }