{"id":1272,"date":"2018-04-16T16:05:31","date_gmt":"2018-04-16T08:05:31","guid":{"rendered":"https:\/\/believeindustry.company\/?page_id=1272"},"modified":"2026-06-14T20:36:25","modified_gmt":"2026-06-14T12:36:25","slug":"video","status":"publish","type":"page","link":"https:\/\/believeindustry.company\/ms\/video\/","title":{"rendered":"VIDEO"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1272\" class=\"elementor elementor-1272\" data-elementor-post-type=\"page\">\n\t\t\t\t<div data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-element elementor-element-ef5f81b e-flex e-con-boxed e-con e-parent\" data-id=\"ef5f81b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-46e63fe elementor-widget elementor-widget-html\" data-id=\"46e63fe\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n  <meta charset=\"UTF-8\" \/>\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\r\n  <title>Believe Industry \u2014 Video Hub<\/title>\r\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Rajdhani:wght@500;600;700&family=Inter:wght@400;500;600&display=swap\" rel=\"stylesheet\">\r\n  <style>\r\n    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\n    :root {\r\n      --brand:        #c47a0a;\r\n      --brand-dark:   #9a5f08;\r\n      --brand-light:  #e89820;\r\n      --accent:       #e85d1a;\r\n      --bg:           #e8e6e1;\r\n      --bg-warm:      #ddd9d2;\r\n      --surface:      #f5f3ef;\r\n      --surface-alt:  #eeece7;\r\n      --border:       #c8c4bc;\r\n      --border-dark:  #b0ab9f;\r\n      --text-main:    #2a2520;\r\n      --text-muted:   #6b6560;\r\n      --text-hint:    #9a948c;\r\n      --steel:        #606a78;\r\n      --steel-light:  #8892a0;\r\n      --concrete:     #a8a49c;\r\n      --dark-panel:   #2e2b28;\r\n      --dark-panel-l: #3a3733;\r\n      --radius-sm:    3px;\r\n      --radius-md:    5px;\r\n    }\r\n\r\n    body {\r\n      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\r\n      background: var(--bg);\r\n      color: var(--text-main);\r\n      min-height: 100vh;\r\n    }\r\n\r\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n       HERO \/ FEATURE IMAGE\r\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n    .hero {\r\n      position: relative;\r\n      width: 100%;\r\n      height: 420px;\r\n      overflow: hidden;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n    }\r\n\r\n    .hero-bg {\r\n      position: absolute;\r\n      inset: 0;\r\n      background:\r\n        linear-gradient(135deg, #1a1a2e 0%, #16213e 40%, #0f3460 100%);\r\n      background-size: cover;\r\n      background-position: center;\r\n    }\r\n\r\n    \/* Diagonal steel plate texture overlay *\/\r\n    .hero-bg::before {\r\n      content: '';\r\n      position: absolute; inset: 0;\r\n      background:\r\n        repeating-linear-gradient(\r\n          45deg,\r\n          transparent,\r\n          transparent 30px,\r\n          rgba(255,255,255,.02) 30px,\r\n          rgba(255,255,255,.02) 31px\r\n        ),\r\n        repeating-linear-gradient(\r\n          -45deg,\r\n          transparent,\r\n          transparent 30px,\r\n          rgba(255,255,255,.015) 30px,\r\n          rgba(255,255,255,.015) 31px\r\n        );\r\n    }\r\n\r\n    \/* Dark gradient overlay for text readability *\/\r\n    .hero-overlay {\r\n      position: absolute; inset: 0;\r\n      background: linear-gradient(\r\n        180deg,\r\n        rgba(20,18,15,.55) 0%,\r\n        rgba(20,18,15,.25) 40%,\r\n        rgba(20,18,15,.70) 100%\r\n      );\r\n    }\r\n\r\n    \/* Grid line overlay \u2014 industrial feel *\/\r\n    .hero-overlay::before {\r\n      content: '';\r\n      position: absolute; inset: 0;\r\n      background:\r\n        linear-gradient(rgba(196,122,10,.06) 1px, transparent 1px),\r\n        linear-gradient(90deg, rgba(196,122,10,.06) 1px, transparent 1px);\r\n      background-size: 60px 60px;\r\n      -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);\r\n      mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);\r\n    }\r\n\r\n    \/* Top hazard stripe *\/\r\n    .hero::before {\r\n      content: '';\r\n      position: absolute; top: 0; left: 0; right: 0;\r\n      height: 4px;\r\n      background: repeating-linear-gradient(\r\n        -45deg,\r\n        var(--brand),\r\n        var(--brand) 8px,\r\n        #2e2b28 8px,\r\n        #2e2b28 16px\r\n      );\r\n      z-index: 5;\r\n    }\r\n\r\n    \/* Bottom hazard stripe *\/\r\n    .hero::after {\r\n      content: '';\r\n      position: absolute; bottom: 0; left: 0; right: 0;\r\n      height: 4px;\r\n      background: repeating-linear-gradient(\r\n        -45deg,\r\n        var(--brand),\r\n        var(--brand) 8px,\r\n        #2e2b28 8px,\r\n        #2e2b28 16px\r\n      );\r\n      z-index: 5;\r\n    }\r\n\r\n    .hero-content {\r\n      position: relative; z-index: 2;\r\n      text-align: center;\r\n      padding: 0 2rem;\r\n      max-width: 900px;\r\n    }\r\n\r\n    .hero-label {\r\n      font-family: 'Rajdhani', sans-serif;\r\n      font-size: 12px; font-weight: 600;\r\n      color: var(--brand-light);\r\n      letter-spacing: 4px;\r\n      text-transform: uppercase;\r\n      margin-bottom: 12px;\r\n      display: flex; align-items: center; justify-content: center; gap: 10px;\r\n    }\r\n    .hero-label::before,\r\n    .hero-label::after {\r\n      content: '';\r\n      width: 40px; height: 1px;\r\n      background: var(--brand);\r\n      opacity: .6;\r\n    }\r\n\r\n    .hero-title {\r\n      font-family: 'Rajdhani', sans-serif;\r\n      font-size: clamp(36px, 5.5vw, 64px);\r\n      font-weight: 700;\r\n      color: #fff;\r\n      letter-spacing: 3px;\r\n      text-transform: uppercase;\r\n      line-height: 1.05;\r\n      text-shadow: 0 2px 20px rgba(0,0,0,.5);\r\n      margin-bottom: 16px;\r\n    }\r\n\r\n    .hero-title::after {\r\n      content: '';\r\n      display: block;\r\n      width: 80px; height: 3px;\r\n      background: var(--brand);\r\n      margin: 14px auto 0;\r\n    }\r\n\r\n    .hero-subtitle {\r\n      font-family: 'Inter', sans-serif;\r\n      font-size: clamp(13px, 1.4vw, 16px);\r\n      font-weight: 400;\r\n      color: rgba(255,255,255,.72);\r\n      letter-spacing: 1px;\r\n      line-height: 1.6;\r\n      max-width: 600px;\r\n      margin: 0 auto;\r\n    }\r\n\r\n    .hero-badge {\r\n      display: inline-flex;\r\n      align-items: center; gap: 6px;\r\n      margin-top: 22px;\r\n      padding: 5px 16px;\r\n      background: rgba(196,122,10,.15);\r\n      border: 1px solid rgba(196,122,10,.3);\r\n      border-radius: 2px;\r\n      font-family: 'Rajdhani', sans-serif;\r\n      font-size: 11px; font-weight: 600;\r\n      color: var(--brand-light);\r\n      letter-spacing: 2px;\r\n      text-transform: uppercase;\r\n    }\r\n    .hero-badge .dot {\r\n      width: 5px; height: 5px;\r\n      background: #2ecc71;\r\n      border-radius: 1px;\r\n      box-shadow: 0 0 6px #2ecc71;\r\n    }\r\n\r\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n       STATUS BAR\r\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n    .status-bar {\r\n      max-width: 1200px; margin: 0 auto;\r\n      padding: 0 2rem;\r\n    }\r\n    .status-msg {\r\n      font-size: 11px; color: var(--text-hint);\r\n      padding: 6px 0;\r\n      display: flex; align-items: center; gap: 6px;\r\n      text-transform: uppercase; letter-spacing: .5px;\r\n      font-family: 'Rajdhani', sans-serif; font-weight: 600;\r\n    }\r\n    .status-msg .dot { width: 6px; height: 6px; border-radius: 1px; }\r\n    .status-msg .dot.loading { background: var(--brand); animation: pulse 1s infinite; }\r\n    .status-msg .dot.ok { background: #2ecc71; }\r\n    .status-msg .dot.err { background: #e74c3c; }\r\n    @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }\r\n\r\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n       CATEGORY TABS\r\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n    .tabs-wrap {\r\n      background: var(--surface);\r\n      border-bottom: 2px solid var(--border);\r\n      overflow-x: auto;\r\n      scrollbar-width: none;\r\n    }\r\n    .tabs-wrap::-webkit-scrollbar { display: none; }\r\n    .tabs-inner {\r\n      max-width: 1200px; margin: 0 auto;\r\n      padding: 0 2rem;\r\n      display: flex; gap: 0;\r\n    }\r\n    .tab-item {\r\n      display: flex; align-items: center; gap: 8px;\r\n      padding: 13px 24px;\r\n      cursor: pointer;\r\n      white-space: nowrap;\r\n      position: relative;\r\n      user-select: none;\r\n      transition: color .12s, background .12s;\r\n      color: var(--text-muted);\r\n      border-bottom: 2px solid transparent;\r\n      margin-bottom: -2px;\r\n      font-family: 'Rajdhani', sans-serif;\r\n      font-size: 14px; font-weight: 600;\r\n      text-transform: uppercase;\r\n      letter-spacing: .8px;\r\n    }\r\n    .tab-item:hover { color: var(--text-main); background: rgba(0,0,0,.02); }\r\n    .tab-item.active {\r\n      color: var(--brand);\r\n      border-bottom-color: var(--brand);\r\n    }\r\n    .tab-diamond {\r\n      width: 8px; height: 8px;\r\n      transform: rotate(45deg);\r\n      flex-shrink: 0;\r\n    }\r\n    .tab-count {\r\n      font-size: 10px; background: var(--bg);\r\n      padding: 1px 7px; border-radius: 2px;\r\n      color: var(--text-hint); font-weight: 500;\r\n      font-family: 'Inter', sans-serif;\r\n      border: 1px solid var(--border);\r\n    }\r\n    .tab-item.active .tab-count {\r\n      color: var(--brand); border-color: rgba(196,122,10,.3);\r\n      background: rgba(196,122,10,.06);\r\n    }\r\n\r\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n       MAIN AREA\r\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n    .main-area {\r\n      max-width: 1200px; margin: 0 auto;\r\n      padding: 1.5rem 2rem 3rem;\r\n    }\r\n\r\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n       PLAYER SECTION\r\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n    .player-section { margin-bottom: 0; }\r\n    .player-frame {\r\n      background: var(--dark-panel);\r\n      border: 2px solid var(--border-dark);\r\n      border-radius: var(--radius-md);\r\n      overflow: hidden;\r\n      aspect-ratio: 16 \/ 9;\r\n      position: relative;\r\n      box-shadow: 0 4px 20px rgba(0,0,0,.12);\r\n    }\r\n    .player-frame iframe {\r\n      width: 100%; height: 100%;\r\n      border: none; display: block;\r\n    }\r\n    .player-info {\r\n      background: #fff;\r\n      border: 1px solid var(--border);\r\n      border-top: none;\r\n      border-radius: 0 0 var(--radius-md) var(--radius-md);\r\n      padding: 14px 18px;\r\n      display: flex; align-items: center; gap: 10px; flex-wrap: wrap;\r\n    }\r\n    .player-title {\r\n      font-family: 'Rajdhani', sans-serif;\r\n      font-size: 16px; font-weight: 700;\r\n      color: var(--text-main);\r\n      flex: 1; min-width: 200px;\r\n      text-transform: uppercase; letter-spacing: .3px;\r\n    }\r\n    .player-meta {\r\n      display: flex; gap: 8px; align-items: center;\r\n      flex-wrap: wrap;\r\n    }\r\n    .player-cat-badge {\r\n      padding: 3px 10px; border-radius: 2px;\r\n      font-size: 11px; font-weight: 600;\r\n      font-family: 'Rajdhani', sans-serif;\r\n      text-transform: uppercase; letter-spacing: .5px;\r\n    }\r\n\r\n    .btn-action {\r\n      padding: 7px 14px;\r\n      border-radius: var(--radius-sm);\r\n      font-family: 'Rajdhani', sans-serif;\r\n      font-size: 12px; font-weight: 600; cursor: pointer;\r\n      transition: all .15s; white-space: nowrap;\r\n      display: inline-flex; align-items: center; gap: 6px;\r\n      text-transform: uppercase; letter-spacing: .5px;\r\n    }\r\n    .btn-outline {\r\n      background: #fff; color: var(--text-muted);\r\n      border: 1px solid var(--border);\r\n    }\r\n    .btn-outline:hover { border-color: var(--brand); color: var(--brand); }\r\n    .btn-playall {\r\n      background: linear-gradient(135deg, var(--brand), var(--brand-dark));\r\n      color: #fff;\r\n      border: 1px solid var(--brand);\r\n      box-shadow: 0 2px 8px rgba(196,122,10,.2);\r\n    }\r\n    .btn-playall:hover {\r\n      background: linear-gradient(135deg, var(--brand-light), var(--brand));\r\n      box-shadow: 0 4px 12px rgba(196,122,10,.3);\r\n    }\r\n\r\n    \/* Player action buttons (right side) *\/\r\n    .player-actions {\r\n      display: flex; align-items: center; gap: 8px;\r\n      margin-left: auto;\r\n    }\r\n    .btn-player-share {\r\n      display: inline-flex; align-items: center; gap: 5px;\r\n      padding: 6px 12px;\r\n      border-radius: var(--radius-sm);\r\n      background: #fff;\r\n      color: var(--text-muted);\r\n      font-family: 'Rajdhani', sans-serif;\r\n      font-size: 12px; font-weight: 600;\r\n      text-transform: uppercase; letter-spacing: .5px;\r\n      border: 1px solid var(--border);\r\n      cursor: pointer;\r\n      transition: all .15s;\r\n    }\r\n    .btn-player-share:hover { border-color: var(--brand); color: var(--brand); }\r\n    .btn-player-share svg { width: 14px; height: 14px; }\r\n\r\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n       CTA BAR (below player)\r\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n    .cta-bar {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      gap: 16px;\r\n      padding: 18px 0 22px;\r\n      flex-wrap: wrap;\r\n    }\r\n\r\n    .btn-subscribe {\r\n      display: inline-flex; align-items: center; gap: 8px;\r\n      padding: 10px 26px;\r\n      border-radius: var(--radius-sm);\r\n      background: #c00;\r\n      color: #fff;\r\n      font-family: 'Rajdhani', sans-serif;\r\n      font-size: 14px; font-weight: 600;\r\n      text-transform: uppercase; letter-spacing: .8px;\r\n      text-decoration: none;\r\n      border: none; cursor: pointer;\r\n      transition: background .15s, box-shadow .15s, transform .1s;\r\n      box-shadow: 0 3px 10px rgba(204,0,0,.3);\r\n    }\r\n    .btn-subscribe:hover {\r\n      background: #a00;\r\n      box-shadow: 0 6px 18px rgba(204,0,0,.4);\r\n      transform: translateY(-1px);\r\n    }\r\n    .btn-subscribe svg { width: 18px; height: 18px; flex-shrink: 0; }\r\n\r\n    .btn-quote {\r\n      display: inline-flex; align-items: center; gap: 8px;\r\n      padding: 10px 26px;\r\n      border-radius: var(--radius-sm);\r\n      background: linear-gradient(135deg, var(--brand), var(--brand-dark));\r\n      color: #fff;\r\n      font-family: 'Rajdhani', sans-serif;\r\n      font-size: 14px; font-weight: 600;\r\n      text-transform: uppercase; letter-spacing: .8px;\r\n      text-decoration: none;\r\n      border: 1px solid var(--brand);\r\n      cursor: pointer;\r\n      transition: background .15s, box-shadow .15s, transform .1s;\r\n      box-shadow: 0 3px 10px rgba(196,122,10,.25);\r\n    }\r\n    .btn-quote:hover {\r\n      background: linear-gradient(135deg, var(--brand-light), var(--brand));\r\n      box-shadow: 0 6px 18px rgba(196,122,10,.35);\r\n      transform: translateY(-1px);\r\n    }\r\n    .btn-quote svg { width: 16px; height: 16px; flex-shrink: 0; }\r\n\r\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n       REFRESH BAR\r\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n    .refresh-bar {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: flex-end;\r\n      padding: 8px 2rem 0;\r\n      max-width: 1200px;\r\n      margin: 0 auto;\r\n    }\r\n    .btn-refresh {\r\n      padding: 7px 14px;\r\n      border-radius: var(--radius-sm);\r\n      border: 1px solid var(--border);\r\n      background: #fff;\r\n      color: var(--text-muted);\r\n      font-size: 12px; font-weight: 500; font-family: inherit;\r\n      cursor: pointer;\r\n      display: flex; align-items: center; gap: 6px;\r\n      transition: all .15s; white-space: nowrap;\r\n      text-transform: uppercase; letter-spacing: .5px;\r\n    }\r\n    .btn-refresh:hover { border-color: var(--brand); color: var(--brand); }\r\n    .btn-refresh.spinning svg { animation: spin .8s linear infinite; }\r\n    @keyframes spin { to { transform: rotate(360deg); } }\r\n\r\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n       VIDEO GRID\r\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n    .grid-header {\r\n      display: flex; align-items: center; justify-content: space-between;\r\n      margin-bottom: 1rem; gap: 12px;\r\n      padding-bottom: 8px;\r\n      border-bottom: 2px solid var(--border);\r\n    }\r\n    .grid-title {\r\n      font-family: 'Rajdhani', sans-serif;\r\n      font-size: 17px; font-weight: 700; color: var(--text-main);\r\n      display: flex; align-items: center; gap: 10px;\r\n      text-transform: uppercase; letter-spacing: .8px;\r\n    }\r\n    .grid-count {\r\n      font-size: 12px; color: var(--steel); font-weight: 500;\r\n      font-family: 'Rajdhani', sans-serif;\r\n    }\r\n\r\n    .video-grid {\r\n      display: grid;\r\n      grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));\r\n      gap: 16px;\r\n    }\r\n\r\n    .video-card {\r\n      border: 1px solid var(--border);\r\n      border-radius: var(--radius-md);\r\n      overflow: hidden;\r\n      cursor: pointer;\r\n      transition: border-color .15s, box-shadow .2s, transform .12s;\r\n      background: #fff;\r\n      position: relative;\r\n    }\r\n    .video-card::before {\r\n      content: '';\r\n      position: absolute; top: 0; left: 0; right: 0; height: 3px;\r\n      background: var(--brand);\r\n      opacity: 0;\r\n      transition: opacity .15s;\r\n    }\r\n    .video-card:hover {\r\n      border-color: var(--brand);\r\n      box-shadow: 0 4px 16px rgba(196,122,10,.12);\r\n      transform: translateY(-2px);\r\n    }\r\n    .video-card:hover::before { opacity: 1; }\r\n    .video-card.active {\r\n      border-color: var(--brand);\r\n      background: #fdf8ef;\r\n    }\r\n    .video-card.active::before { opacity: 1; }\r\n\r\n    .card-thumb {\r\n      position: relative;\r\n      aspect-ratio: 16\/9;\r\n      background: var(--dark-panel);\r\n      overflow: hidden;\r\n    }\r\n    .card-thumb img {\r\n      width: 100%; height: 100%; object-fit: cover; display: block;\r\n      transition: transform .25s;\r\n    }\r\n    .video-card:hover .card-thumb img { transform: scale(1.04); }\r\n\r\n    .card-play-overlay {\r\n      position: absolute; inset: 0;\r\n      background: rgba(0,0,0,0);\r\n      display: flex; align-items: center; justify-content: center;\r\n      transition: background .15s;\r\n    }\r\n    .video-card:hover .card-play-overlay { background: rgba(0,0,0,.3); }\r\n    .card-play-btn {\r\n      width: 40px; height: 40px;\r\n      background: var(--brand);\r\n      border-radius: 3px;\r\n      display: flex; align-items: center; justify-content: center;\r\n      opacity: 0; transition: opacity .15s, transform .15s;\r\n      transform: scale(.85);\r\n    }\r\n    .video-card:hover .card-play-btn { opacity: 1; transform: scale(1); }\r\n    .card-play-btn::after {\r\n      content: '';\r\n      border-left: 12px solid #fff;\r\n      border-top: 7px solid transparent;\r\n      border-bottom: 7px solid transparent;\r\n      margin-left: 3px;\r\n    }\r\n\r\n    .card-index {\r\n      position: absolute; top: 6px; left: 6px;\r\n      background: rgba(46,43,40,.8); color: var(--brand-light);\r\n      font-size: 10px; padding: 2px 7px; border-radius: 2px;\r\n      font-weight: 700;\r\n      font-family: 'Rajdhani', sans-serif;\r\n    }\r\n\r\n    .card-body { padding: 12px 13px 14px; }\r\n    .card-title {\r\n      font-family: 'Rajdhani', sans-serif;\r\n      font-size: 13.5px; font-weight: 600;\r\n      color: var(--text-main); line-height: 1.4;\r\n      display: -webkit-box;\r\n      -webkit-line-clamp: 2; -webkit-box-orient: vertical;\r\n      overflow: hidden;\r\n      text-transform: uppercase; letter-spacing: .2px;\r\n    }\r\n    .card-date {\r\n      font-size: 11px; color: var(--steel); margin-top: 4px;\r\n      font-family: 'Inter', sans-serif;\r\n    }\r\n    .card-category {\r\n      display: inline-block; margin-top: 6px;\r\n      padding: 2px 8px; border-radius: 2px;\r\n      font-size: 10.5px; font-weight: 600;\r\n      font-family: 'Rajdhani', sans-serif;\r\n      text-transform: uppercase; letter-spacing: .3px;\r\n    }\r\n\r\n    .no-results {\r\n      text-align: center; padding: 3rem 1rem;\r\n      color: var(--text-hint); font-size: 14px;\r\n    }\r\n\r\n    .skeleton-grid {\r\n      display: grid;\r\n      grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));\r\n      gap: 16px;\r\n    }\r\n    .skeleton-card {\r\n      border: 1px solid var(--border);\r\n      border-radius: var(--radius-md);\r\n      overflow: hidden;\r\n      background: #fff;\r\n    }\r\n    .skeleton-thumb {\r\n      aspect-ratio: 16\/9;\r\n      background: linear-gradient(90deg, #eeece7 25%, #f5f3ef 50%, #eeece7 75%);\r\n      background-size: 200% 100%;\r\n      animation: shimmer 1.5s infinite;\r\n    }\r\n    .skeleton-body { padding: 12px 13px 14px; }\r\n    .skeleton-line {\r\n      height: 12px; border-radius: 2px; margin-bottom: 6px;\r\n      background: linear-gradient(90deg, #eeece7 25%, #f5f3ef 50%, #eeece7 75%);\r\n      background-size: 200% 100%;\r\n      animation: shimmer 1.5s infinite;\r\n    }\r\n    .skeleton-line.short { width: 60%; }\r\n    .skeleton-line.tiny { width: 40%; height: 10px; margin-top: 8px; }\r\n    @keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }\r\n\r\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n       RESPONSIVE\r\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n    @media (max-width: 700px) {\r\n      .hero { height: 260px; }\r\n      .hero-title { letter-spacing: 1.5px; }\r\n      .main-area { padding: 1rem 1rem 2rem; }\r\n      .tabs-inner { padding: 0 1rem; }\r\n      .tab-item { padding: 10px 14px; font-size: 13px; }\r\n      .video-grid, .skeleton-grid { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 10px; }\r\n      .player-info { flex-direction: column; align-items: flex-start; gap: 8px; }\r\n      .player-actions { margin-left: 0; width: 100%; justify-content: flex-start; }\r\n      .status-bar { padding: 0 1rem; }\r\n      .refresh-bar { padding: 8px 1rem 0; }\r\n      .cta-bar { gap: 10px; padding: 14px 0 18px; }\r\n      .btn-subscribe, .btn-quote { padding: 9px 18px; font-size: 13px; }\r\n    }\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n  \u270f\ufe0f  CONFIGURATION \u2014 EDIT BELOW\r\n     \u2022 CHANNEL_HANDLE: Your YouTube handle (for Subscribe button)\r\n     \u2022 QUOTE_LINK: URL for \"Request a quote\" button\r\n     \u2022 CATEGORIES: Playlist config \u2014 videos auto-fetched from YouTube\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<script>\r\n\/\/ \u2550\u2550 Your YouTube Channel Handle \u2550\u2550\r\n\/\/ Just put your handle below (the part after youtube.com\/@........)\r\nconst CHANNEL_HANDLE = '@ROLLFORMINGMACHINE';  \/\/ \u2190 Your channel handle\r\n\r\n\/\/ \u2550\u2550 Quote request link \u2550\u2550\r\n\/\/ Change this to your contact\/quote page or email link\r\nconst QUOTE_LINK = 'https:\/\/www.believeindustry.company\/contact';  \/\/ \u2190 CHANGE this to your quote page URL\r\n<\/script>\r\n\r\n<!-- \u2550\u2550\u2550 HERO \/ FEATURE IMAGE \u2550\u2550\u2550 -->\r\n<div class=\"hero\">\r\n  <div class=\"hero-bg\"><\/div>\r\n  <div class=\"hero-overlay\"><\/div>\r\n  <div class=\"hero-content\">\r\n    <div class=\"hero-label\">Believe Industry<\/div>\r\n    <h1 class=\"hero-title\">Machines in Action<\/h1>\r\n    <p class=\"hero-subtitle\">\r\n      Watch our roll forming machines, solar solutions, and industrial equipment in operation.\r\n      Real footage from our factory floor and customer sites worldwide.\r\n    <\/p>\r\n    <div class=\"hero-badge\">\r\n      <span class=\"dot\"><\/span>\r\n      <span id=\"hero-video-count\">\u2014<\/span> Videos\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- \u2550\u2550\u2550 REFRESH BAR \u2550\u2550\u2550 -->\r\n<div class=\"refresh-bar\">\r\n  <button class=\"btn-refresh\" id=\"btn-refresh\" onclick=\"refreshAll()\">\r\n    <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><polyline points=\"23 4 23 10 17 10\"\/><path d=\"M20.49 15a9 9 0 1 1-2.12-9.36L23 10\"\/><\/svg>\r\n    Refresh\r\n  <\/button>\r\n<\/div>\r\n\r\n<!-- \u2550\u2550\u2550 STATUS \u2550\u2550\u2550 -->\r\n<div class=\"status-bar\">\r\n  <div class=\"status-msg\" id=\"status-msg\">\r\n    <span class=\"dot loading\"><\/span> Loading videos from YouTube\u2026\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- \u2550\u2550\u2550 CATEGORY TABS \u2550\u2550\u2550 -->\r\n<div class=\"tabs-wrap\">\r\n  <div class=\"tabs-inner\" id=\"tabs-container\"><\/div>\r\n<\/div>\r\n\r\n<!-- \u2550\u2550\u2550 MAIN CONTENT \u2550\u2550\u2550 -->\r\n<div class=\"main-area\">\r\n\r\n  <!-- PLAYER -->\r\n  <div class=\"player-section\">\r\n    <div class=\"player-frame\">\r\n      <iframe id=\"yt-player\" src=\"\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen title=\"Video player\"><\/iframe>\r\n    <\/div>\r\n    <div class=\"player-info\">\r\n      <div class=\"player-title\" id=\"player-title\">Loading playlist\u2026<\/div>\r\n      <div class=\"player-meta\" id=\"player-meta\"><\/div>\r\n      <div class=\"player-actions\">\r\n        <button class=\"btn-action btn-playall\" onclick=\"playAllPlaylist()\">\r\n          <svg width=\"13\" height=\"13\" viewBox=\"0 0 20 20\" fill=\"currentColor\"><polygon points=\"3,2 17,10 3,18\"\/><\/svg>\r\n          Play all\r\n        <\/button>\r\n        <button class=\"btn-action btn-outline\" onclick=\"pickRandomVideo()\">\r\n          <svg width=\"13\" height=\"13\" viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M3 7h10l4-4m0 0l-4-4m4 4H13m0 10H3m10 0l4-4m-4 4l4 4\"\/><\/svg>\r\n          Random\r\n        <\/button>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- CTA BAR: Subscribe + Request a quote (centered below player) -->\r\n  <div class=\"cta-bar\">\r\n    <!-- Subscribe to YouTube Channel -->\r\n    <a class=\"btn-subscribe\" id=\"btn-subscribe\" href=\"#\" target=\"_blank\" rel=\"noopener\">\r\n      <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M10 16.5l6-4.5-6-4.5v9zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z\"\/><\/svg>\r\n      Subscribe our channel\r\n    <\/a>\r\n    <!-- Request a quote -->\r\n    <a class=\"btn-quote\" id=\"btn-quote\" href=\"#\" target=\"_blank\" rel=\"noopener\">\r\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"\/><polyline points=\"14 2 14 8 20 8\"\/><line x1=\"9\" y1=\"15\" x2=\"15\" y2=\"15\"\/><line x1=\"9\" y1=\"18\" x2=\"15\" y2=\"18\"\/><\/svg>\r\n      Request a quote\r\n    <\/a>\r\n  <\/div>\r\n\r\n  <!-- GRID -->\r\n  <div class=\"grid-header\">\r\n    <div class=\"grid-title\">\r\n      <span id=\"grid-cat-name\">Videos<\/span>\r\n      <span class=\"grid-count\" id=\"grid-count\"><\/span>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div id=\"grid-area\">\r\n    <div class=\"skeleton-grid\" id=\"skeleton-grid\">\r\n      <div class=\"skeleton-card\"><div class=\"skeleton-thumb\"><\/div><div class=\"skeleton-body\"><div class=\"skeleton-line\"><\/div><div class=\"skeleton-line short\"><\/div><div class=\"skeleton-line tiny\"><\/div><\/div><\/div>\r\n      <div class=\"skeleton-card\"><div class=\"skeleton-thumb\"><\/div><div class=\"skeleton-body\"><div class=\"skeleton-line\"><\/div><div class=\"skeleton-line short\"><\/div><div class=\"skeleton-line tiny\"><\/div><\/div><\/div>\r\n      <div class=\"skeleton-card\"><div class=\"skeleton-thumb\"><\/div><div class=\"skeleton-body\"><div class=\"skeleton-line\"><\/div><div class=\"skeleton-line short\"><\/div><div class=\"skeleton-line tiny\"><\/div><\/div><\/div>\r\n      <div class=\"skeleton-card\"><div class=\"skeleton-thumb\"><\/div><div class=\"skeleton-body\"><div class=\"skeleton-line\"><\/div><div class=\"skeleton-line short\"><\/div><div class=\"skeleton-line tiny\"><\/div><\/div><\/div>\r\n      <div class=\"skeleton-card\"><div class=\"skeleton-thumb\"><\/div><div class=\"skeleton-body\"><div class=\"skeleton-line\"><\/div><div class=\"skeleton-line short\"><\/div><div class=\"skeleton-line tiny\"><\/div><\/div><\/div>\r\n      <div class=\"skeleton-card\"><div class=\"skeleton-thumb\"><\/div><div class=\"skeleton-body\"><div class=\"skeleton-line\"><\/div><div class=\"skeleton-line short\"><\/div><div class=\"skeleton-line tiny\"><\/div><\/div><\/div>\r\n      <div class=\"skeleton-card\"><div class=\"skeleton-thumb\"><\/div><div class=\"skeleton-body\"><div class=\"skeleton-line\"><\/div><div class=\"skeleton-line short\"><\/div><div class=\"skeleton-line tiny\"><\/div><\/div><\/div>\r\n      <div class=\"skeleton-card\"><div class=\"skeleton-thumb\"><\/div><div class=\"skeleton-body\"><div class=\"skeleton-line\"><\/div><div class=\"skeleton-line short\"><\/div><div class=\"skeleton-line tiny\"><\/div><\/div><\/div>\r\n    <\/div>\r\n    <div class=\"video-grid\" id=\"video-grid\" style=\"display:none;\"><\/div>\r\n    <div class=\"no-results\" id=\"no-results\" style=\"display:none;\">\r\n      <div>No videos found.<\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n<\/div>\r\n\r\n<script>\r\nconst CATEGORIES = [\r\n  {\r\n    id: 'construction',\r\n    name: 'Construction & Steel Structure',\r\n    color: '#3a6ba8',\r\n    playlistId: 'PLIdLHSelevdKkSepemeMEqoM4mrFMKOlL'\r\n  },\r\n  {\r\n    id: 'solar',\r\n    name: 'Solar & Electric',\r\n    color: '#c47a0a',\r\n    playlistId: 'PLIdLHSelevdLn3i_fQYUnjexMh3xmzNI8'\r\n  },\r\n  {\r\n    id: 'logistics',\r\n    name: 'Logistics & Storage',\r\n    color: '#2a7a4a',\r\n    playlistId: 'PLIdLHSelevdJ3oCMjCm3yyPy4jVPcbY0v'\r\n  },\r\n  {\r\n    id: 'doorwindow',\r\n    name: 'Door & Window',\r\n    color: '#b83030',\r\n    playlistId: 'PLIdLHSelevdJVhbMxACBXU0EvnLtj26zb'\r\n  }\r\n];\r\n\r\nlet ALL_VIDEOS = [];\r\nlet currentCategory = CATEGORIES[0].id;\r\nlet currentVideoId = null;\r\nlet fetchErrors = [];\r\n\r\n\/* \u2500\u2500 HELPERS \u2500\u2500 *\/\r\nfunction getCat(id) { return CATEGORIES.find(function(c) { return c.id === id; }); }\r\n\r\nfunction formatPubDate(dateStr) {\r\n  if (!dateStr) return '';\r\n  try {\r\n    var d = new Date(dateStr);\r\n    var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];\r\n    return months[d.getMonth()] + ' ' + d.getFullYear();\r\n  } catch(e) { return dateStr; }\r\n}\r\n\r\nfunction extractVideoId(url) {\r\n  if (!url) return '';\r\n  var match = url.match(\/[?&]v=([^&]+)\/);\r\n  if (match) return match[1];\r\n  match = url.match(\/\\\/watch\\\/([^?\/]+)\/);\r\n  if (match) return match[1];\r\n  return '';\r\n}\r\n\r\n\/* \u2500\u2500 FETCH \u2500\u2500 *\/\r\nasync function fetchPlaylistVideos(cat) {\r\n  var rssUrl = 'https:\/\/www.youtube.com\/feeds\/videos.xml?playlist_id=' + cat.playlistId;\r\n  var apiUrl = 'https:\/\/api.rss2json.com\/v1\/api.json?rss_url=' + encodeURIComponent(rssUrl);\r\n  try {\r\n    var resp = await fetch(apiUrl);\r\n    if (!resp.ok) throw new Error('HTTP ' + resp.status);\r\n    var data = await resp.json();\r\n    if (data.status !== 'ok' || !data.items || !data.items.length) throw new Error('Empty response');\r\n    return data.items.map(function(item) {\r\n      var vid = extractVideoId(item.link);\r\n      if (!vid && item.guid) { var m = String(item.guid).match(\/yt:video:(.+)\/); if (m) vid = m[1]; }\r\n      return { id: vid || '', title: item.title || 'Untitled', date: formatPubDate(item.pubDate), category: cat.id, thumbnail: item.thumbnail || '' };\r\n    }).filter(function(v) { return v.id; });\r\n  } catch(e) {\r\n    console.warn('Failed: ' + cat.name, e.message);\r\n    fetchErrors.push(cat.name + ': ' + e.message);\r\n    return [];\r\n  }\r\n}\r\n\r\nasync function fetchAllVideos() {\r\n  fetchErrors = [];\r\n  var results = await Promise.all(CATEGORIES.map(fetchPlaylistVideos));\r\n  ALL_VIDEOS = [];\r\n  results.forEach(function(v) { ALL_VIDEOS = ALL_VIDEOS.concat(v); });\r\n  return ALL_VIDEOS;\r\n}\r\n\r\n\/* \u2500\u2500 STATUS \u2500\u2500 *\/\r\nfunction setStatus(type, msg) {\r\n  var el = document.getElementById('status-msg');\r\n  var dotClass = type === 'loading' ? 'loading' : type === 'ok' ? 'ok' : 'err';\r\n  el.innerHTML = '<span class=\"dot ' + dotClass + '\"><\/span> ' + msg;\r\n}\r\n\r\n\/* \u2500\u2500 RENDER TABS \u2500\u2500 *\/\r\nfunction renderTabs() {\r\n  var container = document.getElementById('tabs-container');\r\n  container.innerHTML = CATEGORIES.map(function(c) {\r\n    var count = ALL_VIDEOS.filter(function(v) { return v.category === c.id; }).length;\r\n    var isActive = c.id === currentCategory;\r\n    return '<div class=\"tab-item' + (isActive ? ' active' : '') + '\" data-cat=\"' + c.id + '\">'\r\n      + '<div class=\"tab-diamond\" style=\"background:' + c.color + '\"><\/div>'\r\n      + c.name\r\n      + '<span class=\"tab-count\">' + count + '<\/span>'\r\n      + '<\/div>';\r\n  }).join('');\r\n}\r\n\r\ndocument.getElementById('tabs-container').addEventListener('click', function(e) {\r\n  var tab = e.target.closest('.tab-item');\r\n  if (tab) { var id = tab.getAttribute('data-cat'); if (id) switchCategory(id); }\r\n});\r\n\r\nfunction switchCategory(catId) {\r\n  currentCategory = catId;\r\n  renderTabs(); renderGrid(); playAllPlaylist();\r\n}\r\n\r\n\/* \u2500\u2500 PLAY \u2500\u2500 *\/\r\nfunction playVideo(videoId, title, catId) {\r\n  currentVideoId = videoId;\r\n  var cat = getCat(catId);\r\n  document.getElementById('yt-player').src = 'https:\/\/www.youtube.com\/embed\/' + videoId + '?rel=0&autoplay=1&modestbranding=1';\r\n  document.getElementById('player-title').textContent = title;\r\n  var s = cat ? 'background:' + cat.color + '12;color:' + cat.color : 'background:rgba(196,122,10,.08);color:var(--brand)';\r\n  document.getElementById('player-meta').innerHTML = '<span class=\"player-cat-badge\" style=\"' + s + '\">' + (cat ? cat.name : catId) + '<\/span>';\r\n  renderGrid();\r\n  window.scrollTo({ top: 0, behavior: 'smooth' });\r\n}\r\n\r\nfunction playAllPlaylist() {\r\n  var cat = getCat(currentCategory);\r\n  if (!cat || !cat.playlistId) return;\r\n  document.getElementById('yt-player').src = 'https:\/\/www.youtube.com\/embed\/videoseries?list=' + cat.playlistId + '&rel=0&autoplay=1&modestbranding=1';\r\n  document.getElementById('player-title').textContent = cat.name + ' \u2014 Full Playlist';\r\n  var s = 'background:' + cat.color + '12;color:' + cat.color;\r\n  document.getElementById('player-meta').innerHTML = '<span class=\"player-cat-badge\" style=\"' + s + '\">' + cat.name + '<\/span>';\r\n  currentVideoId = null;\r\n  renderGrid();\r\n}\r\n\r\nfunction pickRandomVideo() {\r\n  var list = getFilteredVideos();\r\n  if (list.length) { var v = list[Math.floor(Math.random() * list.length)]; playVideo(v.id, v.title, v.category); }\r\n}\r\n\r\nfunction getFilteredVideos() {\r\n  return ALL_VIDEOS.filter(function(v) { return v.category === currentCategory; });\r\n}\r\n\r\n\/* \u2500\u2500 RENDER GRID \u2500\u2500 *\/\r\nfunction renderGrid() {\r\n  var grid = document.getElementById('video-grid');\r\n  var skeleton = document.getElementById('skeleton-grid');\r\n  var noRes = document.getElementById('no-results');\r\n  var cat = getCat(currentCategory);\r\n  var videos = getFilteredVideos();\r\n\r\n  document.getElementById('grid-cat-name').textContent = cat ? cat.name : 'Videos';\r\n  document.getElementById('grid-count').textContent = '(' + videos.length + ' videos)';\r\n  skeleton.style.display = 'none';\r\n\r\n  if (!videos.length) { grid.style.display = 'none'; noRes.style.display = ''; return; }\r\n  noRes.style.display = 'none'; grid.style.display = '';\r\n\r\n  grid.innerHTML = videos.map(function(v, idx) {\r\n    var vCat = getCat(v.category);\r\n    var bs = vCat ? 'background:' + vCat.color + '12;color:' + vCat.color : 'background:rgba(196,122,10,.08);color:var(--brand)';\r\n    var isActive = v.id === currentVideoId;\r\n    var thumb = v.thumbnail || ('https:\/\/img.youtube.com\/vi\/' + v.id + '\/mqdefault.jpg');\r\n    return '<div class=\"video-card' + (isActive ? ' active' : '') + '\" data-vid=\"' + v.id + '\" data-title=\"' + v.title.replace(\/\"\/g,'&quot;').replace(\/<\/g,'&lt;') + '\" data-cat=\"' + v.category + '\">'\r\n      + '<div class=\"card-thumb\">'\r\n      + '<img decoding=\"async\" src=\"' + thumb + '\" alt=\"\" loading=\"lazy\" onerror=\"this.src=\\'https:\/\/img.youtube.com\/vi\/' + v.id + '\/mqdefault.jpg\\'\" \/>'\r\n      + '<div class=\"card-play-overlay\"><div class=\"card-play-btn\"><\/div><\/div>'\r\n      + '<span class=\"card-index\">' + (idx+1) + '<\/span>'\r\n      + '<\/div>'\r\n      + '<div class=\"card-body\">'\r\n      + '<div class=\"card-title\">' + v.title.replace(\/<\/g,'&lt;') + '<\/div>'\r\n      + (v.date ? '<div class=\"card-date\">' + v.date + '<\/div>' : '')\r\n      + '<span class=\"card-category\" style=\"' + bs + '\">' + (vCat ? vCat.name : v.category) + '<\/span>'\r\n      + '<\/div><\/div>';\r\n  }).join('');\r\n}\r\n\r\ndocument.getElementById('video-grid').addEventListener('click', function(e) {\r\n  var card = e.target.closest('.video-card');\r\n  if (!card) return;\r\n  var vid = card.getAttribute('data-vid');\r\n  var title = card.getAttribute('data-title');\r\n  var cat = card.getAttribute('data-cat');\r\n  if (vid) playVideo(vid, title, cat);\r\n});\r\n\r\n\/* \u2500\u2500 REFRESH \u2500\u2500 *\/\r\nasync function refreshAll() {\r\n  var btn = document.getElementById('btn-refresh');\r\n  btn.classList.add('spinning');\r\n  document.getElementById('skeleton-grid').style.display = '';\r\n  document.getElementById('video-grid').style.display = 'none';\r\n  document.getElementById('no-results').style.display = 'none';\r\n  setStatus('loading', 'Refreshing videos from YouTube\u2026');\r\n  await fetchAllVideos();\r\n  renderTabs(); renderGrid(); playAllPlaylist();\r\n  btn.classList.remove('spinning');\r\n  updateHeroCount();\r\n  if (fetchErrors.length) setStatus('err', 'Some playlists failed: ' + fetchErrors.join('; '));\r\n  else setStatus('ok', 'Loaded ' + ALL_VIDEOS.length + ' videos from ' + CATEGORIES.length + ' playlists');\r\n}\r\n\r\nfunction updateHeroCount() {\r\n  var el = document.getElementById('hero-video-count');\r\n  if (el) el.textContent = ALL_VIDEOS.length;\r\n}\r\n\r\n\/* \u2500\u2500 INIT \u2500\u2500 *\/\r\n(async function init() {\r\n  \/\/ Set Subscribe button link (uses YouTube handle format)\r\n  var subBtn = document.getElementById('btn-subscribe');\r\n  if (subBtn) subBtn.href = 'https:\/\/www.youtube.com\/' + CHANNEL_HANDLE + '?sub_confirmation=1';\r\n\r\n  \/\/ Set Quote button link\r\n  var quoteBtn = document.getElementById('btn-quote');\r\n  if (quoteBtn) quoteBtn.href = QUOTE_LINK;\r\n\r\n  setStatus('loading', 'Loading videos from YouTube\u2026');\r\n  renderTabs(); playAllPlaylist();\r\n  await fetchAllVideos();\r\n  renderTabs(); renderGrid(); updateHeroCount();\r\n  if (fetchErrors.length) setStatus('err', 'Some playlists failed: ' + fetchErrors.join('; '));\r\n  else setStatus('ok', 'Loaded ' + ALL_VIDEOS.length + ' videos from ' + CATEGORIES.length + ' playlists');\r\n})();\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Believe Industry \u2014 Hab Video Believe Industry Machines in Action Saksikan mesin pembentukan gulung, penyelesaian solar dan peralatan perindustrian kami beroperasi. Rakaman sebenar dari tingkat kilang dan tapak pelanggan kami di seluruh dunia. \u2014 Video Muat Semula Memuatkan video daripada YouTube\u2026 Memuatkan senarai main\u2026 Mainkan semua Rawak Langgan saluran kami Minta sebut harga Video Tiada video ditemui.<\/p>","protected":false},"author":2,"featured_media":1572,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_wpcom_ai_launchpad_about_page":false,"_wpcom_ai_launchpad_gallery_page":false,"_wpcom_ai_launchpad_contact_page":false,"_wpcom_ai_launchpad_events_page":false,"_wpcom_ai_launchpad_video_page":false,"_wpcom_ai_launchpad_portfolio_piece":false,"footnotes":"","big_sky_generated":false},"tags":[],"class_list":["post-1272","page","type-page","status-publish","has-post-thumbnail","hentry"],"blocksy_meta":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/P9K5n8-kw","jetpack_likes_enabled":false,"jetpack-related-posts":[{"id":285,"url":"https:\/\/believeindustry.company\/ms\/contact\/","url_meta":{"origin":1272,"position":0},"title":"Kenalan","author":"Believe Industry Group","date":"Ogos 17, 2020","format":false,"excerpt":"Get In Touch Let's Engineer Your Roll Forming Line Tell us your profile, material, and production target. Our engineers reply with a tailored proposal within 24 hours. 15+ Years Experience Exported to 60+ Countries ISO-Certified Factory 24-Hour Reply Talk to Our Team Two offices in China, serving customers worldwide. Reach\u2026","rel":"","context":"Similar post","block_context":{"text":"Similar post","link":""},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":22918,"url":"https:\/\/believeindustry.company\/ms\/buyer-guide\/","url_meta":{"origin":1272,"position":1},"title":"Panduan Beli Mesin Pembentuk Gulungan","author":"Believe Industry Group","date":"Jun 13, 2026","format":false,"excerpt":"Hab Panduan Pembeli Mesin Pembentuk Gulungan \u2014 Panduan &amp; Perbandingan Pembelian Pakar | Mesin Pembentuk Gulungan Suapan Langsung Believe IndustryPanduan Pembeli Semua yang anda perlu tahu sebelum membuat pesanan. Nasihat dunia sebenar daripada 20+ tahun pengalaman pembuatan \u2014 tiada bahang, cuma yang penting. -- Panduan 2026 Dikemas kini 20+ Tahun\u2026","rel":"","context":"Similar post","block_context":{"text":"Similar post","link":""},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3116,"url":"https:\/\/believeindustry.company\/ms\/request-a-quote\/","url_meta":{"origin":1272,"position":2},"title":"Minta sebut harga","author":"Believe Industry Group","date":"Oktober 8, 2018","format":false,"excerpt":"Minta Sebut Harga | Believe Industry Company \u2014 Harga &amp; Cadangan Mesin Pembentuk Gulungan Tersuai Langkau ke kandungan utama Laman Utama \/ Minta Sebut Harga Dapatkan Harga Minta Sebut Harga untuk Mesin Pembentuk Gulungan Anda Isi keperluan anda dan pasukan kejuruteraan kami akan menyediakan cadangan terperinci dan kompetitif dalam tempoh 24\u201348\u2026","rel":"","context":"Similar post","block_context":{"text":"Similar post","link":""},"img":{"alt_text":"request a quote","src":"https:\/\/i0.wp.com\/believeindustry.company\/wp-content\/uploads\/2018\/10\/request-a-quote.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/believeindustry.company\/wp-content\/uploads\/2018\/10\/request-a-quote.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/believeindustry.company\/wp-content\/uploads\/2018\/10\/request-a-quote.jpg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/believeindustry.company\/wp-content\/uploads\/2018\/10\/request-a-quote.jpg?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/believeindustry.company\/wp-content\/uploads\/2018\/10\/request-a-quote.jpg?resize=1050%2C600&ssl=1 3x"},"classes":[]},{"id":345,"url":"https:\/\/believeindustry.company\/ms\/faqs\/","url_meta":{"origin":1272,"position":3},"title":"Soalan Lazim","author":"Believe Industry Group","date":"Mac 16, 2018","format":false,"excerpt":"Believe Industry Company - Soalan Lazim BELI ROLLFORMING \u2014 Soalan Lazim Believe Industry Company | Mesin Pembentuk Gulungan Sejuk Pengeluar Diperakui ISO &amp; CE | 15+ Tahun | 50+ Negara Produk Syarikat Teknologi Perkhidmatan Pesanan Hubungi 15+ Tahun Pengalaman 80+ Jurutera &amp; Kakitangan 50+ Negara Eksport 500+ Projek Dihantar Gambaran Keseluruhan Syarikat 01 Apakah jenis syarikat\u2026","rel":"","context":"Similar post","block_context":{"text":"Similar post","link":""},"img":{"alt_text":"pexels-photo-356079","src":"https:\/\/i0.wp.com\/believeindustry.company\/wp-content\/uploads\/2018\/03\/pexels-photo-356079.jpeg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/believeindustry.company\/wp-content\/uploads\/2018\/03\/pexels-photo-356079.jpeg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/believeindustry.company\/wp-content\/uploads\/2018\/03\/pexels-photo-356079.jpeg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/believeindustry.company\/wp-content\/uploads\/2018\/03\/pexels-photo-356079.jpeg?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":7645,"url":"https:\/\/believeindustry.company\/ms\/about-believe-industry\/","url_meta":{"origin":1272,"position":4},"title":"Mengenai Percaya Industri","author":"Believe Industry Group","date":"Ogos 11, 2020","format":false,"excerpt":"Perihal Believe Industry | Pengilang Mesin Pembentuk Gulungan Global Sejak 2005 \u00b7 Pengilang Global Believe Industry Company Kami Roll Form The Future Pengilang mesin pembentuk gulung bertaraf dunia dengan kecemerlangan kejuruteraan selama 20+ tahun. Dari kemudahan 10,000m\u00b2 kami di Wuxi, China, kami menyediakan penyelesaian pembentuk gulung jitu kepada pelanggan di seluruh\u2026","rel":"","context":"Similar post","block_context":{"text":"Similar post","link":""},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":21105,"url":"https:\/\/believeindustry.company\/ms\/metal-coil-calculator\/","url_meta":{"origin":1272,"position":5},"title":"Kalkulator Gegelung Logam Percuma","author":"Believe Industry Group","date":"Mac 20, 2026","format":false,"excerpt":"Syarikat Believe Industry (Beli Rollforming) - Kalkulator Gegelung Logam Syarikat Believe Industry (Beli Rollforming) \ud83d\udcde +86 18616927760 | \u2709\ufe0f Enquiry@believeindustry.com | \ud83c\udf10 believeindustry.company Kalkulator Gegelung Logam Bahan Karbon Keluli Keluli Tahan Karat Aluminium Kuprum Mod 1: Berat Diketahui Mod 2: Diameter Diketahui Lebar Gegelung (mm) Ketebalan Gegelung (mm) Berat Gegelung (kg)\u2026","rel":"","context":"Similar post","block_context":{"text":"Similar post","link":""},"img":{"alt_text":"Metal Coil Calculator","src":"https:\/\/i0.wp.com\/believeindustry.company\/wp-content\/uploads\/2026\/04\/coil-scheme.webp?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/believeindustry.company\/wp-content\/uploads\/2026\/04\/coil-scheme.webp?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/believeindustry.company\/wp-content\/uploads\/2026\/04\/coil-scheme.webp?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/believeindustry.company\/wp-content\/uploads\/2026\/04\/coil-scheme.webp?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/believeindustry.company\/wp-content\/uploads\/2026\/04\/coil-scheme.webp?resize=1050%2C600&ssl=1 3x"},"classes":[]}],"_links":{"self":[{"href":"https:\/\/believeindustry.company\/ms\/wp-json\/wp\/v2\/pages\/1272","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/believeindustry.company\/ms\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/believeindustry.company\/ms\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/believeindustry.company\/ms\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/believeindustry.company\/ms\/wp-json\/wp\/v2\/comments?post=1272"}],"version-history":[{"count":35,"href":"https:\/\/believeindustry.company\/ms\/wp-json\/wp\/v2\/pages\/1272\/revisions"}],"predecessor-version":[{"id":22983,"href":"https:\/\/believeindustry.company\/ms\/wp-json\/wp\/v2\/pages\/1272\/revisions\/22983"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/believeindustry.company\/ms\/wp-json\/wp\/v2\/media\/1572"}],"wp:attachment":[{"href":"https:\/\/believeindustry.company\/ms\/wp-json\/wp\/v2\/media?parent=1272"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/believeindustry.company\/ms\/wp-json\/wp\/v2\/tags?post=1272"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}