{"id":1039,"date":"2026-08-03T23:32:48","date_gmt":"2026-08-03T23:32:48","guid":{"rendered":"https:\/\/lab.rwb.my.id\/sma\/?page_id=1039"},"modified":"2026-08-07T15:29:01","modified_gmt":"2026-08-07T15:29:01","slug":"about","status":"publish","type":"page","link":"https:\/\/lab.rwb.my.id\/sma\/about\/","title":{"rendered":"About"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1039\" class=\"elementor elementor-1039\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a24e225 e-con-full e-flex e-con e-parent\" data-id=\"a24e225\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0029589 elementor-widget elementor-widget-html\" data-id=\"0029589\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n\n<style>\n\/* === ABOUT HERO SPLIT REVEAL VARIABLES === *\/\n:root {\n  --clay-bg: #E6E7EE; \n  --clay-text: #3A3A3A;\n  --clay-accent: #F472B6;\n  --clay-accent-soft: #F9A8D4;\n  --clay-shadow-dark: #C5C6D0; \n  --clay-shadow-light: #FFFFFF;\n}\n\n.about-hero-wrap * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }\n\n.about-hero-wrap {\n  background: var(--clay-bg);\n  min-height: 100vh;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  padding: 120px 40px 80px;\n  overflow: hidden;\n}\n\n.about-container {\n  max-width: 1200px;\n  width: 100%;\n  margin: 0 auto;\n  display: flex;\n  align-items: center;\n  gap: 60px;\n}\n\n\/* === KIRI: KONTEN TEKS === *\/\n.about-content {\n  flex: 1;\n  z-index: 2;\n}\n\n.about-badge {\n  display: inline-flex; align-items: center; gap: 8px;\n  padding: 8px 18px; border-radius: 20px;\n  font-size: 0.7rem; font-weight: 600; color: var(--clay-accent); \n  margin-bottom: 1.5rem; \n  background: rgba(255, 255, 255, 0.4);\n  border: 1px solid rgba(255, 255, 255, 0.6);\n  box-shadow: inset 2px 2px 4px rgba(255,255,255,0.5), inset -2px -2px 4px rgba(0,0,0,0.05);\n}\n.about-badge span { width: 6px; height: 6px; border-radius: 50%; background: var(--clay-accent); box-shadow: 0 0 8px var(--clay-accent); }\n\n.about-content h1 {\n  font-size: clamp(1.6rem, 4vw, 2.4rem);\n  font-weight: 700; color: var(--clay-text); line-height: 1.3;\n  margin-bottom: 1.2rem; letter-spacing: -0.5px;\n}\n.about-content h1 em {\n  font-style: normal; \n  background: linear-gradient(45deg, #F472B6, #A855F7); \n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n}\n\n.about-content p {\n  font-size: 0.85rem; color: #6B7280; font-weight: 300; line-height: 1.7;\n  margin-bottom: 2rem; max-width: 500px;\n}\n\n.about-btns { display: flex; gap: 1rem; flex-wrap: wrap; }\n\n.clay-btn-primary {\n  padding: 14px 32px; border-radius: 12px; font-weight: 600; font-size: 0.85rem; color: #fff !important;\n  background-color: var(--clay-accent) !important; \n  box-shadow: 4px 4px 10px var(--clay-shadow-dark), -4px -4px 10px var(--clay-shadow-light), inset 2px 2px 4px var(--clay-accent-soft), inset -2px -2px 4px rgba(0,0,0,0.1) !important;\n  transition: transform 0.2s ease;\n  text-decoration: none;\n  display: inline-block;\n}\n.clay-btn-primary:hover { \n  transform: translateY(-2px); \n  background-color: var(--clay-accent) !important;\n  color: #fff !important;\n  box-shadow: 6px 6px 15px var(--clay-shadow-dark), -6px -6px 15px var(--clay-shadow-light) !important;\n}\n\n.clay-btn-ghost {\n  padding: 14px 32px; border-radius: 12px; font-weight: 600; font-size: 0.85rem; color: var(--clay-text) !important;\n  background-color: rgba(255,255,255,0.5) !important; \n  border: 1px solid rgba(255,255,255,0.6) !important;\n  box-shadow: 4px 4px 10px var(--clay-shadow-dark), -4px -4px 10px var(--clay-shadow-light) !important;\n  transition: transform 0.2s ease;\n  text-decoration: none;\n  display: inline-block;\n}\n.clay-btn-ghost:hover { \n  transform: translateY(-2px); \n  background-color: rgba(255,255,255,0.7) !important;\n  color: var(--clay-text) !important;\n}\n\n\/* === KANAN: VISUAL FOTO & EFEK TIRAI === *\/\n.about-visual {\n  flex: 1;\n  position: relative;\n  z-index: 1;\n}\n\n.clay-frame {\n  position: relative;\n  width: 100%;\n  aspect-ratio: 4\/5; \n  border-radius: 32px;\n  background: var(--clay-bg);\n  box-shadow: 20px 20px 40px var(--clay-shadow-dark), -20px -20px 40px var(--clay-shadow-light) !important;\n  overflow: hidden;\n}\n\n\/* GARIS PINK MENYALA DARI BRANKAS *\/\n.clay-frame::before {\n  content: '';\n  position: absolute;\n  top: 0; left: 0; right: 0; height: 2px;\n  background: linear-gradient(90deg, transparent, var(--clay-accent), transparent);\n  opacity: 0.5;\n  z-index: 4; \n}\n\n\/* LAPISAN BAYANGAN CEKUNG DI ATAS FOTO *\/\n.clay-frame::after {\n  content: '';\n  position: absolute;\n  top: 0; left: 0; right: 0; bottom: 0;\n  border-radius: 32px;\n  pointer-events: none; \n  z-index: 3; \n  box-shadow: inset 8px 8px 16px var(--clay-shadow-dark), inset -8px -8px 16px var(--clay-shadow-light) !important;\n}\n\n.clay-frame img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n}\n\n.curtain-overlay {\n  position: absolute;\n  top: 0; left: 0; right: 0; bottom: 0;\n  background: var(--clay-bg);\n  z-index: 2;\n  transform: translateY(0); \n  transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1);\n}\n\n.clay-frame.is-revealed .curtain-overlay {\n  transform: translateY(100%); \n}\n\n.float-stats-card {\n  position: absolute;\n  bottom: 30px;\n  left: -30px;\n  background: var(--clay-bg);\n  padding: 15px 20px;\n  border-radius: 16px;\n  box-shadow: 6px 6px 12px var(--clay-shadow-dark), -6px -6px 12px var(--clay-shadow-light);\n  z-index: 5;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  opacity: 0;\n  transform: translateY(20px);\n  transition: opacity 0.8s ease 0.8s, transform 0.8s ease 0.8s; \n}\n.clay-frame.is-revealed ~ .float-stats-card {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n.stats-icon {\n  width: 40px; height: 40px;\n  border-radius: 10px;\n  background: var(--clay-accent);\n  display: flex; align-items: center; justify-content: center;\n  color: #fff;\n  box-shadow: inset 2px 2px 4px var(--clay-accent-soft), 0 4px 10px rgba(244, 114, 182, 0.3);\n}\n.stats-icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; }\n.stats-text h4 { font-size: 1.2rem; font-weight: 700; color: var(--clay-text); }\n.stats-text p { font-size: 0.7rem; color: #9CA3AF; font-weight: 500; }\n\n\/* === ANIMASI FADE UP === *\/\n.fade-up {\n  opacity: 0;\n  transform: translateY(30px);\n  transition: opacity 0.8s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);\n}\n.fade-up.is-visible { opacity: 1; transform: translateY(0); }\n\n\/* === RESPONSIVE MOBILE === *\/\n@media (max-width: 768px) {\n  .about-hero-wrap { padding: 70px 20px 60px; }\n  .about-container { flex-direction: column; gap: 40px; }\n  .about-content { text-align: center; }\n  .about-btns { justify-content: center; }\n  .about-content p { margin-left: auto; margin-right: auto; }\n  .float-stats-card { left: 50%; transform: translate(-50%, 20px); }\n  .clay-frame.is-revealed ~ .float-stats-card { transform: translate(-50%, 0); }\n}\n\n\/* ====================================================== *\/\n\/* === PEMBUNUH WARNA MERAH ELEMENTOR (NUCLEAR OPTION) === *\/\n\/* ====================================================== *\/\n.about-hero-wrap button, \n.about-hero-wrap a {\n  background-image: none !important;\n  border: none !important;\n  outline: none !important;\n  text-decoration: none !important;\n  -webkit-tap-highlight-color: transparent !important;\n}\n\n.about-hero-wrap button:hover, \n.about-hero-wrap button:focus, \n.about-hero-wrap button:focus-visible,\n.about-hero-wrap button:active,\n.about-hero-wrap a:hover, \n.about-hero-wrap a:focus, \n.about-hero-wrap a:active {\n  outline: none !important;\n  border: none !important;\n  color: inherit !important;\n  background-color: transparent !important; \n  text-decoration: none !important;\n}\n<\/style>\n\n<section class=\"about-hero-wrap\" id=\"aboutHero\">\n  <div class=\"about-container\">\n    \n    <!-- KIRI: TEKS -->\n    <div class=\"about-content\">\n      <div class=\"about-badge fade-up\"><span><\/span> About RWB Agency<\/div>\n      <h1 class=\"fade-up\">Crafting Digital <em>Excellence<\/em> Since Day One<\/h1>\n      <p class=\"fade-up\">We are a team of passionate creators dedicated to building immersive, high-performance digital experiences. We blend art with technology to bring your visionary ideas into reality.<\/p>\n      \n      <div class=\"about-btns fade-up\">\n        <a href=\"https:\/\/dev.rwb.my.id\/\" class=\"clay-btn-primary\">Meet the Team<\/a>\n        <a href=\"https:\/\/dev.rwb.my.id\/template\/\" class=\"clay-btn-ghost\">Our History<\/a>\n      <\/div>\n    <\/div>\n\n    <!-- KANAN: FOTO & TIRAI -->\n    <div class=\"about-visual\">\n      <div class=\"clay-frame\" id=\"clayFrame\">\n        <img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/sma\/wp-content\/uploads\/sites\/7\/2026\/08\/Laboratorium-IPA.jpeg\" alt=\"RWB Team\">\n        <div class=\"curtain-overlay\"><\/div>\n      <\/div>\n      \n      <!-- Kartu Statistik Dekorasi -->\n      <div class=\"float-stats-card\">\n        <div class=\"stats-icon\">\n          <svg viewBox=\"0 0 24 24\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 2L15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"><\/path><\/svg>\n        <\/div>\n        <div class=\"stats-text\">\n          <h4>150+<\/h4>\n          <p>PROJECTS DONE<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n  const aboutObserver = new IntersectionObserver((entries) => {\n    entries.forEach(entry => {\n      if (entry.isIntersecting) {\n        entry.target.classList.add('is-visible');\n        aboutObserver.unobserve(entry.target);\n      }\n    });\n  }, { threshold: 0.2 });\n\n  document.querySelectorAll('.fade-up').forEach(el => {\n    aboutObserver.observe(el);\n  });\n\n  const clayFrame = document.getElementById('clayFrame');\n  const frameObserver = new IntersectionObserver((entries) => {\n    entries.forEach(entry => {\n      if (entry.isIntersecting) {\n        clayFrame.classList.add('is-revealed');\n        frameObserver.unobserve(clayFrame);\n      }\n    });\n  }, { threshold: 0.3 });\n\n  frameObserver.observe(clayFrame);\n});\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a7e616c e-con-full e-flex e-con e-parent\" data-id=\"a7e616c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-db1a27e elementor-widget elementor-widget-html\" data-id=\"db1a27e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n\n<style>\n\/* === CLAY TIMELINE VARIABLES === *\/\n:root {\n  --clay-bg: #E6E7EE; \n  --clay-text: #3A3A3A;\n  --clay-accent: #F472B6;\n  --clay-accent-soft: #F9A8D4;\n  --clay-shadow-dark: #C5C6D0; \n  --clay-shadow-light: #FFFFFF;\n}\n\n.timeline-section-wrap * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }\n\n.timeline-section-wrap {\n  position: relative;\n  background: var(--clay-bg);\n  padding: 60px 20px 100px; \/* Ditambah top padding 60px biar turun sedikit *\/\n  overflow: hidden;\n}\n\n\/* BADGE WRAPPER *\/\n.timeline-badge-wrap {\n  text-align: center;\n  margin-bottom: 60px;\n  position: relative;\n  z-index: 2;\n}\n\n\/* BADGE SERAGAM *\/\n.timeline-badge {\n  display: inline-flex; align-items: center; gap: 8px;\n  padding: 8px 18px; border-radius: 20px;\n  font-size: 0.7rem; font-weight: 600; color: var(--clay-accent); \n  background: rgba(255, 255, 255, 0.4);\n  border: 1px solid rgba(255, 255, 255, 0.6);\n  box-shadow: inset 2px 2px 4px rgba(255,255,255,0.5), inset -2px -2px 4px rgba(0,0,0,0.05);\n}\n.timeline-badge span { width: 6px; height: 6px; border-radius: 50%; background: var(--clay-accent); box-shadow: 0 0 8px var(--clay-accent); }\n\n\/* === STRUKTUR TIMELINE === *\/\n.timeline-container {\n  position: relative;\n  max-width: 900px;\n  margin: 0 auto;\n}\n\n\/* GARIS TENGAH CLAYMORPHISM *\/\n.timeline-line {\n  position: absolute;\n  left: 50%;\n  top: 0;\n  bottom: 0;\n  transform: translateX(-50%);\n  width: 8px;\n  border-radius: 4px;\n  background: var(--clay-bg);\n  box-shadow: inset 2px 2px 4px var(--clay-shadow-dark), inset -2px -2px 4px var(--clay-shadow-light);\n  z-index: 0;\n}\n\n\/* WRAPPER KARTU *\/\n.timeline-item {\n  position: relative;\n  margin-bottom: 60px;\n  width: 50%;\n  z-index: 1;\n}\n\n\/* POSISI KIRI KANAN (DESKTOP) *\/\n.timeline-item:nth-child(odd) { left: 0; padding-right: 40px; }\n.timeline-item:nth-child(even) { left: 50%; padding-left: 40px; }\n\n\/* KARTU CLAY *\/\n.timeline-card {\n  background: var(--clay-bg);\n  padding: 25px;\n  border-radius: 20px;\n  box-shadow: 6px 6px 12px var(--clay-shadow-dark), -6px -6px 12px var(--clay-shadow-light);\n  position: relative;\n  opacity: 0;\n  transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);\n}\n\n\/* ANIMASI SLIDE DARI KIRI KANAN (FIXED SPECIFICITY) *\/\n.timeline-item:nth-child(odd) .timeline-card { transform: translateX(-50px); }\n.timeline-item:nth-child(even) .timeline-card { transform: translateX(50px); }\n\n\/* SAAT is-visible DITAMBAHKAN, KEMBALIKAN KE 0 *\/\n.timeline-item .timeline-card.is-visible { \n  opacity: 1; \n  transform: translateX(0); \n}\n\n\/* TITIK KONEKSI (DOT) *\/\n.timeline-card::after {\n  content: '';\n  position: absolute;\n  top: 28px;\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  background: var(--clay-bg);\n  box-shadow: 3px 3px 6px var(--clay-shadow-dark), -3px -3px 6px var(--clay-shadow-light);\n}\n\n\/* POSISI DOT (KIRI KANAN) *\/\n.timeline-item:nth-child(odd) .timeline-card::after { right: -48px; }\n.timeline-item:nth-child(even) .timeline-card::after { left: -48px; }\n\n\/* UKURAN TEKS SAMA HOME HERO *\/\n.timeline-card h3 {\n  font-size: clamp(1.6rem, 4vw, 2.4rem);\n  font-weight: 700; color: var(--clay-text); line-height: 1.3;\n  margin-bottom: 0.8rem; letter-spacing: -0.5px;\n}\n.timeline-card h3 em {\n  font-style: normal; \n  background: linear-gradient(45deg, #F472B6, #A855F7); \n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n}\n.timeline-card p {\n  font-size: 0.85rem; color: #6B7280; font-weight: 300; line-height: 1.7;\n}\n\n\/* === RESPONSIVE MOBILE === *\/\n@media (max-width: 768px) {\n  .timeline-section-wrap {\n    padding: 40px 20px 80px; \/* Top padding 40px di mobile *\/\n  }\n  \/* Garis pindah ke kiri *\/\n  .timeline-line { left: 20px; transform: none; }\n  \n  \/* Semua kartu pindah ke kanan garis *\/\n  .timeline-item { \n    width: 100%; \n    left: 0 !important; \n    padding-left: 55px; \n    padding-right: 0; \n    margin-bottom: 40px;\n  }\n  \n  \/* Animasi jadi fade up biasa di mobile (FIXED SPECIFICITY) *\/\n  .timeline-item:nth-child(odd) .timeline-card, \n  .timeline-item:nth-child(even) .timeline-card { \n    transform: translateY(30px); \n  }\n  .timeline-item .timeline-card.is-visible { \n    transform: translateY(0); \n  }\n  \n  \/* Posisi dot di kanan kartu (nempel ke garis) *\/\n  .timeline-item:nth-child(odd) .timeline-card::after,\n  .timeline-item:nth-child(even) .timeline-card::after {\n    left: -43px;\n    right: auto;\n  }\n}\n\n\/* ====================================================== *\/\n\/* === PEMBUNUH WARNA MERAH ELEMENTOR (NUCLEAR OPTION) === *\/\n\/* ====================================================== *\/\n.timeline-section-wrap button, \n.timeline-section-wrap a {\n  background-image: none !important;\n  border: none !important;\n  outline: none !important;\n  text-decoration: none !important;\n  -webkit-tap-highlight-color: transparent !important;\n}\n\n.timeline-section-wrap button:hover, \n.timeline-section-wrap button:focus, \n.timeline-section-wrap button:focus-visible,\n.timeline-section-wrap button:active,\n.timeline-section-wrap a:hover, \n.timeline-section-wrap a:focus, \n.timeline-section-wrap a:active {\n  outline: none !important;\n  border: none !important;\n  color: inherit !important;\n  background-color: transparent !important; \n  text-decoration: none !important;\n}\n<\/style>\n\n<section class=\"timeline-section-wrap\" id=\"clayTimeline\">\n  \n  <div class=\"timeline-badge-wrap\">\n    <div class=\"timeline-badge\"><span><\/span> Our Journey<\/div>\n  <\/div>\n\n  <div class=\"timeline-container\">\n    <div class=\"timeline-line\"><\/div>\n\n    <!-- KARTU 1 -->\n    <div class=\"timeline-item\">\n      <div class=\"timeline-card\">\n        <h3>2020 <em>Founded<\/em><\/h3>\n        <p>RWB Agency was born with a simple mission: to break the mundane web design trends and craft digital experiences that truly matter.<\/p>\n      <\/div>\n    <\/div>\n\n    <!-- KARTU 2 -->\n    <div class=\"timeline-item\">\n      <div class=\"timeline-card\">\n        <h3>2022 <em>150+ Projects<\/em><\/h3>\n        <p>Trusted by global brands, we successfully delivered over 150 high-performance websites with zero heavy libraries.<\/p>\n      <\/div>\n    <\/div>\n\n    <!-- KARTU 3 -->\n    <div class=\"timeline-item\">\n      <div class=\"timeline-card\">\n        <h3>2024 <em>Award Winning<\/em><\/h3>\n        <p>Recognized for our out-of-the-box UI\/UX and Claymorphism aesthetics, setting a new standard in modern web design.<\/p>\n      <\/div>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n  \/\/ === INTERSECTION OBSERVER (KARTU SLIDE IN) ===\n  const timelineObserver = new IntersectionObserver((entries) => {\n    entries.forEach(entry => {\n      if (entry.isIntersecting) {\n        entry.target.classList.add('is-visible');\n        timelineObserver.unobserve(entry.target);\n      }\n    });\n  }, { threshold: 0.2 });\n\n  document.querySelectorAll('.timeline-card').forEach(card => {\n    timelineObserver.observe(card);\n  });\n});\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9d5438c e-con-full e-flex e-con e-parent\" data-id=\"9d5438c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8daab6e elementor-widget elementor-widget-html\" data-id=\"8daab6e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n\n<style>\n\/* === SQUISHY TEAM GRID VARIABLES === *\/\n:root {\n  --clay-bg: #E6E7EE; \n  --clay-text: #3A3A3A;\n  --clay-accent: #F472B6;\n  --clay-accent-soft: #F9A8D4;\n  --clay-shadow-dark: #C5C6D0; \n  --clay-shadow-light: #FFFFFF;\n}\n\n.team-section-wrap * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }\n\n.team-section-wrap {\n  position: relative;\n  background: var(--clay-bg);\n  padding: 60px 20px 100px; \n  overflow: hidden;\n}\n\n.team-header {\n  text-align: center;\n  margin-bottom: 60px;\n}\n\n.team-badge {\n  display: inline-flex; align-items: center; gap: 8px;\n  padding: 8px 18px; border-radius: 20px;\n  font-size: 0.7rem; font-weight: 600; color: var(--clay-accent); \n  margin-bottom: 1.5rem; \n  background: rgba(255, 255, 255, 0.4);\n  border: 1px solid rgba(255, 255, 255, 0.6);\n  box-shadow: inset 2px 2px 4px rgba(255,255,255,0.5), inset -2px -2px 4px rgba(0,0,0,0.05);\n}\n.team-badge span { width: 6px; height: 6px; border-radius: 50%; background: var(--clay-accent); box-shadow: 0 0 8px var(--clay-accent); }\n\n\/* UKURAN TEKS SAMA HOME HERO *\/\n.team-header h2 {\n  font-size: clamp(1.6rem, 4vw, 2.4rem);\n  font-weight: 700; color: var(--clay-text); line-height: 1.3;\n  letter-spacing: -0.5px;\n}\n.team-header h2 em {\n  font-style: normal; \n  background: linear-gradient(45deg, #F472B6, #A855F7); \n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n}\n\n\/* === GRID TIM (DESKTOP) === *\/\n.team-grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 30px;\n  max-width: 900px;\n  margin: 0 auto;\n}\n\n.team-card {\n  background: var(--clay-bg);\n  border-radius: 24px;\n  padding: 20px;\n  box-shadow: 6px 6px 12px var(--clay-shadow-dark), -6px -6px 12px var(--clay-shadow-light);\n  transition: all 0.3s ease;\n  cursor: pointer;\n  outline: none;\n}\n\n.team-card:hover, .team-card:focus-within {\n  box-shadow: inset 4px 4px 8px var(--clay-shadow-dark), inset -4px -4px 8px var(--clay-shadow-light);\n  transform: scale(0.98);\n}\n\n.team-img-wrap {\n  position: relative;\n  width: 100%;\n  aspect-ratio: 1;\n  border-radius: 16px;\n  overflow: hidden;\n  background: var(--clay-bg);\n  box-shadow: inset 2px 2px 4px var(--clay-shadow-dark), inset -2px -2px 4px var(--clay-shadow-light);\n}\n\n.team-img-wrap img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n  transition: transform 0.4s ease;\n}\n\n.team-card:hover .team-img-wrap img, .team-card:focus-within .team-img-wrap img {\n  transform: scale(1.1);\n}\n\n\/* IKON SOSMED SLIDE UP (FULL HIDE DEFAULT) *\/\n.team-socials {\n  position: absolute;\n  bottom: 15px;\n  left: 50%;\n  transform: translateX(-50%) translateY(120%); \n  opacity: 0;\n  display: flex;\n  gap: 10px;\n  background: rgba(255, 255, 255, 0.85);\n  padding: 8px 12px;\n  border-radius: 20px;\n  box-shadow: 4px 4px 8px var(--clay-shadow-dark), -4px -4px 8px var(--clay-shadow-light);\n  transition: all 0.3s ease;\n}\n\n.team-card:hover .team-socials, .team-card:focus-within .team-socials {\n  transform: translateX(-50%) translateY(0); \n  opacity: 1;\n}\n\n.social-icon {\n  width: 32px; height: 32px;\n  border-radius: 50%;\n  background: var(--clay-bg);\n  display: flex; align-items: center; justify-content: center;\n  text-decoration: none;\n  color: var(--clay-text);\n  box-shadow: 3px 3px 6px var(--clay-shadow-dark), -3px -3px 6px var(--clay-shadow-light);\n  transition: all 0.2s;\n}\n.social-icon svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }\n.social-icon:hover { color: #fff; background: var(--clay-accent); box-shadow: 0 0 10px rgba(244, 114, 182, 0.4); }\n\n.team-info {\n  text-align: center;\n  margin-top: 15px;\n}\n.team-info h3 {\n  font-size: 1.1rem; font-weight: 700; color: var(--clay-text); margin-bottom: 4px;\n}\n.team-info p {\n  font-size: 0.8rem; font-weight: 400; color: var(--clay-accent);\n}\n\n\/* === ANIMASI FADE UP === *\/\n.fade-up {\n  opacity: 0;\n  transform: translateY(30px);\n  transition: opacity 0.8s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);\n}\n.fade-up.is-visible { opacity: 1; transform: translateY(0); }\n\n\/* === RESPONSIVE MOBILE (SWIPE PEEK KARTU) === *\/\n@media (max-width: 768px) {\n  .team-section-wrap { padding: 40px 0 80px; }\n  \n  \/* Ubah grid jadi flex horizontal *\/\n  .team-grid {\n    display: flex;\n    flex-wrap: nowrap;\n    overflow-x: auto;\n    scroll-snap-type: x mandatory;\n    gap: 15px;\n    max-width: 100%;\n    margin: 0;\n    padding: 0 20px 20px 20px;\n    -webkit-overflow-scrolling: touch;\n  }\n  \n  \/* Sembunyiin scrollbar bawaan biar kinclong *\/\n  .team-grid::-webkit-scrollbar { display: none; }\n  .team-grid { -ms-overflow-style: none; scrollbar-width: none; }\n  \n  \/* Ukuran kartu biar ngintip (peek) kartu sebelahnya *\/\n  .team-card {\n    flex: 0 0 80%; \n    max-width: 280px;\n    scroll-snap-align: center;\n  }\n}\n\n\/* ====================================================== *\/\n\/* === PEMBUNUH WARNA MERAH ELEMENTOR (NUCLEAR OPTION) === *\/\n\/* ====================================================== *\/\n.team-section-wrap button, \n.team-section-wrap a {\n  background-image: none !important;\n  border: none !important;\n  outline: none !important;\n  text-decoration: none !important;\n  -webkit-tap-highlight-color: transparent !important;\n}\n\n.team-section-wrap button:hover, \n.team-section-wrap button:focus, \n.team-section-wrap button:focus-visible,\n.team-section-wrap button:active,\n.team-section-wrap a:hover, \n.team-section-wrap a:focus, \n.team-section-wrap a:active {\n  outline: none !important;\n  border: none !important;\n  color: inherit !important;\n  background-color: transparent !important; \n  text-decoration: none !important;\n}\n\n.team-section-wrap .team-card {\n  background-color: var(--clay-bg) !important;\n}\n.team-section-wrap .social-icon {\n  background-color: var(--clay-bg) !important;\n}\n<\/style>\n\n<section class=\"team-section-wrap\" id=\"teamSection\">\n  \n  <div class=\"team-header fade-up\">\n    <div class=\"team-badge\"><span><\/span> Meet The Team<\/div>\n    <h2>The <em>Squishy<\/em> Minds<\/h2>\n  <\/div>\n\n  <div class=\"team-grid\">\n    \n    <!-- KARTU 1 -->\n    <div class=\"team-card fade-up\" tabindex=\"0\">\n      <div class=\"team-img-wrap\">\n        <img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/sma\/wp-content\/uploads\/sites\/7\/2026\/05\/Cute-Robot-SMA-1.jpeg\" alt=\"Team 1\">\n        <div class=\"team-socials\">\n          <a href=\"https:\/\/wa.me\/6281227008020\" target=\"_blank\" class=\"social-icon\" aria-label=\"WhatsApp\">\n            <svg viewBox=\"0 0 448 512\" style=\"fill: currentColor; stroke: none;\"><path d=\"M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.4-2.3-5.1-3.7-10.6-6.6z\"><\/path><\/svg>\n          <\/a>\n          <a href=\"https:\/\/instagram.com\/rwb.my.id\" target=\"_blank\" class=\"social-icon\" aria-label=\"Instagram\">\n            <svg viewBox=\"0 0 24 24\"><rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\" ry=\"5\"><\/rect><path d=\"M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z\"><\/path><line x1=\"17.5\" y1=\"6.5\" x2=\"17.51\" y2=\"6.5\"><\/line><\/svg>\n          <\/a>\n        <\/div>\n      <\/div>\n      <div class=\"team-info\">\n        <h3>Rudi Hartono<\/h3>\n        <p>Founder & Lead Dev<\/p>\n      <\/div>\n    <\/div>\n\n    <!-- KARTU 2 -->\n    <div class=\"team-card fade-up\" tabindex=\"0\">\n      <div class=\"team-img-wrap\">\n        <img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/sma\/wp-content\/uploads\/sites\/7\/2026\/08\/CSTomPape.jpeg\" alt=\"Team 2\">\n        <div class=\"team-socials\">\n          <a href=\"https:\/\/wa.me\/6281227008020\" target=\"_blank\" class=\"social-icon\" aria-label=\"WhatsApp\">\n            <svg viewBox=\"0 0 448 512\" style=\"fill: currentColor; stroke: none;\"><path d=\"M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.4-2.3-5.1-3.7-10.6-6.6z\"><\/path><\/svg>\n          <\/a>\n          <a href=\"https:\/\/instagram.com\/rwb.my.id\" target=\"_blank\" class=\"social-icon\" aria-label=\"Instagram\">\n            <svg viewBox=\"0 0 24 24\"><rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\" ry=\"5\"><\/rect><path d=\"M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z\"><\/path><line x1=\"17.5\" y1=\"6.5\" x2=\"17.51\" y2=\"6.5\"><\/line><\/svg>\n          <\/a>\n        <\/div>\n      <\/div>\n      <div class=\"team-info\">\n        <h3>Sarah Putri<\/h3>\n        <p>UI\/UX Designer<\/p>\n      <\/div>\n    <\/div>\n\n    <!-- KARTU 3 -->\n    <div class=\"team-card fade-up\" tabindex=\"0\">\n      <div class=\"team-img-wrap\">\n        <img decoding=\"async\" src=\"https:\/\/lab.rwb.my.id\/sma\/wp-content\/uploads\/sites\/7\/2026\/05\/images.jpeg\" alt=\"Team 3\">\n        <div class=\"team-socials\">\n          <a href=\"https:\/\/wa.me\/6281227008020\" target=\"_blank\" class=\"social-icon\" aria-label=\"WhatsApp\">\n            <svg viewBox=\"0 0 448 512\" style=\"fill: currentColor; stroke: none;\"><path d=\"M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.4-2.3-5.1-3.7-10.6-6.6z\"><\/path><\/svg>\n          <\/a>\n          <a href=\"https:\/\/instagram.com\/rwb.my.id\" target=\"_blank\" class=\"social-icon\" aria-label=\"Instagram\">\n            <svg viewBox=\"0 0 24 24\"><rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\" ry=\"5\"><\/rect><path d=\"M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z\"><\/path><line x1=\"17.5\" y1=\"6.5\" x2=\"17.51\" y2=\"6.5\"><\/line><\/svg>\n          <\/a>\n        <\/div>\n      <\/div>\n      <div class=\"team-info\">\n        <h3>Budi Santoso<\/h3>\n        <p>Creative Director<\/p>\n      <\/div>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n  \/\/ === INTERSECTION OBSERVER (FADE UP ON SCROLL) ===\n  const teamObserver = new IntersectionObserver((entries) => {\n    entries.forEach(entry => {\n      if (entry.isIntersecting) {\n        entry.target.classList.add('is-visible');\n        teamObserver.unobserve(entry.target);\n      }\n    });\n  }, { threshold: 0.15 });\n\n  document.querySelectorAll('.fade-up').forEach(el => {\n    teamObserver.observe(el);\n  });\n});\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b5a32d0 e-con-full e-flex e-con e-parent\" data-id=\"b5a32d0\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-99bce82 elementor-widget elementor-widget-html\" data-id=\"99bce82\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n\n<style>\n\/* === MAGNETIC MARQUEE SECTION VARIABLES === *\/\n:root {\n  --clay-bg: #E6E7EE; \n  --clay-text: #3A3A3A;\n  --clay-accent: #F472B6;\n  --clay-accent-soft: #F9A8D4;\n  --clay-shadow-dark: #C5C6D0; \n  --clay-shadow-light: #FFFFFF;\n}\n\n.marquee-section-wrap * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }\n\n.marquee-section-wrap {\n  position: relative;\n  background: var(--clay-bg);\n  padding: 60px 0 100px; \n  overflow: hidden; \n}\n\n.marquee-header {\n  text-align: center;\n  margin-bottom: 50px;\n  padding: 0 20px;\n}\n\n.marquee-badge {\n  display: inline-flex; align-items: center; gap: 8px;\n  padding: 8px 18px; border-radius: 20px;\n  font-size: 0.7rem; font-weight: 600; color: var(--clay-accent); \n  margin-bottom: 1.5rem; \n  background: rgba(255, 255, 255, 0.4);\n  border: 1px solid rgba(255, 255, 255, 0.6);\n  box-shadow: inset 2px 2px 4px rgba(255,255,255,0.5), inset -2px -2px 4px rgba(0,0,0,0.05);\n}\n.marquee-badge span { width: 6px; height: 6px; border-radius: 50%; background: var(--clay-accent); box-shadow: 0 0 8px var(--clay-accent); }\n\n.marquee-header h2 {\n  font-size: clamp(1.6rem, 4vw, 2.4rem);\n  font-weight: 700; color: var(--clay-text); line-height: 1.3;\n  letter-spacing: -0.5px;\n}\n.marquee-header h2 em {\n  font-style: normal; \n  background: linear-gradient(45deg, #F472B6, #A855F7); \n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n}\n\n.marquee-viewport {\n  position: relative;\n  width: 100%;\n  overflow: hidden;\n  padding: 20px 0;\n  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);\n  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);\n}\n\n.marquee-track {\n  display: flex;\n  gap: 20px;\n  width: max-content;\n  will-change: transform;\n}\n\n.tech-card {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  background: var(--clay-bg);\n  padding: 15px 25px;\n  border-radius: 16px;\n  box-shadow: 6px 6px 12px var(--clay-shadow-dark), -6px -6px 12px var(--clay-shadow-light);\n  transition: transform 0.2s ease, box-shadow 0.2s ease;\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.tech-card:hover {\n  transform: scale(1.05);\n  box-shadow: 8px 8px 16px var(--clay-shadow-dark), -8px -8px 16px var(--clay-shadow-light);\n}\n\n.tech-icon-box {\n  width: 40px; height: 40px;\n  border-radius: 10px;\n  display: flex; align-items: center; justify-content: center;\n  background: var(--clay-bg);\n  box-shadow: inset 2px 2px 4px var(--clay-shadow-dark), inset -2px -2px 4px var(--clay-shadow-light);\n  color: var(--clay-accent);\n}\n.tech-icon-box svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }\n\n.tech-name {\n  font-size: 1rem; font-weight: 600; color: var(--clay-text);\n  white-space: nowrap;\n}\n\n.fade-up {\n  opacity: 0;\n  transform: translateY(30px);\n  transition: opacity 0.8s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);\n}\n.fade-up.is-visible { opacity: 1; transform: translateY(0); }\n\n@media (max-width: 768px) {\n  .marquee-section-wrap { padding: 40px 0 80px; }\n  .tech-card { padding: 12px 20px; gap: 10px; }\n  .tech-icon-box { width: 35px; height: 35px; }\n  .tech-icon-box svg { width: 18px; height: 18px; }\n  .tech-name { font-size: 0.9rem; }\n}\n\n\/* ====================================================== *\/\n\/* === PEMBUNUH WARNA MERAH ELEMENTOR (NUCLEAR OPTION) === *\/\n\/* ====================================================== *\/\n.marquee-section-wrap button, \n.marquee-section-wrap a {\n  background-image: none !important;\n  border: none !important;\n  outline: none !important;\n  text-decoration: none !important;\n  -webkit-tap-highlight-color: transparent !important;\n}\n\n.marquee-section-wrap button:hover, \n.marquee-section-wrap button:focus, \n.marquee-section-wrap button:focus-visible,\n.marquee-section-wrap button:active,\n.marquee-section-wrap a:hover, \n.marquee-section-wrap a:focus, \n.marquee-section-wrap a:active {\n  outline: none !important;\n  border: none !important;\n  color: inherit !important;\n  background-color: transparent !important; \n  text-decoration: none !important;\n}\n\n.marquee-section-wrap .tech-card {\n  background-color: var(--clay-bg) !important;\n}\n<\/style>\n\n<section class=\"marquee-section-wrap\" id=\"marqueeSection\">\n  \n  <div class=\"marquee-header fade-up\">\n    <div class=\"marquee-badge\"><span><\/span> Our Tech Stack<\/div>\n    <h2>Tools We <em>Master<\/em><\/h2>\n  <\/div>\n\n  <div class=\"marquee-viewport\" id=\"marqueeViewport\">\n    <div class=\"marquee-track\" id=\"marqueeTrack\">\n      \n      <div class=\"tech-card\">\n        <div class=\"tech-icon-box\"><svg viewBox=\"0 0 24 24\"><path d=\"M5 3l14 9-14 9V3z\"><\/path><\/svg><\/div>\n        <div class=\"tech-name\">Figma<\/div>\n      <\/div>\n      <div class=\"tech-card\">\n        <div class=\"tech-icon-box\"><svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><line x1=\"2\" y1=\"12\" x2=\"22\" y2=\"12\"><\/line><path d=\"M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z\"><\/path><\/svg><\/div>\n        <div class=\"tech-name\">WordPress<\/div>\n      <\/div>\n      <div class=\"tech-card\">\n        <div class=\"tech-icon-box\"><svg viewBox=\"0 0 24 24\"><polyline points=\"16 18 22 12 16 6\"><\/polyline><polyline points=\"8 6 2 12 8 18\"><\/polyline><\/svg><\/div>\n        <div class=\"tech-name\">React JS<\/div>\n      <\/div>\n      <div class=\"tech-card\">\n        <div class=\"tech-icon-box\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 2L2 7l10 5 10-5-10-5z\"><\/path><polyline points=\"2 17 12 22 22 17\"><\/polyline><polyline points=\"2 12 12 17 22 12\"><\/polyline><\/svg><\/div>\n        <div class=\"tech-name\">Node JS<\/div>\n      <\/div>\n      <div class=\"tech-card\">\n        <div class=\"tech-icon-box\"><svg viewBox=\"0 0 24 24\"><path d=\"M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z\"><\/path><\/svg><\/div>\n        <div class=\"tech-name\">Elementor<\/div>\n      <\/div>\n      <div class=\"tech-card\">\n        <div class=\"tech-icon-box\"><svg viewBox=\"0 0 24 24\"><polyline points=\"4 17 10 11 4 5\"><\/polyline><line x1=\"12\" y1=\"19\" x2=\"20\" y2=\"19\"><\/line><\/svg><\/div>\n        <div class=\"tech-name\">Tailwind<\/div>\n      <\/div>\n\n      <!-- Duplikat untuk infinite loop -->\n      <div class=\"tech-card\">\n        <div class=\"tech-icon-box\"><svg viewBox=\"0 0 24 24\"><path d=\"M5 3l14 9-14 9V3z\"><\/path><\/svg><\/div>\n        <div class=\"tech-name\">Figma<\/div>\n      <\/div>\n      <div class=\"tech-card\">\n        <div class=\"tech-icon-box\"><svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><line x1=\"2\" y1=\"12\" x2=\"22\" y2=\"12\"><\/line><path d=\"M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z\"><\/path><\/svg><\/div>\n        <div class=\"tech-name\">WordPress<\/div>\n      <\/div>\n      <div class=\"tech-card\">\n        <div class=\"tech-icon-box\"><svg viewBox=\"0 0 24 24\"><polyline points=\"16 18 22 12 16 6\"><\/polyline><polyline points=\"8 6 2 12 8 18\"><\/polyline><\/svg><\/div>\n        <div class=\"tech-name\">React JS<\/div>\n      <\/div>\n      <div class=\"tech-card\">\n        <div class=\"tech-icon-box\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 2L2 7l10 5 10-5-10-5z\"><\/path><polyline points=\"2 17 12 22 22 17\"><\/polyline><polyline points=\"2 12 12 17 22 12\"><\/polyline><\/svg><\/div>\n        <div class=\"tech-name\">Node JS<\/div>\n      <\/div>\n      <div class=\"tech-card\">\n        <div class=\"tech-icon-box\"><svg viewBox=\"0 0 24 24\"><path d=\"M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z\"><\/path><\/svg><\/div>\n        <div class=\"tech-name\">Elementor<\/div>\n      <\/div>\n      <div class=\"tech-card\">\n        <div class=\"tech-icon-box\"><svg viewBox=\"0 0 24 24\"><polyline points=\"4 17 10 11 4 5\"><\/polyline><line x1=\"12\" y1=\"19\" x2=\"20\" y2=\"19\"><\/line><\/svg><\/div>\n        <div class=\"tech-name\">Tailwind<\/div>\n      <\/div>\n\n    <\/div>\n  <\/div>\n<\/section>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n  \/\/ 1. ANIMASI FADE UP HEADER\n  const headerObserver = new IntersectionObserver((entries) => {\n    entries.forEach(entry => {\n      if (entry.isIntersecting) {\n        entry.target.classList.add('is-visible');\n        headerObserver.unobserve(entry.target);\n      }\n    });\n  }, { threshold: 0.1 });\n  document.querySelectorAll('.fade-up').forEach(el => headerObserver.observe(el));\n\n  \/\/ 2. LOGIKA MARQUEE (AUTO SCROLL, PAUSE ON HOVER, KILL ON SCROLL OUT)\n  const viewport = document.getElementById('marqueeViewport');\n  const track = document.getElementById('marqueeTrack');\n  \n  let trackWidth = track.scrollWidth \/ 2; \n  let pos = 0;\n  const speed = 0.5; \/\/ Kecepatan konstan\n  let rafId = null;\n  let isVisible = false;\n  let isHovered = false;\n\n  function animate() {\n    \/\/ Kalau keluar layar atau lagi di-hover, matikan loop\n    if (!isVisible || isHovered) {\n      rafId = null;\n      return;\n    }\n\n    pos -= speed;\n    \n    \/\/ Rumus infinite loop mulus\n    if (pos <= -trackWidth) pos += trackWidth;\n\n    track.style.transform = `translateX(${pos}px)`;\n    \n    rafId = requestAnimationFrame(animate);\n  }\n\n  \/\/ IntersectionObserver untuk PAUSE\/KILL animasi kalau keluar layar\n  const sectionObserver = new IntersectionObserver((entries) => {\n    entries.forEach(entry => {\n      isVisible = entry.isIntersecting;\n      \/\/ Resume animasi kalau masuk layar dan gak di-hover\n      if (isVisible && !isHovered && !rafId) {\n        rafId = requestAnimationFrame(animate);\n      } else if (!isVisible && rafId) {\n        \/\/ Kill animasi kalau keluar layar\n        cancelAnimationFrame(rafId);\n        rafId = null;\n      }\n    });\n  }, { threshold: 0.1 });\n\n  sectionObserver.observe(viewport);\n\n  \/\/ Event Mouse (Desktop) -> PAUSE TOTAL SAAT HOVER\n  viewport.addEventListener('mouseenter', () => {\n    isHovered = true;\n    if (rafId) {\n      cancelAnimationFrame(rafId);\n      rafId = null;\n    }\n  });\n\n  \/\/ Kalau mouse keluar, jalan lagi\n  viewport.addEventListener('mouseleave', () => {\n    isHovered = false;\n    if (isVisible && !rafId) {\n      rafId = requestAnimationFrame(animate);\n    }\n  });\n\n  \/\/ Update lebar track kalau window di-resize\n  window.addEventListener('resize', () => {\n    trackWidth = track.scrollWidth \/ 2;\n  });\n});\n<\/script>\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>About RWB Agency Crafting Digital Excellence Since Day One We are a team of passionate creators dedicated to building immersive, high-performance digital experiences. We blend art with technology to bring your visionary ideas into reality. Meet the Team Our History 150+ PROJECTS DONE Our Journey 2020 Founded RWB Agency was born with a simple mission: [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-1039","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/lab.rwb.my.id\/sma\/wp-json\/wp\/v2\/pages\/1039","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lab.rwb.my.id\/sma\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lab.rwb.my.id\/sma\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lab.rwb.my.id\/sma\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lab.rwb.my.id\/sma\/wp-json\/wp\/v2\/comments?post=1039"}],"version-history":[{"count":69,"href":"https:\/\/lab.rwb.my.id\/sma\/wp-json\/wp\/v2\/pages\/1039\/revisions"}],"predecessor-version":[{"id":1575,"href":"https:\/\/lab.rwb.my.id\/sma\/wp-json\/wp\/v2\/pages\/1039\/revisions\/1575"}],"wp:attachment":[{"href":"https:\/\/lab.rwb.my.id\/sma\/wp-json\/wp\/v2\/media?parent=1039"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}