{"id":1130,"date":"2026-01-24T16:22:24","date_gmt":"2026-01-24T16:22:24","guid":{"rendered":"https:\/\/pixel-pine.com\/?page_id=1130"},"modified":"2026-09-30T09:21:56","modified_gmt":"2026-09-30T09:21:56","slug":"home2","status":"publish","type":"page","link":"https:\/\/pixel-pine.com\/","title":{"rendered":"home2"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1130\" class=\"elementor elementor-1130\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-93aa046 e-con-full e-flex e-con e-parent\" data-id=\"93aa046\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-396abff elementor-widget elementor-widget-html\" data-id=\"396abff\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\r\n  PIXEL PINE \u2014 HERO SECTION\r\n  VIDEO BACKGROUND + SOUND CONTROL\r\n\r\n  CHANGES:\r\n  - NO CURSOR \/ MOUSE PARALLAX\r\n  - VIDEO STAYS STATIC\r\n  - MUTE \/ UNMUTE BUTTON BOTTOM RIGHT\r\n  - AUTOPLAY STARTS MUTED FOR BROWSER COMPATIBILITY\r\n========================================================= -->\r\n\r\n<style>\r\n\r\n\/* =========================================================\r\n   ELEMENTOR RESET\r\n========================================================= *\/\r\n\r\n.elementor-widget-html:has(#pp-hero),\r\n.elementor-widget-html:has(#pp-hero) > .elementor-widget-container {\r\n  width: 100%;\r\n  max-width: none !important;\r\n  margin: 0 !important;\r\n  padding: 0 !important;\r\n}\r\n\r\n.e-con:has(#pp-hero) {\r\n  --gap: 0px !important;\r\n  gap: 0 !important;\r\n}\r\n\r\n#pp-hero,\r\n#pp-hero * {\r\n  box-sizing: border-box;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   PIXEL PINE DESIGN TOKENS\r\n========================================================= *\/\r\n\r\n#pp-hero {\r\n  --pp-mint: #84E6D3;\r\n  --pp-indigo: #7E79D7;\r\n  --pp-purple: #AF83E8;\r\n\r\n  --pp-bg-deep: #050912;\r\n  --pp-bg: #070C17;\r\n  --pp-bg-soft: #0B1120;\r\n\r\n  --pp-white: #F7FAFC;\r\n  --pp-muted: #B8C2D1;\r\n  --pp-dim: #818CA1;\r\n\r\n  --pp-border-mint: rgba(132, 230, 211, 0.42);\r\n  --pp-border-purple: rgba(175, 131, 232, 0.52);\r\n\r\n  --pp-glow-mint: rgba(132, 230, 211, 0.20);\r\n  --pp-glow-purple: rgba(175, 131, 232, 0.18);\r\n\r\n  --pp-vw: 100vw;\r\n\r\n  position: relative;\r\n\r\n  left: 50%;\r\n\r\n  width: var(--pp-vw);\r\n  max-width: none !important;\r\n\r\n  min-height:\r\n    clamp(\r\n      780px,\r\n      100svh,\r\n      1080px\r\n    );\r\n\r\n  margin: 0 !important;\r\n\r\n  transform:\r\n    translateX(-50%);\r\n\r\n  overflow: hidden;\r\n  isolation: isolate;\r\n\r\n  color: var(--pp-white);\r\n\r\n  background:\r\n    radial-gradient(\r\n      circle at 20% 35%,\r\n      rgba(132, 230, 211, 0.08),\r\n      transparent 35%\r\n    ),\r\n    radial-gradient(\r\n      circle at 80% 40%,\r\n      rgba(175, 131, 232, 0.10),\r\n      transparent 38%\r\n    ),\r\n    var(--pp-bg-deep);\r\n\r\n  font-family:\r\n    Manrope,\r\n    Inter,\r\n    \"Segoe UI\",\r\n    Arial,\r\n    sans-serif;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   VIDEO BACKGROUND\r\n   STATIC \u2014 NO CURSOR MOVEMENT\r\n========================================================= *\/\r\n\r\n#pp-hero .pp-hero__media {\r\n  position: absolute;\r\n\r\n  inset: -2%;\r\n\r\n  z-index: -5;\r\n\r\n  overflow: hidden;\r\n\r\n  \/*\r\n    Static scale only.\r\n    NO translate \/ mouse movement.\r\n  *\/\r\n\r\n  transform:\r\n    scale(1.025);\r\n\r\n  transform-origin: center;\r\n}\r\n\r\n\r\n#pp-hero .pp-hero__video {\r\n  position: absolute;\r\n\r\n  inset: 0;\r\n\r\n  display: block;\r\n\r\n  width: 100%;\r\n  height: 100%;\r\n\r\n  object-fit: cover;\r\n  object-position: center center;\r\n\r\n  border: 0;\r\n\r\n  pointer-events: none;\r\n\r\n  filter:\r\n    brightness(0.64)\r\n    saturate(0.98)\r\n    contrast(1.04);\r\n\r\n  transform:\r\n    scale(1.01);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   VIDEO OVERLAY\r\n========================================================= *\/\r\n\r\n#pp-hero .pp-hero__overlay {\r\n  position: absolute;\r\n\r\n  inset: 0;\r\n\r\n  z-index: -4;\r\n\r\n  pointer-events: none;\r\n\r\n  background:\r\n    radial-gradient(\r\n      ellipse at center,\r\n      rgba(5, 9, 18, 0.18) 0%,\r\n      rgba(5, 9, 18, 0.32) 47%,\r\n      rgba(5, 9, 18, 0.56) 100%\r\n    ),\r\n    linear-gradient(\r\n      180deg,\r\n      rgba(5, 9, 18, 0.20) 0%,\r\n      rgba(5, 9, 18, 0.16) 30%,\r\n      rgba(5, 9, 18, 0.26) 68%,\r\n      rgba(5, 9, 18, 0.62) 100%\r\n    );\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CENTER TEXT PROTECTION\r\n========================================================= *\/\r\n\r\n#pp-hero .pp-hero__focus {\r\n  position: absolute;\r\n\r\n  z-index: -3;\r\n\r\n  top: 50%;\r\n  left: 50%;\r\n\r\n  width:\r\n    min(\r\n      1050px,\r\n      85vw\r\n    );\r\n\r\n  height:\r\n    min(\r\n      650px,\r\n      72vh\r\n    );\r\n\r\n  transform:\r\n    translate(-50%, -50%);\r\n\r\n  border-radius: 50%;\r\n\r\n  background:\r\n    rgba(5, 9, 18, 0.27);\r\n\r\n  filter:\r\n    blur(70px);\r\n\r\n  pointer-events: none;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   BRAND GLOWS\r\n========================================================= *\/\r\n\r\n#pp-hero .pp-hero__glow {\r\n  position: absolute;\r\n\r\n  z-index: -2;\r\n\r\n  border-radius: 50%;\r\n\r\n  filter:\r\n    blur(130px);\r\n\r\n  pointer-events: none;\r\n}\r\n\r\n\r\n#pp-hero .pp-hero__glow--mint {\r\n  top: 25%;\r\n  left: -9%;\r\n\r\n  width: 520px;\r\n  height: 520px;\r\n\r\n  background:\r\n    rgba(132, 230, 211, 0.085);\r\n}\r\n\r\n\r\n#pp-hero .pp-hero__glow--purple {\r\n  right: -8%;\r\n  bottom: 5%;\r\n\r\n  width: 580px;\r\n  height: 580px;\r\n\r\n  background:\r\n    rgba(175, 131, 232, 0.10);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   GRID\r\n========================================================= *\/\r\n\r\n#pp-hero .pp-hero__grid {\r\n  position: absolute;\r\n\r\n  inset: 0;\r\n\r\n  z-index: -1;\r\n\r\n  opacity: 0.055;\r\n\r\n  pointer-events: none;\r\n\r\n  background-image:\r\n    linear-gradient(\r\n      rgba(132, 230, 211, 0.09) 1px,\r\n      transparent 1px\r\n    ),\r\n    linear-gradient(\r\n      90deg,\r\n      rgba(175, 131, 232, 0.08) 1px,\r\n      transparent 1px\r\n    );\r\n\r\n  background-size:\r\n    90px\r\n    90px;\r\n\r\n  -webkit-mask-image:\r\n    radial-gradient(\r\n      ellipse at center,\r\n      #000 0%,\r\n      rgba(0, 0, 0, 0.60) 47%,\r\n      transparent 82%\r\n    );\r\n\r\n  mask-image:\r\n    radial-gradient(\r\n      ellipse at center,\r\n      #000 0%,\r\n      rgba(0, 0, 0, 0.60) 47%,\r\n      transparent 82%\r\n    );\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CONTENT\r\n========================================================= *\/\r\n\r\n#pp-hero .pp-hero__inner {\r\n  position: relative;\r\n\r\n  z-index: 10;\r\n\r\n  display: flex;\r\n\r\n  align-items: center;\r\n  justify-content: center;\r\n\r\n  width:\r\n    min(\r\n      1240px,\r\n      calc(100% - 80px)\r\n    );\r\n\r\n  min-height: inherit;\r\n\r\n  margin: 0 auto;\r\n\r\n  padding:\r\n    clamp(75px, 9vh, 115px)\r\n    0\r\n    clamp(70px, 8vh, 100px);\r\n\r\n  text-align: center;\r\n}\r\n\r\n\r\n#pp-hero .pp-hero__content {\r\n  width: 100%;\r\n\r\n  max-width: 1120px;\r\n\r\n  margin: 0 auto;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   LOGO\r\n========================================================= *\/\r\n\r\n#pp-hero .pp-hero__brand {\r\n  display: flex;\r\n\r\n  align-items: center;\r\n  justify-content: center;\r\n\r\n  margin:\r\n    0\r\n    auto\r\n    34px;\r\n}\r\n\r\n\r\n#pp-hero .pp-hero__logo {\r\n  display: block;\r\n\r\n  width:\r\n    min(\r\n      225px,\r\n      48vw\r\n    );\r\n\r\n  height: auto;\r\n\r\n  max-height: 115px;\r\n\r\n  object-fit: contain;\r\n\r\n  filter:\r\n    drop-shadow(\r\n      0 8px 24px\r\n      rgba(0, 0, 0, 0.34)\r\n    );\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   EYEBROW\r\n========================================================= *\/\r\n\r\n#pp-hero .pp-hero__eyebrow {\r\n  margin:\r\n    0\r\n    0\r\n    25px;\r\n\r\n  color: #9DEADD;\r\n\r\n  font-size:\r\n    clamp(\r\n      10px,\r\n      0.86vw,\r\n      13px\r\n    );\r\n\r\n  font-weight: 760;\r\n\r\n  line-height: 1.4;\r\n\r\n  letter-spacing: 0.30em;\r\n\r\n  text-transform: uppercase;\r\n\r\n  text-shadow:\r\n    0 0 20px\r\n    rgba(132, 230, 211, 0.18);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TITLE\r\n========================================================= *\/\r\n\r\n#pp-hero .pp-hero__title {\r\n  max-width: 1100px;\r\n\r\n  margin: 0 auto;\r\n\r\n  color:\r\n    var(--pp-white);\r\n\r\n  font-size:\r\n    clamp(\r\n      52px,\r\n      5.35vw,\r\n      84px\r\n    );\r\n\r\n  font-weight: 770;\r\n\r\n  line-height: 0.99;\r\n\r\n  letter-spacing:\r\n    -0.055em;\r\n\r\n  text-wrap: balance;\r\n\r\n  text-shadow:\r\n    0 14px 50px\r\n    rgba(0, 0, 0, 0.46);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TITLE GRADIENT\r\n========================================================= *\/\r\n\r\n#pp-hero .pp-hero__gradient {\r\n  display: inline-block;\r\n\r\n  color: transparent;\r\n\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      #84E6D3 0%,\r\n      #84E6D3 25%,\r\n      #7E79D7 56%,\r\n      #AF83E8 100%\r\n    );\r\n\r\n  background-size:\r\n    170%\r\n    100%;\r\n\r\n  -webkit-background-clip:\r\n    text;\r\n\r\n  background-clip:\r\n    text;\r\n\r\n  animation:\r\n    ppGradientMove\r\n    7s\r\n    ease-in-out\r\n    infinite\r\n    alternate;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   DESCRIPTION\r\n========================================================= *\/\r\n\r\n#pp-hero .pp-hero__description {\r\n  max-width: 690px;\r\n\r\n  margin:\r\n    28px\r\n    auto\r\n    0;\r\n\r\n  color:\r\n    var(--pp-muted);\r\n\r\n  font-size:\r\n    clamp(\r\n      16px,\r\n      1.25vw,\r\n      19px\r\n    );\r\n\r\n  font-weight: 440;\r\n\r\n  line-height: 1.58;\r\n\r\n  letter-spacing:\r\n    -0.015em;\r\n\r\n  text-wrap: balance;\r\n\r\n  text-shadow:\r\n    0 4px 26px\r\n    rgba(0, 0, 0, 0.62);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CTA\r\n========================================================= *\/\r\n\r\n#pp-hero .pp-hero__actions {\r\n  display: flex;\r\n\r\n  align-items: center;\r\n  justify-content: center;\r\n\r\n  gap: 15px;\r\n\r\n  margin-top: 34px;\r\n}\r\n\r\n\r\n#pp-hero .pp-hero__button {\r\n  position: relative;\r\n\r\n  display: inline-flex;\r\n\r\n  align-items: center;\r\n  justify-content: center;\r\n\r\n  min-width: 210px;\r\n  min-height: 56px;\r\n\r\n  padding:\r\n    0\r\n    28px;\r\n\r\n  overflow: hidden;\r\n\r\n  border:\r\n    1px solid\r\n    transparent;\r\n\r\n  border-radius: 10px;\r\n\r\n  font-size: 14px;\r\n\r\n  font-weight: 750;\r\n\r\n  line-height: 1;\r\n\r\n  text-decoration: none;\r\n\r\n  white-space: nowrap;\r\n\r\n  transition:\r\n    transform\r\n    250ms\r\n    cubic-bezier(.22, 1, .36, 1),\r\n\r\n    background\r\n    250ms\r\n    ease,\r\n\r\n    border-color\r\n    250ms\r\n    ease,\r\n\r\n    box-shadow\r\n    250ms\r\n    ease;\r\n}\r\n\r\n\r\n\/* PRIMARY *\/\r\n\r\n#pp-hero .pp-hero__button--primary {\r\n  color: #071019;\r\n\r\n  background:\r\n    linear-gradient(\r\n      135deg,\r\n      #84E6D3,\r\n      #9CEEDD\r\n    );\r\n\r\n  border-color:\r\n    rgba(196, 255, 244, 0.52);\r\n\r\n  box-shadow:\r\n    0 14px 42px\r\n    rgba(132, 230, 211, 0.22),\r\n\r\n    0 0 32px\r\n    rgba(132, 230, 211, 0.10);\r\n}\r\n\r\n\r\n#pp-hero .pp-hero__button--primary:hover {\r\n  transform:\r\n    translateY(-3px);\r\n\r\n  background:\r\n    linear-gradient(\r\n      135deg,\r\n      #9CEEDD,\r\n      #84E6D3\r\n    );\r\n\r\n  box-shadow:\r\n    0 18px 50px\r\n    rgba(132, 230, 211, 0.31),\r\n\r\n    0 0 38px\r\n    rgba(132, 230, 211, 0.16);\r\n}\r\n\r\n\r\n\/* SECONDARY *\/\r\n\r\n#pp-hero .pp-hero__button--secondary {\r\n  color: #FFFFFF;\r\n\r\n  background:\r\n    rgba(6, 11, 22, 0.46);\r\n\r\n  border-color:\r\n    rgba(175, 131, 232, 0.58);\r\n\r\n  box-shadow:\r\n    inset\r\n    0\r\n    0\r\n    0\r\n    1px\r\n    rgba(255, 255, 255, 0.025);\r\n\r\n  backdrop-filter:\r\n    blur(10px);\r\n\r\n  -webkit-backdrop-filter:\r\n    blur(10px);\r\n}\r\n\r\n\r\n#pp-hero .pp-hero__button--secondary:hover {\r\n  transform:\r\n    translateY(-3px);\r\n\r\n  border-color:\r\n    rgba(194, 154, 240, 0.90);\r\n\r\n  background:\r\n    rgba(126, 121, 215, 0.15);\r\n\r\n  box-shadow:\r\n    0 15px 42px\r\n    rgba(126, 121, 215, 0.16);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SOUND BUTTON\r\n========================================================= *\/\r\n\r\n#pp-hero .pp-hero__sound {\r\n  position: absolute;\r\n\r\n  z-index: 30;\r\n\r\n  right:\r\n    clamp(\r\n      20px,\r\n      3vw,\r\n      42px\r\n    );\r\n\r\n  bottom:\r\n    clamp(\r\n      20px,\r\n      3vw,\r\n      38px\r\n    );\r\n\r\n  display: grid;\r\n\r\n  place-items: center;\r\n\r\n  width: 48px;\r\n  height: 48px;\r\n\r\n  padding: 0;\r\n\r\n  border:\r\n    1px solid\r\n    rgba(255, 255, 255, 0.17);\r\n\r\n  border-radius: 50%;\r\n\r\n  color:\r\n    var(--pp-white);\r\n\r\n  background:\r\n    rgba(5, 9, 18, 0.50);\r\n\r\n  box-shadow:\r\n    0 10px 30px\r\n    rgba(0, 0, 0, 0.24),\r\n\r\n    inset\r\n    0\r\n    0\r\n    0\r\n    1px\r\n    rgba(255, 255, 255, 0.025);\r\n\r\n  -webkit-backdrop-filter:\r\n    blur(14px);\r\n\r\n  backdrop-filter:\r\n    blur(14px);\r\n\r\n  cursor: pointer;\r\n\r\n  transition:\r\n    transform\r\n    220ms\r\n    ease,\r\n\r\n    background\r\n    220ms\r\n    ease,\r\n\r\n    border-color\r\n    220ms\r\n    ease,\r\n\r\n    box-shadow\r\n    220ms\r\n    ease;\r\n}\r\n\r\n\r\n#pp-hero .pp-hero__sound:hover {\r\n  transform:\r\n    translateY(-2px);\r\n\r\n  border-color:\r\n    rgba(132, 230, 211, 0.52);\r\n\r\n  background:\r\n    rgba(10, 20, 31, 0.72);\r\n\r\n  box-shadow:\r\n    0 12px 32px\r\n    rgba(0, 0, 0, 0.28),\r\n\r\n    0 0 20px\r\n    rgba(132, 230, 211, 0.12);\r\n}\r\n\r\n\r\n#pp-hero .pp-hero__sound:focus-visible {\r\n  outline:\r\n    2px solid\r\n    var(--pp-mint);\r\n\r\n  outline-offset: 4px;\r\n}\r\n\r\n\r\n#pp-hero .pp-hero__sound svg {\r\n  position: absolute;\r\n\r\n  width: 21px;\r\n  height: 21px;\r\n\r\n  fill: none;\r\n\r\n  stroke:\r\n    currentColor;\r\n\r\n  stroke-width: 1.8;\r\n\r\n  stroke-linecap:\r\n    round;\r\n\r\n  stroke-linejoin:\r\n    round;\r\n\r\n  transition:\r\n    opacity\r\n    180ms\r\n    ease,\r\n\r\n    transform\r\n    220ms\r\n    ease;\r\n}\r\n\r\n\r\n\/* default = muted *\/\r\n\r\n#pp-hero\r\n.pp-hero__sound-icon--on {\r\n  opacity: 0;\r\n\r\n  transform:\r\n    scale(0.80);\r\n}\r\n\r\n\r\n#pp-hero\r\n.pp-hero__sound-icon--off {\r\n  opacity: 1;\r\n\r\n  transform:\r\n    scale(1);\r\n}\r\n\r\n\r\n\/* sound enabled *\/\r\n\r\n#pp-hero\r\n.pp-hero__sound.is-sound-on\r\n.pp-hero__sound-icon--on {\r\n  opacity: 1;\r\n\r\n  transform:\r\n    scale(1);\r\n}\r\n\r\n\r\n#pp-hero\r\n.pp-hero__sound.is-sound-on\r\n.pp-hero__sound-icon--off {\r\n  opacity: 0;\r\n\r\n  transform:\r\n    scale(0.80);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   REVEAL\r\n========================================================= *\/\r\n\r\n#pp-hero .pp-reveal {\r\n  opacity: 0;\r\n\r\n  transform:\r\n    translate3d(\r\n      0,\r\n      25px,\r\n      0\r\n    );\r\n\r\n  filter:\r\n    blur(5px);\r\n}\r\n\r\n\r\n#pp-hero.pp-ready\r\n.pp-reveal {\r\n  animation:\r\n    ppReveal\r\n    850ms\r\n    cubic-bezier(\r\n      .22,\r\n      1,\r\n      .36,\r\n      1\r\n    )\r\n    forwards;\r\n\r\n  animation-delay:\r\n    var(\r\n      --pp-delay,\r\n      0ms\r\n    );\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   LOGO FLOAT\r\n========================================================= *\/\r\n\r\n#pp-hero.pp-ready\r\n.pp-hero__brand {\r\n  animation:\r\n    ppLogoFloat\r\n    5.5s\r\n    ease-in-out\r\n    1.8s\r\n    infinite;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   KEYFRAMES\r\n========================================================= *\/\r\n\r\n@keyframes ppReveal {\r\n\r\n  to {\r\n    opacity: 1;\r\n\r\n    transform:\r\n      translate3d(\r\n        0,\r\n        0,\r\n        0\r\n      );\r\n\r\n    filter:\r\n      blur(0);\r\n  }\r\n\r\n}\r\n\r\n\r\n@keyframes ppGradientMove {\r\n\r\n  from {\r\n    background-position:\r\n      0%\r\n      50%;\r\n  }\r\n\r\n  to {\r\n    background-position:\r\n      100%\r\n      50%;\r\n  }\r\n\r\n}\r\n\r\n\r\n@keyframes ppLogoFloat {\r\n\r\n  0%,\r\n  100% {\r\n    transform:\r\n      translateY(0);\r\n  }\r\n\r\n  50% {\r\n    transform:\r\n      translateY(-5px);\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TABLET\r\n========================================================= *\/\r\n\r\n@media (max-width: 1024px) {\r\n\r\n  #pp-hero {\r\n    min-height:\r\n      clamp(\r\n        760px,\r\n        96svh,\r\n        930px\r\n      );\r\n  }\r\n\r\n\r\n  #pp-hero .pp-hero__inner {\r\n    width:\r\n      min(\r\n        930px,\r\n        calc(100% - 54px)\r\n      );\r\n\r\n    padding:\r\n      82px\r\n      0\r\n      72px;\r\n  }\r\n\r\n\r\n  #pp-hero .pp-hero__logo {\r\n    width:\r\n      min(\r\n        210px,\r\n        46vw\r\n      );\r\n  }\r\n\r\n\r\n  #pp-hero .pp-hero__title {\r\n    font-size:\r\n      clamp(\r\n        48px,\r\n        7vw,\r\n        68px\r\n      );\r\n  }\r\n\r\n\r\n  #pp-hero .pp-hero__description {\r\n    max-width: 620px;\r\n\r\n    font-size: 17px;\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MOBILE\r\n========================================================= *\/\r\n\r\n@media (max-width: 767px) {\r\n\r\n  #pp-hero {\r\n    left: auto;\r\n\r\n    width: 100% !important;\r\n\r\n    max-width: 100% !important;\r\n\r\n    min-height:\r\n      max(\r\n        760px,\r\n        100svh\r\n      );\r\n\r\n    transform: none;\r\n  }\r\n\r\n\r\n  #pp-hero .pp-hero__media {\r\n    inset: 0;\r\n\r\n    transform:\r\n      none !important;\r\n  }\r\n\r\n\r\n  #pp-hero .pp-hero__video {\r\n    object-position:\r\n      center center;\r\n\r\n    filter:\r\n      brightness(0.48)\r\n      saturate(0.92)\r\n      contrast(1.02);\r\n  }\r\n\r\n\r\n  #pp-hero .pp-hero__overlay {\r\n    background:\r\n      radial-gradient(\r\n        ellipse at center,\r\n        rgba(5, 9, 18, 0.30)\r\n        0%,\r\n        rgba(5, 9, 18, 0.50)\r\n        72%\r\n      ),\r\n      linear-gradient(\r\n        180deg,\r\n        rgba(5, 9, 18, 0.46)\r\n        0%,\r\n        rgba(5, 9, 18, 0.38)\r\n        34%,\r\n        rgba(5, 9, 18, 0.54)\r\n        72%,\r\n        rgba(5, 9, 18, 0.76)\r\n        100%\r\n      );\r\n  }\r\n\r\n\r\n  #pp-hero .pp-hero__grid {\r\n    opacity: 0.035;\r\n\r\n    background-size:\r\n      58px\r\n      58px;\r\n  }\r\n\r\n\r\n  #pp-hero .pp-hero__inner {\r\n    width:\r\n      min(\r\n        calc(100% - 36px),\r\n        600px\r\n      );\r\n\r\n    padding:\r\n      62px\r\n      0\r\n      54px;\r\n  }\r\n\r\n\r\n  #pp-hero .pp-hero__brand {\r\n    margin-bottom: 26px;\r\n  }\r\n\r\n\r\n  #pp-hero .pp-hero__logo {\r\n    width:\r\n      min(\r\n        185px,\r\n        54vw\r\n      );\r\n\r\n    max-height: 92px;\r\n  }\r\n\r\n\r\n  #pp-hero .pp-hero__eyebrow {\r\n    max-width: 330px;\r\n\r\n    margin:\r\n      0\r\n      auto\r\n      20px;\r\n\r\n    font-size: 9px;\r\n\r\n    line-height: 1.55;\r\n\r\n    letter-spacing:\r\n      0.21em;\r\n  }\r\n\r\n\r\n  #pp-hero .pp-hero__title {\r\n    max-width: 610px;\r\n\r\n    font-size:\r\n      clamp(\r\n        40px,\r\n        11.6vw,\r\n        56px\r\n      );\r\n\r\n    line-height: 1.01;\r\n\r\n    letter-spacing:\r\n      -0.048em;\r\n  }\r\n\r\n\r\n  #pp-hero .pp-hero__description {\r\n    max-width: 460px;\r\n\r\n    margin-top: 23px;\r\n\r\n    font-size: 15.5px;\r\n\r\n    line-height: 1.57;\r\n  }\r\n\r\n\r\n  #pp-hero .pp-hero__actions {\r\n    flex-direction: column;\r\n\r\n    width:\r\n      min(\r\n        100%,\r\n        370px\r\n      );\r\n\r\n    gap: 11px;\r\n\r\n    margin:\r\n      30px\r\n      auto\r\n      0;\r\n  }\r\n\r\n\r\n  #pp-hero .pp-hero__button {\r\n    width: 100%;\r\n\r\n    min-width: 0;\r\n\r\n    min-height: 53px;\r\n\r\n    font-size: 14px;\r\n  }\r\n\r\n\r\n  #pp-hero .pp-hero__glow--mint {\r\n    top: 14%;\r\n\r\n    left: -58%;\r\n\r\n    width: 420px;\r\n    height: 420px;\r\n  }\r\n\r\n\r\n  #pp-hero .pp-hero__glow--purple {\r\n    right: -55%;\r\n\r\n    bottom: 3%;\r\n\r\n    width: 450px;\r\n    height: 450px;\r\n  }\r\n\r\n\r\n  \/* SOUND *\/\r\n\r\n  #pp-hero .pp-hero__sound {\r\n    right: 16px;\r\n    bottom: 16px;\r\n\r\n    width: 44px;\r\n    height: 44px;\r\n  }\r\n\r\n\r\n  #pp-hero .pp-hero__sound svg {\r\n    width: 19px;\r\n    height: 19px;\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SMALL MOBILE\r\n========================================================= *\/\r\n\r\n@media (max-width: 420px) {\r\n\r\n  #pp-hero {\r\n    min-height: 740px;\r\n  }\r\n\r\n\r\n  #pp-hero .pp-hero__inner {\r\n    width:\r\n      calc(\r\n        100% - 30px\r\n      );\r\n\r\n    padding:\r\n      54px\r\n      0\r\n      48px;\r\n  }\r\n\r\n\r\n  #pp-hero .pp-hero__logo {\r\n    width: 170px;\r\n  }\r\n\r\n\r\n  #pp-hero .pp-hero__title {\r\n    font-size:\r\n      clamp(\r\n        37px,\r\n        11.6vw,\r\n        47px\r\n      );\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   REDUCED MOTION\r\n========================================================= *\/\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n\r\n  #pp-hero .pp-hero__media {\r\n    transform:\r\n      none !important;\r\n  }\r\n\r\n\r\n  #pp-hero .pp-reveal {\r\n    opacity: 1;\r\n\r\n    transform: none;\r\n\r\n    filter: none;\r\n  }\r\n\r\n\r\n  #pp-hero.pp-ready\r\n  .pp-reveal,\r\n\r\n  #pp-hero.pp-ready\r\n  .pp-hero__brand,\r\n\r\n  #pp-hero\r\n  .pp-hero__gradient {\r\n    animation:\r\n      none !important;\r\n  }\r\n\r\n\r\n  #pp-hero .pp-hero__button {\r\n    transition:\r\n      none !important;\r\n  }\r\n\r\n\r\n  #pp-hero .pp-hero__sound {\r\n    display: none;\r\n  }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n\r\n<!-- =========================================================\r\n     HERO HTML\r\n========================================================= -->\r\n\r\n<section\r\n  id=\"pp-hero\"\r\n  aria-labelledby=\"pp-hero-title\"\r\n>\r\n\r\n\r\n  <!-- =====================================================\r\n       VIDEO\r\n  ====================================================== -->\r\n\r\n  <div\r\n    class=\"pp-hero__media\"\r\n    aria-hidden=\"true\"\r\n  >\r\n\r\n    <video\r\n      class=\"pp-hero__video\"\r\n      autoplay\r\n      muted\r\n      loop\r\n      playsinline\r\n      webkit-playsinline\r\n      preload=\"metadata\"\r\n      poster=\"PASTE_PIXEL_PINE_POSTER_URL_HERE\"\r\n      tabindex=\"-1\"\r\n    >\r\n\r\n      <source\r\n        src=\"https:\/\/pixel-pine.com\/wp-content\/uploads\/2026\/09\/gemini_generated_video_82f0a8f8.mp4\"\r\n        type=\"video\/mp4\"\r\n      \/>\r\n\r\n    <\/video>\r\n\r\n  <\/div>\r\n\r\n\r\n\r\n  <!-- =====================================================\r\n       READABILITY\r\n  ====================================================== -->\r\n\r\n  <div\r\n    class=\"pp-hero__overlay\"\r\n    aria-hidden=\"true\"\r\n  ><\/div>\r\n\r\n\r\n  <div\r\n    class=\"pp-hero__focus\"\r\n    aria-hidden=\"true\"\r\n  ><\/div>\r\n\r\n\r\n\r\n  <!-- =====================================================\r\n       BRAND LIGHTS\r\n  ====================================================== -->\r\n\r\n  <div\r\n    class=\"\r\n      pp-hero__glow\r\n      pp-hero__glow--mint\r\n    \"\r\n    aria-hidden=\"true\"\r\n  ><\/div>\r\n\r\n\r\n  <div\r\n    class=\"\r\n      pp-hero__glow\r\n      pp-hero__glow--purple\r\n    \"\r\n    aria-hidden=\"true\"\r\n  ><\/div>\r\n\r\n\r\n\r\n  <!-- GRID -->\r\n\r\n  <div\r\n    class=\"pp-hero__grid\"\r\n    aria-hidden=\"true\"\r\n  ><\/div>\r\n\r\n\r\n\r\n  <!-- =====================================================\r\n       HERO CONTENT\r\n  ====================================================== -->\r\n\r\n  <div class=\"pp-hero__inner\">\r\n\r\n    <div class=\"pp-hero__content\">\r\n\r\n\r\n      <!-- LOGO -->\r\n\r\n      <div\r\n        class=\"\r\n          pp-hero__brand\r\n          pp-reveal\r\n        \"\r\n        style=\"\r\n          --pp-delay: 60ms;\r\n        \"\r\n      >\r\n\r\n        <img\r\n          class=\"pp-hero__logo\"\r\n          src=\"https:\/\/pixel-pine.com\/wp-content\/uploads\/2026\/09\/ChatGPT-Image-Sep-30-2026-01_51_47-PM-1.png\"\r\n          alt=\"Pixel Pine\"\r\n          decoding=\"async\"\r\n        \/>\r\n\r\n      <\/div>\r\n\r\n\r\n\r\n      <!-- EYEBROW -->\r\n\r\n      <p\r\n        class=\"\r\n          pp-hero__eyebrow\r\n          pp-reveal\r\n        \"\r\n        style=\"\r\n          --pp-delay: 160ms;\r\n        \"\r\n      >\r\n        Enterprise AI Implementation\r\n        &amp; Managed AI Operations\r\n      <\/p>\r\n\r\n\r\n\r\n      <!-- TITLE -->\r\n\r\n      <h1\r\n        id=\"pp-hero-title\"\r\n        class=\"\r\n          pp-hero__title\r\n          pp-reveal\r\n        \"\r\n        style=\"\r\n          --pp-delay: 260ms;\r\n        \"\r\n      >\r\n\r\n        Turn AI Ambition Into\r\n\r\n        <br \/>\r\n\r\n        <span class=\"pp-hero__gradient\">\r\n          Operational Workflows.\r\n        <\/span>\r\n\r\n      <\/h1>\r\n\r\n\r\n\r\n      <!-- DESCRIPTION -->\r\n\r\n      <p\r\n        class=\"\r\n          pp-hero__description\r\n          pp-reveal\r\n        \"\r\n        style=\"\r\n          --pp-delay: 370ms;\r\n        \"\r\n      >\r\n        Pixel Pine designs and operates\r\n        practical AI systems that connect\r\n        your data, people, and processes.\r\n      <\/p>\r\n\r\n\r\n\r\n      <!-- CTA -->\r\n\r\n      <div\r\n        class=\"\r\n          pp-hero__actions\r\n          pp-reveal\r\n        \"\r\n        style=\"\r\n          --pp-delay: 490ms;\r\n        \"\r\n      >\r\n\r\n        <a\r\n          class=\"\r\n            pp-hero__button\r\n            pp-hero__button--primary\r\n          \"\r\n          href=\"#ai-services\"\r\n        >\r\n          Explore Our Services\r\n        <\/a>\r\n\r\n\r\n        <a\r\n          class=\"\r\n            pp-hero__button\r\n            pp-hero__button--secondary\r\n          \"\r\n          href=\"#contact\"\r\n        >\r\n          Talk to Our Team\r\n        <\/a>\r\n\r\n      <\/div>\r\n\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n\r\n\r\n  <!-- =====================================================\r\n       MUTE \/ UNMUTE\r\n  ====================================================== -->\r\n\r\n  <button\r\n    class=\"pp-hero__sound\"\r\n    type=\"button\"\r\n    aria-label=\"Unmute video\"\r\n    aria-pressed=\"false\"\r\n    title=\"Unmute video\"\r\n  >\r\n\r\n\r\n    <!-- SOUND ON -->\r\n\r\n    <svg\r\n      class=\"pp-hero__sound-icon--on\"\r\n      viewBox=\"0 0 24 24\"\r\n      aria-hidden=\"true\"\r\n    >\r\n\r\n      <path d=\"M11 5 6 9H3v6h3l5 4V5Z\"\/>\r\n\r\n      <path d=\"M15 9.5a4 4 0 0 1 0 5\"\/>\r\n\r\n      <path d=\"M17.5 7a7 7 0 0 1 0 10\"\/>\r\n\r\n    <\/svg>\r\n\r\n\r\n\r\n    <!-- MUTED -->\r\n\r\n    <svg\r\n      class=\"pp-hero__sound-icon--off\"\r\n      viewBox=\"0 0 24 24\"\r\n      aria-hidden=\"true\"\r\n    >\r\n\r\n      <path d=\"M11 5 6 9H3v6h3l5 4V5Z\"\/>\r\n\r\n      <path d=\"m16 10 5 5\"\/>\r\n\r\n      <path d=\"m21 10-5 5\"\/>\r\n\r\n    <\/svg>\r\n\r\n\r\n  <\/button>\r\n\r\n\r\n<\/section>\r\n\r\n\r\n\r\n<script>\r\n\r\n(() => {\r\n\r\n\r\n  \/* =========================================================\r\n     INITIALISE\r\n  ========================================================= *\/\r\n\r\n  const hero =\r\n    document.getElementById(\r\n      \"pp-hero\"\r\n    );\r\n\r\n\r\n  if (\r\n    !hero ||\r\n    hero.dataset.ppInitialised ===\r\n      \"true\"\r\n  ) {\r\n\r\n    return;\r\n\r\n  }\r\n\r\n\r\n  hero.dataset.ppInitialised =\r\n    \"true\";\r\n\r\n\r\n\r\n  \/* =========================================================\r\n     FULL BLEED WIDTH\r\n  ========================================================= *\/\r\n\r\n  const setHeroWidth = () => {\r\n\r\n\r\n    hero.style.setProperty(\r\n      \"--pp-vw\",\r\n      `${\r\n        document\r\n          .documentElement\r\n          .clientWidth\r\n      }px`\r\n    );\r\n\r\n\r\n  };\r\n\r\n\r\n  setHeroWidth();\r\n\r\n\r\n  window.addEventListener(\r\n    \"resize\",\r\n    setHeroWidth,\r\n    {\r\n      passive: true\r\n    }\r\n  );\r\n\r\n\r\n\r\n  \/* =========================================================\r\n     HERO REVEAL\r\n  ========================================================= *\/\r\n\r\n  requestAnimationFrame(\r\n    () => {\r\n\r\n\r\n      requestAnimationFrame(\r\n        () => {\r\n\r\n\r\n          hero.classList.add(\r\n            \"pp-ready\"\r\n          );\r\n\r\n\r\n        }\r\n      );\r\n\r\n\r\n    }\r\n  );\r\n\r\n\r\n\r\n  \/* =========================================================\r\n     VIDEO\r\n  ========================================================= *\/\r\n\r\n  const video =\r\n    hero.querySelector(\r\n      \".pp-hero__video\"\r\n    );\r\n\r\n\r\n  const soundButton =\r\n    hero.querySelector(\r\n      \".pp-hero__sound\"\r\n    );\r\n\r\n\r\n  if (!video) {\r\n\r\n    return;\r\n\r\n  }\r\n\r\n\r\n\r\n  \/*\r\n    Autoplay must normally begin muted.\r\n  *\/\r\n\r\n  video.muted = true;\r\n\r\n  video.defaultMuted = true;\r\n\r\n  video.volume = 1;\r\n\r\n\r\n\r\n  video\r\n    .play()\r\n    .catch(\r\n      () => {\r\n\r\n        \/*\r\n          Poster remains visible if browser\r\n          blocks autoplay.\r\n        *\/\r\n\r\n      }\r\n    );\r\n\r\n\r\n\r\n  \/* =========================================================\r\n     SOUND UI STATE\r\n  ========================================================= *\/\r\n\r\n  const updateSoundState = () => {\r\n\r\n\r\n    const soundOn =\r\n      !video.muted &&\r\n      video.volume > 0;\r\n\r\n\r\n    soundButton\r\n      ?.classList\r\n      .toggle(\r\n        \"is-sound-on\",\r\n        soundOn\r\n      );\r\n\r\n\r\n    soundButton\r\n      ?.setAttribute(\r\n        \"aria-pressed\",\r\n        soundOn\r\n          ? \"true\"\r\n          : \"false\"\r\n      );\r\n\r\n\r\n    soundButton\r\n      ?.setAttribute(\r\n        \"aria-label\",\r\n        soundOn\r\n          ? \"Mute video\"\r\n          : \"Unmute video\"\r\n      );\r\n\r\n\r\n    soundButton\r\n      ?.setAttribute(\r\n        \"title\",\r\n        soundOn\r\n          ? \"Mute video\"\r\n          : \"Unmute video\"\r\n      );\r\n\r\n\r\n  };\r\n\r\n\r\n  updateSoundState();\r\n\r\n\r\n\r\n  \/* =========================================================\r\n     MUTE \/ UNMUTE\r\n  ========================================================= *\/\r\n\r\n  soundButton\r\n    ?.addEventListener(\r\n      \"click\",\r\n      async () => {\r\n\r\n\r\n        if (\r\n          video.muted ||\r\n          video.volume === 0\r\n        ) {\r\n\r\n\r\n          \/*\r\n            User interaction allows sound.\r\n          *\/\r\n\r\n          video.muted = false;\r\n\r\n          video.defaultMuted = false;\r\n\r\n          video.volume = 1;\r\n\r\n\r\n          try {\r\n\r\n            await video.play();\r\n\r\n          } catch (error) {\r\n\r\n            \/*\r\n              Ignore browser playback error.\r\n            *\/\r\n\r\n          }\r\n\r\n\r\n        } else {\r\n\r\n\r\n          video.muted = true;\r\n\r\n\r\n        }\r\n\r\n\r\n        updateSoundState();\r\n\r\n\r\n      }\r\n    );\r\n\r\n\r\n\r\n  \/*\r\n    Sync button if browser changes\r\n    mute state externally.\r\n  *\/\r\n\r\n  video.addEventListener(\r\n    \"volumechange\",\r\n    updateSoundState\r\n  );\r\n\r\n\r\n\r\n  \/* =========================================================\r\n     REDUCED MOTION\r\n  ========================================================= *\/\r\n\r\n  const reducedMotion =\r\n    window.matchMedia(\r\n      \"(prefers-reduced-motion: reduce)\"\r\n    ).matches;\r\n\r\n\r\n  if (\r\n    reducedMotion\r\n  ) {\r\n\r\n    video.pause();\r\n\r\n  }\r\n\r\n\r\n\r\n  \/* =========================================================\r\n     IMPORTANT:\r\n     NO POINTERMOVE\r\n     NO CURSOR PARALLAX\r\n     NO LEFT \/ RIGHT VIDEO MOVEMENT\r\n  ========================================================= *\/\r\n\r\n\r\n})();\r\n\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c3bad16 elementor-widget elementor-widget-html\" data-id=\"c3bad16\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\r\n  PIXEL PINE \u2014 ABOUT SECTION\r\n  Paste this entire block into ONE Elementor HTML Widget.\r\n\r\n  IMAGE ALREADY SET:\r\n  https:\/\/pixel-pine.com\/wp-content\/uploads\/2026\/09\/ChatGPT-Image-Sep-30-2026-09_39_17-AM.jpg\r\n========================================================= -->\r\n\r\n<style>\r\n  \/* =========================================================\r\n     ELEMENTOR FULL-WIDTH RESET\r\n  ========================================================= *\/\r\n\r\n  .elementor-widget-html:has(#pp-about),\r\n  .elementor-widget-html:has(#pp-about) > .elementor-widget-container {\r\n    width: 100%;\r\n    max-width: none !important;\r\n    margin: 0 !important;\r\n    padding: 0 !important;\r\n  }\r\n\r\n  .e-con:has(#pp-about) {\r\n    --gap: 0px !important;\r\n    gap: 0 !important;\r\n  }\r\n\r\n  #pp-about,\r\n  #pp-about * {\r\n    box-sizing: border-box;\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     SECTION FOUNDATION\r\n  ========================================================= *\/\r\n\r\n  #pp-about {\r\n    \/* Pixel Pine original brand colours *\/\r\n    --pp-mint: #84E6D3;\r\n    --pp-indigo: #7E79D7;\r\n    --pp-purple: #AF83E8;\r\n\r\n    \/* Dark mode *\/\r\n    --pp-bg: #0A1020;\r\n    --pp-bg-deep: #070C17;\r\n    --pp-panel: #0E1628;\r\n\r\n    \/* Typography *\/\r\n    --pp-white: #F7FAFC;\r\n    --pp-muted: #B8C2D1;\r\n    --pp-dim: #7E899E;\r\n\r\n    \/* Borders *\/\r\n    --pp-line: rgba(126, 121, 215, 0.20);\r\n    --pp-line-mint: rgba(132, 230, 211, 0.28);\r\n    --pp-line-purple: rgba(175, 131, 232, 0.30);\r\n\r\n    position: relative;\r\n\r\n    left: 50%;\r\n\r\n    width: 100vw;\r\n    max-width: none !important;\r\n\r\n    margin: 0 !important;\r\n\r\n    transform: translateX(-50%);\r\n\r\n    overflow: hidden;\r\n    isolation: isolate;\r\n\r\n    background:\r\n      radial-gradient(\r\n        circle at 16% 32%,\r\n        rgba(132, 230, 211, 0.055),\r\n        transparent 29%\r\n      ),\r\n      radial-gradient(\r\n        circle at 84% 46%,\r\n        rgba(175, 131, 232, 0.065),\r\n        transparent 32%\r\n      ),\r\n      linear-gradient(\r\n        180deg,\r\n        #0A1020 0%,\r\n        #080E1B 100%\r\n      );\r\n\r\n    color: var(--pp-white);\r\n\r\n    font-family:\r\n      Manrope,\r\n      Inter,\r\n      \"Segoe UI\",\r\n      Arial,\r\n      sans-serif;\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     BACKGROUND AMBIENT LIGHT\r\n  ========================================================= *\/\r\n\r\n  #pp-about .pp-about__ambient {\r\n    position: absolute;\r\n\r\n    z-index: -2;\r\n\r\n    border-radius: 50%;\r\n\r\n    filter: blur(140px);\r\n\r\n    pointer-events: none;\r\n  }\r\n\r\n\r\n  #pp-about .pp-about__ambient--mint {\r\n    top: 18%;\r\n    left: -12%;\r\n\r\n    width: 550px;\r\n    height: 550px;\r\n\r\n    background:\r\n      rgba(132, 230, 211, 0.055);\r\n  }\r\n\r\n\r\n  #pp-about .pp-about__ambient--purple {\r\n    right: -13%;\r\n    bottom: 5%;\r\n\r\n    width: 620px;\r\n    height: 620px;\r\n\r\n    background:\r\n      rgba(175, 131, 232, 0.065);\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     MAIN CONTAINER\r\n  ========================================================= *\/\r\n\r\n  #pp-about .pp-about__inner {\r\n    position: relative;\r\n\r\n    z-index: 2;\r\n\r\n    width:\r\n      min(\r\n        1360px,\r\n        calc(100% - 80px)\r\n      );\r\n\r\n    margin: 0 auto;\r\n\r\n    padding:\r\n      112px\r\n      0\r\n      92px;\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     INTRO \/ CENTERED HEADER\r\n  ========================================================= *\/\r\n\r\n  #pp-about .pp-about__intro {\r\n    max-width: 980px;\r\n\r\n    margin:\r\n      0\r\n      auto\r\n      54px;\r\n\r\n    text-align: center;\r\n  }\r\n\r\n\r\n  #pp-about .pp-about__eyebrow {\r\n    display: inline-flex;\r\n\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    gap: 16px;\r\n\r\n    margin:\r\n      0\r\n      0\r\n      24px;\r\n\r\n    color: #A7EFE3;\r\n\r\n    font-size:\r\n      clamp(\r\n        10px,\r\n        0.9vw,\r\n        13px\r\n      );\r\n\r\n    font-weight: 760;\r\n\r\n    line-height: 1.4;\r\n\r\n    letter-spacing: 0.31em;\r\n\r\n    text-transform: uppercase;\r\n  }\r\n\r\n\r\n  #pp-about .pp-about__eyebrow::before,\r\n  #pp-about .pp-about__eyebrow::after {\r\n    content: \"\";\r\n\r\n    width: 58px;\r\n    height: 1px;\r\n  }\r\n\r\n\r\n  #pp-about .pp-about__eyebrow::before {\r\n    background:\r\n      linear-gradient(\r\n        90deg,\r\n        transparent,\r\n        var(--pp-mint)\r\n      );\r\n  }\r\n\r\n\r\n  #pp-about .pp-about__eyebrow::after {\r\n    background:\r\n      linear-gradient(\r\n        90deg,\r\n        var(--pp-purple),\r\n        transparent\r\n      );\r\n  }\r\n\r\n\r\n  #pp-about .pp-about__title {\r\n    max-width: 970px;\r\n\r\n    margin: 0 auto;\r\n\r\n    color: var(--pp-white);\r\n\r\n    font-size:\r\n      clamp(\r\n        48px,\r\n        4.3vw,\r\n        68px\r\n      );\r\n\r\n    font-weight: 770;\r\n\r\n    line-height: 1.02;\r\n\r\n    letter-spacing: -0.052em;\r\n\r\n    text-wrap: balance;\r\n\r\n    text-shadow:\r\n      0 14px 46px\r\n      rgba(0, 0, 0, 0.34);\r\n  }\r\n\r\n\r\n  #pp-about .pp-about__title-highlight {\r\n    color: transparent;\r\n\r\n    background:\r\n      linear-gradient(\r\n        90deg,\r\n        #84E6D3 0%,\r\n        #7E79D7 52%,\r\n        #AF83E8 100%\r\n      );\r\n\r\n    -webkit-background-clip: text;\r\n    background-clip: text;\r\n  }\r\n\r\n\r\n  #pp-about .pp-about__description {\r\n    max-width: 790px;\r\n\r\n    margin:\r\n      26px\r\n      auto\r\n      0;\r\n\r\n    color: var(--pp-muted);\r\n\r\n    font-size:\r\n      clamp(\r\n        16px,\r\n        1.25vw,\r\n        19px\r\n      );\r\n\r\n    font-weight: 440;\r\n\r\n    line-height: 1.65;\r\n\r\n    letter-spacing: -0.015em;\r\n\r\n    text-wrap: balance;\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     CINEMATIC IMAGE\r\n  ========================================================= *\/\r\n\r\n  #pp-about .pp-about__visual {\r\n    position: relative;\r\n\r\n    width: 100%;\r\n\r\n    aspect-ratio: 21 \/ 8;\r\n\r\n    min-height: 420px;\r\n\r\n    overflow: hidden;\r\n\r\n    border:\r\n      1px\r\n      solid\r\n      rgba(132, 230, 211, 0.20);\r\n\r\n    border-radius: 18px;\r\n\r\n    background: #070C17;\r\n\r\n    box-shadow:\r\n      0 30px 80px\r\n      rgba(0, 0, 0, 0.30),\r\n      0 0 0 1px\r\n      rgba(175, 131, 232, 0.035);\r\n\r\n    isolation: isolate;\r\n  }\r\n\r\n\r\n  #pp-about .pp-about__visual::before {\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    inset: 0;\r\n\r\n    z-index: 2;\r\n\r\n    background:\r\n      linear-gradient(\r\n        90deg,\r\n        rgba(5, 9, 18, 0.62) 0%,\r\n        rgba(5, 9, 18, 0.18) 28%,\r\n        rgba(5, 9, 18, 0.03) 58%,\r\n        rgba(5, 9, 18, 0.12) 100%\r\n      ),\r\n      linear-gradient(\r\n        0deg,\r\n        rgba(5, 9, 18, 0.32) 0%,\r\n        transparent 42%\r\n      );\r\n\r\n    pointer-events: none;\r\n  }\r\n\r\n\r\n  #pp-about .pp-about__visual::after {\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    inset: 0;\r\n\r\n    z-index: 3;\r\n\r\n    border-radius: inherit;\r\n\r\n    box-shadow:\r\n      inset\r\n      0\r\n      0\r\n      60px\r\n      rgba(5, 9, 18, 0.24);\r\n\r\n    pointer-events: none;\r\n  }\r\n\r\n\r\n  #pp-about .pp-about__image {\r\n    position: absolute;\r\n\r\n    inset: 0;\r\n\r\n    z-index: 1;\r\n\r\n    display: block;\r\n\r\n    width: 100%;\r\n    height: 100%;\r\n\r\n    object-fit: cover;\r\n\r\n    \/*\r\n      Keeps people + AI dashboard visible.\r\n    *\/\r\n    object-position: center 53%;\r\n\r\n    transition:\r\n      transform\r\n      1100ms\r\n      cubic-bezier(.22, 1, .36, 1),\r\n      filter\r\n      700ms\r\n      ease;\r\n\r\n    filter:\r\n      brightness(0.89)\r\n      saturate(0.95);\r\n  }\r\n\r\n\r\n  #pp-about .pp-about__visual:hover .pp-about__image {\r\n    transform: scale(1.025);\r\n\r\n    filter:\r\n      brightness(0.94)\r\n      saturate(1.02);\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     IMAGE OVERLAY LABEL\r\n  ========================================================= *\/\r\n\r\n  #pp-about .pp-about__visual-label {\r\n    position: absolute;\r\n\r\n    z-index: 5;\r\n\r\n    top: 50%;\r\n    left: 58px;\r\n\r\n    max-width: 210px;\r\n\r\n    transform:\r\n      translateY(-50%);\r\n  }\r\n\r\n\r\n  #pp-about .pp-about__visual-label p {\r\n    margin: 0;\r\n\r\n    color: #D9F8F2;\r\n\r\n    font-size:\r\n      clamp(\r\n        13px,\r\n        1vw,\r\n        16px\r\n      );\r\n\r\n    font-weight: 680;\r\n\r\n    line-height: 1.75;\r\n\r\n    letter-spacing: 0.28em;\r\n\r\n    text-transform: uppercase;\r\n\r\n    text-shadow:\r\n      0 4px 18px\r\n      rgba(0, 0, 0, 0.48);\r\n  }\r\n\r\n\r\n  #pp-about .pp-about__visual-label span {\r\n    display: block;\r\n\r\n    width: 38px;\r\n    height: 2px;\r\n\r\n    margin-top: 20px;\r\n\r\n    background:\r\n      linear-gradient(\r\n        90deg,\r\n        var(--pp-mint),\r\n        var(--pp-indigo)\r\n      );\r\n\r\n    box-shadow:\r\n      0 0 14px\r\n      rgba(132, 230, 211, 0.50);\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     COMPANY METADATA\r\n  ========================================================= *\/\r\n\r\n  #pp-about .pp-about__metadata {\r\n    display: flex;\r\n\r\n    align-items: center;\r\n    justify-content: center;\r\n\r\n    flex-wrap: wrap;\r\n\r\n    gap: 15px;\r\n\r\n    margin-top: 30px;\r\n\r\n    color: #CDD4E0;\r\n\r\n    font-size: 14px;\r\n\r\n    font-weight: 520;\r\n\r\n    letter-spacing: 0.02em;\r\n  }\r\n\r\n\r\n  #pp-about .pp-about__metadata-dot {\r\n    display: block;\r\n\r\n    width: 5px;\r\n    height: 5px;\r\n\r\n    border-radius: 50%;\r\n  }\r\n\r\n\r\n  #pp-about .pp-about__metadata-dot--mint {\r\n    background: var(--pp-mint);\r\n\r\n    box-shadow:\r\n      0 0 9px\r\n      rgba(132, 230, 211, 0.72);\r\n  }\r\n\r\n\r\n  #pp-about .pp-about__metadata-dot--purple {\r\n    background: var(--pp-purple);\r\n\r\n    box-shadow:\r\n      0 0 9px\r\n      rgba(175, 131, 232, 0.75);\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     VISION & MISSION BAND\r\n  ========================================================= *\/\r\n\r\n  #pp-about .pp-about__principles {\r\n    position: relative;\r\n\r\n    display: grid;\r\n\r\n    grid-template-columns:\r\n      repeat(\r\n        2,\r\n        minmax(0, 1fr)\r\n      );\r\n\r\n    margin-top: 34px;\r\n\r\n    padding-top: 38px;\r\n\r\n    border-top:\r\n      1px\r\n      solid\r\n      var(--pp-line);\r\n  }\r\n\r\n\r\n  #pp-about .pp-about__principles::before {\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    top: 38px;\r\n    bottom: 5px;\r\n    left: 50%;\r\n\r\n    width: 1px;\r\n\r\n    background:\r\n      linear-gradient(\r\n        180deg,\r\n        rgba(126, 121, 215, 0.05),\r\n        rgba(126, 121, 215, 0.42),\r\n        rgba(126, 121, 215, 0.06)\r\n      );\r\n  }\r\n\r\n\r\n  #pp-about .pp-about__vision,\r\n  #pp-about .pp-about__mission {\r\n    min-width: 0;\r\n\r\n    padding:\r\n      10px\r\n      68px\r\n      18px;\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     VISION\r\n  ========================================================= *\/\r\n\r\n  #pp-about .pp-about__vision {\r\n    padding-left: 10%;\r\n  }\r\n\r\n\r\n  #pp-about .pp-about__mission {\r\n    padding-right: 5%;\r\n  }\r\n\r\n\r\n  #pp-about .pp-about__principle-label {\r\n    display: flex;\r\n\r\n    align-items: center;\r\n\r\n    gap: 16px;\r\n\r\n    margin:\r\n      0\r\n      0\r\n      22px;\r\n\r\n    font-size: 12px;\r\n\r\n    font-weight: 780;\r\n\r\n    line-height: 1.4;\r\n\r\n    letter-spacing: 0.30em;\r\n\r\n    text-transform: uppercase;\r\n  }\r\n\r\n\r\n  #pp-about .pp-about__vision .pp-about__principle-label {\r\n    color: var(--pp-mint);\r\n  }\r\n\r\n\r\n  #pp-about .pp-about__mission .pp-about__principle-label {\r\n    color: var(--pp-purple);\r\n  }\r\n\r\n\r\n  #pp-about .pp-about__principle-label::after {\r\n    content: \"\";\r\n\r\n    width: 52px;\r\n    height: 1px;\r\n  }\r\n\r\n\r\n  #pp-about .pp-about__vision\r\n  .pp-about__principle-label::after {\r\n    background:\r\n      linear-gradient(\r\n        90deg,\r\n        var(--pp-mint),\r\n        transparent\r\n      );\r\n  }\r\n\r\n\r\n  #pp-about .pp-about__mission\r\n  .pp-about__principle-label::after {\r\n    background:\r\n      linear-gradient(\r\n        90deg,\r\n        var(--pp-purple),\r\n        transparent\r\n      );\r\n  }\r\n\r\n\r\n  #pp-about .pp-about__vision-copy {\r\n    max-width: 510px;\r\n\r\n    margin: 0;\r\n\r\n    color: #EFF2F8;\r\n\r\n    font-size:\r\n      clamp(\r\n        23px,\r\n        1.9vw,\r\n        31px\r\n      );\r\n\r\n    font-weight: 470;\r\n\r\n    line-height: 1.45;\r\n\r\n    letter-spacing: -0.025em;\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     MISSION LIST\r\n  ========================================================= *\/\r\n\r\n  #pp-about .pp-about__mission-list {\r\n    display: grid;\r\n\r\n    gap: 17px;\r\n\r\n    max-width: 570px;\r\n\r\n    margin: 0;\r\n    padding: 0;\r\n\r\n    list-style: none;\r\n  }\r\n\r\n\r\n  #pp-about .pp-about__mission-item {\r\n    display: grid;\r\n\r\n    grid-template-columns:\r\n      10px\r\n      minmax(0, 1fr);\r\n\r\n    align-items: start;\r\n\r\n    gap: 17px;\r\n  }\r\n\r\n\r\n  #pp-about .pp-about__mission-dot {\r\n    width: 8px;\r\n    height: 8px;\r\n\r\n    margin-top: 9px;\r\n\r\n    border-radius: 50%;\r\n\r\n    background: var(--pp-purple);\r\n\r\n    box-shadow:\r\n      0 0 0 5px\r\n      rgba(175, 131, 232, 0.055),\r\n      0 0 13px\r\n      rgba(175, 131, 232, 0.68);\r\n  }\r\n\r\n\r\n  #pp-about .pp-about__mission-item p {\r\n    margin: 0;\r\n\r\n    color: #CFD6E3;\r\n\r\n    font-size:\r\n      clamp(\r\n        15px,\r\n        1.15vw,\r\n        18px\r\n      );\r\n\r\n    font-weight: 430;\r\n\r\n    line-height: 1.5;\r\n\r\n    letter-spacing: -0.012em;\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     BOTTOM BRAND DIVIDER\r\n  ========================================================= *\/\r\n\r\n  #pp-about .pp-about__divider {\r\n    position: relative;\r\n\r\n    width: 100%;\r\n    height: 1px;\r\n\r\n    margin-top: 45px;\r\n\r\n    background:\r\n      linear-gradient(\r\n        90deg,\r\n        transparent 0%,\r\n        rgba(132, 230, 211, 0.55) 20%,\r\n        #84E6D3 37%,\r\n        #7E79D7 51%,\r\n        #AF83E8 66%,\r\n        rgba(175, 131, 232, 0.52) 80%,\r\n        transparent 100%\r\n      );\r\n\r\n    opacity: 0.72;\r\n  }\r\n\r\n\r\n  #pp-about .pp-about__divider-node {\r\n    position: absolute;\r\n\r\n    top: 50%;\r\n    left: 50%;\r\n\r\n    width: 13px;\r\n    height: 13px;\r\n\r\n    transform:\r\n      translate(\r\n        -50%,\r\n        -50%\r\n      );\r\n\r\n    border:\r\n      2px\r\n      solid\r\n      rgba(190, 232, 255, 0.70);\r\n\r\n    border-radius: 50%;\r\n\r\n    background: var(--pp-indigo);\r\n\r\n    box-shadow:\r\n      0\r\n      0\r\n      0\r\n      6px\r\n      rgba(126, 121, 215, 0.08),\r\n      0\r\n      0\r\n      20px\r\n      rgba(126, 121, 215, 0.88);\r\n\r\n    animation:\r\n      ppAboutPulse\r\n      2.8s\r\n      ease-in-out\r\n      infinite;\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     SCROLL REVEAL\r\n  ========================================================= *\/\r\n\r\n  #pp-about .pp-about-reveal {\r\n    opacity: 0;\r\n\r\n    transform:\r\n      translateY(28px);\r\n\r\n    filter: blur(4px);\r\n\r\n    transition:\r\n      opacity\r\n      780ms\r\n      ease,\r\n      transform\r\n      780ms\r\n      cubic-bezier(.22, 1, .36, 1),\r\n      filter\r\n      780ms\r\n      ease;\r\n  }\r\n\r\n\r\n  #pp-about .pp-about-reveal.is-visible {\r\n    opacity: 1;\r\n\r\n    transform:\r\n      translateY(0);\r\n\r\n    filter: blur(0);\r\n  }\r\n\r\n\r\n  #pp-about .pp-about-image-reveal {\r\n    opacity: 0;\r\n\r\n    transform:\r\n      translateY(34px)\r\n      scale(0.985);\r\n\r\n    transition:\r\n      opacity\r\n      900ms\r\n      ease,\r\n      transform\r\n      1000ms\r\n      cubic-bezier(.22, 1, .36, 1);\r\n  }\r\n\r\n\r\n  #pp-about .pp-about-image-reveal.is-visible {\r\n    opacity: 1;\r\n\r\n    transform:\r\n      translateY(0)\r\n      scale(1);\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     KEYFRAMES\r\n  ========================================================= *\/\r\n\r\n  @keyframes ppAboutPulse {\r\n    0%,\r\n    100% {\r\n      opacity: 0.72;\r\n\r\n      transform:\r\n        translate(\r\n          -50%,\r\n          -50%\r\n        )\r\n        scale(0.92);\r\n    }\r\n\r\n    50% {\r\n      opacity: 1;\r\n\r\n      transform:\r\n        translate(\r\n          -50%,\r\n          -50%\r\n        )\r\n        scale(1.12);\r\n    }\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     TABLET\r\n  ========================================================= *\/\r\n\r\n  @media (max-width: 1024px) {\r\n\r\n    #pp-about .pp-about__inner {\r\n      width:\r\n        min(\r\n          1200px,\r\n          calc(100% - 56px)\r\n        );\r\n\r\n      padding:\r\n        94px\r\n        0\r\n        78px;\r\n    }\r\n\r\n\r\n    #pp-about .pp-about__intro {\r\n      margin-bottom: 46px;\r\n    }\r\n\r\n\r\n    #pp-about .pp-about__visual {\r\n      aspect-ratio: 16 \/ 7;\r\n\r\n      min-height: 390px;\r\n    }\r\n\r\n\r\n    #pp-about .pp-about__visual-label {\r\n      left: 40px;\r\n    }\r\n\r\n\r\n    #pp-about .pp-about__vision,\r\n    #pp-about .pp-about__mission {\r\n      padding:\r\n        10px\r\n        44px\r\n        16px;\r\n    }\r\n\r\n\r\n    #pp-about .pp-about__vision {\r\n      padding-left: 4%;\r\n    }\r\n\r\n\r\n    #pp-about .pp-about__mission {\r\n      padding-right: 2%;\r\n    }\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     MOBILE \/ SMALL TABLET\r\n  ========================================================= *\/\r\n\r\n  @media (max-width: 767px) {\r\n\r\n    #pp-about {\r\n      left: auto;\r\n\r\n      width: 100%;\r\n\r\n      transform: none;\r\n    }\r\n\r\n\r\n    #pp-about .pp-about__inner {\r\n      width:\r\n        min(\r\n          100% - 36px,\r\n          620px\r\n        );\r\n\r\n      padding:\r\n        76px\r\n        0\r\n        64px;\r\n    }\r\n\r\n\r\n    #pp-about .pp-about__intro {\r\n      margin-bottom: 38px;\r\n    }\r\n\r\n\r\n    #pp-about .pp-about__eyebrow {\r\n      gap: 10px;\r\n\r\n      margin-bottom: 19px;\r\n\r\n      font-size: 9px;\r\n\r\n      letter-spacing: 0.22em;\r\n    }\r\n\r\n\r\n    #pp-about .pp-about__eyebrow::before,\r\n    #pp-about .pp-about__eyebrow::after {\r\n      width: 28px;\r\n    }\r\n\r\n\r\n    #pp-about .pp-about__title {\r\n      font-size:\r\n        clamp(\r\n          39px,\r\n          11vw,\r\n          53px\r\n        );\r\n\r\n      line-height: 1.03;\r\n    }\r\n\r\n\r\n    #pp-about .pp-about__description {\r\n      max-width: 500px;\r\n\r\n      margin-top: 22px;\r\n\r\n      font-size: 15.5px;\r\n    }\r\n\r\n\r\n    \/* Image becomes taller on mobile *\/\r\n\r\n    #pp-about .pp-about__visual {\r\n      aspect-ratio: auto;\r\n\r\n      min-height: 470px;\r\n\r\n      border-radius: 14px;\r\n    }\r\n\r\n\r\n    #pp-about .pp-about__image {\r\n      object-position: 59% center;\r\n    }\r\n\r\n\r\n    #pp-about .pp-about__visual::before {\r\n      background:\r\n        linear-gradient(\r\n          180deg,\r\n          rgba(5, 9, 18, 0.18) 0%,\r\n          rgba(5, 9, 18, 0.06) 50%,\r\n          rgba(5, 9, 18, 0.62) 100%\r\n        );\r\n    }\r\n\r\n\r\n    #pp-about .pp-about__visual-label {\r\n      top: auto;\r\n      right: 22px;\r\n      bottom: 24px;\r\n      left: 22px;\r\n\r\n      transform: none;\r\n    }\r\n\r\n\r\n    #pp-about .pp-about__visual-label p {\r\n      max-width: 210px;\r\n\r\n      font-size: 11px;\r\n\r\n      line-height: 1.6;\r\n\r\n      letter-spacing: 0.20em;\r\n    }\r\n\r\n\r\n    #pp-about .pp-about__metadata {\r\n      gap: 10px;\r\n\r\n      margin-top: 24px;\r\n\r\n      font-size: 12px;\r\n    }\r\n\r\n\r\n    \/* Vision & Mission stack *\/\r\n\r\n    #pp-about .pp-about__principles {\r\n      grid-template-columns: 1fr;\r\n\r\n      margin-top: 29px;\r\n\r\n      padding-top: 0;\r\n    }\r\n\r\n\r\n    #pp-about .pp-about__principles::before {\r\n      display: none;\r\n    }\r\n\r\n\r\n    #pp-about .pp-about__vision,\r\n    #pp-about .pp-about__mission {\r\n      padding:\r\n        38px\r\n        4px;\r\n    }\r\n\r\n\r\n    #pp-about .pp-about__mission {\r\n      border-top:\r\n        1px\r\n        solid\r\n        var(--pp-line);\r\n    }\r\n\r\n\r\n    #pp-about .pp-about__vision-copy {\r\n      max-width: 530px;\r\n\r\n      font-size:\r\n        clamp(\r\n          22px,\r\n          6.1vw,\r\n          27px\r\n        );\r\n    }\r\n\r\n\r\n    #pp-about .pp-about__mission-list {\r\n      gap: 15px;\r\n    }\r\n\r\n\r\n    #pp-about .pp-about__mission-item p {\r\n      font-size: 15px;\r\n    }\r\n\r\n\r\n    #pp-about .pp-about__divider {\r\n      margin-top: 26px;\r\n    }\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     SMALL MOBILE\r\n  ========================================================= *\/\r\n\r\n  @media (max-width: 420px) {\r\n\r\n    #pp-about .pp-about__inner {\r\n      width:\r\n        calc(\r\n          100% - 30px\r\n        );\r\n\r\n      padding-top: 68px;\r\n    }\r\n\r\n\r\n    #pp-about .pp-about__visual {\r\n      min-height: 430px;\r\n    }\r\n\r\n\r\n    #pp-about .pp-about__metadata {\r\n      column-gap: 8px;\r\n\r\n      font-size: 11px;\r\n    }\r\n\r\n  }\r\n\r\n\r\n  \/* =========================================================\r\n     REDUCED MOTION\r\n  ========================================================= *\/\r\n\r\n  @media (prefers-reduced-motion: reduce) {\r\n\r\n    #pp-about *,\r\n    #pp-about *::before,\r\n    #pp-about *::after {\r\n      animation-duration:\r\n        0.01ms !important;\r\n\r\n      animation-iteration-count:\r\n        1 !important;\r\n\r\n      transition-duration:\r\n        0.01ms !important;\r\n    }\r\n\r\n\r\n    #pp-about .pp-about-reveal,\r\n    #pp-about .pp-about-image-reveal {\r\n      opacity: 1;\r\n\r\n      transform: none;\r\n\r\n      filter: none;\r\n    }\r\n\r\n  }\r\n<\/style>\r\n\r\n\r\n<!-- =========================================================\r\n     ABOUT PIXEL PINE\r\n========================================================= -->\r\n\r\n<section\r\n  id=\"pp-about\"\r\n  aria-labelledby=\"pp-about-title\"\r\n>\r\n\r\n  <!-- AMBIENT LIGHT -->\r\n\r\n  <div\r\n    class=\"\r\n      pp-about__ambient\r\n      pp-about__ambient--mint\r\n    \"\r\n    aria-hidden=\"true\"\r\n  ><\/div>\r\n\r\n  <div\r\n    class=\"\r\n      pp-about__ambient\r\n      pp-about__ambient--purple\r\n    \"\r\n    aria-hidden=\"true\"\r\n  ><\/div>\r\n\r\n\r\n  <div class=\"pp-about__inner\">\r\n\r\n\r\n    <!-- =====================================================\r\n         INTRO\r\n    ====================================================== -->\r\n\r\n    <header\r\n      class=\"\r\n        pp-about__intro\r\n        pp-about-reveal\r\n      \"\r\n    >\r\n\r\n      <p class=\"pp-about__eyebrow\">\r\n        About Pixel Pine\r\n      <\/p>\r\n\r\n      <h2\r\n        class=\"pp-about__title\"\r\n        id=\"pp-about-title\"\r\n      >\r\n        Practical AI,\r\n        <br \/>\r\n\r\n        Built Around\r\n        <span class=\"pp-about__title-highlight\">\r\n          Your Business.\r\n        <\/span>\r\n      <\/h2>\r\n\r\n      <p class=\"pp-about__description\">\r\n        Pixel Pine helps enterprises design,\r\n        implement, and operate practical AI systems\r\n        around real workflows, data, and business operations.\r\n      <\/p>\r\n\r\n    <\/header>\r\n\r\n\r\n    <!-- =====================================================\r\n         CINEMATIC COMPANY VISUAL\r\n    ====================================================== -->\r\n\r\n    <figure\r\n      class=\"\r\n        pp-about__visual\r\n        pp-about-image-reveal\r\n      \"\r\n    >\r\n\r\n      <img\r\n        class=\"pp-about__image\"\r\n        src=\"https:\/\/pixel-pine.com\/wp-content\/uploads\/2026\/09\/ChatGPT-Image-Sep-30-2026-09_39_17-AM.jpg\"\r\n        alt=\"Pixel Pine enterprise team collaborating on practical AI solutions and business workflows\"\r\n        loading=\"lazy\"\r\n        decoding=\"async\"\r\n      \/>\r\n\r\n      <figcaption\r\n        class=\"pp-about__visual-label\"\r\n      >\r\n        <p>\r\n          From\r\n          <br \/>\r\n          Possibility\r\n          <br \/>\r\n          to Progress\r\n        <\/p>\r\n\r\n        <span aria-hidden=\"true\"><\/span>\r\n      <\/figcaption>\r\n\r\n    <\/figure>\r\n\r\n\r\n    <!-- =====================================================\r\n         COMPANY METADATA\r\n    ====================================================== -->\r\n\r\n    <div\r\n      class=\"\r\n        pp-about__metadata\r\n        pp-about-reveal\r\n      \"\r\n      aria-label=\"Pixel Pine company information\"\r\n    >\r\n\r\n      <span>\r\n        Founded 2017\r\n      <\/span>\r\n\r\n      <i\r\n        class=\"\r\n          pp-about__metadata-dot\r\n          pp-about__metadata-dot--mint\r\n        \"\r\n        aria-hidden=\"true\"\r\n      ><\/i>\r\n\r\n      <span>\r\n        Malaysia\r\n      <\/span>\r\n\r\n      <i\r\n        class=\"\r\n          pp-about__metadata-dot\r\n          pp-about__metadata-dot--purple\r\n        \"\r\n        aria-hidden=\"true\"\r\n      ><\/i>\r\n\r\n      <span>\r\n        Enterprise AI\r\n      <\/span>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- =====================================================\r\n         VISION + MISSION\r\n    ====================================================== -->\r\n\r\n    <div class=\"pp-about__principles\">\r\n\r\n\r\n      <!-- VISION -->\r\n\r\n      <article\r\n        class=\"\r\n          pp-about__vision\r\n          pp-about-reveal\r\n        \"\r\n      >\r\n\r\n        <p\r\n          class=\"\r\n            pp-about__principle-label\r\n          \"\r\n        >\r\n          Vision\r\n        <\/p>\r\n\r\n        <p\r\n          class=\"\r\n            pp-about__vision-copy\r\n          \"\r\n        >\r\n          To make advanced artificial intelligence\r\n          accessible, explainable, and operational\r\n          for every enterprise.\r\n        <\/p>\r\n\r\n      <\/article>\r\n\r\n\r\n      <!-- MISSION -->\r\n\r\n      <article\r\n        class=\"\r\n          pp-about__mission\r\n          pp-about-reveal\r\n        \"\r\n      >\r\n\r\n        <p\r\n          class=\"\r\n            pp-about__principle-label\r\n          \"\r\n        >\r\n          Mission\r\n        <\/p>\r\n\r\n        <ul\r\n          class=\"\r\n            pp-about__mission-list\r\n          \"\r\n        >\r\n\r\n          <li\r\n            class=\"\r\n              pp-about__mission-item\r\n            \"\r\n          >\r\n            <span\r\n              class=\"\r\n                pp-about__mission-dot\r\n              \"\r\n              aria-hidden=\"true\"\r\n            ><\/span>\r\n\r\n            <p>\r\n              Build trustworthy AI infrastructure.\r\n            <\/p>\r\n          <\/li>\r\n\r\n\r\n          <li\r\n            class=\"\r\n              pp-about__mission-item\r\n            \"\r\n          >\r\n            <span\r\n              class=\"\r\n                pp-about__mission-dot\r\n              \"\r\n              aria-hidden=\"true\"\r\n            ><\/span>\r\n\r\n            <p>\r\n              Deliver measurable, modular,\r\n              and scalable AI solutions.\r\n            <\/p>\r\n          <\/li>\r\n\r\n\r\n          <li\r\n            class=\"\r\n              pp-about__mission-item\r\n            \"\r\n          >\r\n            <span\r\n              class=\"\r\n                pp-about__mission-dot\r\n              \"\r\n              aria-hidden=\"true\"\r\n            ><\/span>\r\n\r\n            <p>\r\n              Transform static data into\r\n              real-time, actionable insights.\r\n            <\/p>\r\n          <\/li>\r\n\r\n\r\n          <li\r\n            class=\"\r\n              pp-about__mission-item\r\n            \"\r\n          >\r\n            <span\r\n              class=\"\r\n                pp-about__mission-dot\r\n              \"\r\n              aria-hidden=\"true\"\r\n            ><\/span>\r\n\r\n            <p>\r\n              Maintain transparency, data security,\r\n              and human oversight in every deployment.\r\n            <\/p>\r\n          <\/li>\r\n\r\n        <\/ul>\r\n\r\n      <\/article>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- =====================================================\r\n         PIXEL PINE BRAND DIVIDER\r\n    ====================================================== -->\r\n\r\n    <div\r\n      class=\"\r\n        pp-about__divider\r\n        pp-about-reveal\r\n      \"\r\n      aria-hidden=\"true\"\r\n    >\r\n\r\n      <span\r\n        class=\"\r\n          pp-about__divider-node\r\n        \"\r\n      ><\/span>\r\n\r\n    <\/div>\r\n\r\n\r\n  <\/div>\r\n<\/section>\r\n\r\n\r\n<script>\r\n(() => {\r\n\r\n  const section =\r\n    document.getElementById(\r\n      \"pp-about\"\r\n    );\r\n\r\n\r\n  if (\r\n    !section ||\r\n    section.dataset.ppInitialized ===\r\n      \"true\"\r\n  ) {\r\n    return;\r\n  }\r\n\r\n\r\n  section.dataset.ppInitialized =\r\n    \"true\";\r\n\r\n\r\n  \/* =====================================================\r\n     REVEAL ITEMS\r\n  ===================================================== *\/\r\n\r\n  const items =\r\n    section.querySelectorAll(\r\n      \".pp-about-reveal, .pp-about-image-reveal\"\r\n    );\r\n\r\n\r\n  \/*\r\n    Slight stagger:\r\n    heading\r\n    image\r\n    metadata\r\n    vision\r\n    mission\r\n    divider\r\n  *\/\r\n\r\n  items.forEach(\r\n    (item, index) => {\r\n\r\n      item.style.transitionDelay =\r\n        `${Math.min(\r\n          index * 105,\r\n          480\r\n        )}ms`;\r\n\r\n    }\r\n  );\r\n\r\n\r\n  \/* =====================================================\r\n     FALLBACK\r\n  ===================================================== *\/\r\n\r\n  if (\r\n    !(\r\n      \"IntersectionObserver\"\r\n      in window\r\n    )\r\n  ) {\r\n\r\n    items.forEach(\r\n      item =>\r\n        item.classList.add(\r\n          \"is-visible\"\r\n        )\r\n    );\r\n\r\n    return;\r\n  }\r\n\r\n\r\n  \/* =====================================================\r\n     SCROLL OBSERVER\r\n  ===================================================== *\/\r\n\r\n  const observer =\r\n    new IntersectionObserver(\r\n      entries => {\r\n\r\n        entries.forEach(\r\n          entry => {\r\n\r\n            if (\r\n              !entry.isIntersecting\r\n            ) {\r\n              return;\r\n            }\r\n\r\n\r\n            entry.target.classList.add(\r\n              \"is-visible\"\r\n            );\r\n\r\n\r\n            observer.unobserve(\r\n              entry.target\r\n            );\r\n\r\n          }\r\n        );\r\n\r\n      },\r\n      {\r\n        threshold: 0.12,\r\n\r\n        rootMargin:\r\n          \"0px 0px -4% 0px\"\r\n      }\r\n    );\r\n\r\n\r\n  items.forEach(\r\n    item =>\r\n      observer.observe(\r\n        item\r\n      )\r\n  );\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-192c5c4 elementor-widget elementor-widget-html\" data-id=\"192c5c4\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\r\n  PIXEL PINE \u2014 OUR JOURNEY SECTION\r\n  Futuristic Animated Timeline\r\n\r\n  Assets:\r\n  Background:\r\n  https:\/\/pixel-pine.com\/wp-content\/uploads\/2026\/09\/ChatGPT-Image-Sep-30-2026-10_03_33-AM-1-1.jpg\r\n\r\n  Foundation:\r\n  https:\/\/pixel-pine.com\/wp-content\/uploads\/2026\/09\/ChatGPT-Image-Sep-30-2026-12_50_44-PM-2.png\r\n\r\n  Capability Building:\r\n  https:\/\/pixel-pine.com\/wp-content\/uploads\/2026\/09\/ChatGPT-Image-Sep-30-2026-12_50_45-PM-3.png\r\n\r\n  AI Pivot:\r\n  https:\/\/pixel-pine.com\/wp-content\/uploads\/2026\/09\/ChatGPT-Image-Sep-30-2026-12_50_46-PM-4.png\r\n\r\n  Operational AI:\r\n  https:\/\/pixel-pine.com\/wp-content\/uploads\/2026\/09\/ChatGPT-Image-Sep-30-2026-12_50_47-PM-5.png\r\n========================================================= -->\r\n\r\n\r\n<style>\r\n\r\n\/* =========================================================\r\n   ELEMENTOR FULL-WIDTH RESET\r\n========================================================= *\/\r\n\r\n.elementor-widget-html:has(#our-journey),\r\n.elementor-widget-html:has(#our-journey) > .elementor-widget-container {\r\n  width: 100%;\r\n  max-width: none !important;\r\n  margin: 0 !important;\r\n  padding: 0 !important;\r\n}\r\n\r\n.e-con:has(#our-journey) {\r\n  --gap: 0px !important;\r\n  gap: 0 !important;\r\n  row-gap: 0 !important;\r\n}\r\n\r\n#our-journey,\r\n#our-journey * {\r\n  box-sizing: border-box;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SECTION FOUNDATION\r\n========================================================= *\/\r\n\r\n#our-journey {\r\n  --pp-mint: #84E6D3;\r\n  --pp-indigo: #7E79D7;\r\n  --pp-purple: #AF83E8;\r\n\r\n  --pp-bg: #060B16;\r\n  --pp-white: #F7FAFC;\r\n  --pp-muted: #B8C2D1;\r\n  --pp-dim: #79859C;\r\n\r\n  --pp-line-soft: rgba(126, 121, 215, 0.18);\r\n\r\n  position: relative;\r\n\r\n  left: 50%;\r\n\r\n  width: 100vw;\r\n  max-width: none !important;\r\n\r\n  min-height: 930px;\r\n\r\n  margin: 0 !important;\r\n\r\n  transform: translateX(-50%);\r\n\r\n  overflow: hidden;\r\n  isolation: isolate;\r\n\r\n  background:\r\n    radial-gradient(\r\n      circle at 18% 48%,\r\n      rgba(132, 230, 211, 0.055),\r\n      transparent 32%\r\n    ),\r\n    radial-gradient(\r\n      circle at 82% 48%,\r\n      rgba(175, 131, 232, 0.07),\r\n      transparent 35%\r\n    ),\r\n    #060B16;\r\n\r\n  color: var(--pp-white);\r\n\r\n  font-family:\r\n    Manrope,\r\n    Inter,\r\n    \"Segoe UI\",\r\n    Arial,\r\n    sans-serif;\r\n\r\n  scroll-margin-top: 90px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   DIGITAL EARTH BACKGROUND\r\n========================================================= *\/\r\n\r\n#our-journey .pp-journey__earth {\r\n  position: absolute;\r\n\r\n  z-index: -4;\r\n\r\n  right: 0;\r\n  bottom: -120px;\r\n  left: 0;\r\n\r\n  width: 100%;\r\n  height: 640px;\r\n\r\n  overflow: hidden;\r\n\r\n  pointer-events: none;\r\n\r\n  opacity: 0;\r\n\r\n  transform:\r\n    translateY(55px)\r\n    scale(1.045);\r\n\r\n  transition:\r\n    opacity 1.6s ease 0.5s,\r\n    transform 2.1s cubic-bezier(.22, 1, .36, 1) 0.5s;\r\n}\r\n\r\n\r\n#our-journey.pp-journey-visible .pp-journey__earth {\r\n  opacity: 0.82;\r\n\r\n  transform:\r\n    translateY(0)\r\n    scale(1);\r\n}\r\n\r\n\r\n#our-journey .pp-journey__earth img {\r\n  position: absolute;\r\n\r\n  inset: 0;\r\n\r\n  display: block;\r\n\r\n  width: 100%;\r\n  height: 100%;\r\n\r\n  object-fit: cover;\r\n  object-position: center bottom;\r\n\r\n  filter:\r\n    brightness(0.74)\r\n    saturate(0.96);\r\n}\r\n\r\n\r\n\/* Fade earth into section *\/\r\n\r\n#our-journey .pp-journey__earth::after {\r\n  content: \"\";\r\n\r\n  position: absolute;\r\n\r\n  inset: 0;\r\n\r\n  background:\r\n    linear-gradient(\r\n      180deg,\r\n      #060B16 0%,\r\n      rgba(6, 11, 22, 0.96) 8%,\r\n      rgba(6, 11, 22, 0.62) 31%,\r\n      rgba(6, 11, 22, 0.12) 62%,\r\n      rgba(6, 11, 22, 0.05) 100%\r\n    );\r\n\r\n  pointer-events: none;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   FUTURISTIC BACKGROUND ORBITS\r\n========================================================= *\/\r\n\r\n#our-journey .pp-journey__orbit {\r\n  position: absolute;\r\n\r\n  z-index: -3;\r\n\r\n  border:\r\n    1px\r\n    solid\r\n    rgba(126, 121, 215, 0.11);\r\n\r\n  border-radius: 50%;\r\n\r\n  pointer-events: none;\r\n\r\n  opacity: 0;\r\n}\r\n\r\n\r\n#our-journey .pp-journey__orbit--one {\r\n  top: 255px;\r\n  left: -180px;\r\n\r\n  width: 720px;\r\n  height: 470px;\r\n\r\n  transform:\r\n    rotate(11deg)\r\n    scale(0.88);\r\n}\r\n\r\n\r\n#our-journey .pp-journey__orbit--two {\r\n  top: 305px;\r\n  right: -250px;\r\n\r\n  width: 820px;\r\n  height: 500px;\r\n\r\n  transform:\r\n    rotate(-12deg)\r\n    scale(0.88);\r\n}\r\n\r\n\r\n#our-journey.pp-journey-visible .pp-journey__orbit {\r\n  animation:\r\n    ppJourneyOrbitReveal\r\n    1.5s\r\n    ease\r\n    0.8s\r\n    forwards;\r\n}\r\n\r\n\r\n@keyframes ppJourneyOrbitReveal {\r\n\r\n  to {\r\n    opacity: 1;\r\n\r\n    transform:\r\n      rotate(0deg)\r\n      scale(1);\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CONTAINER\r\n========================================================= *\/\r\n\r\n#our-journey .pp-journey__inner {\r\n  position: relative;\r\n\r\n  z-index: 2;\r\n\r\n  width:\r\n    min(\r\n      1380px,\r\n      calc(100% - 80px)\r\n    );\r\n\r\n  margin: 0 auto;\r\n\r\n  padding:\r\n    105px\r\n    0\r\n    145px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HEADER\r\n========================================================= *\/\r\n\r\n#our-journey .pp-journey__header {\r\n  max-width: 1050px;\r\n\r\n  margin:\r\n    0\r\n    auto\r\n    76px;\r\n\r\n  text-align: center;\r\n}\r\n\r\n\r\n#our-journey .pp-journey__eyebrow {\r\n  display: inline-flex;\r\n\r\n  align-items: center;\r\n  justify-content: center;\r\n\r\n  gap: 16px;\r\n\r\n  margin:\r\n    0\r\n    0\r\n    23px;\r\n\r\n  color: #A4EBDF;\r\n\r\n  font-size:\r\n    clamp(\r\n      10px,\r\n      0.9vw,\r\n      13px\r\n    );\r\n\r\n  font-weight: 760;\r\n\r\n  line-height: 1.4;\r\n\r\n  letter-spacing: 0.32em;\r\n\r\n  text-transform: uppercase;\r\n}\r\n\r\n\r\n#our-journey .pp-journey__eyebrow::before,\r\n#our-journey .pp-journey__eyebrow::after {\r\n  content: \"\";\r\n\r\n  width: 68px;\r\n  height: 1px;\r\n}\r\n\r\n\r\n#our-journey .pp-journey__eyebrow::before {\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      transparent,\r\n      var(--pp-mint)\r\n    );\r\n}\r\n\r\n\r\n#our-journey .pp-journey__eyebrow::after {\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      var(--pp-purple),\r\n      transparent\r\n    );\r\n}\r\n\r\n\r\n#our-journey .pp-journey__title {\r\n  max-width: 1050px;\r\n\r\n  margin: 0 auto;\r\n\r\n  color: var(--pp-white);\r\n\r\n  font-size:\r\n    clamp(\r\n      48px,\r\n      4.7vw,\r\n      72px\r\n    );\r\n\r\n  font-weight: 770;\r\n\r\n  line-height: 1.02;\r\n\r\n  letter-spacing: -0.055em;\r\n\r\n  text-wrap: balance;\r\n\r\n  text-shadow:\r\n    0 14px 48px\r\n    rgba(0, 0, 0, 0.38);\r\n}\r\n\r\n\r\n#our-journey .pp-journey__title-gradient {\r\n  color: transparent;\r\n\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      #84E6D3 0%,\r\n      #7E79D7 54%,\r\n      #AF83E8 100%\r\n    );\r\n\r\n  -webkit-background-clip: text;\r\n  background-clip: text;\r\n}\r\n\r\n\r\n#our-journey .pp-journey__description {\r\n  max-width: 760px;\r\n\r\n  margin:\r\n    26px\r\n    auto\r\n    0;\r\n\r\n  color: var(--pp-muted);\r\n\r\n  font-size:\r\n    clamp(\r\n      16px,\r\n      1.25vw,\r\n      19px\r\n    );\r\n\r\n  font-weight: 440;\r\n\r\n  line-height: 1.62;\r\n\r\n  letter-spacing: -0.015em;\r\n\r\n  text-wrap: balance;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HEADER REVEAL\r\n========================================================= *\/\r\n\r\n#our-journey .pp-journey-reveal {\r\n  opacity: 0;\r\n\r\n  transform:\r\n    translateY(26px);\r\n\r\n  filter: blur(4px);\r\n\r\n  transition:\r\n    opacity\r\n    800ms\r\n    ease,\r\n    transform\r\n    800ms\r\n    cubic-bezier(.22, 1, .36, 1),\r\n    filter\r\n    800ms\r\n    ease;\r\n}\r\n\r\n\r\n#our-journey.pp-journey-visible .pp-journey-reveal {\r\n  opacity: 1;\r\n\r\n  transform:\r\n    translateY(0);\r\n\r\n  filter: blur(0);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TIMELINE WRAPPER\r\n========================================================= *\/\r\n\r\n#our-journey .pp-journey__timeline {\r\n  position: relative;\r\n\r\n  display: grid;\r\n\r\n  grid-template-columns:\r\n    repeat(\r\n      4,\r\n      minmax(0, 1fr)\r\n    );\r\n\r\n  align-items: start;\r\n\r\n  gap: 0;\r\n\r\n  width: 100%;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TIMELINE BASE LINE\r\n========================================================= *\/\r\n\r\n#our-journey .pp-journey__rail {\r\n  position: absolute;\r\n\r\n  z-index: 1;\r\n\r\n  top: 58px;\r\n\r\n  left: 5.5%;\r\n\r\n  width: 89%;\r\n  height: 2px;\r\n\r\n  overflow: visible;\r\n\r\n  background:\r\n    rgba(126, 121, 215, 0.17);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   DRAWING LINE\r\n========================================================= *\/\r\n\r\n#our-journey .pp-journey__rail-fill {\r\n  position: absolute;\r\n\r\n  top: 0;\r\n  left: 0;\r\n\r\n  width: 100%;\r\n  height: 100%;\r\n\r\n  transform:\r\n    scaleX(0);\r\n\r\n  transform-origin:\r\n    left center;\r\n\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      #84E6D3 0%,\r\n      #68DBDF 23%,\r\n      #7E79D7 57%,\r\n      #AF83E8 100%\r\n    );\r\n\r\n  box-shadow:\r\n    0 0 10px\r\n    rgba(132, 230, 211, 0.55),\r\n    0 0 20px\r\n    rgba(126, 121, 215, 0.25),\r\n    0 0 16px\r\n    rgba(175, 131, 232, 0.40);\r\n}\r\n\r\n\r\n#our-journey.pp-journey-visible\r\n.pp-journey__rail-fill {\r\n  animation:\r\n    ppJourneyDrawLine\r\n    2.45s\r\n    cubic-bezier(.22, 1, .36, 1)\r\n    0.65s\r\n    forwards;\r\n}\r\n\r\n\r\n@keyframes ppJourneyDrawLine {\r\n\r\n  to {\r\n    transform:\r\n      scaleX(1);\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TRAVELLING LIGHT\r\n========================================================= *\/\r\n\r\n#our-journey .pp-journey__traveller {\r\n  position: absolute;\r\n\r\n  z-index: 5;\r\n\r\n  top: 50%;\r\n  left: 0;\r\n\r\n  width: 12px;\r\n  height: 12px;\r\n\r\n  border-radius: 50%;\r\n\r\n  background:\r\n    #FFFFFF;\r\n\r\n  box-shadow:\r\n    0 0 5px #FFFFFF,\r\n    0 0 14px var(--pp-mint),\r\n    0 0 28px var(--pp-indigo);\r\n\r\n  transform:\r\n    translate(-50%, -50%);\r\n\r\n  opacity: 0;\r\n}\r\n\r\n\r\n#our-journey.pp-journey-visible\r\n.pp-journey__traveller {\r\n  animation:\r\n    ppJourneyTraveller\r\n    2.45s\r\n    cubic-bezier(.22, 1, .36, 1)\r\n    0.65s\r\n    forwards;\r\n}\r\n\r\n\r\n@keyframes ppJourneyTraveller {\r\n\r\n  0% {\r\n    left: 0;\r\n    opacity: 0;\r\n  }\r\n\r\n  4% {\r\n    opacity: 1;\r\n  }\r\n\r\n  94% {\r\n    opacity: 1;\r\n  }\r\n\r\n  100% {\r\n    left: 100%;\r\n    opacity: 0;\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MILESTONE\r\n========================================================= *\/\r\n\r\n#our-journey .pp-milestone {\r\n  position: relative;\r\n\r\n  z-index: 4;\r\n\r\n  min-width: 0;\r\n\r\n  padding:\r\n    0\r\n    28px;\r\n\r\n  text-align: center;\r\n\r\n  opacity: 0;\r\n\r\n  transform:\r\n    translateY(24px);\r\n\r\n  transition:\r\n    opacity\r\n    650ms\r\n    ease,\r\n    transform\r\n    700ms\r\n    cubic-bezier(.22, 1, .36, 1);\r\n}\r\n\r\n\r\n\/*\r\n  Timing follows line position:\r\n  2017 \u2192 2023 \u2192 2024 \u2192 2025\r\n*\/\r\n\r\n#our-journey.pp-journey-visible\r\n.pp-milestone:nth-of-type(1) {\r\n  transition-delay: 0.82s;\r\n}\r\n\r\n#our-journey.pp-journey-visible\r\n.pp-milestone:nth-of-type(2) {\r\n  transition-delay: 1.32s;\r\n}\r\n\r\n#our-journey.pp-journey-visible\r\n.pp-milestone:nth-of-type(3) {\r\n  transition-delay: 1.84s;\r\n}\r\n\r\n#our-journey.pp-journey-visible\r\n.pp-milestone:nth-of-type(4) {\r\n  transition-delay: 2.36s;\r\n}\r\n\r\n\r\n#our-journey.pp-journey-visible\r\n.pp-milestone {\r\n  opacity: 1;\r\n\r\n  transform:\r\n    translateY(0);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   ICON NODE\r\n========================================================= *\/\r\n\r\n#our-journey .pp-milestone__node {\r\n  position: relative;\r\n\r\n  display: grid;\r\n\r\n  place-items: center;\r\n\r\n  width: 116px;\r\n  height: 116px;\r\n\r\n  margin:\r\n    0\r\n    auto\r\n    21px;\r\n\r\n  border-radius: 50%;\r\n\r\n  background:\r\n    rgba(7, 12, 24, 0.90);\r\n\r\n  transform:\r\n    scale(0.58);\r\n\r\n  opacity: 0;\r\n\r\n  transition:\r\n    opacity\r\n    500ms\r\n    ease,\r\n    transform\r\n    700ms\r\n    cubic-bezier(.22, 1, .36, 1);\r\n}\r\n\r\n\r\n\/* 2017 *\/\r\n\r\n#our-journey\r\n.pp-milestone--2017\r\n.pp-milestone__node {\r\n  border:\r\n    1px\r\n    solid\r\n    rgba(132, 230, 211, 0.68);\r\n\r\n  box-shadow:\r\n    inset\r\n    0 0 22px\r\n    rgba(132, 230, 211, 0.08),\r\n    0 0 24px\r\n    rgba(132, 230, 211, 0.15);\r\n}\r\n\r\n\r\n\/* 2023 *\/\r\n\r\n#our-journey\r\n.pp-milestone--2023\r\n.pp-milestone__node {\r\n  border:\r\n    1px\r\n    solid\r\n    rgba(102, 211, 230, 0.68);\r\n\r\n  box-shadow:\r\n    inset\r\n    0 0 22px\r\n    rgba(102, 211, 230, 0.08),\r\n    0 0 24px\r\n    rgba(102, 211, 230, 0.15);\r\n}\r\n\r\n\r\n\/* 2024 *\/\r\n\r\n#our-journey\r\n.pp-milestone--2024\r\n.pp-milestone__node {\r\n  border:\r\n    1px\r\n    solid\r\n    rgba(126, 121, 215, 0.72);\r\n\r\n  box-shadow:\r\n    inset\r\n    0 0 22px\r\n    rgba(126, 121, 215, 0.10),\r\n    0 0 25px\r\n    rgba(126, 121, 215, 0.17);\r\n}\r\n\r\n\r\n\/* 2025 *\/\r\n\r\n#our-journey\r\n.pp-milestone--2025\r\n.pp-milestone__node {\r\n  border:\r\n    1px\r\n    solid\r\n    rgba(175, 131, 232, 0.74);\r\n\r\n  box-shadow:\r\n    inset\r\n    0 0 22px\r\n    rgba(175, 131, 232, 0.10),\r\n    0 0 27px\r\n    rgba(175, 131, 232, 0.18);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   NODE APPEAR TIMING\r\n========================================================= *\/\r\n\r\n#our-journey.pp-journey-visible\r\n.pp-milestone:nth-of-type(1)\r\n.pp-milestone__node {\r\n  animation:\r\n    ppJourneyNodeIn\r\n    720ms\r\n    cubic-bezier(.22, 1, .36, 1)\r\n    0.80s\r\n    forwards;\r\n}\r\n\r\n\r\n#our-journey.pp-journey-visible\r\n.pp-milestone:nth-of-type(2)\r\n.pp-milestone__node {\r\n  animation:\r\n    ppJourneyNodeIn\r\n    720ms\r\n    cubic-bezier(.22, 1, .36, 1)\r\n    1.30s\r\n    forwards;\r\n}\r\n\r\n\r\n#our-journey.pp-journey-visible\r\n.pp-milestone:nth-of-type(3)\r\n.pp-milestone__node {\r\n  animation:\r\n    ppJourneyNodeIn\r\n    720ms\r\n    cubic-bezier(.22, 1, .36, 1)\r\n    1.82s\r\n    forwards;\r\n}\r\n\r\n\r\n#our-journey.pp-journey-visible\r\n.pp-milestone:nth-of-type(4)\r\n.pp-milestone__node {\r\n  animation:\r\n    ppJourneyNodeIn\r\n    720ms\r\n    cubic-bezier(.22, 1, .36, 1)\r\n    2.34s\r\n    forwards;\r\n}\r\n\r\n\r\n@keyframes ppJourneyNodeIn {\r\n\r\n  0% {\r\n    opacity: 0;\r\n\r\n    transform:\r\n      scale(0.40);\r\n\r\n    filter:\r\n      blur(6px);\r\n  }\r\n\r\n  70% {\r\n    opacity: 1;\r\n\r\n    transform:\r\n      scale(1.08);\r\n\r\n    filter:\r\n      blur(0);\r\n  }\r\n\r\n  100% {\r\n    opacity: 1;\r\n\r\n    transform:\r\n      scale(1);\r\n\r\n    filter:\r\n      blur(0);\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   ICON IMAGE\r\n========================================================= *\/\r\n\r\n#our-journey .pp-milestone__icon {\r\n  display: block;\r\n\r\n  width: 78px;\r\n  height: 78px;\r\n\r\n  object-fit: contain;\r\n\r\n  opacity: 0.95;\r\n\r\n  transform:\r\n    scale(0.9);\r\n\r\n  transition:\r\n    transform\r\n    350ms\r\n    cubic-bezier(.22, 1, .36, 1),\r\n    filter\r\n    350ms\r\n    ease;\r\n}\r\n\r\n\r\n\/* Individual glow *\/\r\n\r\n#our-journey\r\n.pp-milestone--2017\r\n.pp-milestone__icon {\r\n  filter:\r\n    drop-shadow(\r\n      0 0 10px\r\n      rgba(132, 230, 211, 0.42)\r\n    );\r\n}\r\n\r\n\r\n#our-journey\r\n.pp-milestone--2023\r\n.pp-milestone__icon {\r\n  filter:\r\n    drop-shadow(\r\n      0 0 10px\r\n      rgba(110, 205, 238, 0.42)\r\n    );\r\n}\r\n\r\n\r\n#our-journey\r\n.pp-milestone--2024\r\n.pp-milestone__icon {\r\n  filter:\r\n    drop-shadow(\r\n      0 0 11px\r\n      rgba(126, 121, 215, 0.50)\r\n    );\r\n}\r\n\r\n\r\n#our-journey\r\n.pp-milestone--2025\r\n.pp-milestone__icon {\r\n  filter:\r\n    drop-shadow(\r\n      0 0 11px\r\n      rgba(175, 131, 232, 0.50)\r\n    );\r\n}\r\n\r\n\r\n\/* Hover *\/\r\n\r\n#our-journey\r\n.pp-milestone:hover\r\n.pp-milestone__node {\r\n  transform:\r\n    translateY(-6px)\r\n    scale(1.05);\r\n\r\n  transition:\r\n    transform\r\n    330ms\r\n    cubic-bezier(.22, 1, .36, 1),\r\n    box-shadow\r\n    330ms\r\n    ease;\r\n}\r\n\r\n\r\n#our-journey\r\n.pp-milestone:hover\r\n.pp-milestone__icon {\r\n  transform:\r\n    scale(1.08);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CONNECTION STEM\r\n========================================================= *\/\r\n\r\n#our-journey .pp-milestone__stem {\r\n  position: absolute;\r\n\r\n  top: 108px;\r\n  left: 50%;\r\n\r\n  width: 1px;\r\n  height: 27px;\r\n\r\n  transform:\r\n    translateX(-50%);\r\n\r\n  opacity: 0.72;\r\n}\r\n\r\n\r\n#our-journey\r\n.pp-milestone--2017\r\n.pp-milestone__stem {\r\n  background:\r\n    var(--pp-mint);\r\n}\r\n\r\n\r\n#our-journey\r\n.pp-milestone--2023\r\n.pp-milestone__stem {\r\n  background:\r\n    #69CFE8;\r\n}\r\n\r\n\r\n#our-journey\r\n.pp-milestone--2024\r\n.pp-milestone__stem {\r\n  background:\r\n    var(--pp-indigo);\r\n}\r\n\r\n\r\n#our-journey\r\n.pp-milestone--2025\r\n.pp-milestone__stem {\r\n  background:\r\n    var(--pp-purple);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   YEAR\r\n========================================================= *\/\r\n\r\n#our-journey .pp-milestone__year {\r\n  display: block;\r\n\r\n  margin:\r\n    0\r\n    0\r\n    8px;\r\n\r\n  font-size:\r\n    clamp(\r\n      22px,\r\n      1.8vw,\r\n      28px\r\n    );\r\n\r\n  font-weight: 760;\r\n\r\n  line-height: 1;\r\n\r\n  letter-spacing: 0.02em;\r\n}\r\n\r\n\r\n#our-journey\r\n.pp-milestone--2017\r\n.pp-milestone__year {\r\n  color:\r\n    var(--pp-mint);\r\n}\r\n\r\n\r\n#our-journey\r\n.pp-milestone--2023\r\n.pp-milestone__year {\r\n  color:\r\n    #72D5E8;\r\n}\r\n\r\n\r\n#our-journey\r\n.pp-milestone--2024\r\n.pp-milestone__year {\r\n  color:\r\n    #928DE6;\r\n}\r\n\r\n\r\n#our-journey\r\n.pp-milestone--2025\r\n.pp-milestone__year {\r\n  color:\r\n    var(--pp-purple);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MILESTONE COPY\r\n========================================================= *\/\r\n\r\n#our-journey .pp-milestone__title {\r\n  margin:\r\n    0\r\n    0\r\n    12px;\r\n\r\n  color:\r\n    var(--pp-white);\r\n\r\n  font-size:\r\n    clamp(\r\n      19px,\r\n      1.5vw,\r\n      24px\r\n    );\r\n\r\n  font-weight: 720;\r\n\r\n  line-height: 1.2;\r\n\r\n  letter-spacing: -0.03em;\r\n}\r\n\r\n\r\n#our-journey .pp-milestone__copy {\r\n  max-width: 260px;\r\n\r\n  margin:\r\n    0\r\n    auto;\r\n\r\n  color:\r\n    var(--pp-muted);\r\n\r\n  font-size:\r\n    clamp(\r\n      14px,\r\n      1vw,\r\n      16px\r\n    );\r\n\r\n  font-weight: 430;\r\n\r\n  line-height: 1.55;\r\n\r\n  letter-spacing: -0.01em;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   DECORATIVE SIDE COPY\r\n========================================================= *\/\r\n\r\n#our-journey .pp-journey__side-copy {\r\n  position: absolute;\r\n\r\n  z-index: 2;\r\n\r\n  color:\r\n    rgba(172, 183, 212, 0.34);\r\n\r\n  font-size: 11px;\r\n\r\n  font-weight: 650;\r\n\r\n  line-height: 1.72;\r\n\r\n  letter-spacing: 0.26em;\r\n\r\n  text-transform: uppercase;\r\n\r\n  pointer-events: none;\r\n}\r\n\r\n\r\n#our-journey .pp-journey__side-copy--left {\r\n  bottom: 92px;\r\n  left: 26px;\r\n}\r\n\r\n\r\n#our-journey .pp-journey__side-copy--right {\r\n  right: 24px;\r\n  bottom: 82px;\r\n\r\n  text-align: right;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TABLET\r\n========================================================= *\/\r\n\r\n@media (max-width: 1100px) {\r\n\r\n  #our-journey {\r\n    min-height: 900px;\r\n  }\r\n\r\n\r\n  #our-journey .pp-journey__inner {\r\n    width:\r\n      min(\r\n        1280px,\r\n        calc(100% - 56px)\r\n      );\r\n\r\n    padding:\r\n      92px\r\n      0\r\n      125px;\r\n  }\r\n\r\n\r\n  #our-journey .pp-journey__header {\r\n    margin-bottom: 68px;\r\n  }\r\n\r\n\r\n  #our-journey .pp-milestone {\r\n    padding:\r\n      0\r\n      18px;\r\n  }\r\n\r\n\r\n  #our-journey .pp-milestone__node {\r\n    width: 102px;\r\n    height: 102px;\r\n  }\r\n\r\n\r\n  #our-journey .pp-milestone__icon {\r\n    width: 67px;\r\n    height: 67px;\r\n  }\r\n\r\n\r\n  #our-journey .pp-journey__rail {\r\n    top: 51px;\r\n  }\r\n\r\n\r\n  #our-journey .pp-milestone__stem {\r\n    top: 95px;\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MOBILE \u2014 VERTICAL TIMELINE\r\n========================================================= *\/\r\n\r\n@media (max-width: 767px) {\r\n\r\n  #our-journey {\r\n    left: auto;\r\n\r\n    width: 100%;\r\n\r\n    min-height: auto;\r\n\r\n    transform: none;\r\n  }\r\n\r\n\r\n  #our-journey .pp-journey__inner {\r\n    width:\r\n      min(\r\n        100% - 36px,\r\n        620px\r\n      );\r\n\r\n    padding:\r\n      76px\r\n      0\r\n      95px;\r\n  }\r\n\r\n\r\n  \/* Header *\/\r\n\r\n  #our-journey .pp-journey__header {\r\n    margin-bottom: 58px;\r\n  }\r\n\r\n\r\n  #our-journey .pp-journey__eyebrow {\r\n    gap: 10px;\r\n\r\n    margin-bottom: 19px;\r\n\r\n    font-size: 9px;\r\n\r\n    letter-spacing: 0.22em;\r\n  }\r\n\r\n\r\n  #our-journey .pp-journey__eyebrow::before,\r\n  #our-journey .pp-journey__eyebrow::after {\r\n    width: 30px;\r\n  }\r\n\r\n\r\n  #our-journey .pp-journey__title {\r\n    font-size:\r\n      clamp(\r\n        39px,\r\n        11vw,\r\n        53px\r\n      );\r\n\r\n    line-height: 1.03;\r\n  }\r\n\r\n\r\n  #our-journey .pp-journey__description {\r\n    margin-top: 22px;\r\n\r\n    font-size: 15.5px;\r\n  }\r\n\r\n\r\n  \/* Timeline becomes vertical *\/\r\n\r\n  #our-journey .pp-journey__timeline {\r\n    display: grid;\r\n\r\n    grid-template-columns: 1fr;\r\n\r\n    gap: 0;\r\n\r\n    padding-left: 0;\r\n  }\r\n\r\n\r\n  \/* Vertical rail *\/\r\n\r\n  #our-journey .pp-journey__rail {\r\n    top: 58px;\r\n    bottom: 58px;\r\n    left: 50px;\r\n\r\n    width: 2px;\r\n    height: auto;\r\n  }\r\n\r\n\r\n  #our-journey .pp-journey__rail-fill {\r\n    width: 100%;\r\n    height: 100%;\r\n\r\n    transform:\r\n      scaleY(0);\r\n\r\n    transform-origin:\r\n      center top;\r\n\r\n    background:\r\n      linear-gradient(\r\n        180deg,\r\n        #84E6D3 0%,\r\n        #68DBDF 25%,\r\n        #7E79D7 58%,\r\n        #AF83E8 100%\r\n      );\r\n  }\r\n\r\n\r\n  #our-journey.pp-journey-visible\r\n  .pp-journey__rail-fill {\r\n    animation:\r\n      ppJourneyDrawVertical\r\n      2.55s\r\n      cubic-bezier(.22, 1, .36, 1)\r\n      0.6s\r\n      forwards;\r\n  }\r\n\r\n\r\n  @keyframes ppJourneyDrawVertical {\r\n\r\n    to {\r\n      transform:\r\n        scaleY(1);\r\n    }\r\n\r\n  }\r\n\r\n\r\n  \/* Vertical travelling dot *\/\r\n\r\n  #our-journey .pp-journey__traveller {\r\n    top: 0;\r\n    left: 50%;\r\n\r\n    transform:\r\n      translate(-50%, -50%);\r\n  }\r\n\r\n\r\n  #our-journey.pp-journey-visible\r\n  .pp-journey__traveller {\r\n    animation:\r\n      ppJourneyTravellerVertical\r\n      2.55s\r\n      cubic-bezier(.22, 1, .36, 1)\r\n      0.6s\r\n      forwards;\r\n  }\r\n\r\n\r\n  @keyframes ppJourneyTravellerVertical {\r\n\r\n    0% {\r\n      top: 0;\r\n      opacity: 0;\r\n    }\r\n\r\n    5% {\r\n      opacity: 1;\r\n    }\r\n\r\n    95% {\r\n      opacity: 1;\r\n    }\r\n\r\n    100% {\r\n      top: 100%;\r\n      opacity: 0;\r\n    }\r\n\r\n  }\r\n\r\n\r\n  \/* Milestone *\/\r\n\r\n  #our-journey .pp-milestone {\r\n    display: grid;\r\n\r\n    grid-template-columns:\r\n      100px\r\n      minmax(0, 1fr);\r\n\r\n    align-items: center;\r\n\r\n    min-height: 220px;\r\n\r\n    padding:\r\n      26px\r\n      0;\r\n\r\n    text-align: left;\r\n  }\r\n\r\n\r\n  #our-journey .pp-milestone__node {\r\n    grid-column: 1;\r\n\r\n    width: 90px;\r\n    height: 90px;\r\n\r\n    margin: 0;\r\n\r\n    justify-self: start;\r\n  }\r\n\r\n\r\n  #our-journey .pp-milestone__icon {\r\n    width: 60px;\r\n    height: 60px;\r\n  }\r\n\r\n\r\n  #our-journey .pp-milestone__content {\r\n    grid-column: 2;\r\n\r\n    min-width: 0;\r\n\r\n    padding-left: 18px;\r\n  }\r\n\r\n\r\n  #our-journey .pp-milestone__stem {\r\n    display: none;\r\n  }\r\n\r\n\r\n  #our-journey .pp-milestone__copy {\r\n    max-width: 360px;\r\n\r\n    margin: 0;\r\n\r\n    font-size: 15px;\r\n  }\r\n\r\n\r\n  \/* Earth moved lower *\/\r\n\r\n  #our-journey .pp-journey__earth {\r\n    bottom: -70px;\r\n\r\n    height: 500px;\r\n\r\n    opacity: 0;\r\n  }\r\n\r\n\r\n  #our-journey.pp-journey-visible\r\n  .pp-journey__earth {\r\n    opacity: 0.40;\r\n  }\r\n\r\n\r\n  #our-journey .pp-journey__side-copy {\r\n    display: none;\r\n  }\r\n\r\n\r\n  #our-journey .pp-journey__orbit {\r\n    opacity: 0.45;\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SMALL MOBILE\r\n========================================================= *\/\r\n\r\n@media (max-width: 420px) {\r\n\r\n  #our-journey .pp-journey__inner {\r\n    width:\r\n      calc(\r\n        100% - 30px\r\n      );\r\n  }\r\n\r\n\r\n  #our-journey .pp-milestone {\r\n    grid-template-columns:\r\n      82px\r\n      minmax(0, 1fr);\r\n  }\r\n\r\n\r\n  #our-journey .pp-milestone__node {\r\n    width: 74px;\r\n    height: 74px;\r\n  }\r\n\r\n\r\n  #our-journey .pp-milestone__icon {\r\n    width: 49px;\r\n    height: 49px;\r\n  }\r\n\r\n\r\n  #our-journey .pp-journey__rail {\r\n    left: 40px;\r\n  }\r\n\r\n\r\n  #our-journey .pp-milestone__content {\r\n    padding-left: 14px;\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   REDUCED MOTION\r\n========================================================= *\/\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n\r\n  #our-journey *,\r\n  #our-journey *::before,\r\n  #our-journey *::after {\r\n    animation-duration:\r\n      0.01ms !important;\r\n\r\n    animation-iteration-count:\r\n      1 !important;\r\n\r\n    transition-duration:\r\n      0.01ms !important;\r\n  }\r\n\r\n\r\n  #our-journey .pp-journey-reveal,\r\n  #our-journey .pp-milestone,\r\n  #our-journey .pp-milestone__node,\r\n  #our-journey .pp-journey__earth {\r\n    opacity: 1;\r\n\r\n    transform: none;\r\n\r\n    filter: none;\r\n  }\r\n\r\n\r\n  #our-journey .pp-journey__rail-fill {\r\n    transform:\r\n      scaleX(1);\r\n  }\r\n\r\n\r\n  #our-journey .pp-journey__traveller {\r\n    display: none;\r\n  }\r\n\r\n\r\n  @media (max-width: 767px) {\r\n\r\n    #our-journey .pp-journey__rail-fill {\r\n      transform:\r\n        scaleY(1);\r\n    }\r\n\r\n  }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n\r\n<!-- =========================================================\r\n     OUR JOURNEY HTML\r\n========================================================= -->\r\n\r\n<section\r\n  id=\"our-journey\"\r\n  aria-labelledby=\"pp-journey-title\"\r\n>\r\n\r\n\r\n  <!-- =====================================================\r\n       DIGITAL EARTH BACKGROUND\r\n  ====================================================== -->\r\n\r\n  <div\r\n    class=\"pp-journey__earth\"\r\n    aria-hidden=\"true\"\r\n  >\r\n\r\n    <img\r\n      src=\"https:\/\/pixel-pine.com\/wp-content\/uploads\/2026\/09\/ChatGPT-Image-Sep-30-2026-10_03_33-AM-1-1.jpg\"\r\n      alt=\"\"\r\n      loading=\"lazy\"\r\n      decoding=\"async\"\r\n    \/>\r\n\r\n  <\/div>\r\n\r\n\r\n  <!-- Decorative orbit lines -->\r\n\r\n  <div\r\n    class=\"\r\n      pp-journey__orbit\r\n      pp-journey__orbit--one\r\n    \"\r\n    aria-hidden=\"true\"\r\n  ><\/div>\r\n\r\n  <div\r\n    class=\"\r\n      pp-journey__orbit\r\n      pp-journey__orbit--two\r\n    \"\r\n    aria-hidden=\"true\"\r\n  ><\/div>\r\n\r\n\r\n\r\n  <div class=\"pp-journey__inner\">\r\n\r\n\r\n    <!-- =====================================================\r\n         HEADER\r\n    ====================================================== -->\r\n\r\n    <header\r\n      class=\"\r\n        pp-journey__header\r\n        pp-journey-reveal\r\n      \"\r\n    >\r\n\r\n      <p\r\n        class=\"\r\n          pp-journey__eyebrow\r\n        \"\r\n      >\r\n        Our Journey\r\n      <\/p>\r\n\r\n\r\n      <h2\r\n        id=\"pp-journey-title\"\r\n        class=\"\r\n          pp-journey__title\r\n        \"\r\n      >\r\n        From Software Foundations\r\n        <br \/>\r\n\r\n        to\r\n        <span\r\n          class=\"\r\n            pp-journey__title-gradient\r\n          \"\r\n        >\r\n          Operational AI.\r\n        <\/span>\r\n      <\/h2>\r\n\r\n\r\n      <p\r\n        class=\"\r\n          pp-journey__description\r\n        \"\r\n      >\r\n        Our journey has evolved from software\r\n        and data foundations into practical\r\n        enterprise AI built for real business operations.\r\n      <\/p>\r\n\r\n    <\/header>\r\n\r\n\r\n\r\n    <!-- =====================================================\r\n         TIMELINE\r\n    ====================================================== -->\r\n\r\n    <div\r\n      class=\"\r\n        pp-journey__timeline\r\n      \"\r\n      aria-label=\"\r\n        Pixel Pine company journey\r\n      \"\r\n    >\r\n\r\n\r\n      <!-- Animated line -->\r\n\r\n      <div\r\n        class=\"\r\n          pp-journey__rail\r\n        \"\r\n        aria-hidden=\"true\"\r\n      >\r\n\r\n        <span\r\n          class=\"\r\n            pp-journey__rail-fill\r\n          \"\r\n        ><\/span>\r\n\r\n        <span\r\n          class=\"\r\n            pp-journey__traveller\r\n          \"\r\n        ><\/span>\r\n\r\n      <\/div>\r\n\r\n\r\n\r\n      <!-- =================================================\r\n           2017\r\n      ================================================== -->\r\n\r\n      <article\r\n        class=\"\r\n          pp-milestone\r\n          pp-milestone--2017\r\n        \"\r\n      >\r\n\r\n        <div\r\n          class=\"\r\n            pp-milestone__node\r\n          \"\r\n        >\r\n\r\n          <img\r\n            class=\"\r\n              pp-milestone__icon\r\n            \"\r\n            src=\"https:\/\/pixel-pine.com\/wp-content\/uploads\/2026\/09\/ChatGPT-Image-Sep-30-2026-12_50_44-PM-2.png\"\r\n            alt=\"\"\r\n            loading=\"lazy\"\r\n            decoding=\"async\"\r\n          \/>\r\n\r\n        <\/div>\r\n\r\n\r\n        <span\r\n          class=\"\r\n            pp-milestone__stem\r\n          \"\r\n          aria-hidden=\"true\"\r\n        ><\/span>\r\n\r\n\r\n        <div\r\n          class=\"\r\n            pp-milestone__content\r\n          \"\r\n        >\r\n\r\n          <time\r\n            class=\"\r\n              pp-milestone__year\r\n            \"\r\n            datetime=\"2017\"\r\n          >\r\n            2017\r\n          <\/time>\r\n\r\n\r\n          <h3\r\n            class=\"\r\n              pp-milestone__title\r\n            \"\r\n          >\r\n            Foundation\r\n          <\/h3>\r\n\r\n\r\n          <p\r\n            class=\"\r\n              pp-milestone__copy\r\n            \"\r\n          >\r\n            Built our core team and delivered\r\n            software and data solutions.\r\n          <\/p>\r\n\r\n        <\/div>\r\n\r\n      <\/article>\r\n\r\n\r\n\r\n      <!-- =================================================\r\n           2023\r\n      ================================================== -->\r\n\r\n      <article\r\n        class=\"\r\n          pp-milestone\r\n          pp-milestone--2023\r\n        \"\r\n      >\r\n\r\n        <div\r\n          class=\"\r\n            pp-milestone__node\r\n          \"\r\n        >\r\n\r\n          <img\r\n            class=\"\r\n              pp-milestone__icon\r\n            \"\r\n            src=\"https:\/\/pixel-pine.com\/wp-content\/uploads\/2026\/09\/ChatGPT-Image-Sep-30-2026-12_50_45-PM-3.png\"\r\n            alt=\"\"\r\n            loading=\"lazy\"\r\n            decoding=\"async\"\r\n          \/>\r\n\r\n        <\/div>\r\n\r\n\r\n        <span\r\n          class=\"\r\n            pp-milestone__stem\r\n          \"\r\n          aria-hidden=\"true\"\r\n        ><\/span>\r\n\r\n\r\n        <div\r\n          class=\"\r\n            pp-milestone__content\r\n          \"\r\n        >\r\n\r\n          <time\r\n            class=\"\r\n              pp-milestone__year\r\n            \"\r\n            datetime=\"2023\"\r\n          >\r\n            2023\r\n          <\/time>\r\n\r\n\r\n          <h3\r\n            class=\"\r\n              pp-milestone__title\r\n            \"\r\n          >\r\n            Capability Building\r\n          <\/h3>\r\n\r\n\r\n          <p\r\n            class=\"\r\n              pp-milestone__copy\r\n            \"\r\n          >\r\n            Expanded into automation,\r\n            analytics, and enterprise systems.\r\n          <\/p>\r\n\r\n        <\/div>\r\n\r\n      <\/article>\r\n\r\n\r\n\r\n      <!-- =================================================\r\n           2024\r\n      ================================================== -->\r\n\r\n      <article\r\n        class=\"\r\n          pp-milestone\r\n          pp-milestone--2024\r\n        \"\r\n      >\r\n\r\n        <div\r\n          class=\"\r\n            pp-milestone__node\r\n          \"\r\n        >\r\n\r\n          <img\r\n            class=\"\r\n              pp-milestone__icon\r\n            \"\r\n            src=\"https:\/\/pixel-pine.com\/wp-content\/uploads\/2026\/09\/ChatGPT-Image-Sep-30-2026-12_50_46-PM-4.png\"\r\n            alt=\"\"\r\n            loading=\"lazy\"\r\n            decoding=\"async\"\r\n          \/>\r\n\r\n        <\/div>\r\n\r\n\r\n        <span\r\n          class=\"\r\n            pp-milestone__stem\r\n          \"\r\n          aria-hidden=\"true\"\r\n        ><\/span>\r\n\r\n\r\n        <div\r\n          class=\"\r\n            pp-milestone__content\r\n          \"\r\n        >\r\n\r\n          <time\r\n            class=\"\r\n              pp-milestone__year\r\n            \"\r\n            datetime=\"2024\"\r\n          >\r\n            2024\r\n          <\/time>\r\n\r\n\r\n          <h3\r\n            class=\"\r\n              pp-milestone__title\r\n            \"\r\n          >\r\n            AI Pivot\r\n          <\/h3>\r\n\r\n\r\n          <p\r\n            class=\"\r\n              pp-milestone__copy\r\n            \"\r\n          >\r\n            Focused on practical AI,\r\n            machine learning, and\r\n            intelligent automation.\r\n          <\/p>\r\n\r\n        <\/div>\r\n\r\n      <\/article>\r\n\r\n\r\n\r\n      <!-- =================================================\r\n           2025\r\n      ================================================== -->\r\n\r\n      <article\r\n        class=\"\r\n          pp-milestone\r\n          pp-milestone--2025\r\n        \"\r\n      >\r\n\r\n        <div\r\n          class=\"\r\n            pp-milestone__node\r\n          \"\r\n        >\r\n\r\n          <img\r\n            class=\"\r\n              pp-milestone__icon\r\n            \"\r\n            src=\"https:\/\/pixel-pine.com\/wp-content\/uploads\/2026\/09\/ChatGPT-Image-Sep-30-2026-12_50_47-PM-5.png\"\r\n            alt=\"\"\r\n            loading=\"lazy\"\r\n            decoding=\"async\"\r\n          \/>\r\n\r\n        <\/div>\r\n\r\n\r\n        <span\r\n          class=\"\r\n            pp-milestone__stem\r\n          \"\r\n          aria-hidden=\"true\"\r\n        ><\/span>\r\n\r\n\r\n        <div\r\n          class=\"\r\n            pp-milestone__content\r\n          \"\r\n        >\r\n\r\n          <time\r\n            class=\"\r\n              pp-milestone__year\r\n            \"\r\n            datetime=\"2025\"\r\n          >\r\n            2025\r\n          <\/time>\r\n\r\n\r\n          <h3\r\n            class=\"\r\n              pp-milestone__title\r\n            \"\r\n          >\r\n            Operational AI\r\n          <\/h3>\r\n\r\n\r\n          <p\r\n            class=\"\r\n              pp-milestone__copy\r\n            \"\r\n          >\r\n            Launched managed AI solutions\r\n            designed to operate inside\r\n            real business workflows.\r\n          <\/p>\r\n\r\n        <\/div>\r\n\r\n      <\/article>\r\n\r\n\r\n    <\/div>\r\n\r\n\r\n  <\/div>\r\n\r\n\r\n  <!-- =====================================================\r\n       DECORATIVE TEXT\r\n  ====================================================== -->\r\n\r\n  <div\r\n    class=\"\r\n      pp-journey__side-copy\r\n      pp-journey__side-copy--left\r\n    \"\r\n    aria-hidden=\"true\"\r\n  >\r\n    Real<br \/>\r\n    People<br \/>\r\n    Real Progress\r\n  <\/div>\r\n\r\n\r\n  <div\r\n    class=\"\r\n      pp-journey__side-copy\r\n      pp-journey__side-copy--right\r\n    \"\r\n    aria-hidden=\"true\"\r\n  >\r\n    A More<br \/>\r\n    Capable<br \/>\r\n    Tomorrow\r\n  <\/div>\r\n\r\n\r\n<\/section>\r\n\r\n\r\n\r\n<script>\r\n(() => {\r\n\r\n  \/* =========================================================\r\n     SECTION INITIALISATION\r\n  ========================================================= *\/\r\n\r\n  const section =\r\n    document.getElementById(\r\n      \"our-journey\"\r\n    );\r\n\r\n\r\n  if (\r\n    !section ||\r\n    section.dataset.ppJourneyReady ===\r\n      \"true\"\r\n  ) {\r\n    return;\r\n  }\r\n\r\n\r\n  section.dataset.ppJourneyReady =\r\n    \"true\";\r\n\r\n\r\n\r\n  \/* =========================================================\r\n     FALLBACK\r\n  ========================================================= *\/\r\n\r\n  const reveal = () => {\r\n\r\n    section.classList.add(\r\n      \"pp-journey-visible\"\r\n    );\r\n\r\n  };\r\n\r\n\r\n  if (\r\n    !(\r\n      \"IntersectionObserver\"\r\n      in window\r\n    )\r\n  ) {\r\n\r\n    reveal();\r\n\r\n    return;\r\n  }\r\n\r\n\r\n\r\n  \/* =========================================================\r\n     START ANIMATION WHEN SECTION ENTERS VIEWPORT\r\n  ========================================================= *\/\r\n\r\n  const observer =\r\n    new IntersectionObserver(\r\n      entries => {\r\n\r\n        const entry =\r\n          entries[0];\r\n\r\n\r\n        if (\r\n          !entry ||\r\n          !entry.isIntersecting\r\n        ) {\r\n          return;\r\n        }\r\n\r\n\r\n        reveal();\r\n\r\n\r\n        observer.disconnect();\r\n\r\n      },\r\n      {\r\n        threshold: 0.20,\r\n\r\n        rootMargin:\r\n          \"0px 0px -8% 0px\"\r\n      }\r\n    );\r\n\r\n\r\n  observer.observe(\r\n    section\r\n  );\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b56c4f0 elementor-widget elementor-widget-html\" data-id=\"b56c4f0\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\r\n  PIXEL PINE \u2014 AI EXECUTION GAP\r\n  Elementor HTML Widget\r\n\r\n  FEATURES\r\n  - Solid dark futuristic background\r\n  - SEO-friendly semantic structure\r\n  - Animated reveal\r\n  - Animated divider lines\r\n  - Desktop \/ tablet \/ mobile responsive\r\n  - Reduced-motion accessibility\r\n========================================================= -->\r\n\r\n\r\n<style>\r\n\/* =========================================================\r\n   ELEMENTOR RESET\r\n========================================================= *\/\r\n\r\n.elementor-widget-html:has(#ai-execution-gap),\r\n.elementor-widget-html:has(#ai-execution-gap) > .elementor-widget-container {\r\n  width: 100%;\r\n  max-width: none !important;\r\n  margin: 0 !important;\r\n  padding: 0 !important;\r\n}\r\n\r\n.e-con:has(#ai-execution-gap) {\r\n  --gap: 0px !important;\r\n  gap: 0 !important;\r\n  row-gap: 0 !important;\r\n}\r\n\r\n#ai-execution-gap,\r\n#ai-execution-gap * {\r\n  box-sizing: border-box;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SECTION\r\n========================================================= *\/\r\n\r\n#ai-execution-gap {\r\n  --pp-mint: #84E6D3;\r\n  --pp-indigo: #7E79D7;\r\n  --pp-purple: #AF83E8;\r\n\r\n  --pp-bg: #070B16;\r\n\r\n  --pp-white: #F7FAFC;\r\n  --pp-muted: #B8C2D1;\r\n  --pp-dim: #7F8A9E;\r\n\r\n  --pp-line: rgba(126, 121, 215, 0.18);\r\n\r\n  position: relative;\r\n\r\n  left: 50%;\r\n\r\n  width: 100vw;\r\n  max-width: none !important;\r\n\r\n  margin: 0 !important;\r\n\r\n  transform: translateX(-50%);\r\n\r\n  overflow: hidden;\r\n  isolation: isolate;\r\n\r\n  \/*\r\n    IMPORTANT:\r\n    One solid tone only.\r\n    No image.\r\n    No radial background.\r\n    No grid.\r\n  *\/\r\n  background: var(--pp-bg);\r\n\r\n  color: var(--pp-white);\r\n\r\n  font-family:\r\n    Manrope,\r\n    Inter,\r\n    \"Segoe UI\",\r\n    Arial,\r\n    sans-serif;\r\n\r\n  scroll-margin-top: 90px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   INNER\r\n========================================================= *\/\r\n\r\n#ai-execution-gap .pp-gap__inner {\r\n  width:\r\n    min(\r\n      1360px,\r\n      calc(100% - 80px)\r\n    );\r\n\r\n  margin: 0 auto;\r\n\r\n  padding:\r\n    112px\r\n    0\r\n    80px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MAIN GRID\r\n========================================================= *\/\r\n\r\n#ai-execution-gap .pp-gap__layout {\r\n  display: grid;\r\n\r\n  grid-template-columns:\r\n    minmax(350px, 0.82fr)\r\n    minmax(560px, 1.18fr);\r\n\r\n  align-items: start;\r\n\r\n  gap:\r\n    clamp(\r\n      70px,\r\n      8vw,\r\n      125px\r\n    );\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   LEFT INTRO\r\n========================================================= *\/\r\n\r\n#ai-execution-gap .pp-gap__intro {\r\n  position: relative;\r\n\r\n  min-width: 0;\r\n\r\n  padding-top: 4px;\r\n}\r\n\r\n\r\n#ai-execution-gap .pp-gap__eyebrow {\r\n  display: flex;\r\n\r\n  align-items: center;\r\n\r\n  gap: 13px;\r\n\r\n  margin:\r\n    0\r\n    0\r\n    27px;\r\n\r\n  color: var(--pp-mint);\r\n\r\n  font-size:\r\n    clamp(\r\n      10px,\r\n      0.9vw,\r\n      13px\r\n    );\r\n\r\n  font-weight: 760;\r\n\r\n  line-height: 1.4;\r\n\r\n  letter-spacing: 0.31em;\r\n\r\n  text-transform: uppercase;\r\n}\r\n\r\n\r\n\/* small brand line *\/\r\n\r\n#ai-execution-gap .pp-gap__eyebrow::before {\r\n  content: \"\";\r\n\r\n  width: 28px;\r\n  height: 1px;\r\n\r\n  flex: 0 0 auto;\r\n\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      var(--pp-mint),\r\n      var(--pp-indigo)\r\n    );\r\n\r\n  box-shadow:\r\n    0 0 10px\r\n    rgba(132, 230, 211, 0.28);\r\n}\r\n\r\n\r\n#ai-execution-gap .pp-gap__title {\r\n  max-width: 590px;\r\n\r\n  margin: 0;\r\n\r\n  color: var(--pp-white);\r\n\r\n  font-size:\r\n    clamp(\r\n      46px,\r\n      3.9vw,\r\n      62px\r\n    );\r\n\r\n  font-weight: 770;\r\n\r\n  line-height: 1.03;\r\n\r\n  letter-spacing: -0.052em;\r\n\r\n  text-wrap: balance;\r\n\r\n  text-shadow:\r\n    0 12px 42px\r\n    rgba(0, 0, 0, 0.30);\r\n}\r\n\r\n\r\n\/* Pixel Pine treatment:\r\n   highlight only one phrase *\/\r\n#ai-execution-gap .pp-gap__title-accent {\r\n  color: transparent;\r\n\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      #84E6D3 0%,\r\n      #7E79D7 55%,\r\n      #AF83E8 100%\r\n    );\r\n\r\n  -webkit-background-clip: text;\r\n  background-clip: text;\r\n}\r\n\r\n\r\n#ai-execution-gap .pp-gap__description {\r\n  max-width: 560px;\r\n\r\n  margin:\r\n    31px\r\n    0\r\n    0;\r\n\r\n  color: var(--pp-muted);\r\n\r\n  font-size:\r\n    clamp(\r\n      16px,\r\n      1.25vw,\r\n      19px\r\n    );\r\n\r\n  font-weight: 440;\r\n\r\n  line-height: 1.65;\r\n\r\n  letter-spacing: -0.015em;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   RIGHT PROBLEM LIST\r\n========================================================= *\/\r\n\r\n#ai-execution-gap .pp-gap__problems {\r\n  position: relative;\r\n\r\n  display: grid;\r\n\r\n  min-width: 0;\r\n\r\n  border-top:\r\n    1px\r\n    solid\r\n    var(--pp-line);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   PROBLEM ROW\r\n========================================================= *\/\r\n\r\n#ai-execution-gap .pp-problem {\r\n  --problem-color: var(--pp-indigo);\r\n\r\n  position: relative;\r\n\r\n  display: grid;\r\n\r\n  grid-template-columns:\r\n    54px\r\n    58px\r\n    minmax(0, 1fr);\r\n\r\n  align-items: start;\r\n\r\n  gap: 19px;\r\n\r\n  min-height: 170px;\r\n\r\n  padding:\r\n    31px\r\n    0\r\n    30px;\r\n\r\n  overflow: hidden;\r\n\r\n  border-bottom:\r\n    1px\r\n    solid\r\n    var(--pp-line);\r\n\r\n  opacity: 0;\r\n\r\n  transform:\r\n    translate3d(\r\n      30px,\r\n      0,\r\n      0\r\n    );\r\n\r\n  transition:\r\n    opacity\r\n      680ms\r\n      ease,\r\n    transform\r\n      760ms\r\n      cubic-bezier(.22, 1, .36, 1);\r\n}\r\n\r\n\r\n\/* individual brand colour *\/\r\n\r\n#ai-execution-gap .pp-problem--one {\r\n  --problem-color: #84E6D3;\r\n}\r\n\r\n#ai-execution-gap .pp-problem--two {\r\n  --problem-color: #7E79D7;\r\n}\r\n\r\n#ai-execution-gap .pp-problem--three {\r\n  --problem-color: #AF83E8;\r\n}\r\n\r\n\r\n\/* Animated line across each row *\/\r\n\r\n#ai-execution-gap .pp-problem::after {\r\n  content: \"\";\r\n\r\n  position: absolute;\r\n\r\n  right: 0;\r\n  bottom: -1px;\r\n  left: 0;\r\n\r\n  height: 1px;\r\n\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      transparent 0%,\r\n      var(--problem-color) 20%,\r\n      var(--problem-color) 80%,\r\n      transparent 100%\r\n    );\r\n\r\n  box-shadow:\r\n    0 0 10px\r\n    color-mix(\r\n      in srgb,\r\n      var(--problem-color) 55%,\r\n      transparent\r\n    );\r\n\r\n  transform:\r\n    scaleX(0);\r\n\r\n  transform-origin: left center;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   NUMBER\r\n========================================================= *\/\r\n\r\n#ai-execution-gap .pp-problem__number {\r\n  padding-top: 7px;\r\n\r\n  color: var(--problem-color);\r\n\r\n  font-size: 20px;\r\n\r\n  font-weight: 760;\r\n\r\n  line-height: 1;\r\n\r\n  letter-spacing: -0.02em;\r\n\r\n  text-shadow:\r\n    0 0 14px\r\n    color-mix(\r\n      in srgb,\r\n      var(--problem-color) 40%,\r\n      transparent\r\n    );\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   ICON\r\n========================================================= *\/\r\n\r\n#ai-execution-gap .pp-problem__icon {\r\n  display: grid;\r\n\r\n  place-items: center;\r\n\r\n  width: 50px;\r\n  height: 50px;\r\n\r\n  border:\r\n    1px\r\n    solid\r\n    color-mix(\r\n      in srgb,\r\n      var(--problem-color) 38%,\r\n      transparent\r\n    );\r\n\r\n  border-radius: 12px;\r\n\r\n  color: var(--problem-color);\r\n\r\n  background:\r\n    rgba(255, 255, 255, 0.015);\r\n\r\n  box-shadow:\r\n    inset\r\n    0\r\n    0\r\n    20px\r\n    color-mix(\r\n      in srgb,\r\n      var(--problem-color) 7%,\r\n      transparent\r\n    );\r\n\r\n  transform:\r\n    scale(0.72);\r\n\r\n  opacity: 0;\r\n\r\n  transition:\r\n    transform\r\n    620ms\r\n    cubic-bezier(.22, 1, .36, 1),\r\n    opacity\r\n    500ms\r\n    ease,\r\n    box-shadow\r\n    280ms\r\n    ease,\r\n    border-color\r\n    280ms\r\n    ease;\r\n}\r\n\r\n\r\n#ai-execution-gap .pp-problem__icon svg {\r\n  display: block;\r\n\r\n  width: 26px;\r\n  height: 26px;\r\n\r\n  fill: none;\r\n\r\n  stroke: currentColor;\r\n\r\n  stroke-width: 1.6;\r\n\r\n  stroke-linecap: round;\r\n\r\n  stroke-linejoin: round;\r\n\r\n  filter:\r\n    drop-shadow(\r\n      0 0 6px\r\n      color-mix(\r\n        in srgb,\r\n        var(--problem-color) 46%,\r\n        transparent\r\n      )\r\n    );\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   PROBLEM CONTENT\r\n========================================================= *\/\r\n\r\n#ai-execution-gap .pp-problem__content {\r\n  min-width: 0;\r\n}\r\n\r\n\r\n#ai-execution-gap .pp-problem__title {\r\n  margin:\r\n    0\r\n    0\r\n    10px;\r\n\r\n  color: var(--pp-white);\r\n\r\n  font-size:\r\n    clamp(\r\n      19px,\r\n      1.4vw,\r\n      23px\r\n    );\r\n\r\n  font-weight: 720;\r\n\r\n  line-height: 1.25;\r\n\r\n  letter-spacing: -0.028em;\r\n}\r\n\r\n\r\n#ai-execution-gap .pp-problem__copy {\r\n  max-width: 610px;\r\n\r\n  margin: 0;\r\n\r\n  color: var(--pp-muted);\r\n\r\n  font-size:\r\n    clamp(\r\n      14px,\r\n      1vw,\r\n      16px\r\n    );\r\n\r\n  font-weight: 430;\r\n\r\n  line-height: 1.58;\r\n\r\n  letter-spacing: -0.01em;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HOVER\r\n========================================================= *\/\r\n\r\n#ai-execution-gap .pp-problem:hover\r\n.pp-problem__icon {\r\n  transform:\r\n    translateY(-3px)\r\n    scale(1.05);\r\n\r\n  border-color:\r\n    color-mix(\r\n      in srgb,\r\n      var(--problem-color) 67%,\r\n      transparent\r\n    );\r\n\r\n  box-shadow:\r\n    inset\r\n    0\r\n    0\r\n    24px\r\n    color-mix(\r\n      in srgb,\r\n      var(--problem-color) 10%,\r\n      transparent\r\n    ),\r\n    0\r\n    0\r\n    24px\r\n    color-mix(\r\n      in srgb,\r\n      var(--problem-color) 11%,\r\n      transparent\r\n    );\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   BOTTOM BRIDGE STATEMENT\r\n========================================================= *\/\r\n\r\n#ai-execution-gap .pp-gap__bridge {\r\n  margin-top: 71px;\r\n}\r\n\r\n\r\n\/* Mint \u2192 Indigo \u2192 Purple line *\/\r\n\r\n#ai-execution-gap .pp-gap__bridge-line {\r\n  position: relative;\r\n\r\n  width: 100%;\r\n  height: 1px;\r\n\r\n  overflow: hidden;\r\n\r\n  background:\r\n    rgba(126, 121, 215, 0.15);\r\n}\r\n\r\n\r\n#ai-execution-gap .pp-gap__bridge-fill {\r\n  position: absolute;\r\n\r\n  inset: 0;\r\n\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      #84E6D3 0%,\r\n      #7E79D7 53%,\r\n      #AF83E8 100%\r\n    );\r\n\r\n  box-shadow:\r\n    0 0 13px\r\n    rgba(126, 121, 215, 0.38);\r\n\r\n  transform:\r\n    scaleX(0);\r\n\r\n  transform-origin:\r\n    left center;\r\n}\r\n\r\n\r\n\/* travelling glow *\/\r\n\r\n#ai-execution-gap .pp-gap__bridge-light {\r\n  position: absolute;\r\n\r\n  top: 50%;\r\n  left: 0;\r\n\r\n  width: 9px;\r\n  height: 9px;\r\n\r\n  border-radius: 50%;\r\n\r\n  background: #FFFFFF;\r\n\r\n  box-shadow:\r\n    0\r\n    0\r\n    6px\r\n    #FFFFFF,\r\n\r\n    0\r\n    0\r\n    18px\r\n    #84E6D3;\r\n\r\n  transform:\r\n    translate(\r\n      -50%,\r\n      -50%\r\n    );\r\n\r\n  opacity: 0;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   BRIDGE COPY\r\n========================================================= *\/\r\n\r\n#ai-execution-gap .pp-gap__bridge-copy {\r\n  max-width: 1000px;\r\n\r\n  margin:\r\n    31px\r\n    auto\r\n    0;\r\n\r\n  color: #CCD3E0;\r\n\r\n  font-size:\r\n    clamp(\r\n      19px,\r\n      1.6vw,\r\n      26px\r\n    );\r\n\r\n  font-weight: 430;\r\n\r\n  line-height: 1.5;\r\n\r\n  letter-spacing: -0.025em;\r\n\r\n  text-align: center;\r\n\r\n  text-wrap: balance;\r\n\r\n  opacity: 0;\r\n\r\n  transform:\r\n    translateY(18px);\r\n}\r\n\r\n\r\n#ai-execution-gap .pp-gap__brand {\r\n  font-weight: 760;\r\n\r\n  color: transparent;\r\n\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      #84E6D3,\r\n      #7E79D7,\r\n      #AF83E8\r\n    );\r\n\r\n  -webkit-background-clip: text;\r\n  background-clip: text;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   INTRO ANIMATION\r\n========================================================= *\/\r\n\r\n#ai-execution-gap .pp-gap__intro {\r\n  opacity: 0;\r\n\r\n  transform:\r\n    translate3d(\r\n      -28px,\r\n      0,\r\n      0\r\n    );\r\n\r\n  filter: blur(4px);\r\n}\r\n\r\n\r\n#ai-execution-gap.pp-gap-visible\r\n.pp-gap__intro {\r\n  animation:\r\n    ppGapIntro\r\n    850ms\r\n    cubic-bezier(.22, 1, .36, 1)\r\n    forwards;\r\n}\r\n\r\n\r\n@keyframes ppGapIntro {\r\n\r\n  to {\r\n    opacity: 1;\r\n\r\n    transform:\r\n      translate3d(\r\n        0,\r\n        0,\r\n        0\r\n      );\r\n\r\n    filter: blur(0);\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   PROBLEM STAGGER\r\n========================================================= *\/\r\n\r\n#ai-execution-gap.pp-gap-visible\r\n.pp-problem {\r\n  opacity: 1;\r\n\r\n  transform:\r\n    translate3d(\r\n      0,\r\n      0,\r\n      0\r\n    );\r\n}\r\n\r\n\r\n#ai-execution-gap.pp-gap-visible\r\n.pp-problem--one {\r\n  transition-delay: 240ms;\r\n}\r\n\r\n\r\n#ai-execution-gap.pp-gap-visible\r\n.pp-problem--two {\r\n  transition-delay: 580ms;\r\n}\r\n\r\n\r\n#ai-execution-gap.pp-gap-visible\r\n.pp-problem--three {\r\n  transition-delay: 920ms;\r\n}\r\n\r\n\r\n\/* icons *\/\r\n\r\n#ai-execution-gap.pp-gap-visible\r\n.pp-problem--one\r\n.pp-problem__icon {\r\n  animation:\r\n    ppGapIconIn\r\n    650ms\r\n    cubic-bezier(.22, 1, .36, 1)\r\n    360ms\r\n    forwards;\r\n}\r\n\r\n\r\n#ai-execution-gap.pp-gap-visible\r\n.pp-problem--two\r\n.pp-problem__icon {\r\n  animation:\r\n    ppGapIconIn\r\n    650ms\r\n    cubic-bezier(.22, 1, .36, 1)\r\n    700ms\r\n    forwards;\r\n}\r\n\r\n\r\n#ai-execution-gap.pp-gap-visible\r\n.pp-problem--three\r\n.pp-problem__icon {\r\n  animation:\r\n    ppGapIconIn\r\n    650ms\r\n    cubic-bezier(.22, 1, .36, 1)\r\n    1040ms\r\n    forwards;\r\n}\r\n\r\n\r\n@keyframes ppGapIconIn {\r\n\r\n  0% {\r\n    opacity: 0;\r\n\r\n    transform:\r\n      scale(0.56);\r\n  }\r\n\r\n  72% {\r\n    opacity: 1;\r\n\r\n    transform:\r\n      scale(1.08);\r\n  }\r\n\r\n  100% {\r\n    opacity: 1;\r\n\r\n    transform:\r\n      scale(1);\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* lines *\/\r\n\r\n#ai-execution-gap.pp-gap-visible\r\n.pp-problem--one::after {\r\n  animation:\r\n    ppGapLine\r\n    780ms\r\n    cubic-bezier(.22, 1, .36, 1)\r\n    470ms\r\n    forwards;\r\n}\r\n\r\n\r\n#ai-execution-gap.pp-gap-visible\r\n.pp-problem--two::after {\r\n  animation:\r\n    ppGapLine\r\n    780ms\r\n    cubic-bezier(.22, 1, .36, 1)\r\n    810ms\r\n    forwards;\r\n}\r\n\r\n\r\n#ai-execution-gap.pp-gap-visible\r\n.pp-problem--three::after {\r\n  animation:\r\n    ppGapLine\r\n    780ms\r\n    cubic-bezier(.22, 1, .36, 1)\r\n    1150ms\r\n    forwards;\r\n}\r\n\r\n\r\n@keyframes ppGapLine {\r\n\r\n  to {\r\n    transform:\r\n      scaleX(1);\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   BRIDGE ANIMATION\r\n========================================================= *\/\r\n\r\n#ai-execution-gap.pp-gap-visible\r\n.pp-gap__bridge-fill {\r\n  animation:\r\n    ppBridgeDraw\r\n    1.4s\r\n    cubic-bezier(.22, 1, .36, 1)\r\n    1.32s\r\n    forwards;\r\n}\r\n\r\n\r\n@keyframes ppBridgeDraw {\r\n\r\n  to {\r\n    transform:\r\n      scaleX(1);\r\n  }\r\n\r\n}\r\n\r\n\r\n#ai-execution-gap.pp-gap-visible\r\n.pp-gap__bridge-light {\r\n  animation:\r\n    ppBridgeTravel\r\n    1.4s\r\n    cubic-bezier(.22, 1, .36, 1)\r\n    1.32s\r\n    forwards;\r\n}\r\n\r\n\r\n@keyframes ppBridgeTravel {\r\n\r\n  0% {\r\n    left: 0;\r\n\r\n    opacity: 0;\r\n  }\r\n\r\n  8% {\r\n    opacity: 1;\r\n  }\r\n\r\n  92% {\r\n    opacity: 1;\r\n  }\r\n\r\n  100% {\r\n    left: 100%;\r\n\r\n    opacity: 0;\r\n  }\r\n\r\n}\r\n\r\n\r\n#ai-execution-gap.pp-gap-visible\r\n.pp-gap__bridge-copy {\r\n  animation:\r\n    ppBridgeCopy\r\n    780ms\r\n    cubic-bezier(.22, 1, .36, 1)\r\n    2.25s\r\n    forwards;\r\n}\r\n\r\n\r\n@keyframes ppBridgeCopy {\r\n\r\n  to {\r\n    opacity: 1;\r\n\r\n    transform:\r\n      translateY(0);\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TABLET\r\n========================================================= *\/\r\n\r\n@media (max-width: 1024px) {\r\n\r\n  #ai-execution-gap .pp-gap__inner {\r\n    width:\r\n      min(\r\n        1200px,\r\n        calc(100% - 56px)\r\n      );\r\n\r\n    padding:\r\n      94px\r\n      0\r\n      72px;\r\n  }\r\n\r\n\r\n  #ai-execution-gap .pp-gap__layout {\r\n    grid-template-columns:\r\n      minmax(300px, 0.78fr)\r\n      minmax(450px, 1.22fr);\r\n\r\n    gap: 52px;\r\n  }\r\n\r\n\r\n  #ai-execution-gap .pp-gap__title {\r\n    font-size:\r\n      clamp(\r\n        42px,\r\n        5vw,\r\n        55px\r\n      );\r\n  }\r\n\r\n\r\n  #ai-execution-gap .pp-problem {\r\n    grid-template-columns:\r\n      45px\r\n      52px\r\n      minmax(0, 1fr);\r\n\r\n    gap: 15px;\r\n\r\n    min-height: 165px;\r\n  }\r\n\r\n\r\n  #ai-execution-gap .pp-problem__icon {\r\n    width: 46px;\r\n    height: 46px;\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MOBILE\r\n========================================================= *\/\r\n\r\n@media (max-width: 767px) {\r\n\r\n  #ai-execution-gap {\r\n    left: auto;\r\n\r\n    width: 100%;\r\n\r\n    transform: none;\r\n  }\r\n\r\n\r\n  #ai-execution-gap .pp-gap__inner {\r\n    width:\r\n      min(\r\n        100% - 36px,\r\n        620px\r\n      );\r\n\r\n    padding:\r\n      76px\r\n      0\r\n      62px;\r\n  }\r\n\r\n\r\n  #ai-execution-gap .pp-gap__layout {\r\n    grid-template-columns: 1fr;\r\n\r\n    gap: 52px;\r\n  }\r\n\r\n\r\n  \/* Header first *\/\r\n\r\n  #ai-execution-gap .pp-gap__intro {\r\n    max-width: 570px;\r\n  }\r\n\r\n\r\n  #ai-execution-gap .pp-gap__eyebrow {\r\n    margin-bottom: 20px;\r\n\r\n    font-size: 9px;\r\n\r\n    letter-spacing: 0.22em;\r\n  }\r\n\r\n\r\n  #ai-execution-gap .pp-gap__title {\r\n    max-width: 560px;\r\n\r\n    font-size:\r\n      clamp(\r\n        39px,\r\n        11vw,\r\n        53px\r\n      );\r\n\r\n    line-height: 1.03;\r\n  }\r\n\r\n\r\n  #ai-execution-gap .pp-gap__description {\r\n    max-width: 520px;\r\n\r\n    margin-top: 23px;\r\n\r\n    font-size: 15.5px;\r\n  }\r\n\r\n\r\n  \/* Problems *\/\r\n\r\n  #ai-execution-gap .pp-problem {\r\n    grid-template-columns:\r\n      37px\r\n      47px\r\n      minmax(0, 1fr);\r\n\r\n    gap: 13px;\r\n\r\n    min-height: 0;\r\n\r\n    padding:\r\n      27px\r\n      0;\r\n  }\r\n\r\n\r\n  #ai-execution-gap .pp-problem__number {\r\n    padding-top: 6px;\r\n\r\n    font-size: 17px;\r\n  }\r\n\r\n\r\n  #ai-execution-gap .pp-problem__icon {\r\n    width: 42px;\r\n    height: 42px;\r\n\r\n    border-radius: 10px;\r\n  }\r\n\r\n\r\n  #ai-execution-gap .pp-problem__icon svg {\r\n    width: 22px;\r\n    height: 22px;\r\n  }\r\n\r\n\r\n  #ai-execution-gap .pp-problem__title {\r\n    font-size: 18px;\r\n  }\r\n\r\n\r\n  #ai-execution-gap .pp-problem__copy {\r\n    font-size: 14px;\r\n\r\n    line-height: 1.55;\r\n  }\r\n\r\n\r\n  \/* Bridge *\/\r\n\r\n  #ai-execution-gap .pp-gap__bridge {\r\n    margin-top: 49px;\r\n  }\r\n\r\n\r\n  #ai-execution-gap .pp-gap__bridge-copy {\r\n    max-width: 520px;\r\n\r\n    margin-top: 26px;\r\n\r\n    font-size:\r\n      clamp(\r\n        18px,\r\n        5vw,\r\n        22px\r\n      );\r\n\r\n    line-height: 1.48;\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SMALL MOBILE\r\n========================================================= *\/\r\n\r\n@media (max-width: 420px) {\r\n\r\n  #ai-execution-gap .pp-gap__inner {\r\n    width:\r\n      calc(\r\n        100% - 30px\r\n      );\r\n  }\r\n\r\n\r\n  #ai-execution-gap .pp-problem {\r\n    grid-template-columns:\r\n      30px\r\n      42px\r\n      minmax(0, 1fr);\r\n\r\n    gap: 11px;\r\n  }\r\n\r\n\r\n  #ai-execution-gap .pp-problem__icon {\r\n    width: 38px;\r\n    height: 38px;\r\n  }\r\n\r\n\r\n  #ai-execution-gap .pp-problem__icon svg {\r\n    width: 20px;\r\n    height: 20px;\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   REDUCED MOTION\r\n========================================================= *\/\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n\r\n  #ai-execution-gap *,\r\n  #ai-execution-gap *::before,\r\n  #ai-execution-gap *::after {\r\n    animation-duration:\r\n      0.01ms !important;\r\n\r\n    animation-iteration-count:\r\n      1 !important;\r\n\r\n    transition-duration:\r\n      0.01ms !important;\r\n  }\r\n\r\n\r\n  #ai-execution-gap .pp-gap__intro,\r\n  #ai-execution-gap .pp-problem,\r\n  #ai-execution-gap .pp-problem__icon,\r\n  #ai-execution-gap .pp-gap__bridge-copy {\r\n    opacity: 1;\r\n\r\n    transform: none;\r\n\r\n    filter: none;\r\n  }\r\n\r\n\r\n  #ai-execution-gap .pp-problem::after,\r\n  #ai-execution-gap .pp-gap__bridge-fill {\r\n    transform:\r\n      scaleX(1);\r\n  }\r\n\r\n\r\n  #ai-execution-gap .pp-gap__bridge-light {\r\n    display: none;\r\n  }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n\r\n<!-- =========================================================\r\n     HTML\r\n========================================================= -->\r\n\r\n<section\r\n  id=\"ai-execution-gap\"\r\n  aria-labelledby=\"ai-execution-gap-title\"\r\n>\r\n\r\n  <div class=\"pp-gap__inner\">\r\n\r\n\r\n    <!-- =====================================================\r\n         MAIN AREA\r\n    ====================================================== -->\r\n\r\n    <div class=\"pp-gap__layout\">\r\n\r\n\r\n      <!-- =================================================\r\n           LEFT HEADER\r\n      ================================================== -->\r\n\r\n      <header\r\n        class=\"pp-gap__intro\"\r\n      >\r\n\r\n        <p\r\n          class=\"pp-gap__eyebrow\"\r\n        >\r\n          The AI Execution Gap\r\n        <\/p>\r\n\r\n\r\n        <!--\r\n          Homepage already has the H1.\r\n          This section correctly uses H2.\r\n        -->\r\n\r\n        <h2\r\n          id=\"ai-execution-gap-title\"\r\n          class=\"pp-gap__title\"\r\n        >\r\n          AI is easy to start.\r\n\r\n          <br \/>\r\n\r\n          Harder to make it\r\n          <span class=\"pp-gap__title-accent\">\r\n            work at scale.\r\n          <\/span>\r\n        <\/h2>\r\n\r\n\r\n        <p\r\n          class=\"pp-gap__description\"\r\n        >\r\n          Many organisations experiment with AI,\r\n          but struggle to connect it with real workflows,\r\n          fragmented data, and the capability needed\r\n          to operate it effectively.\r\n        <\/p>\r\n\r\n      <\/header>\r\n\r\n\r\n\r\n      <!-- =================================================\r\n           RIGHT \u2014 PROBLEMS\r\n      ================================================== -->\r\n\r\n      <div\r\n        class=\"pp-gap__problems\"\r\n        aria-label=\"Common enterprise AI execution challenges\"\r\n      >\r\n\r\n\r\n        <!-- ===============================================\r\n             01\r\n        ================================================ -->\r\n\r\n        <article\r\n          class=\"\r\n            pp-problem\r\n            pp-problem--one\r\n          \"\r\n        >\r\n\r\n          <span\r\n            class=\"pp-problem__number\"\r\n            aria-hidden=\"true\"\r\n          >\r\n            01\r\n          <\/span>\r\n\r\n\r\n          <div\r\n            class=\"pp-problem__icon\"\r\n            aria-hidden=\"true\"\r\n          >\r\n\r\n            <!-- disconnected workflow -->\r\n\r\n            <svg\r\n              viewBox=\"0 0 32 32\"\r\n            >\r\n              <path\r\n                d=\"M11.5 11.5 8.2 8.2a5 5 0 0 0-7.1 7.1l4.1 4.1a5 5 0 0 0 7.1 0l2.2-2.2\"\r\n              \/>\r\n\r\n              <path\r\n                d=\"m20.5 20.5 3.3 3.3a5 5 0 0 0 7.1-7.1l-4.1-4.1a5 5 0 0 0-7.1 0l-2.2 2.2\"\r\n              \/>\r\n\r\n              <path\r\n                d=\"m11 21 10-10\"\r\n              \/>\r\n            <\/svg>\r\n\r\n          <\/div>\r\n\r\n\r\n          <div\r\n            class=\"pp-problem__content\"\r\n          >\r\n\r\n            <h3\r\n              class=\"pp-problem__title\"\r\n            >\r\n              Isolated AI Experiments\r\n            <\/h3>\r\n\r\n\r\n            <p\r\n              class=\"pp-problem__copy\"\r\n            >\r\n              Promising AI initiatives remain disconnected\r\n              from day-to-day business workflows.\r\n            <\/p>\r\n\r\n          <\/div>\r\n\r\n        <\/article>\r\n\r\n\r\n\r\n        <!-- ===============================================\r\n             02\r\n        ================================================ -->\r\n\r\n        <article\r\n          class=\"\r\n            pp-problem\r\n            pp-problem--two\r\n          \"\r\n        >\r\n\r\n          <span\r\n            class=\"pp-problem__number\"\r\n            aria-hidden=\"true\"\r\n          >\r\n            02\r\n          <\/span>\r\n\r\n\r\n          <div\r\n            class=\"pp-problem__icon\"\r\n            aria-hidden=\"true\"\r\n          >\r\n\r\n            <!-- database -->\r\n\r\n            <svg\r\n              viewBox=\"0 0 32 32\"\r\n            >\r\n              <ellipse\r\n                cx=\"16\"\r\n                cy=\"7\"\r\n                rx=\"10\"\r\n                ry=\"4\"\r\n              \/>\r\n\r\n              <path\r\n                d=\"M6 7v8c0 2.2 4.5 4 10 4s10-1.8 10-4V7\"\r\n              \/>\r\n\r\n              <path\r\n                d=\"M6 15v8c0 2.2 4.5 4 10 4s10-1.8 10-4v-8\"\r\n              \/>\r\n            <\/svg>\r\n\r\n          <\/div>\r\n\r\n\r\n          <div\r\n            class=\"pp-problem__content\"\r\n          >\r\n\r\n            <h3\r\n              class=\"pp-problem__title\"\r\n            >\r\n              Fragmented Data &amp; Systems\r\n            <\/h3>\r\n\r\n\r\n            <p\r\n              class=\"pp-problem__copy\"\r\n            >\r\n              Disconnected data, tools, and legacy systems\r\n              make AI difficult to integrate and scale.\r\n            <\/p>\r\n\r\n          <\/div>\r\n\r\n        <\/article>\r\n\r\n\r\n\r\n        <!-- ===============================================\r\n             03\r\n        ================================================ -->\r\n\r\n        <article\r\n          class=\"\r\n            pp-problem\r\n            pp-problem--three\r\n          \"\r\n        >\r\n\r\n          <span\r\n            class=\"pp-problem__number\"\r\n            aria-hidden=\"true\"\r\n          >\r\n            03\r\n          <\/span>\r\n\r\n\r\n          <div\r\n            class=\"pp-problem__icon\"\r\n            aria-hidden=\"true\"\r\n          >\r\n\r\n            <!-- team -->\r\n\r\n            <svg\r\n              viewBox=\"0 0 32 32\"\r\n            >\r\n\r\n              <circle\r\n                cx=\"13\"\r\n                cy=\"10\"\r\n                r=\"4\"\r\n              \/>\r\n\r\n              <path\r\n                d=\"M4 27c.5-6 3.5-9 9-9s8.5 3 9 9\"\r\n              \/>\r\n\r\n              <circle\r\n                cx=\"24\"\r\n                cy=\"11\"\r\n                r=\"3\"\r\n              \/>\r\n\r\n              <path\r\n                d=\"M23 18c4.4.3 6.8 3.2 7 8\"\r\n              \/>\r\n\r\n            <\/svg>\r\n\r\n          <\/div>\r\n\r\n\r\n          <div\r\n            class=\"pp-problem__content\"\r\n          >\r\n\r\n            <h3\r\n              class=\"pp-problem__title\"\r\n            >\r\n              Capability &amp; Operational Readiness\r\n            <\/h3>\r\n\r\n\r\n            <p\r\n              class=\"pp-problem__copy\"\r\n            >\r\n              Teams often lack the specialised expertise\r\n              and operating model needed to run AI continuously.\r\n            <\/p>\r\n\r\n          <\/div>\r\n\r\n        <\/article>\r\n\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n\r\n    <!-- =====================================================\r\n         BRIDGE STATEMENT\r\n    ====================================================== -->\r\n\r\n    <div\r\n      class=\"pp-gap__bridge\"\r\n    >\r\n\r\n      <div\r\n        class=\"pp-gap__bridge-line\"\r\n        aria-hidden=\"true\"\r\n      >\r\n\r\n        <span\r\n          class=\"pp-gap__bridge-fill\"\r\n        ><\/span>\r\n\r\n        <span\r\n          class=\"pp-gap__bridge-light\"\r\n        ><\/span>\r\n\r\n      <\/div>\r\n\r\n\r\n      <p\r\n        class=\"pp-gap__bridge-copy\"\r\n      >\r\n        <span class=\"pp-gap__brand\">\r\n          Pixel Pine\r\n        <\/span>\r\n\r\n        turns fragmented AI efforts into connected,\r\n        operational workflows that create measurable\r\n        business value.\r\n      <\/p>\r\n\r\n    <\/div>\r\n\r\n\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n\r\n<script>\r\n(() => {\r\n\r\n  const section =\r\n    document.getElementById(\r\n      \"ai-execution-gap\"\r\n    );\r\n\r\n\r\n  if (\r\n    !section ||\r\n    section.dataset.ppGapInitialized ===\r\n      \"true\"\r\n  ) {\r\n    return;\r\n  }\r\n\r\n\r\n  section.dataset.ppGapInitialized =\r\n    \"true\";\r\n\r\n\r\n  \/* =====================================================\r\n     REVEAL\r\n  ===================================================== *\/\r\n\r\n  const revealSection = () => {\r\n\r\n    section.classList.add(\r\n      \"pp-gap-visible\"\r\n    );\r\n\r\n  };\r\n\r\n\r\n  \/* =====================================================\r\n     FALLBACK\r\n  ===================================================== *\/\r\n\r\n  if (\r\n    !(\r\n      \"IntersectionObserver\"\r\n      in window\r\n    )\r\n  ) {\r\n\r\n    revealSection();\r\n\r\n    return;\r\n  }\r\n\r\n\r\n  \/* =====================================================\r\n     VIEWPORT OBSERVER\r\n  ===================================================== *\/\r\n\r\n  const observer =\r\n    new IntersectionObserver(\r\n      entries => {\r\n\r\n        const entry =\r\n          entries[0];\r\n\r\n\r\n        if (\r\n          !entry ||\r\n          !entry.isIntersecting\r\n        ) {\r\n          return;\r\n        }\r\n\r\n\r\n        revealSection();\r\n\r\n\r\n        observer.disconnect();\r\n\r\n      },\r\n      {\r\n        threshold: 0.18,\r\n\r\n        rootMargin:\r\n          \"0px 0px -7% 0px\"\r\n      }\r\n    );\r\n\r\n\r\n  observer.observe(\r\n    section\r\n  );\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5254359 elementor-widget elementor-widget-html\" data-id=\"5254359\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\r\n  PIXEL PINE \u2014 AI IMPLEMENTATION SERVICES\r\n  Animated AI workflow dashboard\r\n  Paste everything into ONE Elementor HTML Widget.\r\n\r\n  SECTION ID:\r\n  #ai-services\r\n\r\n  Compatible with the Hero CTA:\r\n  href=\"#ai-services\"\r\n========================================================= -->\r\n\r\n\r\n<style>\r\n\/* =========================================================\r\n   ELEMENTOR RESET\r\n========================================================= *\/\r\n\r\n.elementor-widget-html:has(#ai-services),\r\n.elementor-widget-html:has(#ai-services) > .elementor-widget-container {\r\n  width: 100%;\r\n  max-width: none !important;\r\n  margin: 0 !important;\r\n  padding: 0 !important;\r\n}\r\n\r\n.e-con:has(#ai-services) {\r\n  --gap: 0px !important;\r\n  gap: 0 !important;\r\n  row-gap: 0 !important;\r\n}\r\n\r\n#ai-services,\r\n#ai-services * {\r\n  box-sizing: border-box;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SECTION FOUNDATION\r\n========================================================= *\/\r\n\r\n#ai-services {\r\n  --pp-mint: #84E6D3;\r\n  --pp-mint-bright: #A1F0E1;\r\n\r\n  --pp-indigo: #7E79D7;\r\n  --pp-indigo-bright: #9691E8;\r\n\r\n  --pp-purple: #AF83E8;\r\n  --pp-purple-bright: #C39AF0;\r\n\r\n  --pp-bg: #09101D;\r\n  --pp-bg-deep: #060B16;\r\n  --pp-panel: #0D1526;\r\n  --pp-panel-soft: #111B30;\r\n\r\n  --pp-white: #F7FAFC;\r\n  --pp-muted: #AEB9CA;\r\n  --pp-dim: #758198;\r\n\r\n  --pp-success: #61E0AE;\r\n\r\n  --pp-line: rgba(126, 121, 215, 0.18);\r\n  --pp-line-mint: rgba(132, 230, 211, 0.22);\r\n  --pp-line-purple: rgba(175, 131, 232, 0.24);\r\n\r\n  position: relative;\r\n\r\n  left: 50%;\r\n\r\n  width: 100vw;\r\n  max-width: none !important;\r\n\r\n  margin: 0 !important;\r\n\r\n  transform: translateX(-50%);\r\n\r\n  overflow: hidden;\r\n  isolation: isolate;\r\n\r\n  \/*\r\n    Solid dark background.\r\n    Futuristic feeling comes from UI + animation,\r\n    not a busy background.\r\n  *\/\r\n  background: var(--pp-bg);\r\n\r\n  color: var(--pp-white);\r\n\r\n  font-family:\r\n    Manrope,\r\n    Inter,\r\n    \"Segoe UI\",\r\n    Arial,\r\n    sans-serif;\r\n\r\n  scroll-margin-top: 90px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CONTAINER\r\n========================================================= *\/\r\n\r\n#ai-services .pp-services__container {\r\n  width:\r\n    min(\r\n      1360px,\r\n      calc(100% - 80px)\r\n    );\r\n\r\n  margin: 0 auto;\r\n\r\n  padding:\r\n    112px\r\n    0\r\n    104px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HEADER\r\n========================================================= *\/\r\n\r\n#ai-services .pp-services__intro {\r\n  margin-bottom: 70px;\r\n}\r\n\r\n\r\n#ai-services .pp-services__eyebrow {\r\n  display: flex;\r\n\r\n  align-items: center;\r\n\r\n  gap: 12px;\r\n\r\n  margin:\r\n    0\r\n    0\r\n    27px;\r\n\r\n  color: var(--pp-mint);\r\n\r\n  font-size:\r\n    clamp(\r\n      10px,\r\n      0.9vw,\r\n      13px\r\n    );\r\n\r\n  font-weight: 760;\r\n\r\n  line-height: 1.4;\r\n\r\n  letter-spacing: 0.31em;\r\n\r\n  text-transform: uppercase;\r\n}\r\n\r\n\r\n#ai-services .pp-services__eyebrow::before {\r\n  content: \"\";\r\n\r\n  display: block;\r\n\r\n  width: 27px;\r\n  height: 1px;\r\n\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      var(--pp-mint),\r\n      var(--pp-indigo)\r\n    );\r\n\r\n  box-shadow:\r\n    0 0 11px\r\n    rgba(132, 230, 211, 0.42);\r\n}\r\n\r\n\r\n#ai-services .pp-services__headline-row {\r\n  display: grid;\r\n\r\n  grid-template-columns:\r\n    minmax(0, 1.45fr)\r\n    minmax(320px, 0.55fr);\r\n\r\n  align-items: end;\r\n\r\n  gap: 80px;\r\n}\r\n\r\n\r\n#ai-services .pp-services__title {\r\n  max-width: 850px;\r\n\r\n  margin: 0;\r\n\r\n  color: var(--pp-white);\r\n\r\n  font-size:\r\n    clamp(\r\n      46px,\r\n      3.9vw,\r\n      62px\r\n    );\r\n\r\n  font-weight: 770;\r\n\r\n  line-height: 1.03;\r\n\r\n  letter-spacing: -0.052em;\r\n\r\n  text-wrap: balance;\r\n}\r\n\r\n\r\n#ai-services .pp-services__title span {\r\n  color: transparent;\r\n\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      var(--pp-mint) 0%,\r\n      var(--pp-indigo) 54%,\r\n      var(--pp-purple) 100%\r\n    );\r\n\r\n  -webkit-background-clip: text;\r\n  background-clip: text;\r\n}\r\n\r\n\r\n#ai-services .pp-services__lead {\r\n  max-width: 420px;\r\n\r\n  margin:\r\n    0\r\n    0\r\n    5px;\r\n\r\n  color: var(--pp-muted);\r\n\r\n  font-size:\r\n    clamp(\r\n      16px,\r\n      1.25vw,\r\n      19px\r\n    );\r\n\r\n  font-weight: 440;\r\n\r\n  line-height: 1.65;\r\n\r\n  letter-spacing: -0.015em;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SHOWCASE\r\n========================================================= *\/\r\n\r\n#ai-services .pp-services__showcase {\r\n  display: grid;\r\n\r\n  grid-template-columns:\r\n    minmax(0, 1.42fr)\r\n    minmax(390px, 0.8fr);\r\n\r\n  gap: 72px;\r\n\r\n  align-items: stretch;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   DASHBOARD WRAPPER\r\n========================================================= *\/\r\n\r\n#ai-services .pp-services__media {\r\n  position: relative;\r\n\r\n  min-height: 525px;\r\n\r\n  overflow: hidden;\r\n\r\n  border:\r\n    1px\r\n    solid\r\n    rgba(126, 121, 215, 0.36);\r\n\r\n  border-radius: 18px;\r\n\r\n  background: var(--pp-bg-deep);\r\n\r\n  box-shadow:\r\n    0 28px 70px\r\n    rgba(0, 0, 0, 0.28),\r\n\r\n    inset\r\n    0\r\n    1px\r\n    0\r\n    rgba(255, 255, 255, 0.025);\r\n\r\n  isolation: isolate;\r\n}\r\n\r\n\r\n\/* Pixel Pine gradient border accent *\/\r\n\r\n#ai-services .pp-services__media::before {\r\n  content: \"\";\r\n\r\n  position: absolute;\r\n\r\n  z-index: 5;\r\n\r\n  top: 0;\r\n  right: 0;\r\n  left: 0;\r\n\r\n  height: 1px;\r\n\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      var(--pp-mint),\r\n      var(--pp-indigo),\r\n      var(--pp-purple)\r\n    );\r\n\r\n  opacity: 0.8;\r\n}\r\n\r\n\r\n#ai-services .pp-services__media-top,\r\n#ai-services .pp-services__media-bottom {\r\n  position: absolute;\r\n\r\n  z-index: 10;\r\n\r\n  right: 0;\r\n  left: 0;\r\n\r\n  display: flex;\r\n\r\n  align-items: center;\r\n\r\n  justify-content: space-between;\r\n\r\n  gap: 18px;\r\n\r\n  padding: 18px 21px;\r\n}\r\n\r\n\r\n#ai-services .pp-services__media-top {\r\n  top: 0;\r\n\r\n  background:\r\n    linear-gradient(\r\n      180deg,\r\n      rgba(5, 10, 20, 0.95),\r\n      rgba(5, 10, 20, 0)\r\n    );\r\n}\r\n\r\n\r\n#ai-services .pp-services__media-bottom {\r\n  bottom: 0;\r\n\r\n  align-items: flex-end;\r\n\r\n  background:\r\n    linear-gradient(\r\n      0deg,\r\n      rgba(5, 10, 20, 0.96),\r\n      rgba(5, 10, 20, 0)\r\n    );\r\n\r\n  color:\r\n    rgba(\r\n      255,\r\n      255,\r\n      255,\r\n      0.60\r\n    );\r\n\r\n  font-size: 10px;\r\n\r\n  font-weight: 650;\r\n\r\n  letter-spacing: 0.13em;\r\n\r\n  text-transform: uppercase;\r\n}\r\n\r\n\r\n#ai-services .pp-services__media-label,\r\n#ai-services .pp-services__status {\r\n  display: flex;\r\n\r\n  align-items: center;\r\n\r\n  gap: 8px;\r\n\r\n  font-size: 10px;\r\n\r\n  font-weight: 750;\r\n\r\n  letter-spacing: 0.15em;\r\n\r\n  text-transform: uppercase;\r\n}\r\n\r\n\r\n#ai-services .pp-services__media-label {\r\n  color: #DDE6F1;\r\n}\r\n\r\n\r\n#ai-services .pp-services__status {\r\n  color: var(--pp-success);\r\n}\r\n\r\n\r\n#ai-services .pp-services__live-dot,\r\n#ai-services .pp-services__status-dot {\r\n  width: 7px;\r\n  height: 7px;\r\n\r\n  flex: 0 0 auto;\r\n\r\n  border-radius: 50%;\r\n}\r\n\r\n\r\n#ai-services .pp-services__live-dot {\r\n  background: var(--pp-mint);\r\n\r\n  box-shadow:\r\n    0 0 0 4px\r\n    rgba(132, 230, 211, 0.08),\r\n\r\n    0 0 14px\r\n    rgba(132, 230, 211, 0.65);\r\n\r\n  animation:\r\n    ppServicesPulse\r\n    2.1s\r\n    ease-in-out\r\n    infinite;\r\n}\r\n\r\n\r\n#ai-services .pp-services__status-dot {\r\n  background: var(--pp-success);\r\n\r\n  box-shadow:\r\n    0 0 12px\r\n    rgba(97, 224, 174, 0.74);\r\n\r\n  animation:\r\n    ppServicesPulse\r\n    2.1s\r\n    ease-in-out\r\n    infinite;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   AI UI\r\n========================================================= *\/\r\n\r\n#ai-services .pp-ai-ui {\r\n  position: absolute;\r\n\r\n  inset:\r\n    57px\r\n    16px\r\n    52px;\r\n\r\n  display: grid;\r\n\r\n  grid-template-columns:\r\n    50px\r\n    minmax(0, 1fr);\r\n\r\n  overflow: hidden;\r\n\r\n  border:\r\n    1px\r\n    solid\r\n    rgba(126, 121, 215, 0.20);\r\n\r\n  border-radius: 13px;\r\n\r\n  background: #08101E;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SIDEBAR\r\n========================================================= *\/\r\n\r\n#ai-services .pp-ai-ui__rail {\r\n  position: relative;\r\n\r\n  z-index: 2;\r\n\r\n  display: flex;\r\n\r\n  flex-direction: column;\r\n\r\n  align-items: center;\r\n\r\n  padding:\r\n    12px\r\n    7px\r\n    11px;\r\n\r\n  border-right:\r\n    1px\r\n    solid\r\n    rgba(126, 121, 215, 0.15);\r\n\r\n  background:\r\n    rgba(7, 13, 25, 0.96);\r\n}\r\n\r\n\r\n#ai-services .pp-ai-ui__brand {\r\n  display: grid;\r\n\r\n  place-items: center;\r\n\r\n  width: 32px;\r\n  height: 32px;\r\n\r\n  border-radius: 8px;\r\n\r\n  background:\r\n    rgba(126, 121, 215, 0.09);\r\n\r\n  box-shadow:\r\n    0 0 18px\r\n    rgba(126, 121, 215, 0.10);\r\n}\r\n\r\n\r\n#ai-services .pp-ai-ui__brand svg {\r\n  width: 25px;\r\n  height: 21px;\r\n}\r\n\r\n\r\n#ai-services .pp-ai-ui__rail-icons {\r\n  display: grid;\r\n\r\n  gap: 13px;\r\n\r\n  margin-top: 21px;\r\n}\r\n\r\n\r\n#ai-services .pp-ai-ui__rail-icons span,\r\n#ai-services .pp-ai-ui__rail-settings {\r\n  display: grid;\r\n\r\n  place-items: center;\r\n\r\n  width: 31px;\r\n  height: 31px;\r\n\r\n  border:\r\n    1px\r\n    solid\r\n    transparent;\r\n\r\n  border-radius: 9px;\r\n\r\n  color: #6E7A92;\r\n}\r\n\r\n\r\n#ai-services .pp-ai-ui__rail-icons span.is-active {\r\n  color: var(--pp-mint);\r\n\r\n  border-color:\r\n    rgba(132, 230, 211, 0.20);\r\n\r\n  background:\r\n    rgba(132, 230, 211, 0.08);\r\n}\r\n\r\n\r\n#ai-services .pp-ai-ui__rail-settings {\r\n  margin-top: auto;\r\n}\r\n\r\n\r\n#ai-services .pp-ai-ui__rail-icons svg,\r\n#ai-services .pp-ai-ui__rail-settings svg {\r\n  width: 15px;\r\n  height: 15px;\r\n\r\n  fill: none;\r\n\r\n  stroke: currentColor;\r\n\r\n  stroke-width: 1.6;\r\n\r\n  stroke-linecap: round;\r\n\r\n  stroke-linejoin: round;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   BODY\r\n========================================================= *\/\r\n\r\n#ai-services .pp-ai-ui__body {\r\n  display: grid;\r\n\r\n  grid-template-rows:\r\n    minmax(0, 1fr)\r\n    76px;\r\n\r\n  gap: 10px;\r\n\r\n  min-width: 0;\r\n\r\n  padding: 12px;\r\n}\r\n\r\n\r\n#ai-services .pp-ai-ui__workspace {\r\n  display: grid;\r\n\r\n  grid-template-columns:\r\n    minmax(210px, 0.84fr)\r\n    minmax(300px, 1.16fr);\r\n\r\n  gap: 10px;\r\n\r\n  min-height: 0;\r\n}\r\n\r\n\r\n#ai-services .pp-ai-panel,\r\n#ai-services .pp-ai-metric {\r\n  border:\r\n    1px\r\n    solid\r\n    rgba(126, 121, 215, 0.16);\r\n\r\n  background:\r\n    rgba(13, 22, 40, 0.88);\r\n\r\n  box-shadow:\r\n    inset\r\n    0\r\n    1px\r\n    0\r\n    rgba(255, 255, 255, 0.018);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   PANELS\r\n========================================================= *\/\r\n\r\n#ai-services .pp-ai-panel {\r\n  position: relative;\r\n\r\n  min-width: 0;\r\n\r\n  overflow: hidden;\r\n\r\n  border-radius: 11px;\r\n}\r\n\r\n\r\n#ai-services .pp-ai-panel__head {\r\n  display: flex;\r\n\r\n  align-items: flex-start;\r\n\r\n  justify-content: space-between;\r\n\r\n  gap: 10px;\r\n\r\n  padding:\r\n    14px\r\n    15px\r\n    10px;\r\n}\r\n\r\n\r\n#ai-services .pp-ai-panel__head strong {\r\n  display: block;\r\n\r\n  color: var(--pp-white);\r\n\r\n  font-size: 14px;\r\n\r\n  font-weight: 750;\r\n\r\n  line-height: 1.2;\r\n}\r\n\r\n\r\n#ai-services .pp-ai-panel__head small {\r\n  display: block;\r\n\r\n  margin-top: 4px;\r\n\r\n  color: #748198;\r\n\r\n  font-size: 8.5px;\r\n\r\n  line-height: 1.3;\r\n}\r\n\r\n\r\n#ai-services .pp-ai-online,\r\n#ai-services .pp-ai-workflow-state {\r\n  display: inline-flex;\r\n\r\n  align-items: center;\r\n\r\n  gap: 6px;\r\n\r\n  color: var(--pp-success);\r\n\r\n  font-size: 8.5px;\r\n\r\n  font-weight: 700;\r\n\r\n  white-space: nowrap;\r\n}\r\n\r\n\r\n#ai-services .pp-ai-online i,\r\n#ai-services .pp-ai-workflow-state > i {\r\n  display: block;\r\n\r\n  width: 6px;\r\n  height: 6px;\r\n\r\n  border-radius: 50%;\r\n\r\n  background: currentColor;\r\n\r\n  box-shadow:\r\n    0 0 9px\r\n    currentColor;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CHAT\r\n========================================================= *\/\r\n\r\n#ai-services .pp-ai-messages {\r\n  position: relative;\r\n\r\n  height:\r\n    calc(\r\n      100% - 103px\r\n    );\r\n\r\n  min-height: 128px;\r\n\r\n  padding:\r\n    4px\r\n    14px;\r\n}\r\n\r\n\r\n#ai-services .pp-ai-message {\r\n  width:\r\n    min(\r\n      86%,\r\n      225px\r\n    );\r\n\r\n  padding:\r\n    9px\r\n    11px;\r\n\r\n  border:\r\n    1px\r\n    solid\r\n    rgba(126, 121, 215, 0.14);\r\n\r\n  border-radius: 10px;\r\n\r\n  opacity: 0;\r\n\r\n  transform:\r\n    translateY(9px)\r\n    scale(0.98);\r\n\r\n  transition:\r\n    opacity\r\n    420ms\r\n    ease,\r\n\r\n    transform\r\n    520ms\r\n    cubic-bezier(.22, 1, .36, 1);\r\n}\r\n\r\n\r\n#ai-services .pp-ai-message.is-show {\r\n  opacity: 1;\r\n\r\n  transform:\r\n    translateY(0)\r\n    scale(1);\r\n}\r\n\r\n\r\n#ai-services .pp-ai-message small {\r\n  color: #808CA2;\r\n\r\n  font-size: 7.5px;\r\n}\r\n\r\n\r\n#ai-services .pp-ai-message p {\r\n  margin:\r\n    3px\r\n    0\r\n    0;\r\n\r\n  color: #F3F6FA;\r\n\r\n  font-size: 10px;\r\n\r\n  line-height: 1.35;\r\n}\r\n\r\n\r\n#ai-services .pp-ai-message--customer {\r\n  margin-left: auto;\r\n\r\n  background:\r\n    rgba(37, 47, 76, 0.70);\r\n}\r\n\r\n\r\n#ai-services .pp-ai-message--ai {\r\n  margin-top: 9px;\r\n\r\n  border-color:\r\n    rgba(126, 121, 215, 0.24);\r\n\r\n  background:\r\n    linear-gradient(\r\n      135deg,\r\n      rgba(54, 89, 111, 0.58),\r\n      rgba(76, 67, 134, 0.62)\r\n    );\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TYPING\r\n========================================================= *\/\r\n\r\n#ai-services .pp-ai-typing {\r\n  display: flex;\r\n\r\n  align-items: center;\r\n\r\n  gap: 3px;\r\n\r\n  width: 37px;\r\n  height: 22px;\r\n\r\n  margin-top: 9px;\r\n\r\n  padding:\r\n    0\r\n    9px;\r\n\r\n  border:\r\n    1px\r\n    solid\r\n    rgba(132, 230, 211, 0.16);\r\n\r\n  border-radius: 9px;\r\n\r\n  background:\r\n    rgba(132, 230, 211, 0.07);\r\n\r\n  opacity: 0;\r\n\r\n  transform:\r\n    translateY(7px);\r\n\r\n  transition:\r\n    opacity\r\n    250ms\r\n    ease,\r\n\r\n    transform\r\n    300ms\r\n    ease;\r\n}\r\n\r\n\r\n#ai-services .pp-ai-typing.is-show {\r\n  opacity: 1;\r\n\r\n  transform:\r\n    translateY(0);\r\n}\r\n\r\n\r\n#ai-services .pp-ai-typing span {\r\n  width: 4px;\r\n  height: 4px;\r\n\r\n  border-radius: 50%;\r\n\r\n  background: var(--pp-mint);\r\n\r\n  animation:\r\n    ppTyping\r\n    900ms\r\n    ease-in-out\r\n    infinite;\r\n}\r\n\r\n\r\n#ai-services .pp-ai-typing span:nth-child(2) {\r\n  animation-delay: 150ms;\r\n}\r\n\r\n#ai-services .pp-ai-typing span:nth-child(3) {\r\n  animation-delay: 300ms;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   COMPOSER\r\n========================================================= *\/\r\n\r\n#ai-services .pp-ai-composer {\r\n  position: absolute;\r\n\r\n  right: 14px;\r\n  bottom: 12px;\r\n  left: 14px;\r\n\r\n  display: grid;\r\n\r\n  grid-template-columns:\r\n    minmax(0, 1fr)\r\n    27px;\r\n\r\n  align-items: center;\r\n\r\n  gap: 7px;\r\n\r\n  height: 35px;\r\n\r\n  padding:\r\n    0\r\n    6px\r\n    0\r\n    11px;\r\n\r\n  border:\r\n    1px\r\n    solid\r\n    rgba(126, 121, 215, 0.15);\r\n\r\n  border-radius: 9px;\r\n\r\n  color: #69768D;\r\n\r\n  background:\r\n    rgba(6, 12, 23, 0.72);\r\n\r\n  font-size: 8px;\r\n}\r\n\r\n\r\n#ai-services .pp-ai-composer b {\r\n  display: grid;\r\n\r\n  place-items: center;\r\n\r\n  width: 25px;\r\n  height: 25px;\r\n\r\n  border-radius: 7px;\r\n\r\n  color: #071019;\r\n\r\n  background: var(--pp-mint);\r\n\r\n  font-size: 9px;\r\n}\r\n\r\n\r\n#ai-services .pp-ai-composer svg {\r\n  width: 12px;\r\n  height: 12px;\r\n\r\n  fill: none;\r\n\r\n  stroke: currentColor;\r\n\r\n  stroke-width: 1.8;\r\n\r\n  stroke-linecap: round;\r\n\r\n  stroke-linejoin: round;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   WORKFLOW\r\n========================================================= *\/\r\n\r\n#ai-services .pp-ai-workflow {\r\n  background:\r\n    rgba(10, 17, 32, 0.92);\r\n}\r\n\r\n\r\n#ai-services .pp-ai-flow {\r\n  display: grid;\r\n\r\n  grid-template-columns:\r\n    1fr\r\n    0.45fr\r\n    1fr\r\n    0.45fr\r\n    1fr\r\n    0.45fr\r\n    1fr;\r\n\r\n  align-items: center;\r\n\r\n  gap: 3px;\r\n\r\n  min-height: 127px;\r\n\r\n  padding:\r\n    12px\r\n    14px\r\n    36px;\r\n}\r\n\r\n\r\n#ai-services .pp-ai-node {\r\n  position: relative;\r\n\r\n  z-index: 2;\r\n\r\n  display: grid;\r\n\r\n  justify-items: center;\r\n\r\n  gap: 7px;\r\n\r\n  min-width: 0;\r\n\r\n  color: #747F96;\r\n\r\n  transition:\r\n    color\r\n    330ms\r\n    ease,\r\n\r\n    transform\r\n    430ms\r\n    cubic-bezier(.22, 1, .36, 1);\r\n}\r\n\r\n\r\n#ai-services .pp-ai-node > span {\r\n  position: relative;\r\n\r\n  display: grid;\r\n\r\n  place-items: center;\r\n\r\n  width: 42px;\r\n  height: 42px;\r\n\r\n  border:\r\n    1px\r\n    solid\r\n    rgba(126, 121, 215, 0.20);\r\n\r\n  border-radius: 11px;\r\n\r\n  background:\r\n    rgba(22, 29, 52, 0.88);\r\n\r\n  transition:\r\n    border-color\r\n    330ms\r\n    ease,\r\n\r\n    background\r\n    330ms\r\n    ease,\r\n\r\n    box-shadow\r\n    330ms\r\n    ease;\r\n}\r\n\r\n\r\n#ai-services .pp-ai-node svg {\r\n  width: 18px;\r\n  height: 18px;\r\n\r\n  fill: none;\r\n\r\n  stroke: currentColor;\r\n\r\n  stroke-width: 1.6;\r\n\r\n  stroke-linecap: round;\r\n\r\n  stroke-linejoin: round;\r\n}\r\n\r\n\r\n#ai-services .pp-ai-node > strong {\r\n  max-width: 62px;\r\n\r\n  overflow: hidden;\r\n\r\n  color: inherit;\r\n\r\n  font-size: 7.5px;\r\n\r\n  font-weight: 700;\r\n\r\n  line-height: 1.2;\r\n\r\n  text-align: center;\r\n\r\n  text-overflow: ellipsis;\r\n}\r\n\r\n\r\n\/* Check badge *\/\r\n\r\n#ai-services .pp-ai-node b {\r\n  position: absolute;\r\n\r\n  top: -5px;\r\n  right: -5px;\r\n\r\n  display: grid;\r\n\r\n  place-items: center;\r\n\r\n  width: 15px;\r\n  height: 15px;\r\n\r\n  border-radius: 50%;\r\n\r\n  color: #06150F;\r\n\r\n  background: var(--pp-success);\r\n\r\n  box-shadow:\r\n    0 0 11px\r\n    rgba(97, 224, 174, 0.44);\r\n\r\n  opacity: 0;\r\n\r\n  transform:\r\n    scale(0.45);\r\n\r\n  transition:\r\n    opacity\r\n    240ms\r\n    ease,\r\n\r\n    transform\r\n    350ms\r\n    cubic-bezier(.22, 1, .36, 1);\r\n}\r\n\r\n\r\n#ai-services .pp-ai-node b svg {\r\n  width: 8px;\r\n  height: 8px;\r\n\r\n  stroke-width: 2.2;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   ACTIVE NODE COLORS\r\n========================================================= *\/\r\n\r\n#ai-services .pp-ai-node[data-step=\"1\"].is-active {\r\n  color: var(--pp-mint);\r\n}\r\n\r\n#ai-services .pp-ai-node[data-step=\"2\"].is-active {\r\n  color: #74CEDF;\r\n}\r\n\r\n#ai-services .pp-ai-node[data-step=\"3\"].is-active {\r\n  color: var(--pp-indigo-bright);\r\n}\r\n\r\n#ai-services .pp-ai-node[data-step=\"4\"].is-active {\r\n  color: var(--pp-purple-bright);\r\n}\r\n\r\n\r\n#ai-services .pp-ai-node.is-active {\r\n  transform:\r\n    translateY(-2px);\r\n}\r\n\r\n\r\n#ai-services .pp-ai-node.is-active > span {\r\n  border-color: currentColor;\r\n\r\n  background:\r\n    rgba(69, 66, 121, 0.22);\r\n\r\n  box-shadow:\r\n    0 0 19px\r\n    rgba(126, 121, 215, 0.18);\r\n}\r\n\r\n\r\n#ai-services .pp-ai-node.is-complete b {\r\n  opacity: 1;\r\n\r\n  transform:\r\n    scale(1);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CONNECTORS\r\n========================================================= *\/\r\n\r\n#ai-services .pp-ai-connector {\r\n  position: relative;\r\n\r\n  display: block;\r\n\r\n  height: 1px;\r\n\r\n  overflow: hidden;\r\n\r\n  background:\r\n    rgba(126, 121, 215, 0.18);\r\n}\r\n\r\n\r\n#ai-services .pp-ai-connector span {\r\n  position: absolute;\r\n\r\n  top: 0;\r\n  bottom: 0;\r\n  left: 0;\r\n\r\n  width: 0;\r\n\r\n  box-shadow:\r\n    0 0 8px\r\n    currentColor;\r\n\r\n  transition:\r\n    width\r\n    500ms\r\n    cubic-bezier(.22, 1, .36, 1);\r\n}\r\n\r\n\r\n\/* Connector colors *\/\r\n\r\n#ai-services .pp-ai-connector:nth-of-type(1) span {\r\n  color: var(--pp-mint);\r\n\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      var(--pp-mint),\r\n      #70D1DF\r\n    );\r\n}\r\n\r\n#ai-services .pp-ai-connector:nth-of-type(2) span {\r\n  color: var(--pp-indigo);\r\n\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      #70D1DF,\r\n      var(--pp-indigo)\r\n    );\r\n}\r\n\r\n#ai-services .pp-ai-connector:nth-of-type(3) span {\r\n  color: var(--pp-purple);\r\n\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      var(--pp-indigo),\r\n      var(--pp-purple)\r\n    );\r\n}\r\n\r\n\r\n#ai-services .pp-ai-connector.is-active span {\r\n  width: 100%;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   WORKFLOW RESULT\r\n========================================================= *\/\r\n\r\n#ai-services .pp-ai-result {\r\n  position: absolute;\r\n\r\n  right: 0;\r\n  bottom: 14px;\r\n  left: 0;\r\n\r\n  display: flex;\r\n\r\n  align-items: center;\r\n\r\n  justify-content: center;\r\n\r\n  gap: 6px;\r\n\r\n  color: var(--pp-success);\r\n\r\n  font-size: 8px;\r\n\r\n  font-weight: 700;\r\n\r\n  opacity: 0;\r\n\r\n  transform:\r\n    translateY(6px);\r\n\r\n  transition:\r\n    opacity\r\n    360ms\r\n    ease,\r\n\r\n    transform\r\n    420ms\r\n    cubic-bezier(.22, 1, .36, 1);\r\n}\r\n\r\n\r\n#ai-services .pp-ai-result svg {\r\n  width: 11px;\r\n  height: 11px;\r\n\r\n  fill: none;\r\n\r\n  stroke: currentColor;\r\n\r\n  stroke-width: 2;\r\n}\r\n\r\n\r\n#ai-services .pp-ai-result.is-show {\r\n  opacity: 1;\r\n\r\n  transform:\r\n    translateY(0);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   METRICS\r\n========================================================= *\/\r\n\r\n#ai-services .pp-ai-metrics {\r\n  display: grid;\r\n\r\n  grid-template-columns:\r\n    repeat(\r\n      3,\r\n      minmax(0, 1fr)\r\n    );\r\n\r\n  gap: 10px;\r\n\r\n  min-width: 0;\r\n}\r\n\r\n\r\n#ai-services .pp-ai-metric {\r\n  position: relative;\r\n\r\n  display: grid;\r\n\r\n  grid-template-columns:\r\n    31px\r\n    minmax(0, 1fr);\r\n\r\n  align-items: center;\r\n\r\n  gap: 9px;\r\n\r\n  min-width: 0;\r\n\r\n  padding: 10px;\r\n\r\n  border-radius: 10px;\r\n\r\n  opacity: 0.52;\r\n\r\n  transform:\r\n    translateY(5px);\r\n\r\n  transition:\r\n    opacity\r\n    420ms\r\n    ease,\r\n\r\n    transform\r\n    480ms\r\n    cubic-bezier(.22, 1, .36, 1),\r\n\r\n    border-color\r\n    350ms\r\n    ease,\r\n\r\n    box-shadow\r\n    350ms\r\n    ease;\r\n}\r\n\r\n\r\n#ai-services .pp-ai-metric.is-show {\r\n  border-color:\r\n    rgba(126, 121, 215, 0.30);\r\n\r\n  opacity: 1;\r\n\r\n  transform:\r\n    translateY(0);\r\n\r\n  box-shadow:\r\n    0 9px 25px\r\n    rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n\r\n#ai-services .pp-ai-metric__icon {\r\n  display: grid;\r\n\r\n  place-items: center;\r\n\r\n  width: 31px;\r\n  height: 31px;\r\n\r\n  border-radius: 8px;\r\n\r\n  font-size: 11px;\r\n}\r\n\r\n\r\n#ai-services .pp-ai-metric:nth-child(1)\r\n.pp-ai-metric__icon {\r\n  color: var(--pp-mint);\r\n\r\n  border:\r\n    1px solid\r\n    rgba(132, 230, 211, 0.22);\r\n\r\n  background:\r\n    rgba(132, 230, 211, 0.07);\r\n}\r\n\r\n\r\n#ai-services .pp-ai-metric:nth-child(2)\r\n.pp-ai-metric__icon {\r\n  color: var(--pp-indigo-bright);\r\n\r\n  border:\r\n    1px solid\r\n    rgba(126, 121, 215, 0.24);\r\n\r\n  background:\r\n    rgba(126, 121, 215, 0.07);\r\n}\r\n\r\n\r\n#ai-services .pp-ai-metric:nth-child(3)\r\n.pp-ai-metric__icon {\r\n  color: var(--pp-purple-bright);\r\n\r\n  border:\r\n    1px solid\r\n    rgba(175, 131, 232, 0.24);\r\n\r\n  background:\r\n    rgba(175, 131, 232, 0.07);\r\n}\r\n\r\n\r\n#ai-services .pp-ai-metric__icon svg {\r\n  width: 15px;\r\n  height: 15px;\r\n\r\n  fill: none;\r\n\r\n  stroke: currentColor;\r\n\r\n  stroke-width: 1.7;\r\n\r\n  stroke-linecap: round;\r\n\r\n  stroke-linejoin: round;\r\n}\r\n\r\n\r\n#ai-services .pp-ai-metric small,\r\n#ai-services .pp-ai-metric strong {\r\n  display: block;\r\n\r\n  overflow: hidden;\r\n\r\n  white-space: nowrap;\r\n\r\n  text-overflow: ellipsis;\r\n}\r\n\r\n\r\n#ai-services .pp-ai-metric small {\r\n  color: #7C899E;\r\n\r\n  font-size: 7.5px;\r\n}\r\n\r\n\r\n#ai-services .pp-ai-metric strong {\r\n  margin-top: 4px;\r\n\r\n  color: var(--pp-white);\r\n\r\n  font-size: 10px;\r\n\r\n  font-weight: 750;\r\n}\r\n\r\n\r\n#ai-services .pp-ai-metric.is-positive strong {\r\n  color: var(--pp-success);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   BOTTOM PROGRESS\r\n========================================================= *\/\r\n\r\n#ai-services .pp-services__progress {\r\n  width:\r\n    min(\r\n      240px,\r\n      38%\r\n    );\r\n\r\n  height: 2px;\r\n\r\n  overflow: hidden;\r\n\r\n  background:\r\n    rgba(255, 255, 255, 0.11);\r\n}\r\n\r\n\r\n#ai-services .pp-services__progress i {\r\n  display: block;\r\n\r\n  width: 44%;\r\n  height: 100%;\r\n\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      var(--pp-mint),\r\n      var(--pp-indigo),\r\n      var(--pp-purple)\r\n    );\r\n\r\n  box-shadow:\r\n    0 0 11px\r\n    rgba(126, 121, 215, 0.50);\r\n\r\n  animation:\r\n    ppServicesProgress\r\n    4s\r\n    ease-in-out\r\n    infinite;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SERVICE LIST\r\n========================================================= *\/\r\n\r\n#ai-services .pp-services__list {\r\n  display: flex;\r\n\r\n  flex-direction: column;\r\n\r\n  justify-content: center;\r\n\r\n  border-top:\r\n    1px\r\n    solid\r\n    var(--pp-line);\r\n}\r\n\r\n\r\n#ai-services .pp-service {\r\n  --service-color: var(--pp-indigo);\r\n\r\n  position: relative;\r\n\r\n  display: grid;\r\n\r\n  grid-template-columns:\r\n    52px\r\n    minmax(0, 1fr)\r\n    20px;\r\n\r\n  align-items: center;\r\n\r\n  gap: 20px;\r\n\r\n  min-height: 122px;\r\n\r\n  padding:\r\n    24px\r\n    0;\r\n\r\n  border-bottom:\r\n    1px\r\n    solid\r\n    var(--pp-line);\r\n\r\n  transition:\r\n    transform\r\n    280ms\r\n    ease,\r\n\r\n    border-color\r\n    280ms\r\n    ease;\r\n}\r\n\r\n\r\n#ai-services .pp-service--chat {\r\n  --service-color: var(--pp-mint);\r\n}\r\n\r\n#ai-services .pp-service--agent {\r\n  --service-color: #7E9BE0;\r\n}\r\n\r\n#ai-services .pp-service--insight {\r\n  --service-color: var(--pp-indigo);\r\n}\r\n\r\n#ai-services .pp-service--automation {\r\n  --service-color: var(--pp-purple);\r\n}\r\n\r\n\r\n\/* animated hover line *\/\r\n\r\n#ai-services .pp-service::before {\r\n  content: \"\";\r\n\r\n  position: absolute;\r\n\r\n  left: 0;\r\n  bottom: -1px;\r\n\r\n  width: 0;\r\n  height: 1px;\r\n\r\n  background:\r\n    var(--service-color);\r\n\r\n  box-shadow:\r\n    0 0 10px\r\n    var(--service-color);\r\n\r\n  transition:\r\n    width\r\n    420ms\r\n    cubic-bezier(.22, 1, .36, 1);\r\n}\r\n\r\n\r\n#ai-services .pp-service:hover {\r\n  transform:\r\n    translateX(7px);\r\n\r\n  border-color:\r\n    transparent;\r\n}\r\n\r\n\r\n#ai-services .pp-service:hover::before {\r\n  width: 100%;\r\n}\r\n\r\n\r\n#ai-services .pp-service__icon {\r\n  display: grid;\r\n\r\n  place-items: center;\r\n\r\n  width: 49px;\r\n  height: 49px;\r\n\r\n  border:\r\n    1px\r\n    solid\r\n    color-mix(\r\n      in srgb,\r\n      var(--service-color) 28%,\r\n      transparent\r\n    );\r\n\r\n  border-radius: 13px;\r\n\r\n  color:\r\n    var(--service-color);\r\n\r\n  background:\r\n    color-mix(\r\n      in srgb,\r\n      var(--service-color) 6%,\r\n      transparent\r\n    );\r\n\r\n  transition:\r\n    background\r\n    280ms\r\n    ease,\r\n\r\n    box-shadow\r\n    280ms\r\n    ease,\r\n\r\n    transform\r\n    280ms\r\n    ease;\r\n}\r\n\r\n\r\n#ai-services .pp-service:hover\r\n.pp-service__icon {\r\n  transform:\r\n    translateY(-2px);\r\n\r\n  background:\r\n    color-mix(\r\n      in srgb,\r\n      var(--service-color) 11%,\r\n      transparent\r\n    );\r\n\r\n  box-shadow:\r\n    0 0 26px\r\n    color-mix(\r\n      in srgb,\r\n      var(--service-color) 13%,\r\n      transparent\r\n    );\r\n}\r\n\r\n\r\n#ai-services .pp-service__icon svg {\r\n  width: 27px;\r\n  height: 27px;\r\n\r\n  fill: none;\r\n\r\n  stroke: currentColor;\r\n\r\n  stroke-width: 1.45;\r\n\r\n  stroke-linecap: round;\r\n\r\n  stroke-linejoin: round;\r\n}\r\n\r\n\r\n#ai-services .pp-service__copy h3 {\r\n  margin:\r\n    0\r\n    0\r\n    8px;\r\n\r\n  color: var(--pp-white);\r\n\r\n  font-size:\r\n    clamp(\r\n      19px,\r\n      1.4vw,\r\n      23px\r\n    );\r\n\r\n  font-weight: 720;\r\n\r\n  line-height: 1.25;\r\n\r\n  letter-spacing: -0.025em;\r\n}\r\n\r\n\r\n#ai-services .pp-service__copy p {\r\n  max-width: 400px;\r\n\r\n  margin: 0;\r\n\r\n  color: var(--pp-muted);\r\n\r\n  font-size: 13px;\r\n\r\n  line-height: 1.55;\r\n}\r\n\r\n\r\n#ai-services .pp-service__arrow {\r\n  color:\r\n    var(--service-color);\r\n\r\n  font-size: 17px;\r\n\r\n  opacity: 0.66;\r\n\r\n  transition:\r\n    opacity\r\n    280ms\r\n    ease,\r\n\r\n    transform\r\n    280ms\r\n    ease;\r\n}\r\n\r\n\r\n#ai-services .pp-service:hover\r\n.pp-service__arrow {\r\n  opacity: 1;\r\n\r\n  transform:\r\n    translate(\r\n      2px,\r\n      -2px\r\n    );\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SECTION REVEAL\r\n========================================================= *\/\r\n\r\n#ai-services .pp-services-reveal {\r\n  opacity: 0;\r\n\r\n  transform:\r\n    translateY(24px);\r\n\r\n  transition:\r\n    opacity\r\n    750ms\r\n    ease,\r\n\r\n    transform\r\n    750ms\r\n    cubic-bezier(.22, 1, .36, 1);\r\n}\r\n\r\n\r\n#ai-services .pp-services-reveal.is-visible {\r\n  opacity: 1;\r\n\r\n  transform:\r\n    translateY(0);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   KEYFRAMES\r\n========================================================= *\/\r\n\r\n@keyframes ppServicesPulse {\r\n\r\n  0%,\r\n  100% {\r\n    opacity: 0.66;\r\n\r\n    transform:\r\n      scale(0.92);\r\n  }\r\n\r\n  50% {\r\n    opacity: 1;\r\n\r\n    transform:\r\n      scale(1.08);\r\n  }\r\n\r\n}\r\n\r\n\r\n@keyframes ppServicesProgress {\r\n\r\n  0% {\r\n    transform:\r\n      translateX(-120%);\r\n  }\r\n\r\n  58%,\r\n  100% {\r\n    transform:\r\n      translateX(250%);\r\n  }\r\n\r\n}\r\n\r\n\r\n@keyframes ppTyping {\r\n\r\n  0%,\r\n  65%,\r\n  100% {\r\n    opacity: 0.38;\r\n\r\n    transform:\r\n      translateY(0);\r\n  }\r\n\r\n  32% {\r\n    opacity: 1;\r\n\r\n    transform:\r\n      translateY(-2px);\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TABLET\r\n========================================================= *\/\r\n\r\n@media (max-width: 1100px) {\r\n\r\n  #ai-services .pp-services__container {\r\n    width:\r\n      min(\r\n        100% - 64px,\r\n        1360px\r\n      );\r\n\r\n    padding:\r\n      92px\r\n      0;\r\n  }\r\n\r\n\r\n  #ai-services .pp-services__headline-row,\r\n  #ai-services .pp-services__showcase {\r\n    gap: 48px;\r\n  }\r\n\r\n\r\n  #ai-services .pp-services__showcase {\r\n    grid-template-columns:\r\n      minmax(0, 1.18fr)\r\n      minmax(340px, 0.82fr);\r\n  }\r\n\r\n\r\n  #ai-services .pp-ai-ui {\r\n    grid-template-columns:\r\n      42px\r\n      minmax(0, 1fr);\r\n\r\n    right: 14px;\r\n    left: 14px;\r\n  }\r\n\r\n\r\n  #ai-services .pp-ai-ui__body {\r\n    padding: 10px;\r\n  }\r\n\r\n\r\n  #ai-services .pp-ai-ui__workspace {\r\n    grid-template-columns:\r\n      minmax(180px, 0.8fr)\r\n      minmax(250px, 1.2fr);\r\n  }\r\n\r\n\r\n  #ai-services .pp-ai-flow {\r\n    padding-right: 9px;\r\n    padding-left: 9px;\r\n  }\r\n\r\n\r\n  #ai-services .pp-ai-node > span {\r\n    width: 37px;\r\n    height: 37px;\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SMALL TABLET\r\n========================================================= *\/\r\n\r\n@media (max-width: 850px) {\r\n\r\n  #ai-services .pp-services__headline-row,\r\n  #ai-services .pp-services__showcase {\r\n    grid-template-columns: 1fr;\r\n  }\r\n\r\n\r\n  #ai-services .pp-services__headline-row {\r\n    gap: 26px;\r\n  }\r\n\r\n\r\n  #ai-services .pp-services__showcase {\r\n    gap: 54px;\r\n  }\r\n\r\n\r\n  #ai-services .pp-services__intro {\r\n    margin-bottom: 54px;\r\n  }\r\n\r\n\r\n  #ai-services .pp-services__lead {\r\n    max-width: 620px;\r\n  }\r\n\r\n\r\n  #ai-services .pp-services__media {\r\n    min-height: 490px;\r\n  }\r\n\r\n\r\n  #ai-services .pp-ai-ui__workspace {\r\n    grid-template-columns:\r\n      minmax(230px, 0.84fr)\r\n      minmax(320px, 1.16fr);\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MOBILE\r\n========================================================= *\/\r\n\r\n@media (max-width: 600px) {\r\n\r\n  #ai-services {\r\n    left: auto;\r\n\r\n    width: 100%;\r\n\r\n    transform: none;\r\n  }\r\n\r\n\r\n  #ai-services .pp-services__container {\r\n    width:\r\n      calc(\r\n        100% - 40px\r\n      );\r\n\r\n    padding:\r\n      76px\r\n      0\r\n      74px;\r\n  }\r\n\r\n\r\n  #ai-services .pp-services__eyebrow {\r\n    margin-bottom: 21px;\r\n\r\n    font-size: 9px;\r\n\r\n    letter-spacing: 0.22em;\r\n  }\r\n\r\n\r\n  #ai-services .pp-services__title {\r\n    font-size:\r\n      clamp(\r\n        40px,\r\n        11vw,\r\n        53px\r\n      );\r\n\r\n    line-height: 1.03;\r\n  }\r\n\r\n\r\n  #ai-services .pp-services__title br {\r\n    display: none;\r\n  }\r\n\r\n\r\n  #ai-services .pp-services__lead {\r\n    font-size: 15.5px;\r\n  }\r\n\r\n\r\n  \/* dashboard *\/\r\n\r\n  #ai-services .pp-services__media {\r\n    min-height: 540px;\r\n\r\n    border-radius: 14px;\r\n  }\r\n\r\n\r\n  #ai-services .pp-services__media-top,\r\n  #ai-services .pp-services__media-bottom {\r\n    padding: 15px;\r\n  }\r\n\r\n\r\n  #ai-services .pp-services__status {\r\n    font-size: 0;\r\n  }\r\n\r\n\r\n  #ai-services .pp-services__status-dot {\r\n    width: 8px;\r\n    height: 8px;\r\n  }\r\n\r\n\r\n  #ai-services .pp-services__progress {\r\n    width: 35%;\r\n  }\r\n\r\n\r\n  #ai-services .pp-ai-ui {\r\n    inset:\r\n      53px\r\n      9px\r\n      48px;\r\n\r\n    grid-template-columns: 1fr;\r\n  }\r\n\r\n\r\n  #ai-services .pp-ai-ui__rail {\r\n    display: none;\r\n  }\r\n\r\n\r\n  #ai-services .pp-ai-ui__body {\r\n    grid-template-rows:\r\n      minmax(0, 1fr)\r\n      68px;\r\n\r\n    gap: 8px;\r\n\r\n    padding: 8px;\r\n  }\r\n\r\n\r\n  #ai-services .pp-ai-ui__workspace {\r\n    grid-template-columns: 1fr;\r\n\r\n    grid-template-rows:\r\n      150px\r\n      minmax(0, 1fr);\r\n\r\n    gap: 8px;\r\n  }\r\n\r\n\r\n  #ai-services .pp-ai-panel__head {\r\n    padding:\r\n      10px\r\n      11px\r\n      7px;\r\n  }\r\n\r\n\r\n  #ai-services .pp-ai-panel__head strong {\r\n    font-size: 12px;\r\n  }\r\n\r\n\r\n  #ai-services .pp-ai-panel__head small {\r\n    display: none;\r\n  }\r\n\r\n\r\n  \/* mobile messages *\/\r\n\r\n  #ai-services .pp-ai-messages {\r\n    display: grid;\r\n\r\n    grid-template-columns:\r\n      1fr\r\n      35px\r\n      1fr;\r\n\r\n    align-items: center;\r\n\r\n    gap: 6px;\r\n\r\n    height: 61px;\r\n\r\n    min-height: 0;\r\n\r\n    padding:\r\n      3px\r\n      9px;\r\n  }\r\n\r\n\r\n  #ai-services .pp-ai-message {\r\n    width: 100%;\r\n\r\n    padding:\r\n      7px\r\n      8px;\r\n  }\r\n\r\n\r\n  #ai-services .pp-ai-message--customer,\r\n  #ai-services .pp-ai-message--ai,\r\n  #ai-services .pp-ai-typing {\r\n    margin: 0;\r\n  }\r\n\r\n\r\n  #ai-services .pp-ai-message p {\r\n    font-size: 8px;\r\n  }\r\n\r\n\r\n  #ai-services .pp-ai-composer {\r\n    right: 9px;\r\n    bottom: 8px;\r\n    left: 9px;\r\n\r\n    height: 29px;\r\n  }\r\n\r\n\r\n  \/* workflow *\/\r\n\r\n  #ai-services .pp-ai-flow {\r\n    min-height: 98px;\r\n\r\n    padding:\r\n      5px\r\n      7px\r\n      28px;\r\n  }\r\n\r\n\r\n  #ai-services .pp-ai-node {\r\n    gap: 5px;\r\n  }\r\n\r\n\r\n  #ai-services .pp-ai-node > span {\r\n    width: 32px;\r\n    height: 32px;\r\n  }\r\n\r\n\r\n  #ai-services .pp-ai-node svg {\r\n    width: 14px;\r\n    height: 14px;\r\n  }\r\n\r\n\r\n  #ai-services .pp-ai-node > strong {\r\n    font-size: 6.2px;\r\n  }\r\n\r\n\r\n  #ai-services .pp-ai-result {\r\n    bottom: 8px;\r\n  }\r\n\r\n\r\n  \/* metrics *\/\r\n\r\n  #ai-services .pp-ai-metrics {\r\n    gap: 6px;\r\n  }\r\n\r\n\r\n  #ai-services .pp-ai-metric {\r\n    grid-template-columns:\r\n      24px\r\n      minmax(0, 1fr);\r\n\r\n    gap: 5px;\r\n\r\n    padding: 7px;\r\n  }\r\n\r\n\r\n  #ai-services .pp-ai-metric__icon {\r\n    width: 24px;\r\n    height: 24px;\r\n  }\r\n\r\n\r\n  #ai-services .pp-ai-metric small {\r\n    font-size: 6px;\r\n  }\r\n\r\n\r\n  #ai-services .pp-ai-metric strong {\r\n    font-size: 8px;\r\n  }\r\n\r\n\r\n  \/* services *\/\r\n\r\n  #ai-services .pp-service {\r\n    grid-template-columns:\r\n      44px\r\n      minmax(0, 1fr);\r\n\r\n    gap: 15px;\r\n\r\n    min-height: 116px;\r\n\r\n    padding:\r\n      22px\r\n      0;\r\n  }\r\n\r\n\r\n  #ai-services .pp-service__icon {\r\n    width: 44px;\r\n    height: 44px;\r\n  }\r\n\r\n\r\n  #ai-services .pp-service__copy h3 {\r\n    font-size: 17px;\r\n  }\r\n\r\n\r\n  #ai-services .pp-service__copy p {\r\n    font-size: 12.5px;\r\n  }\r\n\r\n\r\n  #ai-services .pp-service__arrow {\r\n    display: none;\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   REDUCED MOTION\r\n========================================================= *\/\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n\r\n  #ai-services *,\r\n  #ai-services *::before,\r\n  #ai-services *::after {\r\n    animation-duration:\r\n      0.01ms !important;\r\n\r\n    animation-iteration-count:\r\n      1 !important;\r\n\r\n    transition-duration:\r\n      0.01ms !important;\r\n  }\r\n\r\n\r\n  #ai-services .pp-services-reveal,\r\n  #ai-services .pp-ai-message,\r\n  #ai-services .pp-ai-result,\r\n  #ai-services .pp-ai-metric {\r\n    opacity: 1;\r\n\r\n    transform: none;\r\n  }\r\n\r\n\r\n  #ai-services .pp-ai-node b {\r\n    opacity: 1;\r\n\r\n    transform:\r\n      scale(1);\r\n  }\r\n\r\n\r\n  #ai-services .pp-ai-connector span {\r\n    width: 100%;\r\n  }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n<!-- =========================================================\r\n     HTML\r\n========================================================= -->\r\n\r\n<section\r\n  id=\"ai-services\"\r\n  aria-labelledby=\"ai-services-title\"\r\n>\r\n\r\n  <div class=\"pp-services__container\">\r\n\r\n\r\n    <!-- =====================================================\r\n         HEADER\r\n    ====================================================== -->\r\n\r\n    <header\r\n      class=\"\r\n        pp-services__intro\r\n        pp-services-reveal\r\n      \"\r\n    >\r\n\r\n      <p class=\"pp-services__eyebrow\">\r\n        AI Implementation Services\r\n      <\/p>\r\n\r\n\r\n      <div class=\"pp-services__headline-row\">\r\n\r\n        <h2\r\n          id=\"ai-services-title\"\r\n          class=\"pp-services__title\"\r\n        >\r\n          AI built around the way\r\n          <br \/>\r\n\r\n          <span>\r\n            your business works.\r\n          <\/span>\r\n        <\/h2>\r\n\r\n\r\n        <p class=\"pp-services__lead\">\r\n          From intelligent conversations to automated\r\n          operations, Pixel Pine turns AI into practical\r\n          solutions for your business.\r\n        <\/p>\r\n\r\n      <\/div>\r\n\r\n    <\/header>\r\n\r\n\r\n    <!-- =====================================================\r\n         SHOWCASE\r\n    ====================================================== -->\r\n\r\n    <div class=\"pp-services__showcase\">\r\n\r\n\r\n      <!-- =================================================\r\n           ANIMATED DASHBOARD\r\n      ================================================== -->\r\n\r\n      <div\r\n        class=\"\r\n          pp-services__media\r\n          pp-services-reveal\r\n        \"\r\n      >\r\n\r\n        <!-- top labels -->\r\n\r\n        <div class=\"pp-services__media-top\">\r\n\r\n          <div class=\"pp-services__media-label\">\r\n            <span\r\n              class=\"pp-services__live-dot\"\r\n              aria-hidden=\"true\"\r\n            ><\/span>\r\n\r\n            Live AI Workflow\r\n          <\/div>\r\n\r\n\r\n          <span class=\"pp-services__status\">\r\n            <i\r\n              class=\"pp-services__status-dot\"\r\n              aria-hidden=\"true\"\r\n            ><\/i>\r\n\r\n            System Active\r\n          <\/span>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- =================================================\r\n             DASHBOARD UI\r\n        ================================================== -->\r\n\r\n        <div\r\n          class=\"pp-ai-ui\"\r\n          data-pp-ai-demo\r\n          aria-label=\"Animated Pixel Pine AI workflow demonstration\"\r\n        >\r\n\r\n\r\n          <!-- ===============================================\r\n               SIDEBAR\r\n          ================================================ -->\r\n\r\n          <aside\r\n            class=\"pp-ai-ui__rail\"\r\n            aria-hidden=\"true\"\r\n          >\r\n\r\n            <div class=\"pp-ai-ui__brand\">\r\n\r\n              <!-- Pixel Pine triangle mark -->\r\n\r\n              <svg\r\n                viewBox=\"0 0 56 38\"\r\n              >\r\n                <defs>\r\n                  <linearGradient\r\n                    id=\"ppMarkMint\"\r\n                    x1=\"0\"\r\n                    x2=\"1\"\r\n                  >\r\n                    <stop\r\n                      offset=\"0\"\r\n                      stop-color=\"#84E6D3\"\r\n                    \/>\r\n                    <stop\r\n                      offset=\"1\"\r\n                      stop-color=\"#74DCD0\"\r\n                    \/>\r\n                  <\/linearGradient>\r\n\r\n                  <linearGradient\r\n                    id=\"ppMarkPurple\"\r\n                    x1=\"0\"\r\n                    x2=\"1\"\r\n                  >\r\n                    <stop\r\n                      offset=\"0\"\r\n                      stop-color=\"#7E79D7\"\r\n                    \/>\r\n                    <stop\r\n                      offset=\"1\"\r\n                      stop-color=\"#AF83E8\"\r\n                    \/>\r\n                  <\/linearGradient>\r\n                <\/defs>\r\n\r\n                <path\r\n                  d=\"M3 34 17 5l15 29H3Z\"\r\n                  fill=\"url(#ppMarkMint)\"\r\n                \/>\r\n\r\n                <path\r\n                  d=\"M23 34 39 4l14 30H23Z\"\r\n                  fill=\"url(#ppMarkPurple)\"\r\n                  opacity=\".96\"\r\n                \/>\r\n              <\/svg>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"pp-ai-ui__rail-icons\">\r\n\r\n              <span class=\"is-active\">\r\n\r\n                <svg viewBox=\"0 0 24 24\">\r\n                  <path d=\"M4 5h16v11H9l-5 4V5Z\"\/>\r\n                  <path d=\"M8 9h8M8 12h5\"\/>\r\n                <\/svg>\r\n\r\n              <\/span>\r\n\r\n\r\n              <span>\r\n\r\n                <svg viewBox=\"0 0 24 24\">\r\n                  <circle cx=\"12\" cy=\"12\" r=\"3\"\/>\r\n                  <circle cx=\"5\" cy=\"6\" r=\"2\"\/>\r\n                  <circle cx=\"19\" cy=\"6\" r=\"2\"\/>\r\n                  <circle cx=\"5\" cy=\"18\" r=\"2\"\/>\r\n                  <circle cx=\"19\" cy=\"18\" r=\"2\"\/>\r\n                  <path d=\"m7 7.5 3 2.5M17 7.5 14 10M7 16.5l3-2.5M17 16.5 14 14\"\/>\r\n                <\/svg>\r\n\r\n              <\/span>\r\n\r\n\r\n              <span>\r\n\r\n                <svg viewBox=\"0 0 24 24\">\r\n                  <ellipse cx=\"12\" cy=\"6\" rx=\"7\" ry=\"3\"\/>\r\n                  <path d=\"M5 6v6c0 1.7 3.1 3 7 3s7-1.3 7-3V6\"\/>\r\n                  <path d=\"M5 12v6c0 1.7 3.1 3 7 3s7-1.3 7-3v-6\"\/>\r\n                <\/svg>\r\n\r\n              <\/span>\r\n\r\n\r\n              <span>\r\n\r\n                <svg viewBox=\"0 0 24 24\">\r\n                  <path d=\"M6 3h8l4 4v14H6V3Z\"\/>\r\n                  <path d=\"M14 3v5h4M9 12h6M9 16h6\"\/>\r\n                <\/svg>\r\n\r\n              <\/span>\r\n\r\n            <\/div>\r\n\r\n\r\n            <span class=\"pp-ai-ui__rail-settings\">\r\n\r\n              <svg viewBox=\"0 0 24 24\">\r\n                <circle cx=\"12\" cy=\"12\" r=\"3\"\/>\r\n                <path d=\"m19 13.5 2-1.5-2-1.5-.6-1.5.4-2.4-2.4-.4-1.5.6L13.5 3h-3L9 6.8l-1.5-.6-2.4.4.4 2.4-.6 1.5L3 12l1.9 1.5.6 1.5-.4 2.4 2.4.4 1.5-.6 1.5 3.8h3l1.5-3.8 1.5.6 2.4-.4-.4-2.4.5-1.5Z\"\/>\r\n              <\/svg>\r\n\r\n            <\/span>\r\n\r\n          <\/aside>\r\n\r\n\r\n          <!-- ===============================================\r\n               DASHBOARD BODY\r\n          ================================================ -->\r\n\r\n          <div class=\"pp-ai-ui__body\">\r\n\r\n\r\n            <!-- =============================================\r\n                 WORKSPACE\r\n            ============================================== -->\r\n\r\n            <div class=\"pp-ai-ui__workspace\">\r\n\r\n\r\n              <!-- CHAT -->\r\n\r\n              <section class=\"pp-ai-panel pp-ai-chat\">\r\n\r\n                <div class=\"pp-ai-panel__head\">\r\n\r\n                  <div>\r\n                    <strong>AI Assistant<\/strong>\r\n                    <small>Powered by Pixel Pine<\/small>\r\n                  <\/div>\r\n\r\n\r\n                  <span class=\"pp-ai-online\">\r\n                    <i><\/i>\r\n                    Online\r\n                  <\/span>\r\n\r\n                <\/div>\r\n\r\n\r\n                <div class=\"pp-ai-messages\">\r\n\r\n                  <div\r\n                    class=\"\r\n                      pp-ai-message\r\n                      pp-ai-message--customer\r\n                    \"\r\n                    data-demo-customer\r\n                  >\r\n                    <small>Customer<\/small>\r\n\r\n                    <p>\r\n                      Can you check my order?\r\n                    <\/p>\r\n                  <\/div>\r\n\r\n\r\n                  <div\r\n                    class=\"pp-ai-typing\"\r\n                    data-demo-typing\r\n                    aria-label=\"AI is typing\"\r\n                  >\r\n                    <span><\/span>\r\n                    <span><\/span>\r\n                    <span><\/span>\r\n                  <\/div>\r\n\r\n\r\n                  <div\r\n                    class=\"\r\n                      pp-ai-message\r\n                      pp-ai-message--ai\r\n                    \"\r\n                    data-demo-ai\r\n                  >\r\n                    <small>Pixel Pine AI<\/small>\r\n\r\n                    <p>\r\n                      Found it. I've started the workflow.\r\n                    <\/p>\r\n                  <\/div>\r\n\r\n                <\/div>\r\n\r\n\r\n                <div\r\n                  class=\"pp-ai-composer\"\r\n                  aria-hidden=\"true\"\r\n                >\r\n                  <span>\r\n                    Message AI Assistant...\r\n                  <\/span>\r\n\r\n                  <b>\r\n                    <svg viewBox=\"0 0 24 24\">\r\n                      <path d=\"m4 12 16-8-5 16-3-6-8-2Z\"\/>\r\n                      <path d=\"m12 14 8-10\"\/>\r\n                    <\/svg>\r\n                  <\/b>\r\n                <\/div>\r\n\r\n              <\/section>\r\n\r\n\r\n              <!-- =============================================\r\n                   WORKFLOW PANEL\r\n              ============================================== -->\r\n\r\n              <section\r\n                class=\"\r\n                  pp-ai-panel\r\n                  pp-ai-workflow\r\n                \"\r\n              >\r\n\r\n                <div class=\"pp-ai-panel__head\">\r\n\r\n                  <div>\r\n                    <strong>Agent Workflow<\/strong>\r\n                    <small>Conversation to completed action<\/small>\r\n                  <\/div>\r\n\r\n\r\n                  <span\r\n                    class=\"pp-ai-workflow-state\"\r\n                    data-demo-state\r\n                  >\r\n                    <i><\/i>\r\n                    Ready\r\n                  <\/span>\r\n\r\n                <\/div>\r\n\r\n\r\n                <div class=\"pp-ai-flow\">\r\n\r\n\r\n                  <!-- 1 -->\r\n\r\n                  <div\r\n                    class=\"pp-ai-node\"\r\n                    data-demo-node\r\n                    data-step=\"1\"\r\n                  >\r\n\r\n                    <span>\r\n\r\n                      <svg viewBox=\"0 0 24 24\">\r\n                        <path d=\"M4 5h16v11H9l-5 4V5Z\"\/>\r\n                        <path d=\"M8 9h8M8 12h5\"\/>\r\n                      <\/svg>\r\n\r\n                      <b>\r\n                        <svg viewBox=\"0 0 24 24\">\r\n                          <path d=\"m5 12 4 4L19 6\"\/>\r\n                        <\/svg>\r\n                      <\/b>\r\n\r\n                    <\/span>\r\n\r\n                    <strong>\r\n                      Message\r\n                    <\/strong>\r\n\r\n                  <\/div>\r\n\r\n\r\n                  <i\r\n                    class=\"pp-ai-connector\"\r\n                    data-demo-connector\r\n                  >\r\n                    <span><\/span>\r\n                  <\/i>\r\n\r\n\r\n                  <!-- 2 -->\r\n\r\n                  <div\r\n                    class=\"pp-ai-node\"\r\n                    data-demo-node\r\n                    data-step=\"2\"\r\n                  >\r\n\r\n                    <span>\r\n\r\n                      <svg viewBox=\"0 0 24 24\">\r\n                        <path d=\"M8 4c-2 0-3.5 1.6-3.5 3.5 0 .8.3 1.6.8 2.2A4 4 0 0 0 6 17.5V20h4V4H8Z\"\/>\r\n                        <path d=\"M16 4c2 0 3.5 1.6 3.5 3.5 0 .8-.3 1.6-.8 2.2a4 4 0 0 1-.7 7.8V20h-4V4h2Z\"\/>\r\n                      <\/svg>\r\n\r\n                      <b>\r\n                        <svg viewBox=\"0 0 24 24\">\r\n                          <path d=\"m5 12 4 4L19 6\"\/>\r\n                        <\/svg>\r\n                      <\/b>\r\n\r\n                    <\/span>\r\n\r\n                    <strong>\r\n                      Understand\r\n                    <\/strong>\r\n\r\n                  <\/div>\r\n\r\n\r\n                  <i\r\n                    class=\"pp-ai-connector\"\r\n                    data-demo-connector\r\n                  >\r\n                    <span><\/span>\r\n                  <\/i>\r\n\r\n\r\n                  <!-- 3 -->\r\n\r\n                  <div\r\n                    class=\"pp-ai-node\"\r\n                    data-demo-node\r\n                    data-step=\"3\"\r\n                  >\r\n\r\n                    <span>\r\n\r\n                      <svg viewBox=\"0 0 24 24\">\r\n                        <ellipse cx=\"12\" cy=\"6\" rx=\"7\" ry=\"3\"\/>\r\n                        <path d=\"M5 6v6c0 1.7 3.1 3 7 3s7-1.3 7-3V6\"\/>\r\n                        <path d=\"M5 12v6c0 1.7 3.1 3 7 3s7-1.3 7-3v-6\"\/>\r\n                      <\/svg>\r\n\r\n                      <b>\r\n                        <svg viewBox=\"0 0 24 24\">\r\n                          <path d=\"m5 12 4 4L19 6\"\/>\r\n                        <\/svg>\r\n                      <\/b>\r\n\r\n                    <\/span>\r\n\r\n                    <strong>\r\n                      Retrieve\r\n                    <\/strong>\r\n\r\n                  <\/div>\r\n\r\n\r\n                  <i\r\n                    class=\"pp-ai-connector\"\r\n                    data-demo-connector\r\n                  >\r\n                    <span><\/span>\r\n                  <\/i>\r\n\r\n\r\n                  <!-- 4 -->\r\n\r\n                  <div\r\n                    class=\"pp-ai-node\"\r\n                    data-demo-node\r\n                    data-step=\"4\"\r\n                  >\r\n\r\n                    <span>\r\n\r\n                      <svg viewBox=\"0 0 24 24\">\r\n                        <path d=\"M6 3h8l4 4v14H6V3Z\"\/>\r\n                        <path d=\"M14 3v5h4M9 12h6M9 16h6\"\/>\r\n                      <\/svg>\r\n\r\n                      <b>\r\n                        <svg viewBox=\"0 0 24 24\">\r\n                          <path d=\"m5 12 4 4L19 6\"\/>\r\n                        <\/svg>\r\n                      <\/b>\r\n\r\n                    <\/span>\r\n\r\n                    <strong>\r\n                      Respond\r\n                    <\/strong>\r\n\r\n                  <\/div>\r\n\r\n                <\/div>\r\n\r\n\r\n                <div\r\n                  class=\"pp-ai-result\"\r\n                  data-demo-result\r\n                >\r\n\r\n                  <svg viewBox=\"0 0 24 24\">\r\n                    <circle cx=\"12\" cy=\"12\" r=\"9\"\/>\r\n                    <path d=\"m7.5 12 3 3 6-7\"\/>\r\n                  <\/svg>\r\n\r\n                  Workflow complete\r\n\r\n                <\/div>\r\n\r\n              <\/section>\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- =============================================\r\n                 METRICS\r\n            ============================================== -->\r\n\r\n            <div class=\"pp-ai-metrics\">\r\n\r\n\r\n              <!-- Workflow -->\r\n\r\n              <article\r\n                class=\"pp-ai-metric\"\r\n                data-demo-metric=\"workflow\"\r\n              >\r\n\r\n                <span class=\"pp-ai-metric__icon\">\r\n\r\n                  <svg viewBox=\"0 0 24 24\">\r\n                    <path d=\"M3 12h4l2-6 4 12 2-6h6\"\/>\r\n                  <\/svg>\r\n\r\n                <\/span>\r\n\r\n\r\n                <div>\r\n                  <small>Workflow<\/small>\r\n\r\n                  <strong\r\n                    data-demo-workflow-text\r\n                  >\r\n                    Waiting\r\n                  <\/strong>\r\n                <\/div>\r\n\r\n              <\/article>\r\n\r\n\r\n              <!-- Customer insight -->\r\n\r\n              <article\r\n                class=\"pp-ai-metric\"\r\n                data-demo-metric=\"insight\"\r\n              >\r\n\r\n                <span class=\"pp-ai-metric__icon\">\r\n\r\n                  <svg viewBox=\"0 0 24 24\">\r\n                    <circle cx=\"9\" cy=\"8\" r=\"3\"\/>\r\n                    <path d=\"M3 20c.4-5 2.5-7 6-7s5.6 2 6 7\"\/>\r\n                    <path d=\"M17 6h4M17 10h4M17 14h3\"\/>\r\n                  <\/svg>\r\n\r\n                <\/span>\r\n\r\n\r\n                <div>\r\n                  <small>Customer Insight<\/small>\r\n\r\n                  <strong\r\n                    data-demo-insight-text\r\n                  >\r\n                    Analysing\r\n                  <\/strong>\r\n                <\/div>\r\n\r\n              <\/article>\r\n\r\n\r\n              <!-- Document -->\r\n\r\n              <article\r\n                class=\"pp-ai-metric\"\r\n                data-demo-metric=\"document\"\r\n              >\r\n\r\n                <span class=\"pp-ai-metric__icon\">\r\n\r\n                  <svg viewBox=\"0 0 24 24\">\r\n                    <path d=\"M6 3h8l4 4v14H6V3Z\"\/>\r\n                    <path d=\"M14 3v5h4M9 12h6M9 16h6\"\/>\r\n                  <\/svg>\r\n\r\n                <\/span>\r\n\r\n\r\n                <div>\r\n                  <small>Document Processed<\/small>\r\n\r\n                  <strong>\r\n                    <span\r\n                      data-demo-document-count\r\n                    >\r\n                      0\r\n                    <\/span>\r\n\r\n                    files\r\n                  <\/strong>\r\n                <\/div>\r\n\r\n              <\/article>\r\n\r\n            <\/div>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- bottom progress -->\r\n\r\n        <div class=\"pp-services__media-bottom\">\r\n\r\n          <span>\r\n            AI implementation in motion\r\n          <\/span>\r\n\r\n\r\n          <div\r\n            class=\"pp-services__progress\"\r\n            aria-hidden=\"true\"\r\n          >\r\n            <i><\/i>\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n\r\n\r\n      <!-- =================================================\r\n           SERVICE LIST\r\n      ================================================== -->\r\n\r\n      <div\r\n        class=\"pp-services__list\"\r\n        role=\"list\"\r\n      >\r\n\r\n\r\n        <!-- AI CHATBOTS -->\r\n\r\n        <article\r\n          class=\"\r\n            pp-service\r\n            pp-service--chat\r\n            pp-services-reveal\r\n          \"\r\n          role=\"listitem\"\r\n        >\r\n\r\n          <div\r\n            class=\"pp-service__icon\"\r\n            aria-hidden=\"true\"\r\n          >\r\n\r\n            <svg viewBox=\"0 0 32 32\">\r\n              <path d=\"M6 7.5h20v14H14l-6.5 4v-4H6v-14Z\"\/>\r\n              <path d=\"M11 13h10M11 17h6\"\/>\r\n            <\/svg>\r\n\r\n          <\/div>\r\n\r\n\r\n          <div class=\"pp-service__copy\">\r\n\r\n            <h3>\r\n              AI Chatbots\r\n            <\/h3>\r\n\r\n            <p>\r\n              Intelligent conversations that support\r\n              customers and teams around the clock.\r\n            <\/p>\r\n\r\n          <\/div>\r\n\r\n\r\n          <span\r\n            class=\"pp-service__arrow\"\r\n            aria-hidden=\"true\"\r\n          >\r\n            \u2197\r\n          <\/span>\r\n\r\n        <\/article>\r\n\r\n\r\n\r\n        <!-- AGENTIC AI -->\r\n\r\n        <article\r\n          class=\"\r\n            pp-service\r\n            pp-service--agent\r\n            pp-services-reveal\r\n          \"\r\n          role=\"listitem\"\r\n        >\r\n\r\n          <div\r\n            class=\"pp-service__icon\"\r\n            aria-hidden=\"true\"\r\n          >\r\n\r\n            <svg viewBox=\"0 0 32 32\">\r\n              <circle cx=\"16\" cy=\"16\" r=\"4\"\/>\r\n              <circle cx=\"7\" cy=\"9\" r=\"2.5\"\/>\r\n              <circle cx=\"25\" cy=\"9\" r=\"2.5\"\/>\r\n              <circle cx=\"7\" cy=\"24\" r=\"2.5\"\/>\r\n              <circle cx=\"25\" cy=\"24\" r=\"2.5\"\/>\r\n              <path d=\"m9 10.5 4 3M23 10.5l-4 3M9 22.5l4-3M23 22.5l-4-3\"\/>\r\n            <\/svg>\r\n\r\n          <\/div>\r\n\r\n\r\n          <div class=\"pp-service__copy\">\r\n\r\n            <h3>\r\n              Agentic AI Applications\r\n            <\/h3>\r\n\r\n            <p>\r\n              Purpose-built AI agents that plan,\r\n              act and complete multi-step work.\r\n            <\/p>\r\n\r\n          <\/div>\r\n\r\n\r\n          <span\r\n            class=\"pp-service__arrow\"\r\n            aria-hidden=\"true\"\r\n          >\r\n            \u2197\r\n          <\/span>\r\n\r\n        <\/article>\r\n\r\n\r\n\r\n        <!-- CUSTOMER INTELLIGENCE -->\r\n\r\n        <article\r\n          class=\"\r\n            pp-service\r\n            pp-service--insight\r\n            pp-services-reveal\r\n          \"\r\n          role=\"listitem\"\r\n        >\r\n\r\n          <div\r\n            class=\"pp-service__icon\"\r\n            aria-hidden=\"true\"\r\n          >\r\n\r\n            <svg viewBox=\"0 0 32 32\">\r\n              <circle cx=\"12\" cy=\"11\" r=\"4\"\/>\r\n              <path d=\"M4.5 25c.6-5 3.1-7.5 7.5-7.5s7 2.5 7.5 7.5\"\/>\r\n              <path d=\"M21 9h6M21 14h6M22 19h5\"\/>\r\n            <\/svg>\r\n\r\n          <\/div>\r\n\r\n\r\n          <div class=\"pp-service__copy\">\r\n\r\n            <h3>\r\n              Customer Intelligence\r\n            <\/h3>\r\n\r\n            <p>\r\n              Turn conversations and behaviour\r\n              into clear, actionable customer insight.\r\n            <\/p>\r\n\r\n          <\/div>\r\n\r\n\r\n          <span\r\n            class=\"pp-service__arrow\"\r\n            aria-hidden=\"true\"\r\n          >\r\n            \u2197\r\n          <\/span>\r\n\r\n        <\/article>\r\n\r\n\r\n\r\n        <!-- WORKFLOW -->\r\n\r\n        <article\r\n          class=\"\r\n            pp-service\r\n            pp-service--automation\r\n            pp-services-reveal\r\n          \"\r\n          role=\"listitem\"\r\n        >\r\n\r\n          <div\r\n            class=\"pp-service__icon\"\r\n            aria-hidden=\"true\"\r\n          >\r\n\r\n            <svg viewBox=\"0 0 32 32\">\r\n              <path d=\"M9 4.5h10l5 5v18H9v-23Z\"\/>\r\n              <path d=\"M19 4.5v6h5M13 16h7M13 20h7\"\/>\r\n              <path d=\"m4.5 13 2-2 2 2M6.5 11v10\"\/>\r\n            <\/svg>\r\n\r\n          <\/div>\r\n\r\n\r\n          <div class=\"pp-service__copy\">\r\n\r\n            <h3>\r\n              Workflow &amp; Document Automation\r\n            <\/h3>\r\n\r\n            <p>\r\n              Connect data, documents and decisions\r\n              into faster, reliable operations.\r\n            <\/p>\r\n\r\n          <\/div>\r\n\r\n\r\n          <span\r\n            class=\"pp-service__arrow\"\r\n            aria-hidden=\"true\"\r\n          >\r\n            \u2197\r\n          <\/span>\r\n\r\n        <\/article>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<script>\r\n(() => {\r\n\r\n  const section =\r\n    document.getElementById(\r\n      \"ai-services\"\r\n    );\r\n\r\n\r\n  if (\r\n    !section ||\r\n    section.dataset.ppServicesReady ===\r\n      \"true\"\r\n  ) {\r\n    return;\r\n  }\r\n\r\n\r\n  section.dataset.ppServicesReady =\r\n    \"true\";\r\n\r\n\r\n  \/* =====================================================\r\n     DEMO ELEMENTS\r\n  ===================================================== *\/\r\n\r\n  const demo =\r\n    section.querySelector(\r\n      \"[data-pp-ai-demo]\"\r\n    );\r\n\r\n\r\n  const customerMessage =\r\n    demo?.querySelector(\r\n      \"[data-demo-customer]\"\r\n    );\r\n\r\n\r\n  const typing =\r\n    demo?.querySelector(\r\n      \"[data-demo-typing]\"\r\n    );\r\n\r\n\r\n  const aiMessage =\r\n    demo?.querySelector(\r\n      \"[data-demo-ai]\"\r\n    );\r\n\r\n\r\n  const nodes =\r\n    [\r\n      ...(\r\n        demo?.querySelectorAll(\r\n          \"[data-demo-node]\"\r\n        ) ||\r\n        []\r\n      )\r\n    ];\r\n\r\n\r\n  const connectors =\r\n    [\r\n      ...(\r\n        demo?.querySelectorAll(\r\n          \"[data-demo-connector]\"\r\n        ) ||\r\n        []\r\n      )\r\n    ];\r\n\r\n\r\n  const result =\r\n    demo?.querySelector(\r\n      \"[data-demo-result]\"\r\n    );\r\n\r\n\r\n  const workflowState =\r\n    demo?.querySelector(\r\n      \"[data-demo-state]\"\r\n    );\r\n\r\n\r\n  const workflowMetric =\r\n    demo?.querySelector(\r\n      '[data-demo-metric=\"workflow\"]'\r\n    );\r\n\r\n\r\n  const insightMetric =\r\n    demo?.querySelector(\r\n      '[data-demo-metric=\"insight\"]'\r\n    );\r\n\r\n\r\n  const documentMetric =\r\n    demo?.querySelector(\r\n      '[data-demo-metric=\"document\"]'\r\n    );\r\n\r\n\r\n  const workflowText =\r\n    demo?.querySelector(\r\n      \"[data-demo-workflow-text]\"\r\n    );\r\n\r\n\r\n  const insightText =\r\n    demo?.querySelector(\r\n      \"[data-demo-insight-text]\"\r\n    );\r\n\r\n\r\n  const documentCount =\r\n    demo?.querySelector(\r\n      \"[data-demo-document-count]\"\r\n    );\r\n\r\n\r\n  const sectionStatus =\r\n    section.querySelector(\r\n      \".pp-services__status\"\r\n    );\r\n\r\n\r\n  const reducedMotion =\r\n    window.matchMedia(\r\n      \"(prefers-reduced-motion: reduce)\"\r\n    ).matches;\r\n\r\n\r\n  let demoTimers = [];\r\n\r\n  let demoRunning = false;\r\n\r\n\r\n\r\n  \/* =====================================================\r\n     TIMER\r\n  ===================================================== *\/\r\n\r\n  const later = (\r\n    callback,\r\n    delay\r\n  ) => {\r\n\r\n    const timer =\r\n      window.setTimeout(\r\n        callback,\r\n        delay\r\n      );\r\n\r\n\r\n    demoTimers.push(\r\n      timer\r\n    );\r\n\r\n  };\r\n\r\n\r\n  const clearDemoTimers = () => {\r\n\r\n    demoTimers.forEach(\r\n      timer =>\r\n        window.clearTimeout(\r\n          timer\r\n        )\r\n    );\r\n\r\n\r\n    demoTimers = [];\r\n\r\n  };\r\n\r\n\r\n\r\n  \/* =====================================================\r\n     RESET\r\n  ===================================================== *\/\r\n\r\n  const resetDemo = () => {\r\n\r\n    customerMessage?.classList.remove(\r\n      \"is-show\"\r\n    );\r\n\r\n\r\n    typing?.classList.remove(\r\n      \"is-show\"\r\n    );\r\n\r\n\r\n    aiMessage?.classList.remove(\r\n      \"is-show\"\r\n    );\r\n\r\n\r\n    nodes.forEach(\r\n      node =>\r\n        node.classList.remove(\r\n          \"is-active\",\r\n          \"is-complete\"\r\n        )\r\n    );\r\n\r\n\r\n    connectors.forEach(\r\n      connector =>\r\n        connector.classList.remove(\r\n          \"is-active\"\r\n        )\r\n    );\r\n\r\n\r\n    result?.classList.remove(\r\n      \"is-show\"\r\n    );\r\n\r\n\r\n    workflowMetric?.classList.remove(\r\n      \"is-show\"\r\n    );\r\n\r\n\r\n    insightMetric?.classList.remove(\r\n      \"is-show\",\r\n      \"is-positive\"\r\n    );\r\n\r\n\r\n    documentMetric?.classList.remove(\r\n      \"is-show\"\r\n    );\r\n\r\n\r\n    if (workflowText) {\r\n      workflowText.textContent =\r\n        \"Waiting\";\r\n    }\r\n\r\n\r\n    if (insightText) {\r\n      insightText.textContent =\r\n        \"Analysing\";\r\n    }\r\n\r\n\r\n    if (documentCount) {\r\n      documentCount.textContent =\r\n        \"0\";\r\n    }\r\n\r\n\r\n    if (workflowState) {\r\n      workflowState.innerHTML =\r\n        \"<i><\/i> Ready\";\r\n    }\r\n\r\n\r\n    if (sectionStatus) {\r\n      sectionStatus.innerHTML =\r\n        '<i class=\"pp-services__status-dot\"><\/i> System Ready';\r\n    }\r\n\r\n  };\r\n\r\n\r\n\r\n  \/* =====================================================\r\n     COMPLETE STATIC STATE\r\n  ===================================================== *\/\r\n\r\n  const completeDemo = () => {\r\n\r\n    customerMessage?.classList.add(\r\n      \"is-show\"\r\n    );\r\n\r\n\r\n    typing?.classList.remove(\r\n      \"is-show\"\r\n    );\r\n\r\n\r\n    aiMessage?.classList.add(\r\n      \"is-show\"\r\n    );\r\n\r\n\r\n    nodes.forEach(\r\n      node =>\r\n        node.classList.add(\r\n          \"is-active\",\r\n          \"is-complete\"\r\n        )\r\n    );\r\n\r\n\r\n    connectors.forEach(\r\n      connector =>\r\n        connector.classList.add(\r\n          \"is-active\"\r\n        )\r\n    );\r\n\r\n\r\n    result?.classList.add(\r\n      \"is-show\"\r\n    );\r\n\r\n\r\n    workflowMetric?.classList.add(\r\n      \"is-show\"\r\n    );\r\n\r\n\r\n    insightMetric?.classList.add(\r\n      \"is-show\",\r\n      \"is-positive\"\r\n    );\r\n\r\n\r\n    documentMetric?.classList.add(\r\n      \"is-show\"\r\n    );\r\n\r\n\r\n    if (workflowText) {\r\n      workflowText.textContent =\r\n        \"Active\";\r\n    }\r\n\r\n\r\n    if (insightText) {\r\n      insightText.textContent =\r\n        \"Positive\";\r\n    }\r\n\r\n\r\n    if (documentCount) {\r\n      documentCount.textContent =\r\n        \"3\";\r\n    }\r\n\r\n\r\n    if (workflowState) {\r\n      workflowState.innerHTML =\r\n        \"<i><\/i> Complete\";\r\n    }\r\n\r\n\r\n    if (sectionStatus) {\r\n      sectionStatus.innerHTML =\r\n        '<i class=\"pp-services__status-dot\"><\/i> System Active';\r\n    }\r\n\r\n  };\r\n\r\n\r\n\r\n  \/* =====================================================\r\n     ANIMATION SEQUENCE\r\n  ===================================================== *\/\r\n\r\n  const runDemo = () => {\r\n\r\n    if (!demoRunning) {\r\n      return;\r\n    }\r\n\r\n\r\n    clearDemoTimers();\r\n\r\n    resetDemo();\r\n\r\n\r\n    \/* customer request *\/\r\n\r\n    later(\r\n      () => {\r\n        customerMessage?.classList.add(\r\n          \"is-show\"\r\n        );\r\n      },\r\n      650\r\n    );\r\n\r\n\r\n    \/* AI typing *\/\r\n\r\n    later(\r\n      () => {\r\n        typing?.classList.add(\r\n          \"is-show\"\r\n        );\r\n      },\r\n      1750\r\n    );\r\n\r\n\r\n    \/* AI response *\/\r\n\r\n    later(\r\n      () => {\r\n\r\n        typing?.classList.remove(\r\n          \"is-show\"\r\n        );\r\n\r\n\r\n        aiMessage?.classList.add(\r\n          \"is-show\"\r\n        );\r\n\r\n\r\n        if (workflowState) {\r\n          workflowState.innerHTML =\r\n            \"<i><\/i> Processing\";\r\n        }\r\n\r\n\r\n        if (sectionStatus) {\r\n          sectionStatus.innerHTML =\r\n            '<i class=\"pp-services__status-dot\"><\/i> Processing';\r\n        }\r\n\r\n      },\r\n      2850\r\n    );\r\n\r\n\r\n    \/* message *\/\r\n\r\n    later(\r\n      () => {\r\n\r\n        nodes[0]?.classList.add(\r\n          \"is-active\"\r\n        );\r\n\r\n      },\r\n      3700\r\n    );\r\n\r\n\r\n    \/* understand *\/\r\n\r\n    later(\r\n      () => {\r\n\r\n        nodes[0]?.classList.add(\r\n          \"is-complete\"\r\n        );\r\n\r\n\r\n        connectors[0]?.classList.add(\r\n          \"is-active\"\r\n        );\r\n\r\n\r\n        nodes[1]?.classList.add(\r\n          \"is-active\"\r\n        );\r\n\r\n      },\r\n      4350\r\n    );\r\n\r\n\r\n    \/* retrieve *\/\r\n\r\n    later(\r\n      () => {\r\n\r\n        nodes[1]?.classList.add(\r\n          \"is-complete\"\r\n        );\r\n\r\n\r\n        connectors[1]?.classList.add(\r\n          \"is-active\"\r\n        );\r\n\r\n\r\n        nodes[2]?.classList.add(\r\n          \"is-active\"\r\n        );\r\n\r\n      },\r\n      5000\r\n    );\r\n\r\n\r\n    \/* respond *\/\r\n\r\n    later(\r\n      () => {\r\n\r\n        nodes[2]?.classList.add(\r\n          \"is-complete\"\r\n        );\r\n\r\n\r\n        connectors[2]?.classList.add(\r\n          \"is-active\"\r\n        );\r\n\r\n\r\n        nodes[3]?.classList.add(\r\n          \"is-active\"\r\n        );\r\n\r\n      },\r\n      5650\r\n    );\r\n\r\n\r\n    \/* complete *\/\r\n\r\n    later(\r\n      () => {\r\n\r\n        nodes[3]?.classList.add(\r\n          \"is-complete\"\r\n        );\r\n\r\n\r\n        result?.classList.add(\r\n          \"is-show\"\r\n        );\r\n\r\n\r\n        if (workflowState) {\r\n          workflowState.innerHTML =\r\n            \"<i><\/i> Complete\";\r\n        }\r\n\r\n\r\n        if (sectionStatus) {\r\n          sectionStatus.innerHTML =\r\n            '<i class=\"pp-services__status-dot\"><\/i> System Active';\r\n        }\r\n\r\n      },\r\n      6300\r\n    );\r\n\r\n\r\n    \/* workflow metric *\/\r\n\r\n    later(\r\n      () => {\r\n\r\n        workflowMetric?.classList.add(\r\n          \"is-show\"\r\n        );\r\n\r\n\r\n        if (workflowText) {\r\n          workflowText.textContent =\r\n            \"Active\";\r\n        }\r\n\r\n      },\r\n      6900\r\n    );\r\n\r\n\r\n    \/* customer insight *\/\r\n\r\n    later(\r\n      () => {\r\n\r\n        insightMetric?.classList.add(\r\n          \"is-show\",\r\n          \"is-positive\"\r\n        );\r\n\r\n\r\n        if (insightText) {\r\n          insightText.textContent =\r\n            \"Positive\";\r\n        }\r\n\r\n      },\r\n      7450\r\n    );\r\n\r\n\r\n    \/* document *\/\r\n\r\n    later(\r\n      () => {\r\n\r\n        documentMetric?.classList.add(\r\n          \"is-show\"\r\n        );\r\n\r\n\r\n        if (documentCount) {\r\n          documentCount.textContent =\r\n            \"1\";\r\n        }\r\n\r\n      },\r\n      8000\r\n    );\r\n\r\n\r\n    later(\r\n      () => {\r\n        if (documentCount) {\r\n          documentCount.textContent =\r\n            \"2\";\r\n        }\r\n      },\r\n      8270\r\n    );\r\n\r\n\r\n    later(\r\n      () => {\r\n        if (documentCount) {\r\n          documentCount.textContent =\r\n            \"3\";\r\n        }\r\n      },\r\n      8540\r\n    );\r\n\r\n\r\n    \/* loop *\/\r\n\r\n    later(\r\n      runDemo,\r\n      10800\r\n    );\r\n\r\n  };\r\n\r\n\r\n\r\n  \/* =====================================================\r\n     START \/ STOP\r\n  ===================================================== *\/\r\n\r\n  const startDemo = () => {\r\n\r\n    if (\r\n      demoRunning ||\r\n      !demo\r\n    ) {\r\n      return;\r\n    }\r\n\r\n\r\n    demoRunning = true;\r\n\r\n    runDemo();\r\n\r\n  };\r\n\r\n\r\n  const stopDemo = () => {\r\n\r\n    demoRunning = false;\r\n\r\n    clearDemoTimers();\r\n\r\n    resetDemo();\r\n\r\n  };\r\n\r\n\r\n\r\n  \/* =====================================================\r\n     REDUCED MOTION \/ OBSERVER\r\n  ===================================================== *\/\r\n\r\n  if (reducedMotion) {\r\n\r\n    completeDemo();\r\n\r\n  } else if (\r\n    \"IntersectionObserver\"\r\n    in window &&\r\n    demo\r\n  ) {\r\n\r\n    const demoObserver =\r\n      new IntersectionObserver(\r\n        entries => {\r\n\r\n          entries.forEach(\r\n            entry => {\r\n\r\n              if (\r\n                entry.isIntersecting\r\n              ) {\r\n                startDemo();\r\n              } else {\r\n                stopDemo();\r\n              }\r\n\r\n            }\r\n          );\r\n\r\n        },\r\n        {\r\n          threshold: 0.18\r\n        }\r\n      );\r\n\r\n\r\n    demoObserver.observe(\r\n      demo\r\n    );\r\n\r\n  } else {\r\n\r\n    startDemo();\r\n\r\n  }\r\n\r\n\r\n\r\n  \/* =====================================================\r\n     SECTION REVEAL\r\n  ===================================================== *\/\r\n\r\n  const items =\r\n    section.querySelectorAll(\r\n      \".pp-services-reveal\"\r\n    );\r\n\r\n\r\n  items.forEach(\r\n    (\r\n      item,\r\n      index\r\n    ) => {\r\n\r\n      item.style.transitionDelay =\r\n        `${\r\n          Math.min(\r\n            index * 90,\r\n            450\r\n          )\r\n        }ms`;\r\n\r\n    }\r\n  );\r\n\r\n\r\n  if (\r\n    !(\r\n      \"IntersectionObserver\"\r\n      in window\r\n    )\r\n  ) {\r\n\r\n    items.forEach(\r\n      item =>\r\n        item.classList.add(\r\n          \"is-visible\"\r\n        )\r\n    );\r\n\r\n\r\n    return;\r\n\r\n  }\r\n\r\n\r\n  const revealObserver =\r\n    new IntersectionObserver(\r\n      entries => {\r\n\r\n        entries.forEach(\r\n          entry => {\r\n\r\n            if (\r\n              !entry.isIntersecting\r\n            ) {\r\n              return;\r\n            }\r\n\r\n\r\n            entry.target.classList.add(\r\n              \"is-visible\"\r\n            );\r\n\r\n\r\n            revealObserver.unobserve(\r\n              entry.target\r\n            );\r\n\r\n          }\r\n        );\r\n\r\n      },\r\n      {\r\n        threshold: 0.13\r\n      }\r\n    );\r\n\r\n\r\n  items.forEach(\r\n    item =>\r\n      revealObserver.observe(\r\n        item\r\n      )\r\n  );\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5f88e49 elementor-widget elementor-widget-html\" data-id=\"5f88e49\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\r\n  PIXEL PINE \u2014 MANAGED AI OPERATIONS\r\n  Full Elementor HTML Widget\r\n========================================================= -->\r\n\r\n<style>\r\n\/* =========================================================\r\n   ELEMENTOR RESET\r\n========================================================= *\/\r\n\r\n.elementor-widget-html:has(#managed-ai-operations),\r\n.elementor-widget-html:has(#managed-ai-operations) > .elementor-widget-container {\r\n  width: 100%;\r\n  max-width: none !important;\r\n  margin: 0 !important;\r\n  padding: 0 !important;\r\n}\r\n\r\n.e-con:has(#managed-ai-operations) {\r\n  --gap: 0px !important;\r\n  gap: 0 !important;\r\n  row-gap: 0 !important;\r\n}\r\n\r\n#managed-ai-operations,\r\n#managed-ai-operations * {\r\n  box-sizing: border-box;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SECTION FOUNDATION\r\n========================================================= *\/\r\n\r\n#managed-ai-operations {\r\n  --pp-mint: #84E6D3;\r\n  --pp-mint-light: #A4F0E2;\r\n\r\n  --pp-indigo: #7E79D7;\r\n  --pp-indigo-light: #9994E9;\r\n\r\n  --pp-purple: #AF83E8;\r\n  --pp-purple-light: #C49DF0;\r\n\r\n  --pp-green: #61E0AE;\r\n\r\n  --pp-bg: #070C17;\r\n  --pp-panel: #0B1323;\r\n  --pp-panel-soft: #0F192C;\r\n  --pp-panel-deep: #080F1D;\r\n\r\n  --pp-white: #F7FAFC;\r\n  --pp-muted: #AFBACB;\r\n  --pp-dim: #748096;\r\n\r\n  --pp-line: rgba(126, 121, 215, 0.18);\r\n\r\n  position: relative;\r\n\r\n  left: 50%;\r\n\r\n  width: 100vw;\r\n  max-width: none !important;\r\n\r\n  margin: 0 !important;\r\n\r\n  transform: translateX(-50%);\r\n\r\n  overflow: hidden;\r\n  isolation: isolate;\r\n\r\n  \/*\r\n    Solid background.\r\n    No image \/ giant glow.\r\n  *\/\r\n  background: var(--pp-bg);\r\n\r\n  color: var(--pp-white);\r\n\r\n  font-family:\r\n    Manrope,\r\n    Inter,\r\n    \"Segoe UI\",\r\n    Arial,\r\n    sans-serif;\r\n\r\n  scroll-margin-top: 90px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   INNER\r\n========================================================= *\/\r\n\r\n#managed-ai-operations .pp-ops__inner {\r\n  width:\r\n    min(\r\n      1360px,\r\n      calc(100% - 80px)\r\n    );\r\n\r\n  margin: 0 auto;\r\n\r\n  padding:\r\n    110px\r\n    0\r\n    100px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HEADER\r\n========================================================= *\/\r\n\r\n#managed-ai-operations .pp-ops__intro {\r\n  max-width: 1080px;\r\n\r\n  margin:\r\n    0\r\n    auto\r\n    55px;\r\n\r\n  text-align: center;\r\n}\r\n\r\n\r\n#managed-ai-operations .pp-ops__eyebrow {\r\n  display: inline-flex;\r\n\r\n  align-items: center;\r\n  justify-content: center;\r\n\r\n  gap: 14px;\r\n\r\n  margin:\r\n    0\r\n    0\r\n    25px;\r\n\r\n  color: var(--pp-mint);\r\n\r\n  font-size:\r\n    clamp(\r\n      10px,\r\n      0.9vw,\r\n      13px\r\n    );\r\n\r\n  font-weight: 760;\r\n\r\n  line-height: 1.4;\r\n\r\n  letter-spacing: 0.31em;\r\n\r\n  text-transform: uppercase;\r\n}\r\n\r\n\r\n#managed-ai-operations .pp-ops__eyebrow::before,\r\n#managed-ai-operations .pp-ops__eyebrow::after {\r\n  content: \"\";\r\n\r\n  width: 48px;\r\n  height: 1px;\r\n}\r\n\r\n\r\n#managed-ai-operations .pp-ops__eyebrow::before {\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      transparent,\r\n      var(--pp-mint)\r\n    );\r\n}\r\n\r\n\r\n#managed-ai-operations .pp-ops__eyebrow::after {\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      var(--pp-purple),\r\n      transparent\r\n    );\r\n}\r\n\r\n\r\n#managed-ai-operations .pp-ops__title {\r\n  margin: 0;\r\n\r\n  color: var(--pp-white);\r\n\r\n  font-size:\r\n    clamp(\r\n      46px,\r\n      3.9vw,\r\n      62px\r\n    );\r\n\r\n  font-weight: 770;\r\n\r\n  line-height: 1.03;\r\n\r\n  letter-spacing: -0.052em;\r\n\r\n  text-wrap: balance;\r\n}\r\n\r\n\r\n#managed-ai-operations .pp-ops__title span {\r\n  color: transparent;\r\n\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      var(--pp-mint) 0%,\r\n      var(--pp-indigo) 52%,\r\n      var(--pp-purple) 100%\r\n    );\r\n\r\n  -webkit-background-clip: text;\r\n  background-clip: text;\r\n}\r\n\r\n\r\n#managed-ai-operations .pp-ops__description {\r\n  max-width: 860px;\r\n\r\n  margin:\r\n    25px\r\n    auto\r\n    0;\r\n\r\n  color: var(--pp-muted);\r\n\r\n  font-size:\r\n    clamp(\r\n      16px,\r\n      1.28vw,\r\n      19px\r\n    );\r\n\r\n  font-weight: 440;\r\n\r\n  line-height: 1.65;\r\n\r\n  letter-spacing: -0.015em;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CONTROL ROOM\r\n========================================================= *\/\r\n\r\n#managed-ai-operations .pp-console {\r\n  position: relative;\r\n\r\n  display: grid;\r\n\r\n  grid-template-columns:\r\n    175px\r\n    minmax(0, 1fr);\r\n\r\n  min-height: 520px;\r\n\r\n  overflow: hidden;\r\n\r\n  border:\r\n    1px\r\n    solid\r\n    rgba(126, 121, 215, 0.38);\r\n\r\n  border-radius: 18px;\r\n\r\n  background:\r\n    var(--pp-panel-deep);\r\n\r\n  box-shadow:\r\n    0 0 0 1px\r\n    rgba(132, 230, 211, 0.03),\r\n\r\n    0 28px 80px\r\n    rgba(0, 0, 0, 0.30);\r\n}\r\n\r\n\r\n\/* top brand-gradient border *\/\r\n\r\n#managed-ai-operations .pp-console::before {\r\n  content: \"\";\r\n\r\n  position: absolute;\r\n\r\n  z-index: 10;\r\n\r\n  top: 0;\r\n  right: 0;\r\n  left: 0;\r\n\r\n  height: 1px;\r\n\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      var(--pp-mint),\r\n      var(--pp-indigo),\r\n      var(--pp-purple)\r\n    );\r\n\r\n  transform:\r\n    scaleX(0);\r\n\r\n  transform-origin:\r\n    left center;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SIDEBAR\r\n========================================================= *\/\r\n\r\n#managed-ai-operations .pp-console__sidebar {\r\n  padding:\r\n    25px\r\n    14px;\r\n\r\n  border-right:\r\n    1px\r\n    solid\r\n    rgba(126, 121, 215, 0.16);\r\n\r\n  background:\r\n    rgba(6, 12, 23, 0.94);\r\n}\r\n\r\n\r\n#managed-ai-operations .pp-console__brand {\r\n  display: flex;\r\n\r\n  align-items: center;\r\n\r\n  gap: 10px;\r\n\r\n  padding:\r\n    0\r\n    9px\r\n    25px;\r\n\r\n  color: var(--pp-white);\r\n\r\n  font-size: 14px;\r\n\r\n  font-weight: 760;\r\n}\r\n\r\n\r\n\/* Pixel Pine triangles *\/\r\n\r\n#managed-ai-operations .pp-console__logo {\r\n  position: relative;\r\n\r\n  display: block;\r\n\r\n  width: 31px;\r\n  height: 23px;\r\n\r\n  flex: 0 0 auto;\r\n}\r\n\r\n\r\n#managed-ai-operations .pp-console__logo i {\r\n  position: absolute;\r\n\r\n  bottom: 0;\r\n\r\n  width: 18px;\r\n  height: 22px;\r\n\r\n  clip-path:\r\n    polygon(\r\n      50% 0,\r\n      100% 100%,\r\n      0 100%\r\n    );\r\n}\r\n\r\n\r\n#managed-ai-operations .pp-console__logo i:first-child {\r\n  left: 0;\r\n\r\n  background:\r\n    linear-gradient(\r\n      145deg,\r\n      #A1F0E1,\r\n      #84E6D3\r\n    );\r\n}\r\n\r\n\r\n#managed-ai-operations .pp-console__logo i:last-child {\r\n  right: 0;\r\n\r\n  background:\r\n    linear-gradient(\r\n      145deg,\r\n      #7E79D7,\r\n      #AF83E8\r\n    );\r\n\r\n  opacity: 0.96;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   NAV\r\n========================================================= *\/\r\n\r\n#managed-ai-operations .pp-console__nav {\r\n  display: grid;\r\n\r\n  gap: 5px;\r\n}\r\n\r\n\r\n#managed-ai-operations .pp-console__nav span {\r\n  display: flex;\r\n\r\n  align-items: center;\r\n\r\n  gap: 11px;\r\n\r\n  min-height: 42px;\r\n\r\n  padding:\r\n    0\r\n    12px;\r\n\r\n  border-radius: 7px;\r\n\r\n  color: #808CA2;\r\n\r\n  font-size: 11px;\r\n\r\n  line-height: 1.2;\r\n}\r\n\r\n\r\n#managed-ai-operations .pp-console__nav span.is-active {\r\n  color: var(--pp-mint);\r\n\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      rgba(132, 230, 211, 0.14),\r\n      rgba(126, 121, 215, 0.06)\r\n    );\r\n\r\n  box-shadow:\r\n    inset\r\n    2px\r\n    0\r\n    0\r\n    var(--pp-mint);\r\n}\r\n\r\n\r\n#managed-ai-operations .pp-console__nav svg {\r\n  width: 17px;\r\n  height: 17px;\r\n\r\n  fill: none;\r\n\r\n  stroke: currentColor;\r\n\r\n  stroke-width: 1.5;\r\n\r\n  stroke-linecap: round;\r\n  stroke-linejoin: round;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   WORKSPACE\r\n========================================================= *\/\r\n\r\n#managed-ai-operations .pp-console__workspace {\r\n  min-width: 0;\r\n\r\n  padding:\r\n    0\r\n    16px\r\n    16px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TOPBAR\r\n========================================================= *\/\r\n\r\n#managed-ai-operations .pp-console__topbar {\r\n  display: flex;\r\n\r\n  align-items: center;\r\n\r\n  justify-content: space-between;\r\n\r\n  gap: 18px;\r\n\r\n  min-height: 64px;\r\n\r\n  padding:\r\n    0\r\n    7px;\r\n\r\n  border-bottom:\r\n    1px\r\n    solid\r\n    rgba(126, 121, 215, 0.14);\r\n}\r\n\r\n\r\n#managed-ai-operations .pp-console__topbar p {\r\n  margin: 0;\r\n\r\n  color: #E7EDF5;\r\n\r\n  font-size: 11px;\r\n\r\n  font-weight: 720;\r\n\r\n  letter-spacing: 0.25em;\r\n\r\n  text-transform: uppercase;\r\n}\r\n\r\n\r\n#managed-ai-operations .pp-console__status {\r\n  display: flex;\r\n\r\n  align-items: center;\r\n\r\n  gap: 8px;\r\n\r\n  color: var(--pp-green);\r\n\r\n  font-size: 9px;\r\n\r\n  font-weight: 700;\r\n\r\n  letter-spacing: 0.14em;\r\n\r\n  text-transform: uppercase;\r\n}\r\n\r\n\r\n#managed-ai-operations .pp-status-dot {\r\n  display: block;\r\n\r\n  width: 7px;\r\n  height: 7px;\r\n\r\n  flex: 0 0 auto;\r\n\r\n  border-radius: 50%;\r\n\r\n  background:\r\n    var(--pp-green);\r\n\r\n  box-shadow:\r\n    0 0 10px\r\n    rgba(97, 224, 174, 0.88);\r\n\r\n  animation:\r\n    ppOpsPulse\r\n    2.2s\r\n    ease-in-out\r\n    infinite;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   METRICS GRID\r\n========================================================= *\/\r\n\r\n#managed-ai-operations .pp-console__metrics {\r\n  display: grid;\r\n\r\n  grid-template-columns:\r\n    repeat(\r\n      4,\r\n      minmax(0, 1fr)\r\n    );\r\n\r\n  gap: 10px;\r\n\r\n  padding:\r\n    12px\r\n    0\r\n    10px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   METRIC CARD\r\n========================================================= *\/\r\n\r\n#managed-ai-operations .pp-metric,\r\n#managed-ai-operations .pp-feed,\r\n#managed-ai-operations .pp-wave,\r\n#managed-ai-operations .pp-models {\r\n  overflow: hidden;\r\n\r\n  border:\r\n    1px\r\n    solid\r\n    rgba(126, 121, 215, 0.17);\r\n\r\n  border-radius: 9px;\r\n\r\n  background:\r\n    var(--pp-panel);\r\n}\r\n\r\n\r\n#managed-ai-operations .pp-metric {\r\n  --metric-color: var(--pp-mint);\r\n\r\n  position: relative;\r\n\r\n  min-width: 0;\r\n  min-height: 165px;\r\n\r\n  padding:\r\n    16px\r\n    14px\r\n    0;\r\n\r\n  opacity: 0;\r\n\r\n  transform:\r\n    translateY(18px)\r\n    scale(0.98);\r\n}\r\n\r\n\r\n#managed-ai-operations .pp-metric:nth-child(1) {\r\n  --metric-color: #84E6D3;\r\n}\r\n\r\n#managed-ai-operations .pp-metric:nth-child(2) {\r\n  --metric-color: #74CADF;\r\n}\r\n\r\n#managed-ai-operations .pp-metric:nth-child(3) {\r\n  --metric-color: #7E79D7;\r\n}\r\n\r\n#managed-ai-operations .pp-metric:nth-child(4) {\r\n  --metric-color: #AF83E8;\r\n}\r\n\r\n\r\n#managed-ai-operations .pp-metric__head {\r\n  display: flex;\r\n\r\n  align-items: center;\r\n\r\n  gap: 9px;\r\n\r\n  min-width: 0;\r\n\r\n  padding-bottom: 12px;\r\n\r\n  border-bottom:\r\n    1px\r\n    solid\r\n    rgba(126, 121, 215, 0.11);\r\n}\r\n\r\n\r\n#managed-ai-operations .pp-metric__icon {\r\n  display: grid;\r\n\r\n  flex: 0 0 auto;\r\n\r\n  place-items: center;\r\n\r\n  width: 22px;\r\n  height: 22px;\r\n\r\n  color:\r\n    var(--metric-color);\r\n}\r\n\r\n\r\n#managed-ai-operations .pp-metric__icon svg {\r\n  width: 20px;\r\n  height: 20px;\r\n\r\n  fill: none;\r\n\r\n  stroke: currentColor;\r\n\r\n  stroke-width: 1.7;\r\n\r\n  stroke-linecap: round;\r\n  stroke-linejoin: round;\r\n\r\n  filter:\r\n    drop-shadow(\r\n      0\r\n      0\r\n      5px\r\n      currentColor\r\n    );\r\n}\r\n\r\n\r\n#managed-ai-operations .pp-metric__head h3 {\r\n  overflow: hidden;\r\n\r\n  margin: 0;\r\n\r\n  color: #E8EDF5;\r\n\r\n  font-size: 11px;\r\n\r\n  font-weight: 680;\r\n\r\n  line-height: 1.25;\r\n\r\n  text-overflow: ellipsis;\r\n\r\n  white-space: nowrap;\r\n}\r\n\r\n\r\n#managed-ai-operations .pp-metric__value-row {\r\n  display: flex;\r\n\r\n  align-items: baseline;\r\n\r\n  justify-content: space-between;\r\n\r\n  gap: 10px;\r\n\r\n  margin-top: 11px;\r\n}\r\n\r\n\r\n#managed-ai-operations .pp-metric__value-row strong {\r\n  color: var(--pp-white);\r\n\r\n  font-size: 24px;\r\n\r\n  font-weight: 760;\r\n\r\n  line-height: 1;\r\n\r\n  letter-spacing: -0.04em;\r\n}\r\n\r\n\r\n#managed-ai-operations .pp-health {\r\n  display: flex;\r\n\r\n  align-items: center;\r\n\r\n  gap: 6px;\r\n\r\n  color: var(--pp-green);\r\n\r\n  font-size: 9px;\r\n}\r\n\r\n\r\n#managed-ai-operations .pp-health i {\r\n  width: 6px;\r\n  height: 6px;\r\n\r\n  border-radius: 50%;\r\n\r\n  background: var(--pp-green);\r\n\r\n  box-shadow:\r\n    0\r\n    0\r\n    9px\r\n    rgba(97, 224, 174, 0.80);\r\n}\r\n\r\n\r\n#managed-ai-operations .pp-metric > small {\r\n  display: block;\r\n\r\n  margin-top: 5px;\r\n\r\n  color: #8490A5;\r\n\r\n  font-size: 9px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SPARKLINE\r\n========================================================= *\/\r\n\r\n#managed-ai-operations .pp-spark {\r\n  position: absolute;\r\n\r\n  right: 14px;\r\n  bottom: 8px;\r\n  left: 14px;\r\n\r\n  width:\r\n    calc(\r\n      100% - 28px\r\n    );\r\n\r\n  height: 46px;\r\n\r\n  overflow: visible;\r\n}\r\n\r\n\r\n#managed-ai-operations .pp-spark__fill {\r\n  opacity: 0.18;\r\n}\r\n\r\n\r\n#managed-ai-operations .pp-spark__line {\r\n  fill: none;\r\n\r\n  stroke:\r\n    var(--metric-color);\r\n\r\n  stroke-width: 1.8;\r\n\r\n  filter:\r\n    drop-shadow(\r\n      0\r\n      0\r\n      4px\r\n      var(--metric-color)\r\n    );\r\n\r\n  stroke-dasharray: 340;\r\n\r\n  stroke-dashoffset: 340;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   INFRASTRUCTURE BARS\r\n========================================================= *\/\r\n\r\n#managed-ai-operations .pp-bars {\r\n  position: absolute;\r\n\r\n  right: 15px;\r\n  bottom: 10px;\r\n  left: 15px;\r\n\r\n  display: flex;\r\n\r\n  align-items: flex-end;\r\n\r\n  gap: 6px;\r\n\r\n  height: 42px;\r\n}\r\n\r\n\r\n#managed-ai-operations .pp-bars i {\r\n  flex: 1;\r\n\r\n  height:\r\n    var(--h);\r\n\r\n  min-width: 3px;\r\n\r\n  border-radius:\r\n    3px\r\n    3px\r\n    1px\r\n    1px;\r\n\r\n  background:\r\n    linear-gradient(\r\n      180deg,\r\n      var(--pp-mint),\r\n      var(--pp-indigo),\r\n      var(--pp-purple)\r\n    );\r\n\r\n  transform:\r\n    scaleY(0);\r\n\r\n  transform-origin:\r\n    center bottom;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   LOWER DASHBOARD\r\n========================================================= *\/\r\n\r\n#managed-ai-operations .pp-console__lower {\r\n  display: grid;\r\n\r\n  grid-template-columns:\r\n    0.86fr\r\n    1.42fr\r\n    1fr;\r\n\r\n  gap: 10px;\r\n}\r\n\r\n\r\n#managed-ai-operations .pp-feed,\r\n#managed-ai-operations .pp-wave,\r\n#managed-ai-operations .pp-models {\r\n  min-width: 0;\r\n\r\n  height: 226px;\r\n}\r\n\r\n\r\n#managed-ai-operations .pp-feed,\r\n#managed-ai-operations .pp-models {\r\n  padding: 16px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   LOWER HEADINGS\r\n========================================================= *\/\r\n\r\n#managed-ai-operations .pp-feed h3,\r\n#managed-ai-operations .pp-models h3 {\r\n  display: flex;\r\n\r\n  align-items: center;\r\n\r\n  gap: 9px;\r\n\r\n  margin:\r\n    0\r\n    0\r\n    13px;\r\n\r\n  padding-bottom: 12px;\r\n\r\n  border-bottom:\r\n    1px\r\n    solid\r\n    rgba(126, 121, 215, 0.13);\r\n\r\n  color: #E8EDF5;\r\n\r\n  font-size: 11px;\r\n\r\n  font-weight: 700;\r\n}\r\n\r\n\r\n#managed-ai-operations .pp-feed h3 span {\r\n  color: var(--pp-mint);\r\n\r\n  font-size: 17px;\r\n}\r\n\r\n\r\n#managed-ai-operations .pp-models h3 span {\r\n  color: var(--pp-purple-light);\r\n\r\n  font-size: 18px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   LIVE OPERATIONS\r\n========================================================= *\/\r\n\r\n#managed-ai-operations .pp-feed ul {\r\n  display: grid;\r\n\r\n  gap: 10px;\r\n\r\n  margin: 0;\r\n  padding: 0;\r\n\r\n  list-style: none;\r\n}\r\n\r\n\r\n#managed-ai-operations .pp-feed li {\r\n  display: grid;\r\n\r\n  grid-template-columns:\r\n    7px\r\n    minmax(0, 1fr)\r\n    auto;\r\n\r\n  align-items: center;\r\n\r\n  gap: 8px;\r\n\r\n  color: #B5BFCE;\r\n\r\n  font-size: 9px;\r\n\r\n  opacity: 0;\r\n\r\n  transform:\r\n    translateX(-9px);\r\n}\r\n\r\n\r\n#managed-ai-operations .pp-feed li i {\r\n  width: 6px;\r\n  height: 6px;\r\n\r\n  border-radius: 50%;\r\n\r\n  background: var(--pp-mint);\r\n\r\n  box-shadow:\r\n    0\r\n    0\r\n    8px\r\n    rgba(132, 230, 211, 0.70);\r\n}\r\n\r\n\r\n#managed-ai-operations .pp-feed li:nth-child(2n) i {\r\n  background:\r\n    var(--pp-indigo);\r\n\r\n  box-shadow:\r\n    0\r\n    0\r\n    8px\r\n    rgba(126, 121, 215, 0.72);\r\n}\r\n\r\n\r\n#managed-ai-operations .pp-feed time {\r\n  color: #77849A;\r\n\r\n  font-size: 8px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   LIVE WAVE\r\n========================================================= *\/\r\n\r\n#managed-ai-operations .pp-wave {\r\n  position: relative;\r\n\r\n  background:\r\n    #091221;\r\n}\r\n\r\n\r\n#managed-ai-operations .pp-wave__label {\r\n  position: absolute;\r\n\r\n  z-index: 3;\r\n\r\n  top: 15px;\r\n  right: 16px;\r\n\r\n  display: flex;\r\n\r\n  align-items: center;\r\n\r\n  gap: 7px;\r\n\r\n  color: #AEB8C8;\r\n\r\n  font-size: 9px;\r\n}\r\n\r\n\r\n#managed-ai-operations .pp-wave__label i {\r\n  width: 6px;\r\n  height: 6px;\r\n\r\n  border-radius: 50%;\r\n\r\n  background:\r\n    var(--pp-mint);\r\n\r\n  box-shadow:\r\n    0\r\n    0\r\n    9px\r\n    rgba(132, 230, 211, 0.76);\r\n}\r\n\r\n\r\n#managed-ai-operations .pp-wave svg {\r\n  position: absolute;\r\n\r\n  inset:\r\n    40px\r\n    0\r\n    0;\r\n\r\n  width: 100%;\r\n\r\n  height:\r\n    calc(\r\n      100% - 40px\r\n    );\r\n}\r\n\r\n\r\n#managed-ai-operations .pp-wave__grid {\r\n  fill: none;\r\n\r\n  stroke:\r\n    rgba(126, 121, 215, 0.09);\r\n\r\n  stroke-width: 0.7;\r\n\r\n  stroke-dasharray:\r\n    2\r\n    6;\r\n}\r\n\r\n\r\n#managed-ai-operations .pp-wave__path {\r\n  fill: none;\r\n\r\n  stroke:\r\n    url(#ppOpsWaveGradient);\r\n\r\n  stroke-width: 1.6;\r\n\r\n  filter:\r\n    drop-shadow(\r\n      0\r\n      0\r\n      6px\r\n      rgba(126, 121, 215, 0.48)\r\n    );\r\n}\r\n\r\n\r\n#managed-ai-operations .pp-wave__path--two {\r\n  opacity: 0.55;\r\n}\r\n\r\n\r\n#managed-ai-operations .pp-wave__path--three {\r\n  opacity: 0.32;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MODEL ACTIVITY\r\n========================================================= *\/\r\n\r\n#managed-ai-operations .pp-model-row {\r\n  display: grid;\r\n\r\n  grid-template-columns:\r\n    minmax(92px, 1fr)\r\n    minmax(55px, 0.9fr)\r\n    30px;\r\n\r\n  align-items: center;\r\n\r\n  gap: 8px;\r\n\r\n  min-height: 35px;\r\n\r\n  color: #B8C2D1;\r\n\r\n  font-size: 9px;\r\n}\r\n\r\n\r\n#managed-ai-operations .pp-model-row > i {\r\n  display: block;\r\n\r\n  height: 6px;\r\n\r\n  overflow: hidden;\r\n\r\n  border-radius: 999px;\r\n\r\n  background: #202A3F;\r\n}\r\n\r\n\r\n#managed-ai-operations .pp-model-row b {\r\n  display: block;\r\n\r\n  width: var(--value);\r\n\r\n  height: 100%;\r\n\r\n  border-radius: inherit;\r\n\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      var(--pp-mint),\r\n      var(--pp-indigo),\r\n      var(--pp-purple)\r\n    );\r\n\r\n  box-shadow:\r\n    0\r\n    0\r\n    8px\r\n    rgba(126, 121, 215, 0.34);\r\n\r\n  transform:\r\n    scaleX(0);\r\n\r\n  transform-origin:\r\n    left center;\r\n}\r\n\r\n\r\n#managed-ai-operations .pp-model-row em {\r\n  color: #C7D0DD;\r\n\r\n  font-size: 9px;\r\n\r\n  font-style: normal;\r\n\r\n  text-align: right;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CAPABILITIES\r\n========================================================= *\/\r\n\r\n#managed-ai-operations .pp-ops__capabilities {\r\n  display: grid;\r\n\r\n  grid-template-columns:\r\n    repeat(\r\n      4,\r\n      minmax(0, 1fr)\r\n    );\r\n\r\n  margin-top: 54px;\r\n\r\n  border-top:\r\n    1px\r\n    solid\r\n    var(--pp-line);\r\n\r\n  border-bottom:\r\n    1px\r\n    solid\r\n    var(--pp-line);\r\n}\r\n\r\n\r\n#managed-ai-operations .pp-capability {\r\n  --cap-color: var(--pp-indigo);\r\n\r\n  position: relative;\r\n\r\n  min-width: 0;\r\n\r\n  padding:\r\n    31px\r\n    28px\r\n    32px;\r\n}\r\n\r\n\r\n#managed-ai-operations .pp-capability:nth-child(1) {\r\n  --cap-color: var(--pp-mint);\r\n}\r\n\r\n#managed-ai-operations .pp-capability:nth-child(2) {\r\n  --cap-color: #75C9DE;\r\n}\r\n\r\n#managed-ai-operations .pp-capability:nth-child(3) {\r\n  --cap-color: var(--pp-indigo);\r\n}\r\n\r\n#managed-ai-operations .pp-capability:nth-child(4) {\r\n  --cap-color: var(--pp-purple);\r\n}\r\n\r\n\r\n#managed-ai-operations .pp-capability + .pp-capability {\r\n  border-left:\r\n    1px\r\n    solid\r\n    var(--pp-line);\r\n}\r\n\r\n\r\n\/* hover underline *\/\r\n\r\n#managed-ai-operations .pp-capability::after {\r\n  content: \"\";\r\n\r\n  position: absolute;\r\n\r\n  right: 28px;\r\n  bottom: -1px;\r\n  left: 28px;\r\n\r\n  height: 1px;\r\n\r\n  background:\r\n    var(--cap-color);\r\n\r\n  box-shadow:\r\n    0\r\n    0\r\n    10px\r\n    var(--cap-color);\r\n\r\n  transform:\r\n    scaleX(0);\r\n\r\n  transform-origin:\r\n    left center;\r\n\r\n  transition:\r\n    transform\r\n    420ms\r\n    cubic-bezier(.22, 1, .36, 1);\r\n}\r\n\r\n\r\n#managed-ai-operations .pp-capability:hover::after {\r\n  transform:\r\n    scaleX(1);\r\n}\r\n\r\n\r\n#managed-ai-operations .pp-capability__icon {\r\n  display: grid;\r\n\r\n  place-items: center;\r\n\r\n  width: 38px;\r\n  height: 38px;\r\n\r\n  margin-bottom: 18px;\r\n\r\n  color:\r\n    var(--cap-color);\r\n}\r\n\r\n\r\n#managed-ai-operations .pp-capability__icon svg {\r\n  width: 31px;\r\n  height: 31px;\r\n\r\n  fill: none;\r\n\r\n  stroke: currentColor;\r\n\r\n  stroke-width: 1.45;\r\n\r\n  stroke-linecap: round;\r\n  stroke-linejoin: round;\r\n\r\n  filter:\r\n    drop-shadow(\r\n      0\r\n      0\r\n      6px\r\n      currentColor\r\n    );\r\n}\r\n\r\n\r\n#managed-ai-operations .pp-capability h3 {\r\n  margin:\r\n    0\r\n    0\r\n    9px;\r\n\r\n  color: var(--pp-white);\r\n\r\n  font-size:\r\n    clamp(\r\n      17px,\r\n      1.3vw,\r\n      21px\r\n    );\r\n\r\n  font-weight: 720;\r\n\r\n  line-height: 1.25;\r\n\r\n  letter-spacing: -0.025em;\r\n}\r\n\r\n\r\n#managed-ai-operations .pp-capability p {\r\n  margin: 0;\r\n\r\n  color: var(--pp-muted);\r\n\r\n  font-size: 14px;\r\n\r\n  font-weight: 430;\r\n\r\n  line-height: 1.55;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   GENERAL REVEAL\r\n========================================================= *\/\r\n\r\n#managed-ai-operations .pp-ops-reveal {\r\n  opacity: 0;\r\n\r\n  transform:\r\n    translateY(24px);\r\n\r\n  filter: blur(3px);\r\n\r\n  transition:\r\n    opacity\r\n    760ms\r\n    ease,\r\n\r\n    transform\r\n    760ms\r\n    cubic-bezier(.22, 1, .36, 1),\r\n\r\n    filter\r\n    760ms\r\n    ease;\r\n}\r\n\r\n\r\n#managed-ai-operations .pp-ops-reveal.is-visible {\r\n  opacity: 1;\r\n\r\n  transform:\r\n    translateY(0);\r\n\r\n  filter: blur(0);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   BOOT ANIMATIONS\r\n========================================================= *\/\r\n\r\n#managed-ai-operations.pp-ops-active .pp-console::before {\r\n  animation:\r\n    ppOpsBorderDraw\r\n    1.8s\r\n    cubic-bezier(.22, 1, .36, 1)\r\n    0.3s\r\n    forwards;\r\n}\r\n\r\n\r\n@keyframes ppOpsBorderDraw {\r\n  to {\r\n    transform:\r\n      scaleX(1);\r\n  }\r\n}\r\n\r\n\r\n\/* Metric cards *\/\r\n\r\n#managed-ai-operations.pp-ops-active\r\n.pp-metric {\r\n  animation:\r\n    ppOpsMetricIn\r\n    700ms\r\n    cubic-bezier(.22, 1, .36, 1)\r\n    forwards;\r\n}\r\n\r\n\r\n#managed-ai-operations.pp-ops-active\r\n.pp-metric:nth-child(1) {\r\n  animation-delay: 0.55s;\r\n}\r\n\r\n#managed-ai-operations.pp-ops-active\r\n.pp-metric:nth-child(2) {\r\n  animation-delay: 0.72s;\r\n}\r\n\r\n#managed-ai-operations.pp-ops-active\r\n.pp-metric:nth-child(3) {\r\n  animation-delay: 0.89s;\r\n}\r\n\r\n#managed-ai-operations.pp-ops-active\r\n.pp-metric:nth-child(4) {\r\n  animation-delay: 1.06s;\r\n}\r\n\r\n\r\n@keyframes ppOpsMetricIn {\r\n  to {\r\n    opacity: 1;\r\n\r\n    transform:\r\n      translateY(0)\r\n      scale(1);\r\n  }\r\n}\r\n\r\n\r\n\/* sparklines *\/\r\n\r\n#managed-ai-operations.pp-ops-active\r\n.pp-spark__line {\r\n  animation:\r\n    ppOpsDrawLine\r\n    2.5s\r\n    ease\r\n    1.1s\r\n    forwards,\r\n\r\n    ppOpsLineGlow\r\n    3s\r\n    ease-in-out\r\n    3.6s\r\n    infinite;\r\n}\r\n\r\n\r\n@keyframes ppOpsDrawLine {\r\n  to {\r\n    stroke-dashoffset: 0;\r\n  }\r\n}\r\n\r\n\r\n@keyframes ppOpsLineGlow {\r\n  0%,\r\n  100% {\r\n    opacity: 0.70;\r\n  }\r\n\r\n  50% {\r\n    opacity: 1;\r\n  }\r\n}\r\n\r\n\r\n\/* bars *\/\r\n\r\n#managed-ai-operations.pp-ops-active\r\n.pp-bars i {\r\n  animation:\r\n    ppOpsBarsIn\r\n    900ms\r\n    cubic-bezier(.22, 1, .36, 1)\r\n    forwards,\r\n\r\n    ppOpsBarsLive\r\n    2.7s\r\n    ease-in-out\r\n    2s\r\n    infinite\r\n    alternate;\r\n}\r\n\r\n\r\n#managed-ai-operations.pp-ops-active\r\n.pp-bars i:nth-child(2n) {\r\n  animation-delay:\r\n    1.15s,\r\n    -0.7s;\r\n}\r\n\r\n\r\n#managed-ai-operations.pp-ops-active\r\n.pp-bars i:nth-child(3n) {\r\n  animation-delay:\r\n    1.3s,\r\n    -1.4s;\r\n}\r\n\r\n\r\n@keyframes ppOpsBarsIn {\r\n  to {\r\n    transform:\r\n      scaleY(1);\r\n  }\r\n}\r\n\r\n\r\n@keyframes ppOpsBarsLive {\r\n  from {\r\n    transform:\r\n      scaleY(0.72);\r\n\r\n    opacity: 0.74;\r\n  }\r\n\r\n  to {\r\n    transform:\r\n      scaleY(1);\r\n\r\n    opacity: 1;\r\n  }\r\n}\r\n\r\n\r\n\/* Feed *\/\r\n\r\n#managed-ai-operations.pp-ops-active\r\n.pp-feed li {\r\n  animation:\r\n    ppOpsFeedIn\r\n    550ms\r\n    ease\r\n    forwards;\r\n}\r\n\r\n\r\n#managed-ai-operations.pp-ops-active\r\n.pp-feed li:nth-child(1) {\r\n  animation-delay: 1.25s;\r\n}\r\n\r\n#managed-ai-operations.pp-ops-active\r\n.pp-feed li:nth-child(2) {\r\n  animation-delay: 1.43s;\r\n}\r\n\r\n#managed-ai-operations.pp-ops-active\r\n.pp-feed li:nth-child(3) {\r\n  animation-delay: 1.61s;\r\n}\r\n\r\n#managed-ai-operations.pp-ops-active\r\n.pp-feed li:nth-child(4) {\r\n  animation-delay: 1.79s;\r\n}\r\n\r\n#managed-ai-operations.pp-ops-active\r\n.pp-feed li:nth-child(5) {\r\n  animation-delay: 1.97s;\r\n}\r\n\r\n\r\n@keyframes ppOpsFeedIn {\r\n  to {\r\n    opacity: 1;\r\n\r\n    transform:\r\n      translateX(0);\r\n  }\r\n}\r\n\r\n\r\n\/* wave *\/\r\n\r\n#managed-ai-operations.pp-ops-active\r\n.pp-wave__path {\r\n  animation:\r\n    ppOpsWave\r\n    5s\r\n    ease-in-out\r\n    infinite\r\n    alternate;\r\n}\r\n\r\n\r\n#managed-ai-operations.pp-ops-active\r\n.pp-wave__path--two {\r\n  animation-delay: -1.8s;\r\n}\r\n\r\n\r\n#managed-ai-operations.pp-ops-active\r\n.pp-wave__path--three {\r\n  animation-delay: -3s;\r\n}\r\n\r\n\r\n@keyframes ppOpsWave {\r\n  from {\r\n    transform:\r\n      translateY(-6px)\r\n      scaleY(0.90);\r\n\r\n    opacity: 0.46;\r\n  }\r\n\r\n  to {\r\n    transform:\r\n      translateY(6px)\r\n      scaleY(1.08);\r\n\r\n    opacity: 1;\r\n  }\r\n}\r\n\r\n\r\n\/* model progress *\/\r\n\r\n#managed-ai-operations.pp-ops-active\r\n.pp-model-row b {\r\n  animation:\r\n    ppOpsModelBar\r\n    1.6s\r\n    cubic-bezier(.22, 1, .36, 1)\r\n    1.6s\r\n    forwards;\r\n}\r\n\r\n\r\n@keyframes ppOpsModelBar {\r\n  to {\r\n    transform:\r\n      scaleX(1);\r\n  }\r\n}\r\n\r\n\r\n\/* Pulse *\/\r\n\r\n@keyframes ppOpsPulse {\r\n  0%,\r\n  100% {\r\n    opacity: 0.62;\r\n\r\n    transform:\r\n      scale(0.88);\r\n  }\r\n\r\n  50% {\r\n    opacity: 1;\r\n\r\n    transform:\r\n      scale(1.12);\r\n  }\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TABLET\r\n========================================================= *\/\r\n\r\n@media (max-width: 1180px) {\r\n\r\n  #managed-ai-operations .pp-ops__inner {\r\n    width:\r\n      min(\r\n        1360px,\r\n        calc(100% - 64px)\r\n      );\r\n  }\r\n\r\n\r\n  #managed-ai-operations .pp-console {\r\n    grid-template-columns:\r\n      155px\r\n      minmax(0, 1fr);\r\n  }\r\n\r\n\r\n  #managed-ai-operations .pp-console__metrics {\r\n    grid-template-columns:\r\n      repeat(\r\n        2,\r\n        minmax(0, 1fr)\r\n      );\r\n  }\r\n\r\n\r\n  #managed-ai-operations .pp-metric {\r\n    min-height: 155px;\r\n  }\r\n\r\n\r\n  #managed-ai-operations .pp-console__lower {\r\n    grid-template-columns:\r\n      0.9fr\r\n      1.25fr;\r\n  }\r\n\r\n\r\n  #managed-ai-operations .pp-models {\r\n    grid-column:\r\n      1 \/ -1;\r\n\r\n    height: auto;\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SMALL TABLET\r\n========================================================= *\/\r\n\r\n@media (max-width: 900px) {\r\n\r\n  #managed-ai-operations .pp-ops__inner {\r\n    padding:\r\n      90px\r\n      0;\r\n  }\r\n\r\n\r\n  #managed-ai-operations .pp-console {\r\n    grid-template-columns: 1fr;\r\n  }\r\n\r\n\r\n  #managed-ai-operations .pp-console__sidebar {\r\n    display: none;\r\n  }\r\n\r\n\r\n  #managed-ai-operations .pp-ops__capabilities {\r\n    grid-template-columns:\r\n      repeat(\r\n        2,\r\n        minmax(0, 1fr)\r\n      );\r\n  }\r\n\r\n\r\n  #managed-ai-operations .pp-capability:nth-child(3) {\r\n    border-left: 0;\r\n\r\n    border-top:\r\n      1px\r\n      solid\r\n      var(--pp-line);\r\n  }\r\n\r\n\r\n  #managed-ai-operations .pp-capability:nth-child(4) {\r\n    border-top:\r\n      1px\r\n      solid\r\n      var(--pp-line);\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MOBILE\r\n========================================================= *\/\r\n\r\n@media (max-width: 680px) {\r\n\r\n  #managed-ai-operations {\r\n    left: auto;\r\n\r\n    width: 100%;\r\n\r\n    transform: none;\r\n  }\r\n\r\n\r\n  #managed-ai-operations .pp-ops__inner {\r\n    width:\r\n      calc(\r\n        100% - 40px\r\n      );\r\n\r\n    padding:\r\n      76px\r\n      0\r\n      72px;\r\n  }\r\n\r\n\r\n  \/* Header left on mobile *\/\r\n\r\n  #managed-ai-operations .pp-ops__intro {\r\n    margin-bottom: 42px;\r\n\r\n    text-align: left;\r\n  }\r\n\r\n\r\n  #managed-ai-operations .pp-ops__eyebrow {\r\n    justify-content: flex-start;\r\n\r\n    margin-bottom: 21px;\r\n\r\n    font-size: 9px;\r\n\r\n    letter-spacing: 0.22em;\r\n  }\r\n\r\n\r\n  #managed-ai-operations\r\n  .pp-ops__eyebrow::before {\r\n    width: 26px;\r\n  }\r\n\r\n\r\n  #managed-ai-operations\r\n  .pp-ops__eyebrow::after {\r\n    display: none;\r\n  }\r\n\r\n\r\n  #managed-ai-operations .pp-ops__title {\r\n    font-size:\r\n      clamp(\r\n        40px,\r\n        11vw,\r\n        53px\r\n      );\r\n\r\n    line-height: 1.03;\r\n  }\r\n\r\n\r\n  #managed-ai-operations .pp-ops__description {\r\n    margin-top: 22px;\r\n\r\n    font-size: 15.5px;\r\n  }\r\n\r\n\r\n  \/* Dashboard *\/\r\n\r\n  #managed-ai-operations .pp-console {\r\n    border-radius: 14px;\r\n  }\r\n\r\n\r\n  #managed-ai-operations .pp-console__workspace {\r\n    padding:\r\n      0\r\n      11px\r\n      11px;\r\n  }\r\n\r\n\r\n  #managed-ai-operations .pp-console__topbar {\r\n    min-height: 58px;\r\n  }\r\n\r\n\r\n  #managed-ai-operations .pp-console__topbar p {\r\n    font-size: 9px;\r\n\r\n    letter-spacing: 0.15em;\r\n  }\r\n\r\n\r\n  #managed-ai-operations .pp-console__status {\r\n    font-size: 0;\r\n  }\r\n\r\n\r\n  #managed-ai-operations .pp-console__metrics,\r\n  #managed-ai-operations .pp-console__lower,\r\n  #managed-ai-operations .pp-ops__capabilities {\r\n    grid-template-columns: 1fr;\r\n  }\r\n\r\n\r\n  #managed-ai-operations .pp-metric {\r\n    min-height: 170px;\r\n  }\r\n\r\n\r\n  #managed-ai-operations .pp-feed,\r\n  #managed-ai-operations .pp-wave,\r\n  #managed-ai-operations .pp-models {\r\n    grid-column: auto;\r\n\r\n    height: 220px;\r\n  }\r\n\r\n\r\n  \/* Capability cards *\/\r\n\r\n  #managed-ai-operations .pp-capability,\r\n  #managed-ai-operations .pp-capability + .pp-capability,\r\n  #managed-ai-operations .pp-capability:nth-child(3),\r\n  #managed-ai-operations .pp-capability:nth-child(4) {\r\n    padding:\r\n      27px\r\n      8px;\r\n\r\n    border-top:\r\n      1px\r\n      solid\r\n      var(--pp-line);\r\n\r\n    border-left: 0;\r\n  }\r\n\r\n\r\n  #managed-ai-operations .pp-capability:first-child {\r\n    border-top: 0;\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   REDUCED MOTION\r\n========================================================= *\/\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n\r\n  #managed-ai-operations *,\r\n  #managed-ai-operations *::before,\r\n  #managed-ai-operations *::after {\r\n    animation-duration:\r\n      0.01ms !important;\r\n\r\n    animation-iteration-count:\r\n      1 !important;\r\n\r\n    transition-duration:\r\n      0.01ms !important;\r\n  }\r\n\r\n\r\n  #managed-ai-operations .pp-ops-reveal,\r\n  #managed-ai-operations .pp-metric,\r\n  #managed-ai-operations .pp-feed li {\r\n    opacity: 1;\r\n\r\n    transform: none;\r\n\r\n    filter: none;\r\n  }\r\n\r\n\r\n  #managed-ai-operations .pp-console::before {\r\n    transform:\r\n      scaleX(1);\r\n  }\r\n\r\n\r\n  #managed-ai-operations .pp-spark__line {\r\n    stroke-dashoffset: 0;\r\n  }\r\n\r\n\r\n  #managed-ai-operations .pp-bars i {\r\n    transform:\r\n      scaleY(1);\r\n  }\r\n\r\n\r\n  #managed-ai-operations .pp-model-row b {\r\n    transform:\r\n      scaleX(1);\r\n  }\r\n\r\n}\r\n<\/style>\r\n\r\n\r\n\r\n<!-- =========================================================\r\n     HTML\r\n========================================================= -->\r\n\r\n<section\r\n  id=\"managed-ai-operations\"\r\n  aria-labelledby=\"managed-ai-operations-title\"\r\n>\r\n\r\n  <div class=\"pp-ops__inner\">\r\n\r\n\r\n    <!-- =====================================================\r\n         HEADER\r\n    ====================================================== -->\r\n\r\n    <header\r\n      class=\"\r\n        pp-ops__intro\r\n        pp-ops-reveal\r\n      \"\r\n    >\r\n\r\n      <p class=\"pp-ops__eyebrow\">\r\n        Managed AI Operations\r\n      <\/p>\r\n\r\n\r\n      <h2\r\n        id=\"managed-ai-operations-title\"\r\n        class=\"pp-ops__title\"\r\n      >\r\n        AI doesn\u2019t stop at launch.\r\n\r\n        <span>\r\n          Neither do we.\r\n        <\/span>\r\n      <\/h2>\r\n\r\n\r\n      <p class=\"pp-ops__description\">\r\n        Pixel Pine continuously monitors,\r\n        maintains and improves your AI systems\u2014keeping\r\n        them reliable, secure and ready to scale.\r\n      <\/p>\r\n\r\n    <\/header>\r\n\r\n\r\n\r\n    <!-- =====================================================\r\n         CONTROL ROOM\r\n    ====================================================== -->\r\n\r\n    <div\r\n      class=\"\r\n        pp-console\r\n        pp-ops-reveal\r\n      \"\r\n    >\r\n\r\n\r\n      <!-- =================================================\r\n           SIDEBAR\r\n      ================================================== -->\r\n\r\n      <aside\r\n        class=\"pp-console__sidebar\"\r\n        aria-label=\"AI operations dashboard navigation\"\r\n      >\r\n\r\n        <div class=\"pp-console__brand\">\r\n\r\n          <span\r\n            class=\"pp-console__logo\"\r\n            aria-hidden=\"true\"\r\n          >\r\n            <i><\/i>\r\n            <i><\/i>\r\n          <\/span>\r\n\r\n          <span>\r\n            Pixel Pine\r\n          <\/span>\r\n\r\n        <\/div>\r\n\r\n\r\n        <nav\r\n          class=\"pp-console__nav\"\r\n          aria-label=\"Operations dashboard sections\"\r\n        >\r\n\r\n          <span class=\"is-active\">\r\n\r\n            <svg viewBox=\"0 0 24 24\">\r\n              <path d=\"M4 19V11M10 19V5M16 19v-8M22 19V8\"\/>\r\n            <\/svg>\r\n\r\n            Operations\r\n\r\n          <\/span>\r\n\r\n\r\n          <span>\r\n\r\n            <svg viewBox=\"0 0 24 24\">\r\n              <path d=\"m12 3 8 4.5v9L12 21l-8-4.5v-9L12 3Zm0 9 8-4.5M12 12 4 7.5M12 12v9\"\/>\r\n            <\/svg>\r\n\r\n            Models\r\n\r\n          <\/span>\r\n\r\n\r\n          <span>\r\n\r\n            <svg viewBox=\"0 0 24 24\">\r\n              <path d=\"M6.5 18.5h11a4 4 0 0 0 .7-7.9A6.5 6.5 0 0 0 5.6 9.2a4.7 4.7 0 0 0 .9 9.3Z\"\/>\r\n            <\/svg>\r\n\r\n            Infrastructure\r\n\r\n          <\/span>\r\n\r\n\r\n          <span>\r\n\r\n            <svg viewBox=\"0 0 24 24\">\r\n              <path d=\"M12 3 5 6v5c0 4.6 2.8 8 7 10 4.2-2 7-5.4 7-10V6l-7-3Z\"\/>\r\n            <\/svg>\r\n\r\n            Security\r\n\r\n          <\/span>\r\n\r\n\r\n          <span>\r\n\r\n            <svg viewBox=\"0 0 24 24\">\r\n              <path d=\"M6 3h9l4 4v14H6V3Zm9 0v5h4M9 12h7M9 16h7\"\/>\r\n            <\/svg>\r\n\r\n            Reports\r\n\r\n          <\/span>\r\n\r\n        <\/nav>\r\n\r\n      <\/aside>\r\n\r\n\r\n\r\n      <!-- =================================================\r\n           WORKSPACE\r\n      ================================================== -->\r\n\r\n      <div class=\"pp-console__workspace\">\r\n\r\n\r\n        <!-- TOP BAR -->\r\n\r\n        <div class=\"pp-console__topbar\">\r\n\r\n          <p>\r\n            AI Operations Control Room\r\n          <\/p>\r\n\r\n\r\n          <span class=\"pp-console__status\">\r\n\r\n            <i\r\n              class=\"pp-status-dot\"\r\n              aria-hidden=\"true\"\r\n            ><\/i>\r\n\r\n            All Systems Operational\r\n\r\n          <\/span>\r\n\r\n        <\/div>\r\n\r\n\r\n\r\n        <!-- =================================================\r\n             METRICS\r\n        ================================================== -->\r\n\r\n        <div class=\"pp-console__metrics\">\r\n\r\n\r\n          <!-- APPLICATION MONITORING -->\r\n\r\n          <article class=\"pp-metric\">\r\n\r\n            <div class=\"pp-metric__head\">\r\n\r\n              <span\r\n                class=\"pp-metric__icon\"\r\n                aria-hidden=\"true\"\r\n              >\r\n\r\n                <svg viewBox=\"0 0 24 24\">\r\n                  <path d=\"M4 5h16v11H4V5Zm5 15h6M12 16v4\"\/>\r\n                <\/svg>\r\n\r\n              <\/span>\r\n\r\n              <h3>\r\n                Application Monitoring\r\n              <\/h3>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"pp-metric__value-row\">\r\n\r\n              <strong>\r\n                99.9%\r\n              <\/strong>\r\n\r\n\r\n              <span class=\"pp-health\">\r\n                <i><\/i>\r\n                Healthy\r\n              <\/span>\r\n\r\n            <\/div>\r\n\r\n\r\n            <small>\r\n              Uptime\r\n            <\/small>\r\n\r\n\r\n            <svg\r\n              class=\"pp-spark\"\r\n              viewBox=\"0 0 220 52\"\r\n              preserveAspectRatio=\"none\"\r\n              aria-hidden=\"true\"\r\n            >\r\n\r\n              <path\r\n                class=\"pp-spark__line\"\r\n                d=\"M0 40 C18 18 30 43 49 26 S78 18 94 35 S125 42 142 24 S170 35 187 18 S207 14 220 5\"\r\n              \/>\r\n\r\n            <\/svg>\r\n\r\n          <\/article>\r\n\r\n\r\n\r\n          <!-- MODEL PERFORMANCE -->\r\n\r\n          <article class=\"pp-metric\">\r\n\r\n            <div class=\"pp-metric__head\">\r\n\r\n              <span\r\n                class=\"pp-metric__icon\"\r\n                aria-hidden=\"true\"\r\n              >\r\n\r\n                <svg viewBox=\"0 0 24 24\">\r\n                  <path d=\"M4 19V11M9 19V5M14 19v-8M19 19V8\"\/>\r\n                <\/svg>\r\n\r\n              <\/span>\r\n\r\n              <h3>\r\n                Model Performance\r\n              <\/h3>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"pp-metric__value-row\">\r\n\r\n              <strong>\r\n                96.4%\r\n              <\/strong>\r\n\r\n\r\n              <span class=\"pp-health\">\r\n                <i><\/i>\r\n                Healthy\r\n              <\/span>\r\n\r\n            <\/div>\r\n\r\n\r\n            <small>\r\n              Average accuracy\r\n            <\/small>\r\n\r\n\r\n            <svg\r\n              class=\"pp-spark\"\r\n              viewBox=\"0 0 220 52\"\r\n              preserveAspectRatio=\"none\"\r\n              aria-hidden=\"true\"\r\n            >\r\n\r\n              <path\r\n                class=\"pp-spark__line\"\r\n                d=\"M0 40 C17 14 29 38 45 29 S69 43 83 21 S110 13 124 35 S150 22 164 10 S190 34 220 8\"\r\n              \/>\r\n\r\n            <\/svg>\r\n\r\n          <\/article>\r\n\r\n\r\n\r\n          <!-- CLOUD -->\r\n\r\n          <article class=\"pp-metric\">\r\n\r\n            <div class=\"pp-metric__head\">\r\n\r\n              <span\r\n                class=\"pp-metric__icon\"\r\n                aria-hidden=\"true\"\r\n              >\r\n\r\n                <svg viewBox=\"0 0 24 24\">\r\n                  <path d=\"M6.5 18.5h11a4 4 0 0 0 .7-7.9A6.5 6.5 0 0 0 5.6 9.2a4.7 4.7 0 0 0 .9 9.3Z\"\/>\r\n                <\/svg>\r\n\r\n              <\/span>\r\n\r\n              <h3>\r\n                Cloud Infrastructure\r\n              <\/h3>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"pp-metric__value-row\">\r\n\r\n              <strong>\r\n                32 \/ 32\r\n              <\/strong>\r\n\r\n\r\n              <span class=\"pp-health\">\r\n                <i><\/i>\r\n                Healthy\r\n              <\/span>\r\n\r\n            <\/div>\r\n\r\n\r\n            <small>\r\n              Services online\r\n            <\/small>\r\n\r\n\r\n            <div\r\n              class=\"pp-bars\"\r\n              aria-hidden=\"true\"\r\n            >\r\n              <i style=\"--h:32%\"><\/i>\r\n              <i style=\"--h:48%\"><\/i>\r\n              <i style=\"--h:42%\"><\/i>\r\n              <i style=\"--h:65%\"><\/i>\r\n              <i style=\"--h:53%\"><\/i>\r\n              <i style=\"--h:76%\"><\/i>\r\n              <i style=\"--h:58%\"><\/i>\r\n              <i style=\"--h:82%\"><\/i>\r\n              <i style=\"--h:51%\"><\/i>\r\n              <i style=\"--h:70%\"><\/i>\r\n              <i style=\"--h:61%\"><\/i>\r\n              <i style=\"--h:88%\"><\/i>\r\n            <\/div>\r\n\r\n          <\/article>\r\n\r\n\r\n\r\n          <!-- SECURITY -->\r\n\r\n          <article class=\"pp-metric\">\r\n\r\n            <div class=\"pp-metric__head\">\r\n\r\n              <span\r\n                class=\"pp-metric__icon\"\r\n                aria-hidden=\"true\"\r\n              >\r\n\r\n                <svg viewBox=\"0 0 24 24\">\r\n                  <path d=\"M12 3 5 6v5c0 4.6 2.8 8 7 10 4.2-2 7-5.4 7-10V6l-7-3Z\"\/>\r\n                <\/svg>\r\n\r\n              <\/span>\r\n\r\n              <h3>\r\n                Security &amp; Data Pipeline\r\n              <\/h3>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"pp-metric__value-row\">\r\n\r\n              <strong>\r\n                0\r\n              <\/strong>\r\n\r\n\r\n              <span class=\"pp-health\">\r\n                <i><\/i>\r\n                Healthy\r\n              <\/span>\r\n\r\n            <\/div>\r\n\r\n\r\n            <small>\r\n              Active threats\r\n            <\/small>\r\n\r\n\r\n            <svg\r\n              class=\"pp-spark\"\r\n              viewBox=\"0 0 220 52\"\r\n              preserveAspectRatio=\"none\"\r\n              aria-hidden=\"true\"\r\n            >\r\n\r\n              <path\r\n                class=\"pp-spark__line\"\r\n                d=\"M0 38 L12 30 L27 36 L41 24 L55 39 L70 29 L84 33 L96 18 L109 29 L123 9 L139 26 L154 16 L168 37 L184 22 L199 31 L220 16\"\r\n              \/>\r\n\r\n            <\/svg>\r\n\r\n          <\/article>\r\n\r\n        <\/div>\r\n\r\n\r\n\r\n        <!-- =================================================\r\n             LOWER DASHBOARD\r\n        ================================================== -->\r\n\r\n        <div class=\"pp-console__lower\">\r\n\r\n\r\n          <!-- LIVE OPERATIONS -->\r\n\r\n          <article class=\"pp-feed\">\r\n\r\n            <h3>\r\n              <span>\u03df<\/span>\r\n              Live Operations\r\n            <\/h3>\r\n\r\n\r\n            <ul>\r\n\r\n              <li>\r\n                <i><\/i>\r\n\r\n                <span>\r\n                  Model inference completed\r\n                <\/span>\r\n\r\n                <time>\r\n                  10:24\r\n                <\/time>\r\n              <\/li>\r\n\r\n\r\n              <li>\r\n                <i><\/i>\r\n\r\n                <span>\r\n                  Data pipeline sync\r\n                <\/span>\r\n\r\n                <time>\r\n                  10:23\r\n                <\/time>\r\n              <\/li>\r\n\r\n\r\n              <li>\r\n                <i><\/i>\r\n\r\n                <span>\r\n                  User request processed\r\n                <\/span>\r\n\r\n                <time>\r\n                  10:23\r\n                <\/time>\r\n              <\/li>\r\n\r\n\r\n              <li>\r\n                <i><\/i>\r\n\r\n                <span>\r\n                  Model update deployed\r\n                <\/span>\r\n\r\n                <time>\r\n                  10:21\r\n                <\/time>\r\n              <\/li>\r\n\r\n\r\n              <li>\r\n                <i><\/i>\r\n\r\n                <span>\r\n                  Infrastructure scaled\r\n                <\/span>\r\n\r\n                <time>\r\n                  10:20\r\n                <\/time>\r\n              <\/li>\r\n\r\n            <\/ul>\r\n\r\n          <\/article>\r\n\r\n\r\n\r\n          <!-- SYSTEM ACTIVITY -->\r\n\r\n          <article\r\n            class=\"pp-wave\"\r\n            aria-label=\"Live AI system activity visualisation\"\r\n          >\r\n\r\n            <div class=\"pp-wave__label\">\r\n              <i><\/i>\r\n              Live system activity\r\n            <\/div>\r\n\r\n\r\n            <svg\r\n              viewBox=\"0 0 520 190\"\r\n              preserveAspectRatio=\"none\"\r\n              aria-hidden=\"true\"\r\n            >\r\n\r\n              <defs>\r\n\r\n                <linearGradient\r\n                  id=\"ppOpsWaveGradient\"\r\n                  x1=\"0\"\r\n                  y1=\"0\"\r\n                  x2=\"1\"\r\n                  y2=\"0\"\r\n                >\r\n\r\n                  <stop\r\n                    offset=\"0\"\r\n                    stop-color=\"#84E6D3\"\r\n                    stop-opacity=\".35\"\r\n                  \/>\r\n\r\n                  <stop\r\n                    offset=\".5\"\r\n                    stop-color=\"#7E79D7\"\r\n                  \/>\r\n\r\n                  <stop\r\n                    offset=\"1\"\r\n                    stop-color=\"#AF83E8\"\r\n                    stop-opacity=\".50\"\r\n                  \/>\r\n\r\n                <\/linearGradient>\r\n\r\n              <\/defs>\r\n\r\n\r\n              <g class=\"pp-wave__grid\">\r\n\r\n                <path d=\"M0 32H520M0 64H520M0 96H520M0 128H520M0 160H520\"\/>\r\n\r\n                <path d=\"M52 0V190M104 0V190M156 0V190M208 0V190M260 0V190M312 0V190M364 0V190M416 0V190M468 0V190\"\/>\r\n\r\n              <\/g>\r\n\r\n\r\n              <path\r\n                class=\"pp-wave__path pp-wave__path--one\"\r\n                d=\"M0 115 C45 55 72 145 123 94 S192 35 235 101 S310 151 357 91 S431 46 520 112\"\r\n              \/>\r\n\r\n              <path\r\n                class=\"pp-wave__path pp-wave__path--two\"\r\n                d=\"M0 130 C41 86 83 148 125 111 S185 57 234 113 S300 143 356 103 S435 62 520 128\"\r\n              \/>\r\n\r\n              <path\r\n                class=\"pp-wave__path pp-wave__path--three\"\r\n                d=\"M0 100 C38 44 79 121 123 80 S186 26 238 87 S310 135 360 77 S440 29 520 98\"\r\n              \/>\r\n\r\n            <\/svg>\r\n\r\n          <\/article>\r\n\r\n\r\n\r\n          <!-- MODEL ACTIVITY -->\r\n\r\n          <article class=\"pp-models\">\r\n\r\n            <h3>\r\n              <span>\u25c7<\/span>\r\n              Model Activity\r\n            <\/h3>\r\n\r\n\r\n            <div class=\"pp-model-row\">\r\n              <span>\r\n                Customer Support AI\r\n              <\/span>\r\n\r\n              <i>\r\n                <b style=\"--value:87%\"><\/b>\r\n              <\/i>\r\n\r\n              <em>\r\n                87%\r\n              <\/em>\r\n            <\/div>\r\n\r\n\r\n            <div class=\"pp-model-row\">\r\n              <span>\r\n                Knowledge Assistant\r\n              <\/span>\r\n\r\n              <i>\r\n                <b style=\"--value:64%\"><\/b>\r\n              <\/i>\r\n\r\n              <em>\r\n                64%\r\n              <\/em>\r\n            <\/div>\r\n\r\n\r\n            <div class=\"pp-model-row\">\r\n              <span>\r\n                Document Intelligence\r\n              <\/span>\r\n\r\n              <i>\r\n                <b style=\"--value:92%\"><\/b>\r\n              <\/i>\r\n\r\n              <em>\r\n                92%\r\n              <\/em>\r\n            <\/div>\r\n\r\n\r\n            <div class=\"pp-model-row\">\r\n              <span>\r\n                Internal Copilot\r\n              <\/span>\r\n\r\n              <i>\r\n                <b style=\"--value:71%\"><\/b>\r\n              <\/i>\r\n\r\n              <em>\r\n                71%\r\n              <\/em>\r\n            <\/div>\r\n\r\n          <\/article>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n\r\n    <!-- =====================================================\r\n         CAPABILITIES\r\n    ====================================================== -->\r\n\r\n    <div\r\n      class=\"pp-ops__capabilities\"\r\n      role=\"list\"\r\n    >\r\n\r\n\r\n      <!-- MONITORING -->\r\n\r\n      <article\r\n        class=\"\r\n          pp-capability\r\n          pp-ops-reveal\r\n        \"\r\n        role=\"listitem\"\r\n      >\r\n\r\n        <span\r\n          class=\"pp-capability__icon\"\r\n          aria-hidden=\"true\"\r\n        >\r\n\r\n          <svg viewBox=\"0 0 28 28\">\r\n            <circle cx=\"14\" cy=\"14\" r=\"9\"\/>\r\n            <path d=\"M14 9v5l3.5 2\"\/>\r\n          <\/svg>\r\n\r\n        <\/span>\r\n\r\n\r\n        <h3>\r\n          Continuous Monitoring\r\n        <\/h3>\r\n\r\n\r\n        <p>\r\n          Monitor AI applications\r\n          in production.\r\n        <\/p>\r\n\r\n      <\/article>\r\n\r\n\r\n\r\n      <!-- MODEL TUNING -->\r\n\r\n      <article\r\n        class=\"\r\n          pp-capability\r\n          pp-ops-reveal\r\n        \"\r\n        role=\"listitem\"\r\n      >\r\n\r\n        <span\r\n          class=\"pp-capability__icon\"\r\n          aria-hidden=\"true\"\r\n        >\r\n\r\n          <svg viewBox=\"0 0 28 28\">\r\n            <path d=\"M22 10a9 9 0 1 0 1 7M22 5v5h-5\"\/>\r\n            <path d=\"M14 9v5l4 2\"\/>\r\n          <\/svg>\r\n\r\n        <\/span>\r\n\r\n\r\n        <h3>\r\n          Model Updates &amp; Tuning\r\n        <\/h3>\r\n\r\n\r\n        <p>\r\n          Retraining and performance\r\n          optimisation.\r\n        <\/p>\r\n\r\n      <\/article>\r\n\r\n\r\n\r\n      <!-- CLOUD DEVOPS -->\r\n\r\n      <article\r\n        class=\"\r\n          pp-capability\r\n          pp-ops-reveal\r\n        \"\r\n        role=\"listitem\"\r\n      >\r\n\r\n        <span\r\n          class=\"pp-capability__icon\"\r\n          aria-hidden=\"true\"\r\n        >\r\n\r\n          <svg viewBox=\"0 0 28 28\">\r\n            <path d=\"M8 21h12a5 5 0 0 0 .8-9.9A7 7 0 0 0 7 9.5 5.5 5.5 0 0 0 8 21Z\"\/>\r\n          <\/svg>\r\n\r\n        <\/span>\r\n\r\n\r\n        <h3>\r\n          Cloud &amp; DevOps Support\r\n        <\/h3>\r\n\r\n\r\n        <p>\r\n          Maintain reliable and\r\n          scalable infrastructure.\r\n        <\/p>\r\n\r\n      <\/article>\r\n\r\n\r\n\r\n      <!-- EMBEDDED ENGINEER -->\r\n\r\n      <article\r\n        class=\"\r\n          pp-capability\r\n          pp-ops-reveal\r\n        \"\r\n        role=\"listitem\"\r\n      >\r\n\r\n        <span\r\n          class=\"pp-capability__icon\"\r\n          aria-hidden=\"true\"\r\n        >\r\n\r\n          <svg viewBox=\"0 0 28 28\">\r\n            <circle cx=\"14\" cy=\"9\" r=\"4\"\/>\r\n            <path d=\"M6 24c.6-6 3.3-9 8-9s7.4 3 8 9\"\/>\r\n            <path d=\"m21 6 1-2m2 5 2-.5\"\/>\r\n          <\/svg>\r\n\r\n        <\/span>\r\n\r\n\r\n        <h3>\r\n          Embedded AI Engineer\r\n        <\/h3>\r\n\r\n\r\n        <p>\r\n          Specialist support to improve\r\n          your AI continuously.\r\n        <\/p>\r\n\r\n      <\/article>\r\n\r\n    <\/div>\r\n\r\n\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n\r\n<script>\r\n(() => {\r\n\r\n  const section =\r\n    document.getElementById(\r\n      \"managed-ai-operations\"\r\n    );\r\n\r\n\r\n  if (\r\n    !section ||\r\n    section.dataset.ppOpsReady ===\r\n      \"true\"\r\n  ) {\r\n    return;\r\n  }\r\n\r\n\r\n  section.dataset.ppOpsReady =\r\n    \"true\";\r\n\r\n\r\n  \/* =====================================================\r\n     REVEAL ITEMS\r\n  ===================================================== *\/\r\n\r\n  const revealItems =\r\n    section.querySelectorAll(\r\n      \".pp-ops-reveal\"\r\n    );\r\n\r\n\r\n  revealItems.forEach(\r\n    (\r\n      item,\r\n      index\r\n    ) => {\r\n\r\n      item.style.transitionDelay =\r\n        `${\r\n          Math.min(\r\n            index * 100,\r\n            420\r\n          )\r\n        }ms`;\r\n\r\n    }\r\n  );\r\n\r\n\r\n  \/* =====================================================\r\n     ACTIVATE\r\n  ===================================================== *\/\r\n\r\n  const activate = () => {\r\n\r\n    section.classList.add(\r\n      \"pp-ops-active\"\r\n    );\r\n\r\n\r\n    revealItems.forEach(\r\n      item =>\r\n        item.classList.add(\r\n          \"is-visible\"\r\n        )\r\n    );\r\n\r\n  };\r\n\r\n\r\n  \/* =====================================================\r\n     FALLBACK\r\n  ===================================================== *\/\r\n\r\n  if (\r\n    !(\r\n      \"IntersectionObserver\"\r\n      in window\r\n    )\r\n  ) {\r\n\r\n    activate();\r\n\r\n    return;\r\n\r\n  }\r\n\r\n\r\n  \/* =====================================================\r\n     START ON VIEW\r\n  ===================================================== *\/\r\n\r\n  const observer =\r\n    new IntersectionObserver(\r\n      entries => {\r\n\r\n        const entry =\r\n          entries[0];\r\n\r\n\r\n        if (\r\n          !entry ||\r\n          !entry.isIntersecting\r\n        ) {\r\n          return;\r\n        }\r\n\r\n\r\n        activate();\r\n\r\n\r\n        observer.disconnect();\r\n\r\n      },\r\n      {\r\n        threshold: 0.15,\r\n\r\n        rootMargin:\r\n          \"0px 0px -6% 0px\"\r\n      }\r\n    );\r\n\r\n\r\n  observer.observe(\r\n    section\r\n  );\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-06fc6e1 elementor-widget elementor-widget-html\" data-id=\"06fc6e1\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\r\n  PIXEL PINE \u2014 WHY PIXEL PINE\r\n  Desktop radial layout\r\n  Tablet 2x2 layout\r\n  Mobile vertical timeline\r\n\r\n  Replace:\r\n  PASTE_PIXEL_PINE_LOGO_URL_HERE\r\n========================================================= -->\r\n\r\n<style>\r\n\r\n\/* =========================================================\r\n   ELEMENTOR RESET\r\n========================================================= *\/\r\n\r\n.elementor-widget-html:has(#why-pixel-pine),\r\n.elementor-widget-html:has(#why-pixel-pine) > .elementor-widget-container {\r\n  width: 100%;\r\n  max-width: none !important;\r\n  margin: 0 !important;\r\n  padding: 0 !important;\r\n}\r\n\r\n.e-con:has(#why-pixel-pine) {\r\n  --gap: 0px !important;\r\n  gap: 0 !important;\r\n  row-gap: 0 !important;\r\n}\r\n\r\n#why-pixel-pine,\r\n#why-pixel-pine * {\r\n  box-sizing: border-box;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SECTION FOUNDATION\r\n========================================================= *\/\r\n\r\n#why-pixel-pine {\r\n  --pp-mint: #84E6D3;\r\n  --pp-mint-light: #A1F0E1;\r\n\r\n  --pp-indigo: #7E79D7;\r\n  --pp-indigo-light: #9691E8;\r\n\r\n  --pp-purple: #AF83E8;\r\n  --pp-purple-light: #C39AF0;\r\n\r\n  --pp-bg: #070C17;\r\n  --pp-panel: #0B1323;\r\n\r\n  --pp-white: #F7FAFC;\r\n  --pp-muted: #AFBACB;\r\n  --pp-dim: #738096;\r\n\r\n  --pp-line: rgba(126, 121, 215, 0.18);\r\n\r\n  position: relative;\r\n\r\n  left: 50%;\r\n\r\n  width: 100vw;\r\n  max-width: none !important;\r\n\r\n  margin: 0 !important;\r\n\r\n  transform: translateX(-50%);\r\n\r\n  overflow: hidden;\r\n  isolation: isolate;\r\n\r\n  background: var(--pp-bg);\r\n\r\n  color: var(--pp-white);\r\n\r\n  font-family:\r\n    Manrope,\r\n    Inter,\r\n    \"Segoe UI\",\r\n    Arial,\r\n    sans-serif;\r\n\r\n  scroll-margin-top: 90px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CONTAINER\r\n========================================================= *\/\r\n\r\n#why-pixel-pine .pp-why__inner {\r\n  width:\r\n    min(\r\n      1360px,\r\n      calc(100% - 80px)\r\n    );\r\n\r\n  margin: 0 auto;\r\n\r\n  padding:\r\n    112px\r\n    0\r\n    94px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HEADER\r\n========================================================= *\/\r\n\r\n#why-pixel-pine .pp-why__intro {\r\n  max-width: 1050px;\r\n\r\n  margin:\r\n    0\r\n    auto\r\n    66px;\r\n\r\n  text-align: center;\r\n}\r\n\r\n\r\n#why-pixel-pine .pp-why__eyebrow {\r\n  display: inline-flex;\r\n\r\n  align-items: center;\r\n  justify-content: center;\r\n\r\n  gap: 14px;\r\n\r\n  margin:\r\n    0\r\n    0\r\n    24px;\r\n\r\n  color: var(--pp-mint);\r\n\r\n  font-size:\r\n    clamp(\r\n      10px,\r\n      0.9vw,\r\n      13px\r\n    );\r\n\r\n  font-weight: 760;\r\n\r\n  line-height: 1.4;\r\n\r\n  letter-spacing: 0.31em;\r\n\r\n  text-transform: uppercase;\r\n}\r\n\r\n\r\n#why-pixel-pine .pp-why__eyebrow::before,\r\n#why-pixel-pine .pp-why__eyebrow::after {\r\n  content: \"\";\r\n\r\n  width: 50px;\r\n  height: 1px;\r\n}\r\n\r\n\r\n#why-pixel-pine .pp-why__eyebrow::before {\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      transparent,\r\n      var(--pp-mint)\r\n    );\r\n}\r\n\r\n\r\n#why-pixel-pine .pp-why__eyebrow::after {\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      var(--pp-purple),\r\n      transparent\r\n    );\r\n}\r\n\r\n\r\n#why-pixel-pine .pp-why__title {\r\n  max-width: 940px;\r\n\r\n  margin: 0 auto;\r\n\r\n  color: var(--pp-white);\r\n\r\n  font-size:\r\n    clamp(\r\n      48px,\r\n      4.4vw,\r\n      68px\r\n    );\r\n\r\n  font-weight: 770;\r\n\r\n  line-height: 1.03;\r\n\r\n  letter-spacing: -0.054em;\r\n\r\n  text-wrap: balance;\r\n}\r\n\r\n\r\n#why-pixel-pine .pp-why__title-gradient {\r\n  color: transparent;\r\n\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      var(--pp-mint),\r\n      var(--pp-indigo) 52%,\r\n      var(--pp-purple)\r\n    );\r\n\r\n  -webkit-background-clip: text;\r\n  background-clip: text;\r\n}\r\n\r\n\r\n#why-pixel-pine .pp-why__description {\r\n  max-width: 760px;\r\n\r\n  margin:\r\n    26px\r\n    auto\r\n    0;\r\n\r\n  color: var(--pp-muted);\r\n\r\n  font-size:\r\n    clamp(\r\n      16px,\r\n      1.2vw,\r\n      19px\r\n    );\r\n\r\n  font-weight: 440;\r\n\r\n  line-height: 1.62;\r\n\r\n  letter-spacing: -0.015em;\r\n\r\n  text-wrap: balance;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   DESKTOP FEATURE NETWORK\r\n========================================================= *\/\r\n\r\n#why-pixel-pine .pp-why__network {\r\n  position: relative;\r\n\r\n  display: grid;\r\n\r\n  grid-template-columns:\r\n    minmax(0, 1fr)\r\n    310px\r\n    minmax(0, 1fr);\r\n\r\n  grid-template-rows:\r\n    repeat(\r\n      2,\r\n      minmax(190px, auto)\r\n    );\r\n\r\n  align-items: center;\r\n\r\n  column-gap: 70px;\r\n  row-gap: 36px;\r\n\r\n  min-height: 500px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CONNECTION SVG\r\n========================================================= *\/\r\n\r\n#why-pixel-pine .pp-why__connections {\r\n  position: absolute;\r\n\r\n  z-index: 1;\r\n\r\n  inset: 0;\r\n\r\n  width: 100%;\r\n  height: 100%;\r\n\r\n  overflow: visible;\r\n\r\n  pointer-events: none;\r\n}\r\n\r\n\r\n#why-pixel-pine .pp-why__connection {\r\n  fill: none;\r\n\r\n  stroke-width: 1.6;\r\n\r\n  stroke-linecap: round;\r\n  stroke-linejoin: round;\r\n\r\n  stroke-dasharray: 500;\r\n  stroke-dashoffset: 500;\r\n}\r\n\r\n\r\n#why-pixel-pine .pp-why__connection--mint {\r\n  stroke: url(#ppWhyMintLine);\r\n\r\n  filter:\r\n    drop-shadow(\r\n      0\r\n      0\r\n      5px\r\n      rgba(132, 230, 211, 0.46)\r\n    );\r\n}\r\n\r\n\r\n#why-pixel-pine .pp-why__connection--purple {\r\n  stroke: url(#ppWhyPurpleLine);\r\n\r\n  filter:\r\n    drop-shadow(\r\n      0\r\n      0\r\n      5px\r\n      rgba(175, 131, 232, 0.48)\r\n    );\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CENTER BRAND CORE\r\n========================================================= *\/\r\n\r\n#why-pixel-pine .pp-why__core {\r\n  position: relative;\r\n\r\n  z-index: 4;\r\n\r\n  grid-column: 2;\r\n  grid-row: 1 \/ 3;\r\n\r\n  align-self: center;\r\n  justify-self: center;\r\n\r\n  display: flex;\r\n\r\n  flex-direction: column;\r\n\r\n  align-items: center;\r\n  justify-content: center;\r\n\r\n  width: 270px;\r\n  height: 270px;\r\n\r\n  opacity: 0;\r\n\r\n  transform:\r\n    scale(0.76);\r\n\r\n  filter:\r\n    blur(5px);\r\n}\r\n\r\n\r\n#why-pixel-pine .pp-why__core::before,\r\n#why-pixel-pine .pp-why__core::after {\r\n  content: \"\";\r\n\r\n  position: absolute;\r\n\r\n  top: 50%;\r\n  left: 50%;\r\n\r\n  border-radius: 50%;\r\n\r\n  transform:\r\n    translate(\r\n      -50%,\r\n      -50%\r\n    );\r\n\r\n  pointer-events: none;\r\n}\r\n\r\n\r\n#why-pixel-pine .pp-why__core::before {\r\n  width: 215px;\r\n  height: 215px;\r\n\r\n  border:\r\n    1px\r\n    solid\r\n    rgba(126, 121, 215, 0.13);\r\n}\r\n\r\n\r\n#why-pixel-pine .pp-why__core::after {\r\n  width: 165px;\r\n  height: 165px;\r\n\r\n  border:\r\n    1px\r\n    solid\r\n    rgba(132, 230, 211, 0.11);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   LOGO\r\n========================================================= *\/\r\n\r\n#why-pixel-pine .pp-why__logo-wrap {\r\n  position: relative;\r\n\r\n  z-index: 3;\r\n\r\n  display: grid;\r\n\r\n  place-items: center;\r\n\r\n  width: 160px;\r\n  height: 130px;\r\n}\r\n\r\n\r\n#why-pixel-pine .pp-why__logo-glow {\r\n  position: absolute;\r\n\r\n  top: 50%;\r\n  left: 50%;\r\n\r\n  width: 150px;\r\n  height: 110px;\r\n\r\n  transform:\r\n    translate(\r\n      -50%,\r\n      -50%\r\n    );\r\n\r\n  border-radius: 50%;\r\n\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      rgba(132, 230, 211, 0.18),\r\n      rgba(126, 121, 215, 0.16),\r\n      rgba(175, 131, 232, 0.18)\r\n    );\r\n\r\n  filter: blur(36px);\r\n\r\n  opacity: 0.65;\r\n}\r\n\r\n\r\n#why-pixel-pine .pp-why__logo {\r\n  position: relative;\r\n\r\n  z-index: 2;\r\n\r\n  display: block;\r\n\r\n  width: 135px;\r\n  max-width: 100%;\r\n\r\n  height: auto;\r\n\r\n  object-fit: contain;\r\n\r\n  filter:\r\n    drop-shadow(\r\n      0\r\n      0\r\n      14px\r\n      rgba(126, 121, 215, 0.20)\r\n    );\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CORE TEXT\r\n========================================================= *\/\r\n\r\n#why-pixel-pine .pp-why__core-caption {\r\n  position: relative;\r\n\r\n  z-index: 3;\r\n\r\n  margin-top: 25px;\r\n\r\n  color: #8490A6;\r\n\r\n  font-size: 10px;\r\n\r\n  font-weight: 650;\r\n\r\n  line-height: 1.5;\r\n\r\n  letter-spacing: 0.22em;\r\n\r\n  text-transform: uppercase;\r\n\r\n  white-space: nowrap;\r\n}\r\n\r\n\r\n#why-pixel-pine .pp-why__core-caption span {\r\n  color: var(--pp-indigo-light);\r\n\r\n  margin:\r\n    0\r\n    8px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   FEATURE CARD BASE\r\n========================================================= *\/\r\n\r\n#why-pixel-pine .pp-why-card {\r\n  --card-color: var(--pp-indigo);\r\n\r\n  position: relative;\r\n\r\n  z-index: 3;\r\n\r\n  display: grid;\r\n\r\n  grid-template-columns:\r\n    54px\r\n    minmax(0, 1fr);\r\n\r\n  gap: 20px;\r\n\r\n  align-items: start;\r\n\r\n  min-height: 185px;\r\n\r\n  padding:\r\n    29px\r\n    30px;\r\n\r\n  overflow: hidden;\r\n\r\n  border:\r\n    1px\r\n    solid\r\n    rgba(126, 121, 215, 0.24);\r\n\r\n  border-radius: 17px;\r\n\r\n  background:\r\n    rgba(10, 18, 33, 0.88);\r\n\r\n  opacity: 0;\r\n\r\n  transform:\r\n    translateY(22px)\r\n    scale(0.98);\r\n\r\n  transition:\r\n    transform\r\n    320ms\r\n    cubic-bezier(.22, 1, .36, 1),\r\n\r\n    border-color\r\n    280ms\r\n    ease,\r\n\r\n    box-shadow\r\n    280ms\r\n    ease;\r\n}\r\n\r\n\r\n#why-pixel-pine .pp-why-card--one {\r\n  --card-color: var(--pp-mint);\r\n\r\n  grid-column: 1;\r\n  grid-row: 1;\r\n}\r\n\r\n\r\n#why-pixel-pine .pp-why-card--two {\r\n  --card-color: var(--pp-indigo-light);\r\n\r\n  grid-column: 3;\r\n  grid-row: 1;\r\n}\r\n\r\n\r\n#why-pixel-pine .pp-why-card--three {\r\n  --card-color: #72D2DF;\r\n\r\n  grid-column: 1;\r\n  grid-row: 2;\r\n}\r\n\r\n\r\n#why-pixel-pine .pp-why-card--four {\r\n  --card-color: var(--pp-purple);\r\n\r\n  grid-column: 3;\r\n  grid-row: 2;\r\n}\r\n\r\n\r\n\/* subtle gradient side border *\/\r\n\r\n#why-pixel-pine .pp-why-card::after {\r\n  content: \"\";\r\n\r\n  position: absolute;\r\n\r\n  top: 18px;\r\n  bottom: 18px;\r\n\r\n  width: 1px;\r\n\r\n  background:\r\n    var(--card-color);\r\n\r\n  box-shadow:\r\n    0\r\n    0\r\n    10px\r\n    var(--card-color);\r\n\r\n  opacity: 0.35;\r\n\r\n  transform:\r\n    scaleY(0);\r\n\r\n  transform-origin:\r\n    center top;\r\n\r\n  transition:\r\n    transform\r\n    400ms\r\n    cubic-bezier(.22, 1, .36, 1);\r\n}\r\n\r\n\r\n#why-pixel-pine\r\n.pp-why-card:nth-of-type(1)::after,\r\n#why-pixel-pine\r\n.pp-why-card:nth-of-type(3)::after {\r\n  right: 0;\r\n}\r\n\r\n\r\n#why-pixel-pine\r\n.pp-why-card:nth-of-type(2)::after,\r\n#why-pixel-pine\r\n.pp-why-card:nth-of-type(4)::after {\r\n  left: 0;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CARD NUMBER\r\n========================================================= *\/\r\n\r\n#why-pixel-pine .pp-why-card__number {\r\n  position: absolute;\r\n\r\n  top: 15px;\r\n  right: 17px;\r\n\r\n  color:\r\n    var(--card-color);\r\n\r\n  font-size: 11px;\r\n\r\n  font-weight: 750;\r\n\r\n  letter-spacing: 0.18em;\r\n\r\n  opacity: 0.82;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   ICON\r\n========================================================= *\/\r\n\r\n#why-pixel-pine .pp-why-card__icon {\r\n  display: grid;\r\n\r\n  place-items: center;\r\n\r\n  width: 52px;\r\n  height: 52px;\r\n\r\n  border:\r\n    1px\r\n    solid\r\n    rgba(126, 121, 215, 0.20);\r\n\r\n  border-radius: 12px;\r\n\r\n  color:\r\n    var(--card-color);\r\n\r\n  background:\r\n    rgba(126, 121, 215, 0.055);\r\n\r\n  box-shadow:\r\n    inset\r\n    0\r\n    0\r\n    20px\r\n    rgba(126, 121, 215, 0.04);\r\n}\r\n\r\n\r\n#why-pixel-pine .pp-why-card__icon svg {\r\n  width: 28px;\r\n  height: 28px;\r\n\r\n  fill: none;\r\n\r\n  stroke: currentColor;\r\n\r\n  stroke-width: 1.6;\r\n\r\n  stroke-linecap: round;\r\n  stroke-linejoin: round;\r\n\r\n  filter:\r\n    drop-shadow(\r\n      0\r\n      0\r\n      6px\r\n      currentColor\r\n    );\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CARD COPY\r\n========================================================= *\/\r\n\r\n#why-pixel-pine .pp-why-card__copy {\r\n  min-width: 0;\r\n\r\n  padding-top: 5px;\r\n}\r\n\r\n\r\n#why-pixel-pine .pp-why-card h3 {\r\n  margin:\r\n    0\r\n    0\r\n    10px;\r\n\r\n  color: var(--pp-white);\r\n\r\n  font-size:\r\n    clamp(\r\n      19px,\r\n      1.4vw,\r\n      23px\r\n    );\r\n\r\n  font-weight: 720;\r\n\r\n  line-height: 1.22;\r\n\r\n  letter-spacing: -0.025em;\r\n}\r\n\r\n\r\n#why-pixel-pine .pp-why-card p {\r\n  max-width: 330px;\r\n\r\n  margin: 0;\r\n\r\n  color: var(--pp-muted);\r\n\r\n  font-size: 14px;\r\n\r\n  font-weight: 430;\r\n\r\n  line-height: 1.55;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CARD HOVER\r\n========================================================= *\/\r\n\r\n#why-pixel-pine .pp-why-card:hover {\r\n  transform:\r\n    translateY(-5px);\r\n\r\n  border-color:\r\n    var(--card-color);\r\n\r\n  box-shadow:\r\n    0\r\n    18px\r\n    45px\r\n    rgba(0, 0, 0, 0.19);\r\n}\r\n\r\n\r\n#why-pixel-pine .pp-why-card:hover::after {\r\n  transform:\r\n    scaleY(1);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   BOTTOM STATEMENT\r\n========================================================= *\/\r\n\r\n#why-pixel-pine .pp-why__footer {\r\n  display: flex;\r\n\r\n  align-items: center;\r\n  justify-content: center;\r\n\r\n  gap: 16px;\r\n\r\n  margin-top: 66px;\r\n\r\n  color: #748096;\r\n\r\n  font-size: 10px;\r\n\r\n  font-weight: 650;\r\n\r\n  line-height: 1.4;\r\n\r\n  letter-spacing: 0.25em;\r\n\r\n  text-align: center;\r\n\r\n  text-transform: uppercase;\r\n\r\n  opacity: 0;\r\n\r\n  transform:\r\n    translateY(12px);\r\n}\r\n\r\n\r\n#why-pixel-pine .pp-why__footer::before,\r\n#why-pixel-pine .pp-why__footer::after {\r\n  content: \"\";\r\n\r\n  width: 145px;\r\n  height: 1px;\r\n}\r\n\r\n\r\n#why-pixel-pine .pp-why__footer::before {\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      transparent,\r\n      var(--pp-mint)\r\n    );\r\n}\r\n\r\n\r\n#why-pixel-pine .pp-why__footer::after {\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      var(--pp-purple),\r\n      transparent\r\n    );\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   GENERAL INTRO REVEAL\r\n========================================================= *\/\r\n\r\n#why-pixel-pine .pp-why-reveal {\r\n  opacity: 0;\r\n\r\n  transform:\r\n    translateY(24px);\r\n\r\n  filter: blur(4px);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   ACTIVE INTRO\r\n========================================================= *\/\r\n\r\n#why-pixel-pine.pp-why-active\r\n.pp-why-reveal {\r\n  animation:\r\n    ppWhyReveal\r\n    800ms\r\n    cubic-bezier(.22, 1, .36, 1)\r\n    forwards;\r\n}\r\n\r\n\r\n@keyframes ppWhyReveal {\r\n\r\n  to {\r\n    opacity: 1;\r\n\r\n    transform:\r\n      translateY(0);\r\n\r\n    filter: blur(0);\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   LOGO CORE APPEAR\r\n========================================================= *\/\r\n\r\n#why-pixel-pine.pp-why-active\r\n.pp-why__core {\r\n  animation:\r\n    ppWhyCoreIn\r\n    900ms\r\n    cubic-bezier(.22, 1, .36, 1)\r\n    0.45s\r\n    forwards;\r\n}\r\n\r\n\r\n@keyframes ppWhyCoreIn {\r\n\r\n  0% {\r\n    opacity: 0;\r\n\r\n    transform:\r\n      scale(0.72);\r\n\r\n    filter:\r\n      blur(7px);\r\n  }\r\n\r\n  72% {\r\n    opacity: 1;\r\n\r\n    transform:\r\n      scale(1.05);\r\n\r\n    filter:\r\n      blur(0);\r\n  }\r\n\r\n  100% {\r\n    opacity: 1;\r\n\r\n    transform:\r\n      scale(1);\r\n\r\n    filter:\r\n      blur(0);\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* subtle logo float *\/\r\n\r\n#why-pixel-pine.pp-why-active\r\n.pp-why__logo-wrap {\r\n  animation:\r\n    ppWhyLogoFloat\r\n    4.8s\r\n    ease-in-out\r\n    1.7s\r\n    infinite;\r\n}\r\n\r\n\r\n@keyframes ppWhyLogoFloat {\r\n\r\n  0%,\r\n  100% {\r\n    transform:\r\n      translateY(-3px);\r\n  }\r\n\r\n  50% {\r\n    transform:\r\n      translateY(5px);\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* glow pulse *\/\r\n\r\n#why-pixel-pine.pp-why-active\r\n.pp-why__logo-glow {\r\n  animation:\r\n    ppWhyGlow\r\n    3.2s\r\n    ease-in-out\r\n    1.4s\r\n    infinite;\r\n}\r\n\r\n\r\n@keyframes ppWhyGlow {\r\n\r\n  0%,\r\n  100% {\r\n    opacity: 0.38;\r\n\r\n    transform:\r\n      translate(\r\n        -50%,\r\n        -50%\r\n      )\r\n      scale(0.92);\r\n  }\r\n\r\n  50% {\r\n    opacity: 0.76;\r\n\r\n    transform:\r\n      translate(\r\n        -50%,\r\n        -50%\r\n      )\r\n      scale(1.08);\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CONNECTION LINES\r\n========================================================= *\/\r\n\r\n#why-pixel-pine.pp-why-active\r\n.pp-why__connection {\r\n  animation:\r\n    ppWhyDrawConnection\r\n    950ms\r\n    cubic-bezier(.22, 1, .36, 1)\r\n    forwards;\r\n}\r\n\r\n\r\n#why-pixel-pine.pp-why-active\r\n.pp-why__connection:nth-of-type(1) {\r\n  animation-delay: 0.90s;\r\n}\r\n\r\n#why-pixel-pine.pp-why-active\r\n.pp-why__connection:nth-of-type(2) {\r\n  animation-delay: 1.04s;\r\n}\r\n\r\n#why-pixel-pine.pp-why-active\r\n.pp-why__connection:nth-of-type(3) {\r\n  animation-delay: 1.18s;\r\n}\r\n\r\n#why-pixel-pine.pp-why-active\r\n.pp-why__connection:nth-of-type(4) {\r\n  animation-delay: 1.32s;\r\n}\r\n\r\n\r\n@keyframes ppWhyDrawConnection {\r\n\r\n  to {\r\n    stroke-dashoffset: 0;\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CARD REVEALS\r\n========================================================= *\/\r\n\r\n#why-pixel-pine.pp-why-active\r\n.pp-why-card {\r\n  animation:\r\n    ppWhyCardIn\r\n    720ms\r\n    cubic-bezier(.22, 1, .36, 1)\r\n    forwards;\r\n}\r\n\r\n\r\n#why-pixel-pine.pp-why-active\r\n.pp-why-card--one {\r\n  animation-delay: 1.20s;\r\n}\r\n\r\n#why-pixel-pine.pp-why-active\r\n.pp-why-card--two {\r\n  animation-delay: 1.38s;\r\n}\r\n\r\n#why-pixel-pine.pp-why-active\r\n.pp-why-card--three {\r\n  animation-delay: 1.56s;\r\n}\r\n\r\n#why-pixel-pine.pp-why-active\r\n.pp-why-card--four {\r\n  animation-delay: 1.74s;\r\n}\r\n\r\n\r\n@keyframes ppWhyCardIn {\r\n\r\n  to {\r\n    opacity: 1;\r\n\r\n    transform:\r\n      translateY(0)\r\n      scale(1);\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   FOOTER REVEAL\r\n========================================================= *\/\r\n\r\n#why-pixel-pine.pp-why-active\r\n.pp-why__footer {\r\n  animation:\r\n    ppWhyFooterIn\r\n    700ms\r\n    ease\r\n    2.05s\r\n    forwards;\r\n}\r\n\r\n\r\n@keyframes ppWhyFooterIn {\r\n\r\n  to {\r\n    opacity: 1;\r\n\r\n    transform:\r\n      translateY(0);\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TABLET\r\n========================================================= *\/\r\n\r\n@media (max-width: 1099px) {\r\n\r\n  #why-pixel-pine .pp-why__inner {\r\n    width:\r\n      min(\r\n        100% - 64px,\r\n        1000px\r\n      );\r\n\r\n    padding:\r\n      96px\r\n      0\r\n      84px;\r\n  }\r\n\r\n\r\n  #why-pixel-pine .pp-why__intro {\r\n    margin-bottom: 50px;\r\n  }\r\n\r\n\r\n  #why-pixel-pine .pp-why__network {\r\n    display: grid;\r\n\r\n    grid-template-columns:\r\n      repeat(\r\n        2,\r\n        minmax(0, 1fr)\r\n      );\r\n\r\n    grid-template-rows:\r\n      auto\r\n      auto\r\n      auto;\r\n\r\n    gap: 18px;\r\n\r\n    min-height: 0;\r\n  }\r\n\r\n\r\n  \/* Core at top *\/\r\n\r\n  #why-pixel-pine .pp-why__core {\r\n    grid-column:\r\n      1 \/ -1;\r\n\r\n    grid-row: 1;\r\n\r\n    width: 220px;\r\n    height: 200px;\r\n\r\n    margin:\r\n      0\r\n      auto\r\n      24px;\r\n  }\r\n\r\n\r\n  #why-pixel-pine .pp-why__logo-wrap {\r\n    width: 145px;\r\n    height: 110px;\r\n  }\r\n\r\n\r\n  #why-pixel-pine .pp-why__logo {\r\n    width: 118px;\r\n  }\r\n\r\n\r\n  #why-pixel-pine .pp-why__core::before {\r\n    width: 180px;\r\n    height: 180px;\r\n  }\r\n\r\n\r\n  #why-pixel-pine .pp-why__core::after {\r\n    width: 135px;\r\n    height: 135px;\r\n  }\r\n\r\n\r\n  #why-pixel-pine .pp-why__core-caption {\r\n    margin-top: 12px;\r\n  }\r\n\r\n\r\n  \/* Cards 2 x 2 *\/\r\n\r\n  #why-pixel-pine .pp-why-card--one {\r\n    grid-column: 1;\r\n    grid-row: 2;\r\n  }\r\n\r\n\r\n  #why-pixel-pine .pp-why-card--two {\r\n    grid-column: 2;\r\n    grid-row: 2;\r\n  }\r\n\r\n\r\n  #why-pixel-pine .pp-why-card--three {\r\n    grid-column: 1;\r\n    grid-row: 3;\r\n  }\r\n\r\n\r\n  #why-pixel-pine .pp-why-card--four {\r\n    grid-column: 2;\r\n    grid-row: 3;\r\n  }\r\n\r\n\r\n  \/* Hide desktop connector SVG *\/\r\n\r\n  #why-pixel-pine .pp-why__connections {\r\n    display: none;\r\n  }\r\n\r\n\r\n  #why-pixel-pine .pp-why-card {\r\n    min-height: 190px;\r\n  }\r\n\r\n\r\n  \/* subtle connectors below logo *\/\r\n\r\n  #why-pixel-pine .pp-why__core::after {\r\n    box-shadow:\r\n      0\r\n      0\r\n      35px\r\n      rgba(126, 121, 215, 0.08);\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MOBILE\r\n========================================================= *\/\r\n\r\n@media (max-width: 767px) {\r\n\r\n  #why-pixel-pine {\r\n    left: auto;\r\n\r\n    width: 100%;\r\n\r\n    transform: none;\r\n  }\r\n\r\n\r\n  #why-pixel-pine .pp-why__inner {\r\n    width:\r\n      min(\r\n        100% - 36px,\r\n        590px\r\n      );\r\n\r\n    padding:\r\n      76px\r\n      0\r\n      70px;\r\n  }\r\n\r\n\r\n  #why-pixel-pine .pp-why__intro {\r\n    margin-bottom: 38px;\r\n  }\r\n\r\n\r\n  #why-pixel-pine .pp-why__eyebrow {\r\n    gap: 9px;\r\n\r\n    margin-bottom: 20px;\r\n\r\n    font-size: 9px;\r\n\r\n    letter-spacing: 0.21em;\r\n  }\r\n\r\n\r\n  #why-pixel-pine .pp-why__eyebrow::before,\r\n  #why-pixel-pine .pp-why__eyebrow::after {\r\n    width: 27px;\r\n  }\r\n\r\n\r\n  #why-pixel-pine .pp-why__title {\r\n    max-width: 560px;\r\n\r\n    font-size:\r\n      clamp(\r\n        40px,\r\n        11vw,\r\n        53px\r\n      );\r\n\r\n    line-height: 1.03;\r\n  }\r\n\r\n\r\n  #why-pixel-pine .pp-why__description {\r\n    max-width: 480px;\r\n\r\n    margin-top: 22px;\r\n\r\n    font-size: 15.5px;\r\n  }\r\n\r\n\r\n  \/* =====================================================\r\n     MOBILE TIMELINE\r\n  ===================================================== *\/\r\n\r\n  #why-pixel-pine .pp-why__network {\r\n    position: relative;\r\n\r\n    display: block;\r\n\r\n    padding-top: 0;\r\n  }\r\n\r\n\r\n  \/* core *\/\r\n\r\n  #why-pixel-pine .pp-why__core {\r\n    display: flex;\r\n\r\n    width: 180px;\r\n    height: 155px;\r\n\r\n    margin:\r\n      0\r\n      auto\r\n      35px;\r\n  }\r\n\r\n\r\n  #why-pixel-pine .pp-why__logo-wrap {\r\n    width: 130px;\r\n    height: 95px;\r\n  }\r\n\r\n\r\n  #why-pixel-pine .pp-why__logo {\r\n    width: 105px;\r\n  }\r\n\r\n\r\n  #why-pixel-pine .pp-why__core::before {\r\n    width: 145px;\r\n    height: 145px;\r\n  }\r\n\r\n\r\n  #why-pixel-pine .pp-why__core::after {\r\n    width: 108px;\r\n    height: 108px;\r\n  }\r\n\r\n\r\n  #why-pixel-pine .pp-why__core-caption {\r\n    display: none;\r\n  }\r\n\r\n\r\n  \/*\r\n    Vertical gradient rail\r\n  *\/\r\n\r\n  #why-pixel-pine .pp-why__network::before {\r\n    content: \"\";\r\n\r\n    position: absolute;\r\n\r\n    top: 158px;\r\n    bottom: 25px;\r\n    left: 28px;\r\n\r\n    width: 1px;\r\n\r\n    background:\r\n      linear-gradient(\r\n        180deg,\r\n        var(--pp-mint) 0%,\r\n        #73D0DF 30%,\r\n        var(--pp-indigo) 60%,\r\n        var(--pp-purple) 100%\r\n      );\r\n\r\n    box-shadow:\r\n      0\r\n      0\r\n      10px\r\n      rgba(126, 121, 215, 0.26);\r\n\r\n    transform:\r\n      scaleY(0);\r\n\r\n    transform-origin:\r\n      center top;\r\n  }\r\n\r\n\r\n  #why-pixel-pine.pp-why-active\r\n  .pp-why__network::before {\r\n    animation:\r\n      ppWhyMobileLine\r\n      1.7s\r\n      cubic-bezier(.22, 1, .36, 1)\r\n      0.85s\r\n      forwards;\r\n  }\r\n\r\n\r\n  @keyframes ppWhyMobileLine {\r\n\r\n    to {\r\n      transform:\r\n        scaleY(1);\r\n    }\r\n\r\n  }\r\n\r\n\r\n  \/* Mobile cards become rows *\/\r\n\r\n  #why-pixel-pine .pp-why-card {\r\n    position: relative;\r\n\r\n    display: grid;\r\n\r\n    grid-template-columns:\r\n      42px\r\n      minmax(0, 1fr);\r\n\r\n    gap: 16px;\r\n\r\n    min-height: 0;\r\n\r\n    margin: 0;\r\n\r\n    padding:\r\n      28px\r\n      0\r\n      31px\r\n      0;\r\n\r\n    border: 0;\r\n\r\n    border-radius: 0;\r\n\r\n    background:\r\n      transparent;\r\n\r\n    box-shadow: none;\r\n  }\r\n\r\n\r\n  #why-pixel-pine .pp-why-card + .pp-why-card {\r\n    border-top:\r\n      1px\r\n      solid\r\n      var(--pp-line);\r\n  }\r\n\r\n\r\n  \/* hide big card icon *\/\r\n\r\n  #why-pixel-pine .pp-why-card__icon {\r\n    display: none;\r\n  }\r\n\r\n\r\n  \/* number becomes timeline node *\/\r\n\r\n  #why-pixel-pine .pp-why-card__number {\r\n    position: relative;\r\n\r\n    top: auto;\r\n    right: auto;\r\n\r\n    display: grid;\r\n\r\n    place-items: center;\r\n\r\n    width: 36px;\r\n    height: 36px;\r\n\r\n    margin-left: 10px;\r\n\r\n    border:\r\n      1px\r\n      solid\r\n      var(--card-color);\r\n\r\n    border-radius: 50%;\r\n\r\n    color:\r\n      var(--card-color);\r\n\r\n    background:\r\n      var(--pp-bg);\r\n\r\n    box-shadow:\r\n      0\r\n      0\r\n      12px\r\n      rgba(126, 121, 215, 0.10);\r\n\r\n    font-size: 11px;\r\n\r\n    letter-spacing: 0.05em;\r\n  }\r\n\r\n\r\n  #why-pixel-pine .pp-why-card__copy {\r\n    padding:\r\n      3px\r\n      0\r\n      0;\r\n  }\r\n\r\n\r\n  #why-pixel-pine .pp-why-card h3 {\r\n    font-size: 19px;\r\n  }\r\n\r\n\r\n  #why-pixel-pine .pp-why-card p {\r\n    max-width: 430px;\r\n\r\n    font-size: 14px;\r\n  }\r\n\r\n\r\n  #why-pixel-pine .pp-why-card::after {\r\n    display: none;\r\n  }\r\n\r\n\r\n  #why-pixel-pine .pp-why-card:hover {\r\n    transform: none;\r\n\r\n    border-color:\r\n      var(--pp-line);\r\n\r\n    box-shadow: none;\r\n  }\r\n\r\n\r\n  #why-pixel-pine .pp-why__footer {\r\n    margin-top: 48px;\r\n\r\n    font-size: 9px;\r\n\r\n    letter-spacing: 0.18em;\r\n  }\r\n\r\n\r\n  #why-pixel-pine .pp-why__footer::before,\r\n  #why-pixel-pine .pp-why__footer::after {\r\n    width: 34px;\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SMALL MOBILE\r\n========================================================= *\/\r\n\r\n@media (max-width: 420px) {\r\n\r\n  #why-pixel-pine .pp-why__inner {\r\n    width:\r\n      calc(\r\n        100% - 30px\r\n      );\r\n  }\r\n\r\n\r\n  #why-pixel-pine .pp-why-card {\r\n    grid-template-columns:\r\n      38px\r\n      minmax(0, 1fr);\r\n\r\n    gap: 13px;\r\n  }\r\n\r\n\r\n  #why-pixel-pine .pp-why-card__number {\r\n    width: 32px;\r\n    height: 32px;\r\n\r\n    margin-left: 8px;\r\n  }\r\n\r\n\r\n  #why-pixel-pine .pp-why__network::before {\r\n    left: 24px;\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   REDUCED MOTION\r\n========================================================= *\/\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n\r\n  #why-pixel-pine *,\r\n  #why-pixel-pine *::before,\r\n  #why-pixel-pine *::after {\r\n    animation-duration:\r\n      0.01ms !important;\r\n\r\n    animation-iteration-count:\r\n      1 !important;\r\n\r\n    transition-duration:\r\n      0.01ms !important;\r\n  }\r\n\r\n\r\n  #why-pixel-pine .pp-why-reveal,\r\n  #why-pixel-pine .pp-why__core,\r\n  #why-pixel-pine .pp-why-card,\r\n  #why-pixel-pine .pp-why__footer {\r\n    opacity: 1;\r\n\r\n    transform: none;\r\n\r\n    filter: none;\r\n  }\r\n\r\n\r\n  #why-pixel-pine .pp-why__connection {\r\n    stroke-dashoffset: 0;\r\n  }\r\n\r\n\r\n  @media (max-width: 767px) {\r\n\r\n    #why-pixel-pine .pp-why__network::before {\r\n      transform:\r\n        scaleY(1);\r\n    }\r\n\r\n  }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n\r\n<!-- =========================================================\r\n     HTML\r\n========================================================= -->\r\n\r\n<section\r\n  id=\"why-pixel-pine\"\r\n  aria-labelledby=\"why-pixel-pine-title\"\r\n>\r\n\r\n  <div class=\"pp-why__inner\">\r\n\r\n\r\n    <!-- =====================================================\r\n         INTRO\r\n    ====================================================== -->\r\n\r\n    <header\r\n      class=\"\r\n        pp-why__intro\r\n        pp-why-reveal\r\n      \"\r\n    >\r\n\r\n      <p class=\"pp-why__eyebrow\">\r\n        Why Pixel Pine\r\n      <\/p>\r\n\r\n\r\n      <h2\r\n        id=\"why-pixel-pine-title\"\r\n        class=\"pp-why__title\"\r\n      >\r\n        Practical AI,\r\n\r\n        <span class=\"pp-why__title-gradient\">\r\n          built to scale\r\n        <\/span>\r\n\r\n        <br \/>\r\n\r\n        with your business.\r\n      <\/h2>\r\n\r\n\r\n      <p class=\"pp-why__description\">\r\n        We combine deep technical expertise\r\n        with real-world business understanding\r\n        to deliver AI solutions that create lasting impact.\r\n      <\/p>\r\n\r\n    <\/header>\r\n\r\n\r\n\r\n    <!-- =====================================================\r\n         FEATURE NETWORK\r\n    ====================================================== -->\r\n\r\n    <div class=\"pp-why__network\">\r\n\r\n\r\n      <!-- =================================================\r\n           DESKTOP CONNECTION LINES\r\n      ================================================== -->\r\n\r\n      <svg\r\n        class=\"pp-why__connections\"\r\n        viewBox=\"0 0 1200 500\"\r\n        preserveAspectRatio=\"none\"\r\n        aria-hidden=\"true\"\r\n      >\r\n\r\n        <defs>\r\n\r\n          <linearGradient\r\n            id=\"ppWhyMintLine\"\r\n            x1=\"0\"\r\n            y1=\"0\"\r\n            x2=\"1\"\r\n            y2=\"0\"\r\n          >\r\n            <stop\r\n              offset=\"0\"\r\n              stop-color=\"#84E6D3\"\r\n              stop-opacity=\".25\"\r\n            \/>\r\n\r\n            <stop\r\n              offset=\"1\"\r\n              stop-color=\"#84E6D3\"\r\n            \/>\r\n          <\/linearGradient>\r\n\r\n\r\n          <linearGradient\r\n            id=\"ppWhyPurpleLine\"\r\n            x1=\"0\"\r\n            y1=\"0\"\r\n            x2=\"1\"\r\n            y2=\"0\"\r\n          >\r\n            <stop\r\n              offset=\"0\"\r\n              stop-color=\"#7E79D7\"\r\n            \/>\r\n\r\n            <stop\r\n              offset=\"1\"\r\n              stop-color=\"#AF83E8\"\r\n              stop-opacity=\".40\"\r\n            \/>\r\n          <\/linearGradient>\r\n\r\n        <\/defs>\r\n\r\n\r\n        <!-- upper-left -->\r\n\r\n        <path\r\n          class=\"\r\n            pp-why__connection\r\n            pp-why__connection--mint\r\n          \"\r\n          d=\"\r\n            M600 205\r\n            C555 205 545 160 505 160\r\n            L405 160\r\n          \"\r\n        \/>\r\n\r\n\r\n        <!-- upper-right -->\r\n\r\n        <path\r\n          class=\"\r\n            pp-why__connection\r\n            pp-why__connection--purple\r\n          \"\r\n          d=\"\r\n            M600 205\r\n            C650 205 655 160 695 160\r\n            L795 160\r\n          \"\r\n        \/>\r\n\r\n\r\n        <!-- lower-left -->\r\n\r\n        <path\r\n          class=\"\r\n            pp-why__connection\r\n            pp-why__connection--mint\r\n          \"\r\n          d=\"\r\n            M600 295\r\n            C555 295 545 340 505 340\r\n            L405 340\r\n          \"\r\n        \/>\r\n\r\n\r\n        <!-- lower-right -->\r\n\r\n        <path\r\n          class=\"\r\n            pp-why__connection\r\n            pp-why__connection--purple\r\n          \"\r\n          d=\"\r\n            M600 295\r\n            C650 295 655 340 695 340\r\n            L795 340\r\n          \"\r\n        \/>\r\n\r\n      <\/svg>\r\n\r\n\r\n\r\n      <!-- =================================================\r\n           CARD 01\r\n      ================================================== -->\r\n\r\n      <article\r\n        class=\"\r\n          pp-why-card\r\n          pp-why-card--one\r\n        \"\r\n      >\r\n\r\n        <span class=\"pp-why-card__number\">\r\n          01\r\n        <\/span>\r\n\r\n\r\n        <div\r\n          class=\"pp-why-card__icon\"\r\n          aria-hidden=\"true\"\r\n        >\r\n\r\n          <svg viewBox=\"0 0 32 32\">\r\n            <path d=\"M5 26V17h5v9M14 26V10h5v16M23 26V5h4v21\"\/>\r\n          <\/svg>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"pp-why-card__copy\">\r\n\r\n          <h3>\r\n            Business-First AI\r\n          <\/h3>\r\n\r\n\r\n          <p>\r\n            Solutions designed around real\r\n            business outcomes, not technology\r\n            for its own sake.\r\n          <\/p>\r\n\r\n        <\/div>\r\n\r\n      <\/article>\r\n\r\n\r\n\r\n      <!-- =================================================\r\n           CARD 02\r\n      ================================================== -->\r\n\r\n      <article\r\n        class=\"\r\n          pp-why-card\r\n          pp-why-card--two\r\n        \"\r\n      >\r\n\r\n        <span class=\"pp-why-card__number\">\r\n          02\r\n        <\/span>\r\n\r\n\r\n        <div\r\n          class=\"pp-why-card__icon\"\r\n          aria-hidden=\"true\"\r\n        >\r\n\r\n          <svg viewBox=\"0 0 32 32\">\r\n            <path d=\"m16 5 11 6-11 6-11-6 11-6Z\"\/>\r\n            <path d=\"m5 16 11 6 11-6\"\/>\r\n            <path d=\"m5 21 11 6 11-6\"\/>\r\n          <\/svg>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"pp-why-card__copy\">\r\n\r\n          <h3>\r\n            Scalable Architecture\r\n          <\/h3>\r\n\r\n\r\n          <p>\r\n            Built to grow with your data,\r\n            teams, systems, and ambition.\r\n          <\/p>\r\n\r\n        <\/div>\r\n\r\n      <\/article>\r\n\r\n\r\n\r\n      <!-- =================================================\r\n           CORE LOGO\r\n      ================================================== -->\r\n\r\n      <div\r\n        class=\"pp-why__core\"\r\n        aria-hidden=\"true\"\r\n      >\r\n\r\n        <div class=\"pp-why__logo-wrap\">\r\n\r\n          <div\r\n            class=\"pp-why__logo-glow\"\r\n          ><\/div>\r\n\r\n\r\n          <img\r\n            class=\"pp-why__logo\"\r\n            src=\"https:\/\/pixel-pine.com\/wp-content\/uploads\/2026\/09\/ChatGPT-Image-Sep-30-2026-01_51_47-PM-1.png\"\r\n            alt=\"\"\r\n            loading=\"lazy\"\r\n            decoding=\"async\"\r\n          \/>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"pp-why__core-caption\">\r\n\r\n          Ideas\r\n\r\n          <span>\r\n            \u203a\r\n          <\/span>\r\n\r\n          Intelligence\r\n\r\n          <span>\r\n            \u203a\r\n          <\/span>\r\n\r\n          Impact\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n\r\n\r\n      <!-- =================================================\r\n           CARD 03\r\n      ================================================== -->\r\n\r\n      <article\r\n        class=\"\r\n          pp-why-card\r\n          pp-why-card--three\r\n        \"\r\n      >\r\n\r\n        <span class=\"pp-why-card__number\">\r\n          03\r\n        <\/span>\r\n\r\n\r\n        <div\r\n          class=\"pp-why-card__icon\"\r\n          aria-hidden=\"true\"\r\n        >\r\n\r\n          <svg viewBox=\"0 0 32 32\">\r\n\r\n            <circle\r\n              cx=\"16\"\r\n              cy=\"16\"\r\n              r=\"4\"\r\n            \/>\r\n\r\n            <path\r\n              d=\"\r\n                M16 4v4\r\n                M16 24v4\r\n                M4 16h4\r\n                M24 16h4\r\n                M7.5 7.5l3 3\r\n                M21.5 21.5l3 3\r\n                M24.5 7.5l-3 3\r\n                M10.5 21.5l-3 3\r\n              \"\r\n            \/>\r\n\r\n          <\/svg>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"pp-why-card__copy\">\r\n\r\n          <h3>\r\n            End-to-End Delivery\r\n          <\/h3>\r\n\r\n\r\n          <p>\r\n            From strategy and implementation\r\n            to managed operations.\r\n          <\/p>\r\n\r\n        <\/div>\r\n\r\n      <\/article>\r\n\r\n\r\n\r\n      <!-- =================================================\r\n           CARD 04\r\n      ================================================== -->\r\n\r\n      <article\r\n        class=\"\r\n          pp-why-card\r\n          pp-why-card--four\r\n        \"\r\n      >\r\n\r\n        <span class=\"pp-why-card__number\">\r\n          04\r\n        <\/span>\r\n\r\n\r\n        <div\r\n          class=\"pp-why-card__icon\"\r\n          aria-hidden=\"true\"\r\n        >\r\n\r\n          <svg viewBox=\"0 0 32 32\">\r\n\r\n            <circle\r\n              cx=\"12\"\r\n              cy=\"11\"\r\n              r=\"4\"\r\n            \/>\r\n\r\n            <circle\r\n              cx=\"22\"\r\n              cy=\"12\"\r\n              r=\"3\"\r\n            \/>\r\n\r\n            <path\r\n              d=\"M4 27c.5-6 3.2-9 8-9s7.5 3 8 9\"\r\n            \/>\r\n\r\n            <path\r\n              d=\"M20 19c4.2.4 6.5 3 7 8\"\r\n            \/>\r\n\r\n          <\/svg>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"pp-why-card__copy\">\r\n\r\n          <h3>\r\n            Embedded Expertise\r\n          <\/h3>\r\n\r\n\r\n          <p>\r\n            Work with specialists who operate\r\n            like an extension of your team.\r\n          <\/p>\r\n\r\n        <\/div>\r\n\r\n      <\/article>\r\n\r\n\r\n    <\/div>\r\n\r\n\r\n\r\n    <!-- =====================================================\r\n         BOTTOM LINE\r\n    ====================================================== -->\r\n\r\n    <div\r\n      class=\"pp-why__footer\"\r\n      aria-hidden=\"true\"\r\n    >\r\n      Same direction. A brighter tomorrow.\r\n    <\/div>\r\n\r\n\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n\r\n<script>\r\n(() => {\r\n\r\n  const section =\r\n    document.getElementById(\r\n      \"why-pixel-pine\"\r\n    );\r\n\r\n\r\n  if (\r\n    !section ||\r\n    section.dataset.ppWhyReady ===\r\n      \"true\"\r\n  ) {\r\n    return;\r\n  }\r\n\r\n\r\n  section.dataset.ppWhyReady =\r\n    \"true\";\r\n\r\n\r\n  \/* =====================================================\r\n     LOGO PLACEHOLDER CHECK\r\n  ===================================================== *\/\r\n\r\n  const logo =\r\n    section.querySelector(\r\n      \".pp-why__logo\"\r\n    );\r\n\r\n\r\n  if (logo) {\r\n\r\n    const logoURL =\r\n      (\r\n        logo.getAttribute(\r\n          \"src\"\r\n        ) ||\r\n        \"\"\r\n      ).trim();\r\n\r\n\r\n    \/*\r\n      Hide placeholder before you add\r\n      your real logo URL.\r\n    *\/\r\n\r\n    if (\r\n      !logoURL ||\r\n      logoURL.includes(\r\n        \"PASTE_PIXEL_PINE_LOGO_URL_HERE\"\r\n      )\r\n    ) {\r\n\r\n      logo.style.display =\r\n        \"none\";\r\n\r\n    }\r\n\r\n  }\r\n\r\n\r\n\r\n  \/* =====================================================\r\n     ACTIVATE ANIMATION\r\n  ===================================================== *\/\r\n\r\n  const activate = () => {\r\n\r\n    section.classList.add(\r\n      \"pp-why-active\"\r\n    );\r\n\r\n  };\r\n\r\n\r\n  \/* fallback *\/\r\n\r\n  if (\r\n    !(\r\n      \"IntersectionObserver\"\r\n      in window\r\n    )\r\n  ) {\r\n\r\n    activate();\r\n\r\n    return;\r\n\r\n  }\r\n\r\n\r\n  \/* =====================================================\r\n     OBSERVE\r\n  ===================================================== *\/\r\n\r\n  const observer =\r\n    new IntersectionObserver(\r\n      entries => {\r\n\r\n        const entry =\r\n          entries[0];\r\n\r\n\r\n        if (\r\n          !entry ||\r\n          !entry.isIntersecting\r\n        ) {\r\n          return;\r\n        }\r\n\r\n\r\n        activate();\r\n\r\n\r\n        observer.disconnect();\r\n\r\n      },\r\n      {\r\n        threshold: 0.16,\r\n\r\n        rootMargin:\r\n          \"0px 0px -7% 0px\"\r\n      }\r\n    );\r\n\r\n\r\n  observer.observe(\r\n    section\r\n  );\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4aa1c427 elementor-widget elementor-widget-html\" data-id=\"4aa1c427\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\r\n  PIXEL PINE \u2014 TRUSTED CLIENTS\r\n  Paste everything into ONE Elementor HTML Widget\r\n\r\n  - Keeps all existing client logo URLs\r\n  - 3 animated marquee rows\r\n  - Pixel Pine Mint \u2192 Indigo \u2192 Purple tone\r\n  - Responsive desktop \/ tablet \/ mobile\r\n  - Reduced-motion support\r\n========================================================= -->\r\n\r\n<style>\r\n\r\n\/* =========================================================\r\n   ELEMENTOR RESET\r\n========================================================= *\/\r\n\r\n.elementor-widget-html:has(#pixel-pine-trust),\r\n.elementor-widget-html:has(#pixel-pine-trust) > .elementor-widget-container {\r\n  width: 100%;\r\n  max-width: none !important;\r\n  margin: 0 !important;\r\n  padding: 0 !important;\r\n}\r\n\r\n.e-con:has(#pixel-pine-trust) {\r\n  --gap: 0px !important;\r\n  gap: 0 !important;\r\n  row-gap: 0 !important;\r\n}\r\n\r\n#pixel-pine-trust,\r\n#pixel-pine-trust * {\r\n  box-sizing: border-box;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SECTION FOUNDATION\r\n========================================================= *\/\r\n\r\n#pixel-pine-trust {\r\n  --pp-vw: 100vw;\r\n\r\n  \/* Pixel Pine brand *\/\r\n  --pp-mint: #84E6D3;\r\n  --pp-indigo: #7E79D7;\r\n  --pp-purple: #AF83E8;\r\n\r\n  \/* Dark system *\/\r\n  --pp-bg: #070C17;\r\n  --pp-white: #F7FAFC;\r\n  --pp-muted: #AEB9CA;\r\n  --pp-dim: #738096;\r\n\r\n  --pp-line: rgba(126, 121, 215, 0.16);\r\n\r\n  position: relative;\r\n\r\n  left: 50%;\r\n\r\n  width: var(--pp-vw);\r\n  max-width: none !important;\r\n\r\n  margin: 0 !important;\r\n\r\n  transform: translateX(-50%);\r\n\r\n  overflow: hidden;\r\n  isolation: isolate;\r\n\r\n  background: var(--pp-bg);\r\n\r\n  color: var(--pp-white);\r\n\r\n  font-family:\r\n    Manrope,\r\n    Inter,\r\n    \"Segoe UI\",\r\n    Arial,\r\n    sans-serif;\r\n\r\n  scroll-margin-top: 90px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   VERY SUBTLE EDGE LIGHT\r\n   Not a background image.\r\n========================================================= *\/\r\n\r\n#pixel-pine-trust::before,\r\n#pixel-pine-trust::after {\r\n  content: \"\";\r\n\r\n  position: absolute;\r\n\r\n  z-index: -1;\r\n\r\n  top: 18%;\r\n  bottom: 12%;\r\n\r\n  width: 1px;\r\n\r\n  opacity: 0.38;\r\n\r\n  pointer-events: none;\r\n}\r\n\r\n#pixel-pine-trust::before {\r\n  left: 2%;\r\n\r\n  background:\r\n    linear-gradient(\r\n      180deg,\r\n      transparent,\r\n      var(--pp-mint),\r\n      transparent\r\n    );\r\n\r\n  box-shadow:\r\n    0 0 24px\r\n    rgba(132, 230, 211, 0.22);\r\n}\r\n\r\n#pixel-pine-trust::after {\r\n  right: 2%;\r\n\r\n  background:\r\n    linear-gradient(\r\n      180deg,\r\n      transparent,\r\n      var(--pp-purple),\r\n      transparent\r\n    );\r\n\r\n  box-shadow:\r\n    0 0 24px\r\n    rgba(175, 131, 232, 0.22);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   INNER\r\n========================================================= *\/\r\n\r\n#pixel-pine-trust .pp-trust__inner {\r\n  width:\r\n    min(\r\n      100%,\r\n      1540px\r\n    );\r\n\r\n  margin: 0 auto;\r\n\r\n  padding:\r\n    94px\r\n    0\r\n    86px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HEADING\r\n========================================================= *\/\r\n\r\n#pixel-pine-trust .pp-trust__heading {\r\n  width:\r\n    min(\r\n      980px,\r\n      calc(100% - 40px)\r\n    );\r\n\r\n  margin:\r\n    0\r\n    auto\r\n    58px;\r\n\r\n  text-align: center;\r\n}\r\n\r\n\r\n\/* eyebrow *\/\r\n\r\n#pixel-pine-trust .pp-trust__eyebrow {\r\n  display: inline-flex;\r\n\r\n  align-items: center;\r\n  justify-content: center;\r\n\r\n  gap: 14px;\r\n\r\n  margin:\r\n    0\r\n    0\r\n    23px;\r\n\r\n  color: var(--pp-mint);\r\n\r\n  font-size:\r\n    clamp(\r\n      10px,\r\n      0.9vw,\r\n      13px\r\n    );\r\n\r\n  font-weight: 760;\r\n\r\n  line-height: 1.4;\r\n\r\n  letter-spacing: 0.32em;\r\n\r\n  text-transform: uppercase;\r\n}\r\n\r\n\r\n#pixel-pine-trust .pp-trust__eyebrow::before,\r\n#pixel-pine-trust .pp-trust__eyebrow::after {\r\n  content: \"\";\r\n\r\n  width: 50px;\r\n  height: 1px;\r\n}\r\n\r\n\r\n#pixel-pine-trust .pp-trust__eyebrow::before {\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      transparent,\r\n      var(--pp-mint)\r\n    );\r\n}\r\n\r\n\r\n#pixel-pine-trust .pp-trust__eyebrow::after {\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      var(--pp-purple),\r\n      transparent\r\n    );\r\n}\r\n\r\n\r\n\/* title *\/\r\n\r\n#pixel-pine-trust .pp-trust__title {\r\n  max-width: 920px;\r\n\r\n  margin: 0 auto;\r\n\r\n  color: var(--pp-white);\r\n\r\n  font-size:\r\n    clamp(\r\n      44px,\r\n      4.2vw,\r\n      66px\r\n    );\r\n\r\n  font-weight: 770;\r\n\r\n  line-height: 1.05;\r\n\r\n  letter-spacing: -0.052em;\r\n\r\n  text-wrap: balance;\r\n}\r\n\r\n\r\n#pixel-pine-trust .pp-trust__title-gradient {\r\n  color: transparent;\r\n\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      var(--pp-mint) 0%,\r\n      var(--pp-indigo) 52%,\r\n      var(--pp-purple) 100%\r\n    );\r\n\r\n  -webkit-background-clip: text;\r\n  background-clip: text;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MARQUEE AREA\r\n========================================================= *\/\r\n\r\n#pixel-pine-trust .pp-trust__marquees {\r\n  display: grid;\r\n\r\n  gap: 22px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MARQUEE\r\n========================================================= *\/\r\n\r\n#pixel-pine-trust .pp-marquee {\r\n  width: 100%;\r\n\r\n  overflow: hidden;\r\n\r\n  opacity: 0;\r\n\r\n  transform:\r\n    translateY(22px);\r\n\r\n  -webkit-mask-image:\r\n    linear-gradient(\r\n      to right,\r\n      transparent 0%,\r\n      #000 6%,\r\n      #000 94%,\r\n      transparent 100%\r\n    );\r\n\r\n  mask-image:\r\n    linear-gradient(\r\n      to right,\r\n      transparent 0%,\r\n      #000 6%,\r\n      #000 94%,\r\n      transparent 100%\r\n    );\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TRACK\r\n========================================================= *\/\r\n\r\n#pixel-pine-trust .pp-marquee__track {\r\n  display: flex;\r\n\r\n  width: max-content;\r\n\r\n  will-change: transform;\r\n\r\n  animation:\r\n    ppTrustMarqueeLeft\r\n    40s\r\n    linear\r\n    infinite;\r\n\r\n  animation-play-state: paused;\r\n}\r\n\r\n\r\n\/* reverse row *\/\r\n\r\n#pixel-pine-trust\r\n.pp-marquee--reverse\r\n.pp-marquee__track {\r\n  animation-direction: reverse;\r\n\r\n  animation-duration: 45s;\r\n}\r\n\r\n\r\n\/* slower row *\/\r\n\r\n#pixel-pine-trust\r\n.pp-marquee--slow\r\n.pp-marquee__track {\r\n  animation-duration: 49s;\r\n}\r\n\r\n\r\n\/* start only when section becomes visible *\/\r\n\r\n#pixel-pine-trust.pp-trust-visible\r\n.pp-marquee__track {\r\n  animation-play-state: running;\r\n}\r\n\r\n\r\n\/* pause on hover *\/\r\n\r\n#pixel-pine-trust\r\n.pp-marquee:hover\r\n.pp-marquee__track {\r\n  animation-play-state: paused;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   LOGO SET\r\n========================================================= *\/\r\n\r\n#pixel-pine-trust .pp-logo-set {\r\n  display: flex;\r\n\r\n  align-items: center;\r\n\r\n  gap:\r\n    clamp(\r\n      18px,\r\n      1.8vw,\r\n      28px\r\n    );\r\n\r\n  padding-right:\r\n    clamp(\r\n      18px,\r\n      1.8vw,\r\n      28px\r\n    );\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CLIENT CARD\r\n========================================================= *\/\r\n\r\n#pixel-pine-trust .pp-client-logo {\r\n  position: relative;\r\n\r\n  flex: 0 0 auto;\r\n\r\n  display: flex;\r\n\r\n  align-items: center;\r\n  justify-content: center;\r\n\r\n  width:\r\n    clamp(\r\n      170px,\r\n      12vw,\r\n      205px\r\n    );\r\n\r\n  height: 94px;\r\n\r\n  padding:\r\n    14px\r\n    18px;\r\n\r\n  overflow: hidden;\r\n\r\n  border:\r\n    1px\r\n    solid\r\n    rgba(255, 255, 255, 0.78);\r\n\r\n  border-radius: 13px;\r\n\r\n  background:\r\n    #FFFFFF;\r\n\r\n  box-shadow:\r\n    0\r\n    9px\r\n    28px\r\n    rgba(0, 0, 0, 0.18);\r\n\r\n  transition:\r\n    transform\r\n    260ms\r\n    cubic-bezier(.22, 1, .36, 1),\r\n\r\n    box-shadow\r\n    260ms\r\n    ease,\r\n\r\n    border-color\r\n    260ms\r\n    ease;\r\n}\r\n\r\n\r\n\/* gradient hover line *\/\r\n\r\n#pixel-pine-trust .pp-client-logo::after {\r\n  content: \"\";\r\n\r\n  position: absolute;\r\n\r\n  right: 0;\r\n  bottom: 0;\r\n  left: 0;\r\n\r\n  height: 2px;\r\n\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      var(--pp-mint),\r\n      var(--pp-indigo),\r\n      var(--pp-purple)\r\n    );\r\n\r\n  transform:\r\n    scaleX(0);\r\n\r\n  transform-origin:\r\n    center;\r\n\r\n  transition:\r\n    transform\r\n    330ms\r\n    cubic-bezier(.22, 1, .36, 1);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CLIENT LOGO IMAGE\r\n========================================================= *\/\r\n\r\n#pixel-pine-trust .pp-client-logo img {\r\n  display: block;\r\n\r\n  width: 100%;\r\n  height: 100%;\r\n\r\n  max-height: 66px;\r\n\r\n  object-fit: contain;\r\n  object-position: center;\r\n\r\n  opacity: 1;\r\n\r\n  filter: none;\r\n\r\n  mix-blend-mode: normal;\r\n\r\n  transition:\r\n    transform\r\n    260ms\r\n    cubic-bezier(.22, 1, .36, 1);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CARD HOVER\r\n========================================================= *\/\r\n\r\n#pixel-pine-trust .pp-client-logo:hover {\r\n  transform:\r\n    translateY(-5px);\r\n\r\n  border-color:\r\n    rgba(126, 121, 215, 0.42);\r\n\r\n  box-shadow:\r\n    0\r\n    16px\r\n    36px\r\n    rgba(0, 0, 0, 0.24),\r\n\r\n    0\r\n    0\r\n    21px\r\n    rgba(126, 121, 215, 0.12);\r\n}\r\n\r\n\r\n#pixel-pine-trust\r\n.pp-client-logo:hover::after {\r\n  transform:\r\n    scaleX(1);\r\n}\r\n\r\n\r\n#pixel-pine-trust\r\n.pp-client-logo:hover img {\r\n  transform:\r\n    scale(1.045);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   REVEALS\r\n========================================================= *\/\r\n\r\n#pixel-pine-trust .pp-trust-reveal {\r\n  opacity: 0;\r\n\r\n  transform:\r\n    translateY(22px);\r\n\r\n  filter:\r\n    blur(3px);\r\n}\r\n\r\n\r\n#pixel-pine-trust.pp-trust-visible\r\n.pp-trust-reveal {\r\n  animation:\r\n    ppTrustReveal\r\n    780ms\r\n    cubic-bezier(.22, 1, .36, 1)\r\n    forwards;\r\n\r\n  animation-delay:\r\n    var(\r\n      --delay,\r\n      0ms\r\n    );\r\n}\r\n\r\n\r\n#pixel-pine-trust.pp-trust-visible\r\n.pp-marquee {\r\n  animation:\r\n    ppTrustReveal\r\n    800ms\r\n    cubic-bezier(.22, 1, .36, 1)\r\n    forwards;\r\n\r\n  animation-delay:\r\n    var(\r\n      --delay,\r\n      0ms\r\n    );\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   KEYFRAMES\r\n========================================================= *\/\r\n\r\n@keyframes ppTrustReveal {\r\n\r\n  to {\r\n    opacity: 1;\r\n\r\n    transform:\r\n      translateY(0);\r\n\r\n    filter:\r\n      blur(0);\r\n  }\r\n\r\n}\r\n\r\n\r\n@keyframes ppTrustMarqueeLeft {\r\n\r\n  from {\r\n    transform:\r\n      translate3d(\r\n        0,\r\n        0,\r\n        0\r\n      );\r\n  }\r\n\r\n  to {\r\n    transform:\r\n      translate3d(\r\n        -50%,\r\n        0,\r\n        0\r\n      );\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TABLET\r\n========================================================= *\/\r\n\r\n@media (max-width: 1024px) {\r\n\r\n  #pixel-pine-trust .pp-trust__inner {\r\n    padding:\r\n      86px\r\n      0\r\n      78px;\r\n  }\r\n\r\n\r\n  #pixel-pine-trust .pp-trust__heading {\r\n    margin-bottom: 50px;\r\n  }\r\n\r\n\r\n  #pixel-pine-trust .pp-client-logo {\r\n    width:\r\n      clamp(\r\n        160px,\r\n        18vw,\r\n        190px\r\n      );\r\n\r\n    height: 90px;\r\n  }\r\n\r\n\r\n  #pixel-pine-trust .pp-client-logo img {\r\n    max-height: 62px;\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MOBILE\r\n========================================================= *\/\r\n\r\n@media (max-width: 767px) {\r\n\r\n  #pixel-pine-trust {\r\n    left: auto;\r\n\r\n    width: 100%;\r\n\r\n    transform: none;\r\n  }\r\n\r\n\r\n  #pixel-pine-trust .pp-trust__inner {\r\n    padding:\r\n      72px\r\n      0\r\n      66px;\r\n  }\r\n\r\n\r\n  #pixel-pine-trust .pp-trust__heading {\r\n    width:\r\n      min(\r\n        100% - 36px,\r\n        580px\r\n      );\r\n\r\n    margin-bottom: 42px;\r\n  }\r\n\r\n\r\n  #pixel-pine-trust .pp-trust__eyebrow {\r\n    gap: 9px;\r\n\r\n    margin-bottom: 19px;\r\n\r\n    font-size: 9px;\r\n\r\n    letter-spacing: 0.22em;\r\n  }\r\n\r\n\r\n  #pixel-pine-trust\r\n  .pp-trust__eyebrow::before,\r\n  #pixel-pine-trust\r\n  .pp-trust__eyebrow::after {\r\n    width: 28px;\r\n  }\r\n\r\n\r\n  #pixel-pine-trust .pp-trust__title {\r\n    font-size:\r\n      clamp(\r\n        38px,\r\n        10.8vw,\r\n        51px\r\n      );\r\n\r\n    line-height: 1.04;\r\n  }\r\n\r\n\r\n  #pixel-pine-trust .pp-trust__marquees {\r\n    gap: 18px;\r\n  }\r\n\r\n\r\n  #pixel-pine-trust .pp-marquee {\r\n    -webkit-mask-image:\r\n      linear-gradient(\r\n        to right,\r\n        transparent 0%,\r\n        #000 4%,\r\n        #000 96%,\r\n        transparent 100%\r\n      );\r\n\r\n    mask-image:\r\n      linear-gradient(\r\n        to right,\r\n        transparent 0%,\r\n        #000 4%,\r\n        #000 96%,\r\n        transparent 100%\r\n      );\r\n  }\r\n\r\n\r\n  #pixel-pine-trust .pp-logo-set {\r\n    gap: 16px;\r\n\r\n    padding-right: 16px;\r\n  }\r\n\r\n\r\n  #pixel-pine-trust .pp-client-logo {\r\n    width: 154px;\r\n\r\n    height: 82px;\r\n\r\n    padding:\r\n      12px\r\n      14px;\r\n\r\n    border-radius: 11px;\r\n  }\r\n\r\n\r\n  #pixel-pine-trust .pp-client-logo img {\r\n    max-height: 56px;\r\n  }\r\n\r\n\r\n  \/*\r\n    Slower mobile marquee\r\n    so logos remain readable.\r\n  *\/\r\n\r\n  #pixel-pine-trust\r\n  .pp-marquee__track {\r\n    animation-duration: 48s;\r\n  }\r\n\r\n\r\n  #pixel-pine-trust\r\n  .pp-marquee--reverse\r\n  .pp-marquee__track {\r\n    animation-duration: 53s;\r\n  }\r\n\r\n\r\n  #pixel-pine-trust\r\n  .pp-marquee--slow\r\n  .pp-marquee__track {\r\n    animation-duration: 57s;\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SMALL MOBILE\r\n========================================================= *\/\r\n\r\n@media (max-width: 420px) {\r\n\r\n  #pixel-pine-trust .pp-client-logo {\r\n    width: 145px;\r\n\r\n    height: 78px;\r\n  }\r\n\r\n\r\n  #pixel-pine-trust .pp-client-logo img {\r\n    max-height: 52px;\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   REDUCED MOTION\r\n========================================================= *\/\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n\r\n  #pixel-pine-trust *,\r\n  #pixel-pine-trust *::before,\r\n  #pixel-pine-trust *::after {\r\n    animation-duration:\r\n      0.01ms !important;\r\n\r\n    animation-iteration-count:\r\n      1 !important;\r\n\r\n    transition-duration:\r\n      0.01ms !important;\r\n  }\r\n\r\n\r\n  #pixel-pine-trust\r\n  .pp-trust-reveal,\r\n  #pixel-pine-trust\r\n  .pp-marquee {\r\n    opacity: 1;\r\n\r\n    transform: none;\r\n\r\n    filter: none;\r\n  }\r\n\r\n\r\n  #pixel-pine-trust .pp-marquee {\r\n    overflow: visible;\r\n\r\n    -webkit-mask-image: none;\r\n\r\n    mask-image: none;\r\n  }\r\n\r\n\r\n  #pixel-pine-trust .pp-marquee__track {\r\n    width: 100%;\r\n\r\n    animation: none !important;\r\n\r\n    transform: none;\r\n  }\r\n\r\n\r\n  #pixel-pine-trust .pp-logo-set {\r\n    width: 100%;\r\n\r\n    flex-wrap: wrap;\r\n\r\n    justify-content: center;\r\n\r\n    padding:\r\n      0\r\n      18px;\r\n  }\r\n\r\n\r\n  \/*\r\n    Hide duplicated clone\r\n    when animation is disabled.\r\n  *\/\r\n\r\n  #pixel-pine-trust\r\n  .pp-logo-set[aria-hidden=\"true\"] {\r\n    display: none;\r\n  }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n\r\n<!-- =========================================================\r\n     HTML\r\n========================================================= -->\r\n\r\n<section\r\n  id=\"pixel-pine-trust\"\r\n  aria-labelledby=\"pixel-pine-trust-title\"\r\n>\r\n\r\n  <div class=\"pp-trust__inner\">\r\n\r\n\r\n    <!-- =====================================================\r\n         HEADER\r\n    ====================================================== -->\r\n\r\n    <header class=\"pp-trust__heading\">\r\n\r\n      <p\r\n        class=\"\r\n          pp-trust__eyebrow\r\n          pp-trust-reveal\r\n        \"\r\n        style=\"\r\n          --delay: 70ms\r\n        \"\r\n      >\r\n        Trusted Across Industries\r\n      <\/p>\r\n\r\n\r\n      <h2\r\n        id=\"pixel-pine-trust-title\"\r\n        class=\"\r\n          pp-trust__title\r\n          pp-trust-reveal\r\n        \"\r\n        style=\"\r\n          --delay: 150ms\r\n        \"\r\n      >\r\n        Trusted by enterprises that expect\r\n\r\n        <span\r\n          class=\"pp-trust__title-gradient\"\r\n        >\r\n          real results.\r\n        <\/span>\r\n      <\/h2>\r\n\r\n    <\/header>\r\n\r\n\r\n\r\n    <!-- =====================================================\r\n         MARQUEES\r\n    ====================================================== -->\r\n\r\n    <div\r\n      class=\"pp-trust__marquees\"\r\n      aria-label=\"Organisations and enterprises served\"\r\n    >\r\n\r\n\r\n      <!-- =================================================\r\n           ROW 1\r\n      ================================================== -->\r\n\r\n      <div\r\n        class=\"pp-marquee\"\r\n        style=\"\r\n          --delay: 250ms\r\n        \"\r\n      >\r\n\r\n        <div class=\"pp-marquee__track\">\r\n\r\n          <div class=\"pp-logo-set\">\r\n\r\n            <div class=\"pp-client-logo\">\r\n              <img\r\n                src=\"https:\/\/pinolith.org\/wp-content\/uploads\/2026\/09\/bakertilly-logo-png_seeklogo-345590.png\"\r\n                alt=\"Baker Tilly\"\r\n                loading=\"lazy\"\r\n                decoding=\"async\"\r\n              >\r\n            <\/div>\r\n\r\n\r\n            <div class=\"pp-client-logo\">\r\n              <img\r\n                src=\"https:\/\/pinolith.org\/wp-content\/uploads\/2026\/09\/494569827_122254773632080448_6984872563867173468_n-1.webp\"\r\n                alt=\"Client logo 02\"\r\n                loading=\"lazy\"\r\n                decoding=\"async\"\r\n              >\r\n            <\/div>\r\n\r\n\r\n            <div class=\"pp-client-logo\">\r\n              <img\r\n                src=\"https:\/\/pinolith.org\/wp-content\/uploads\/2026\/09\/Vinda.png\"\r\n                alt=\"Vinda\"\r\n                loading=\"lazy\"\r\n                decoding=\"async\"\r\n              >\r\n            <\/div>\r\n\r\n\r\n            <div class=\"pp-client-logo\">\r\n              <img\r\n                src=\"https:\/\/pinolith.org\/wp-content\/uploads\/2026\/09\/1709816062301-1.jpeg\"\r\n                alt=\"Client logo 04\"\r\n                loading=\"lazy\"\r\n                decoding=\"async\"\r\n              >\r\n            <\/div>\r\n\r\n\r\n            <div class=\"pp-client-logo\">\r\n              <img\r\n                src=\"https:\/\/pinolith.org\/wp-content\/uploads\/2026\/09\/jobstore-best-job-portal-malaysia-1.jpg\"\r\n                alt=\"Jobstore\"\r\n                loading=\"lazy\"\r\n                decoding=\"async\"\r\n              >\r\n            <\/div>\r\n\r\n\r\n            <div class=\"pp-client-logo\">\r\n              <img\r\n                src=\"https:\/\/pinolith.org\/wp-content\/uploads\/2026\/09\/ajinomoto-logo-png_seeklogo-5456-1.png\"\r\n                alt=\"Ajinomoto\"\r\n                loading=\"lazy\"\r\n                decoding=\"async\"\r\n              >\r\n            <\/div>\r\n\r\n\r\n            <div class=\"pp-client-logo\">\r\n              <img\r\n                src=\"https:\/\/pinolith.org\/wp-content\/uploads\/2026\/09\/olympus-logo-png_seeklogo-102949-1.png\"\r\n                alt=\"Olympus\"\r\n                loading=\"lazy\"\r\n                decoding=\"async\"\r\n              >\r\n            <\/div>\r\n\r\n\r\n            <div class=\"pp-client-logo\">\r\n              <img\r\n                src=\"https:\/\/pinolith.org\/wp-content\/uploads\/2026\/09\/kansai-paint-logo-png_seeklogo-353788-1.png\"\r\n                alt=\"Kansai Paint\"\r\n                loading=\"lazy\"\r\n                decoding=\"async\"\r\n              >\r\n            <\/div>\r\n\r\n\r\n            <div class=\"pp-client-logo\">\r\n              <img\r\n                src=\"https:\/\/pinolith.org\/wp-content\/uploads\/2026\/09\/pngwing.com-1-1.png\"\r\n                alt=\"Client logo 09\"\r\n                loading=\"lazy\"\r\n                decoding=\"async\"\r\n              >\r\n            <\/div>\r\n\r\n\r\n            <div class=\"pp-client-logo\">\r\n              <img\r\n                src=\"https:\/\/pinolith.org\/wp-content\/uploads\/2026\/09\/Logo-designs-for-companies-with-long-names-Mitsubishi-Motors-1.jpeg\"\r\n                alt=\"Mitsubishi Motors\"\r\n                loading=\"lazy\"\r\n                decoding=\"async\"\r\n              >\r\n            <\/div>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n\r\n\r\n      <!-- =================================================\r\n           ROW 2\r\n      ================================================== -->\r\n\r\n      <div\r\n        class=\"\r\n          pp-marquee\r\n          pp-marquee--reverse\r\n        \"\r\n        style=\"\r\n          --delay: 340ms\r\n        \"\r\n      >\r\n\r\n        <div class=\"pp-marquee__track\">\r\n\r\n          <div class=\"pp-logo-set\">\r\n\r\n            <div class=\"pp-client-logo\">\r\n              <img\r\n                src=\"https:\/\/pinolith.org\/wp-content\/uploads\/2026\/09\/Brother_Logo-1.png\"\r\n                alt=\"Brother\"\r\n                loading=\"lazy\"\r\n                decoding=\"async\"\r\n              >\r\n            <\/div>\r\n\r\n\r\n            <div class=\"pp-client-logo\">\r\n              <img\r\n                src=\"https:\/\/pinolith.org\/wp-content\/uploads\/2026\/09\/pngaaa.com-1590871-1.png\"\r\n                alt=\"Client logo 12\"\r\n                loading=\"lazy\"\r\n                decoding=\"async\"\r\n              >\r\n            <\/div>\r\n\r\n\r\n            <div class=\"pp-client-logo\">\r\n              <img\r\n                src=\"https:\/\/pinolith.org\/wp-content\/uploads\/2026\/09\/keretapi-tanah-melayu-seeklogo-1.png\"\r\n                alt=\"Keretapi Tanah Melayu\"\r\n                loading=\"lazy\"\r\n                decoding=\"async\"\r\n              >\r\n            <\/div>\r\n\r\n\r\n            <div class=\"pp-client-logo\">\r\n              <img\r\n                src=\"https:\/\/pinolith.org\/wp-content\/uploads\/2026\/09\/maybank-seeklogo-1.png\"\r\n                alt=\"Maybank\"\r\n                loading=\"lazy\"\r\n                decoding=\"async\"\r\n              >\r\n            <\/div>\r\n\r\n\r\n            <div class=\"pp-client-logo\">\r\n              <img\r\n                src=\"https:\/\/pinolith.org\/wp-content\/uploads\/2026\/09\/pngwing.com_-scaled.png\"\r\n                alt=\"Client logo 15\"\r\n                loading=\"lazy\"\r\n                decoding=\"async\"\r\n              >\r\n            <\/div>\r\n\r\n\r\n            <div class=\"pp-client-logo\">\r\n              <img\r\n                src=\"https:\/\/pinolith.org\/wp-content\/uploads\/2026\/09\/tm-seeklogo.png\"\r\n                alt=\"TM\"\r\n                loading=\"lazy\"\r\n                decoding=\"async\"\r\n              >\r\n            <\/div>\r\n\r\n\r\n            <div class=\"pp-client-logo\">\r\n              <img\r\n                src=\"https:\/\/pinolith.org\/wp-content\/uploads\/2026\/09\/Pos_Malaysia_Berhad_idCkveEZe0_0.png\"\r\n                alt=\"Pos Malaysia\"\r\n                loading=\"lazy\"\r\n                decoding=\"async\"\r\n              >\r\n            <\/div>\r\n\r\n\r\n            <div class=\"pp-client-logo\">\r\n              <img\r\n                src=\"https:\/\/pinolith.org\/wp-content\/uploads\/2026\/09\/4551e04cae6b5b1c42bcf77f00ff8eb0.png\"\r\n                alt=\"Client logo 18\"\r\n                loading=\"lazy\"\r\n                decoding=\"async\"\r\n              >\r\n            <\/div>\r\n\r\n\r\n            <div class=\"pp-client-logo\">\r\n              <img\r\n                src=\"https:\/\/pinolith.org\/wp-content\/uploads\/2026\/09\/Perpustakaan-Negara-Malaysia-Logo.png\"\r\n                alt=\"Perpustakaan Negara Malaysia\"\r\n                loading=\"lazy\"\r\n                decoding=\"async\"\r\n              >\r\n            <\/div>\r\n\r\n\r\n            <div class=\"pp-client-logo\">\r\n              <img\r\n                src=\"https:\/\/pinolith.org\/wp-content\/uploads\/2026\/09\/Lembaga-Hasil-Dalam-Negeri-Malaysia-LHDN-Logo.png\"\r\n                alt=\"LHDN\"\r\n                loading=\"lazy\"\r\n                decoding=\"async\"\r\n              >\r\n            <\/div>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n\r\n\r\n      <!-- =================================================\r\n           ROW 3\r\n      ================================================== -->\r\n\r\n      <div\r\n        class=\"\r\n          pp-marquee\r\n          pp-marquee--slow\r\n        \"\r\n        style=\"\r\n          --delay: 430ms\r\n        \"\r\n      >\r\n\r\n        <div class=\"pp-marquee__track\">\r\n\r\n          <div class=\"pp-logo-set\">\r\n\r\n            <div class=\"pp-client-logo\">\r\n              <img\r\n                src=\"https:\/\/pinolith.org\/wp-content\/uploads\/2026\/09\/id4GhJWnbU_logos.png\"\r\n                alt=\"Client logo 21\"\r\n                loading=\"lazy\"\r\n                decoding=\"async\"\r\n              >\r\n            <\/div>\r\n\r\n\r\n            <div class=\"pp-client-logo\">\r\n              <img\r\n                src=\"https:\/\/pinolith.org\/wp-content\/uploads\/2026\/09\/MCMC_Logo-scaled.png\"\r\n                alt=\"MCMC\"\r\n                loading=\"lazy\"\r\n                decoding=\"async\"\r\n              >\r\n            <\/div>\r\n\r\n\r\n            <div class=\"pp-client-logo\">\r\n              <img\r\n                src=\"https:\/\/pinolith.org\/wp-content\/uploads\/2026\/09\/MRANTI_Logo-scaled.png\"\r\n                alt=\"MRANTI\"\r\n                loading=\"lazy\"\r\n                decoding=\"async\"\r\n              >\r\n            <\/div>\r\n\r\n\r\n            <div class=\"pp-client-logo\">\r\n              <img\r\n                src=\"https:\/\/pinolith.org\/wp-content\/uploads\/2026\/09\/Tune-Insurance-Logo.png\"\r\n                alt=\"Tune Insurance\"\r\n                loading=\"lazy\"\r\n                decoding=\"async\"\r\n              >\r\n            <\/div>\r\n\r\n\r\n            <div class=\"pp-client-logo\">\r\n              <img\r\n                src=\"https:\/\/pinolith.org\/wp-content\/uploads\/2026\/09\/Artboard-19-copy-3-1-q8uxi65x7muyghhqn9fauhf2n9hxifkcqaeds04pvs.png\"\r\n                alt=\"Client logo 25\"\r\n                loading=\"lazy\"\r\n                decoding=\"async\"\r\n              >\r\n            <\/div>\r\n\r\n\r\n            <div class=\"pp-client-logo\">\r\n              <img\r\n                src=\"https:\/\/pinolith.org\/wp-content\/uploads\/2026\/09\/news-2017-09-26-1506389541-01.jpg\"\r\n                alt=\"Client logo 26\"\r\n                loading=\"lazy\"\r\n                decoding=\"async\"\r\n              >\r\n            <\/div>\r\n\r\n\r\n            <div class=\"pp-client-logo\">\r\n              <img\r\n                src=\"https:\/\/pinolith.org\/wp-content\/uploads\/2026\/09\/lbs-logo-png_seeklogo-306096.png\"\r\n                alt=\"LBS\"\r\n                loading=\"lazy\"\r\n                decoding=\"async\"\r\n              >\r\n            <\/div>\r\n\r\n\r\n            <div class=\"pp-client-logo\">\r\n              <img\r\n                src=\"https:\/\/pinolith.org\/wp-content\/uploads\/2026\/09\/IGB-Corporation-Berhad.jpg.transformed.webp\"\r\n                alt=\"IGB Corporation Berhad\"\r\n                loading=\"lazy\"\r\n                decoding=\"async\"\r\n              >\r\n            <\/div>\r\n\r\n\r\n            <div class=\"pp-client-logo\">\r\n              <img\r\n                src=\"https:\/\/pinolith.org\/wp-content\/uploads\/2026\/09\/favicon.png\"\r\n                alt=\"Client logo 29\"\r\n                loading=\"lazy\"\r\n                decoding=\"async\"\r\n              >\r\n            <\/div>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n\r\n<script>\r\n(() => {\r\n\r\n  const section =\r\n    document.getElementById(\r\n      \"pixel-pine-trust\"\r\n    );\r\n\r\n\r\n  if (\r\n    !section ||\r\n    section.dataset.ppTrustReady ===\r\n      \"true\"\r\n  ) {\r\n    return;\r\n  }\r\n\r\n\r\n  section.dataset.ppTrustReady =\r\n    \"true\";\r\n\r\n\r\n  \/* =====================================================\r\n     FULL-BLEED WIDTH\r\n  ===================================================== *\/\r\n\r\n  const setWidth = () => {\r\n\r\n    section.style.setProperty(\r\n      \"--pp-vw\",\r\n      `${\r\n        document\r\n          .documentElement\r\n          .clientWidth\r\n      }px`\r\n    );\r\n\r\n  };\r\n\r\n\r\n  setWidth();\r\n\r\n\r\n  window.addEventListener(\r\n    \"resize\",\r\n    setWidth,\r\n    {\r\n      passive: true\r\n    }\r\n  );\r\n\r\n\r\n\r\n  \/* =====================================================\r\n     CLONE LOGO ROWS\r\n\r\n     Creates seamless infinite marquee.\r\n  ===================================================== *\/\r\n\r\n  section\r\n    .querySelectorAll(\r\n      \".pp-marquee__track\"\r\n    )\r\n    .forEach(\r\n      track => {\r\n\r\n        const original =\r\n          track.querySelector(\r\n            \".pp-logo-set\"\r\n          );\r\n\r\n\r\n        if (\r\n          !original ||\r\n          track.children.length > 1\r\n        ) {\r\n          return;\r\n        }\r\n\r\n\r\n        const clone =\r\n          original.cloneNode(\r\n            true\r\n          );\r\n\r\n\r\n        clone.setAttribute(\r\n          \"aria-hidden\",\r\n          \"true\"\r\n        );\r\n\r\n\r\n        track.appendChild(\r\n          clone\r\n        );\r\n\r\n      }\r\n    );\r\n\r\n\r\n\r\n  \/* =====================================================\r\n     REVEAL\r\n  ===================================================== *\/\r\n\r\n  const reveal = () => {\r\n\r\n    section.classList.add(\r\n      \"pp-trust-visible\"\r\n    );\r\n\r\n  };\r\n\r\n\r\n  if (\r\n    !(\r\n      \"IntersectionObserver\"\r\n      in window\r\n    )\r\n  ) {\r\n\r\n    reveal();\r\n\r\n    return;\r\n\r\n  }\r\n\r\n\r\n\r\n  const observer =\r\n    new IntersectionObserver(\r\n      entries => {\r\n\r\n        const entry =\r\n          entries[0];\r\n\r\n\r\n        if (\r\n          !entry ||\r\n          !entry.isIntersecting\r\n        ) {\r\n          return;\r\n        }\r\n\r\n\r\n        reveal();\r\n\r\n\r\n        observer.disconnect();\r\n\r\n      },\r\n      {\r\n        threshold: 0.14,\r\n\r\n        rootMargin:\r\n          \"0px 0px -6% 0px\"\r\n      }\r\n    );\r\n\r\n\r\n  observer.observe(\r\n    section\r\n  );\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-352e219 elementor-widget elementor-widget-html\" data-id=\"352e219\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\r\n  PIXEL PINE \u2014 FINAL CTA \/ CONTACT\r\n  Paste everything into ONE Elementor HTML Widget\r\n\r\n  FINAL:\r\n  - CTA LEFT REMAINS\r\n  - NO TALK TO OUR TEAM BUTTON\r\n  - PHONE\r\n  - WEBSITE\r\n  - ADDRESS\r\n========================================================= -->\r\n\r\n<style>\r\n\r\n\/* =========================================================\r\n   ELEMENTOR RESET\r\n========================================================= *\/\r\n\r\n.elementor-widget-html:has(#contact),\r\n.elementor-widget-html:has(#contact) > .elementor-widget-container {\r\n  width: 100%;\r\n  max-width: none !important;\r\n  margin: 0 !important;\r\n  padding: 0 !important;\r\n}\r\n\r\n.e-con:has(#contact) {\r\n  --gap: 0px !important;\r\n  gap: 0 !important;\r\n  row-gap: 0 !important;\r\n}\r\n\r\n#contact,\r\n#contact * {\r\n  box-sizing: border-box;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SECTION FOUNDATION\r\n========================================================= *\/\r\n\r\n#contact {\r\n  --pp-mint: #84E6D3;\r\n  --pp-indigo: #7E79D7;\r\n  --pp-purple: #AF83E8;\r\n\r\n  --pp-bg: #070C17;\r\n  --pp-white: #F7FAFC;\r\n  --pp-muted: #AFBACB;\r\n  --pp-dim: #758198;\r\n\r\n  --pp-line: rgba(126, 121, 215, 0.18);\r\n\r\n  position: relative;\r\n\r\n  left: 50%;\r\n\r\n  width: 100vw;\r\n  max-width: none !important;\r\n\r\n  margin: 0 !important;\r\n\r\n  transform: translateX(-50%);\r\n\r\n  overflow: hidden;\r\n  isolation: isolate;\r\n\r\n  background: var(--pp-bg);\r\n\r\n  color: var(--pp-white);\r\n\r\n  font-family:\r\n    Manrope,\r\n    Inter,\r\n    \"Segoe UI\",\r\n    Arial,\r\n    sans-serif;\r\n\r\n  scroll-margin-top: 90px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SUBTLE BOTTOM BRAND WAVE\r\n========================================================= *\/\r\n\r\n#contact .pp-contact__wave {\r\n  position: absolute;\r\n\r\n  z-index: -1;\r\n\r\n  right: 0;\r\n  bottom: -95px;\r\n  left: 0;\r\n\r\n  height: 250px;\r\n\r\n  opacity: 0.18;\r\n\r\n  pointer-events: none;\r\n}\r\n\r\n\r\n#contact .pp-contact__wave::before,\r\n#contact .pp-contact__wave::after {\r\n  content: \"\";\r\n\r\n  position: absolute;\r\n\r\n  left: -10%;\r\n\r\n  width: 120%;\r\n  height: 140px;\r\n\r\n  border-top:\r\n    1px\r\n    solid\r\n    rgba(132, 230, 211, 0.50);\r\n\r\n  border-radius: 50%;\r\n\r\n  transform:\r\n    rotate(-2deg);\r\n}\r\n\r\n\r\n#contact .pp-contact__wave::before {\r\n  top: 25px;\r\n\r\n  border-color:\r\n    rgba(132, 230, 211, 0.55);\r\n\r\n  box-shadow:\r\n    0 -2px 20px\r\n    rgba(132, 230, 211, 0.10);\r\n}\r\n\r\n\r\n#contact .pp-contact__wave::after {\r\n  top: 72px;\r\n\r\n  border-color:\r\n    rgba(175, 131, 232, 0.52);\r\n\r\n  transform:\r\n    rotate(2deg);\r\n\r\n  box-shadow:\r\n    0 -2px 20px\r\n    rgba(175, 131, 232, 0.10);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   INNER\r\n========================================================= *\/\r\n\r\n#contact .pp-contact__inner {\r\n  position: relative;\r\n\r\n  z-index: 2;\r\n\r\n  display: grid;\r\n\r\n  grid-template-columns:\r\n    minmax(0, 1.12fr)\r\n    minmax(370px, 0.88fr);\r\n\r\n  align-items: center;\r\n\r\n  column-gap:\r\n    clamp(\r\n      70px,\r\n      8vw,\r\n      125px\r\n    );\r\n\r\n  width:\r\n    min(\r\n      1360px,\r\n      calc(100% - 80px)\r\n    );\r\n\r\n  min-height: 690px;\r\n\r\n  margin: 0 auto;\r\n\r\n  padding:\r\n    105px\r\n    0\r\n    84px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   LEFT CTA\r\n========================================================= *\/\r\n\r\n#contact .pp-contact__cta {\r\n  max-width: 720px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   EYEBROW\r\n========================================================= *\/\r\n\r\n#contact .pp-contact__eyebrow {\r\n  display: flex;\r\n\r\n  align-items: center;\r\n\r\n  gap: 13px;\r\n\r\n  margin:\r\n    0\r\n    0\r\n    24px;\r\n\r\n  color: var(--pp-mint);\r\n\r\n  font-size:\r\n    clamp(\r\n      10px,\r\n      0.9vw,\r\n      13px\r\n    );\r\n\r\n  font-weight: 760;\r\n\r\n  line-height: 1.4;\r\n\r\n  letter-spacing: 0.30em;\r\n\r\n  text-transform: uppercase;\r\n}\r\n\r\n\r\n#contact .pp-contact__eyebrow::before {\r\n  content: \"\";\r\n\r\n  width: 28px;\r\n  height: 1px;\r\n\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      var(--pp-mint),\r\n      var(--pp-indigo)\r\n    );\r\n\r\n  box-shadow:\r\n    0 0 10px\r\n    rgba(132, 230, 211, 0.28);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HEADING\r\n========================================================= *\/\r\n\r\n#contact .pp-contact__title {\r\n  max-width: 700px;\r\n\r\n  margin: 0;\r\n\r\n  color: var(--pp-white);\r\n\r\n  font-size:\r\n    clamp(\r\n      52px,\r\n      5vw,\r\n      76px\r\n    );\r\n\r\n  font-weight: 770;\r\n\r\n  line-height: 0.99;\r\n\r\n  letter-spacing: -0.058em;\r\n\r\n  text-wrap: balance;\r\n}\r\n\r\n\r\n#contact .pp-contact__title span {\r\n  color: transparent;\r\n\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      var(--pp-mint),\r\n      var(--pp-indigo),\r\n      var(--pp-purple)\r\n    );\r\n\r\n  -webkit-background-clip: text;\r\n  background-clip: text;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   DESCRIPTION\r\n========================================================= *\/\r\n\r\n#contact .pp-contact__description {\r\n  max-width: 610px;\r\n\r\n  margin:\r\n    28px\r\n    0\r\n    0;\r\n\r\n  color: var(--pp-muted);\r\n\r\n  font-size:\r\n    clamp(\r\n      16px,\r\n      1.25vw,\r\n      19px\r\n    );\r\n\r\n  font-weight: 440;\r\n\r\n  line-height: 1.65;\r\n\r\n  letter-spacing: -0.015em;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CTA BUTTON CSS\r\n   Kept exactly as original.\r\n   No button is used in HTML below.\r\n========================================================= *\/\r\n\r\n#contact .pp-contact__button {\r\n  position: relative;\r\n\r\n  display: inline-flex;\r\n\r\n  align-items: center;\r\n  justify-content: center;\r\n\r\n  gap: 13px;\r\n\r\n  min-height: 57px;\r\n\r\n  margin-top: 37px;\r\n\r\n  padding:\r\n    0\r\n    29px;\r\n\r\n  overflow: hidden;\r\n\r\n  border:\r\n    1px\r\n    solid\r\n    rgba(196, 255, 244, 0.42);\r\n\r\n  border-radius: 10px;\r\n\r\n  color: #071019;\r\n\r\n  background:\r\n    linear-gradient(\r\n      135deg,\r\n      #84E6D3,\r\n      #A1F0E1\r\n    );\r\n\r\n  box-shadow:\r\n    0 14px 40px\r\n    rgba(132, 230, 211, 0.20);\r\n\r\n  font-size: 14px;\r\n\r\n  font-weight: 760;\r\n\r\n  line-height: 1;\r\n\r\n  text-decoration: none;\r\n\r\n  transition:\r\n    transform\r\n    250ms\r\n    cubic-bezier(.22, 1, .36, 1),\r\n\r\n    box-shadow\r\n    250ms\r\n    ease;\r\n}\r\n\r\n\r\n#contact .pp-contact__button svg {\r\n  width: 18px;\r\n  height: 18px;\r\n\r\n  fill: none;\r\n\r\n  stroke: currentColor;\r\n\r\n  stroke-width: 1.8;\r\n\r\n  stroke-linecap: round;\r\n  stroke-linejoin: round;\r\n\r\n  transition:\r\n    transform\r\n    250ms\r\n    ease;\r\n}\r\n\r\n\r\n#contact .pp-contact__button:hover {\r\n  transform:\r\n    translateY(-3px);\r\n\r\n  box-shadow:\r\n    0 18px 50px\r\n    rgba(132, 230, 211, 0.30),\r\n\r\n    0 0 28px\r\n    rgba(126, 121, 215, 0.11);\r\n}\r\n\r\n\r\n#contact .pp-contact__button:hover svg {\r\n  transform:\r\n    translateX(4px);\r\n}\r\n\r\n\r\n#contact .pp-contact__button:focus-visible,\r\n#contact .pp-contact__details a:focus-visible {\r\n  outline:\r\n    3px\r\n    solid\r\n    rgba(132, 230, 211, 0.70);\r\n\r\n  outline-offset: 5px;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CONTACT DETAILS\r\n========================================================= *\/\r\n\r\n#contact .pp-contact__details {\r\n  position: relative;\r\n\r\n  padding:\r\n    18px\r\n    0\r\n    18px\r\n    clamp(\r\n      36px,\r\n      4vw,\r\n      62px\r\n    );\r\n\r\n  border-left:\r\n    1px\r\n    solid\r\n    var(--pp-line);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   ANIMATED SCAN LINE\r\n========================================================= *\/\r\n\r\n#contact .pp-contact__details::before {\r\n  content: \"\";\r\n\r\n  position: absolute;\r\n\r\n  top: 0;\r\n  left: -1px;\r\n\r\n  width: 1px;\r\n  height: 92px;\r\n\r\n  background:\r\n    linear-gradient(\r\n      180deg,\r\n      transparent,\r\n      var(--pp-mint),\r\n      var(--pp-indigo),\r\n      var(--pp-purple),\r\n      transparent\r\n    );\r\n\r\n  box-shadow:\r\n    0\r\n    0\r\n    14px\r\n    rgba(126, 121, 215, 0.55);\r\n\r\n  animation:\r\n    ppContactScan\r\n    5.6s\r\n    ease-in-out\r\n    infinite;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   DETAIL ROW\r\n========================================================= *\/\r\n\r\n#contact .pp-contact__detail {\r\n  display: grid;\r\n\r\n  grid-template-columns:\r\n    48px\r\n    minmax(0, 1fr);\r\n\r\n  align-items: center;\r\n\r\n  gap: 19px;\r\n\r\n  padding:\r\n    29px\r\n    0;\r\n\r\n  border-bottom:\r\n    1px\r\n    solid\r\n    var(--pp-line);\r\n}\r\n\r\n\r\n#contact .pp-contact__detail:first-child {\r\n  padding-top: 7px;\r\n}\r\n\r\n\r\n#contact .pp-contact__detail:last-child {\r\n  padding-bottom: 7px;\r\n\r\n  border-bottom: 0;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   DETAIL ICON\r\n========================================================= *\/\r\n\r\n#contact .pp-contact__icon {\r\n  display: grid;\r\n\r\n  place-items: center;\r\n\r\n  width: 46px;\r\n  height: 46px;\r\n\r\n  border:\r\n    1px\r\n    solid\r\n    rgba(126, 121, 215, 0.24);\r\n\r\n  border-radius: 12px;\r\n\r\n  background:\r\n    rgba(126, 121, 215, 0.055);\r\n\r\n  box-shadow:\r\n    inset\r\n    0\r\n    0\r\n    20px\r\n    rgba(126, 121, 215, 0.04);\r\n}\r\n\r\n\r\n\/* PHONE *\/\r\n\r\n#contact\r\n.pp-contact__detail:nth-child(1)\r\n.pp-contact__icon {\r\n  color: var(--pp-mint);\r\n}\r\n\r\n\r\n\/* WEBSITE *\/\r\n\r\n#contact\r\n.pp-contact__detail:nth-child(2)\r\n.pp-contact__icon {\r\n  color: var(--pp-indigo-light, #9691E8);\r\n}\r\n\r\n\r\n\/* ADDRESS *\/\r\n\r\n#contact\r\n.pp-contact__detail:nth-child(3)\r\n.pp-contact__icon {\r\n  color: var(--pp-purple);\r\n}\r\n\r\n\r\n#contact .pp-contact__icon svg {\r\n  width: 21px;\r\n  height: 21px;\r\n\r\n  fill: none;\r\n\r\n  stroke: currentColor;\r\n\r\n  stroke-width: 1.55;\r\n\r\n  stroke-linecap: round;\r\n  stroke-linejoin: round;\r\n\r\n  filter:\r\n    drop-shadow(\r\n      0\r\n      0\r\n      5px\r\n      currentColor\r\n    );\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   DETAIL COPY\r\n========================================================= *\/\r\n\r\n#contact .pp-contact__label {\r\n  margin:\r\n    0\r\n    0\r\n    7px;\r\n\r\n  color: var(--pp-dim);\r\n\r\n  font-size: 10px;\r\n\r\n  font-weight: 750;\r\n\r\n  line-height: 1.3;\r\n\r\n  letter-spacing: 0.22em;\r\n\r\n  text-transform: uppercase;\r\n}\r\n\r\n\r\n#contact .pp-contact__value,\r\n#contact .pp-contact__value:visited {\r\n  display: inline-block;\r\n\r\n  max-width: 100%;\r\n\r\n  margin: 0;\r\n\r\n  color: var(--pp-white);\r\n\r\n  font-size:\r\n    clamp(\r\n      16px,\r\n      1.2vw,\r\n      19px\r\n    );\r\n\r\n  font-weight: 560;\r\n\r\n  line-height: 1.55;\r\n\r\n  letter-spacing: -0.015em;\r\n\r\n  overflow-wrap: anywhere;\r\n\r\n  text-decoration: none;\r\n\r\n  transition:\r\n    color\r\n    220ms\r\n    ease;\r\n}\r\n\r\n\r\n#contact a.pp-contact__value:hover {\r\n  color: var(--pp-mint-light, #A1F0E1);\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   REVEAL\r\n========================================================= *\/\r\n\r\n#contact .pp-contact-reveal {\r\n  opacity: 0;\r\n\r\n  transform:\r\n    translateY(28px);\r\n\r\n  filter: blur(4px);\r\n\r\n  transition:\r\n    opacity\r\n    820ms\r\n    cubic-bezier(.22, 1, .36, 1),\r\n\r\n    transform\r\n    820ms\r\n    cubic-bezier(.22, 1, .36, 1),\r\n\r\n    filter\r\n    820ms\r\n    ease;\r\n}\r\n\r\n\r\n#contact\r\n.pp-contact-reveal.is-visible {\r\n  opacity: 1;\r\n\r\n  transform:\r\n    translateY(0);\r\n\r\n  filter: blur(0);\r\n}\r\n\r\n\r\n#contact\r\n.pp-contact__details.pp-contact-reveal {\r\n  transition-delay: 130ms;\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   KEYFRAMES\r\n========================================================= *\/\r\n\r\n@keyframes ppContactScan {\r\n\r\n  0%,\r\n  100% {\r\n    transform:\r\n      translateY(0);\r\n\r\n    opacity: 0.35;\r\n  }\r\n\r\n  50% {\r\n    transform:\r\n      translateY(245px);\r\n\r\n    opacity: 1;\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TABLET\r\n========================================================= *\/\r\n\r\n@media (max-width: 1080px) {\r\n\r\n  #contact .pp-contact__inner {\r\n    grid-template-columns:\r\n      minmax(0, 1fr)\r\n      minmax(330px, 0.86fr);\r\n\r\n    column-gap: 58px;\r\n\r\n    width:\r\n      min(\r\n        1360px,\r\n        calc(100% - 64px)\r\n      );\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SMALL TABLET\r\n========================================================= *\/\r\n\r\n@media (max-width: 860px) {\r\n\r\n  #contact .pp-contact__inner {\r\n    display: block;\r\n\r\n    width:\r\n      min(\r\n        100% - 48px,\r\n        720px\r\n      );\r\n\r\n    min-height: auto;\r\n\r\n    padding:\r\n      88px\r\n      0\r\n      70px;\r\n  }\r\n\r\n\r\n  #contact .pp-contact__cta {\r\n    max-width: 680px;\r\n\r\n    padding-bottom: 62px;\r\n  }\r\n\r\n\r\n  #contact .pp-contact__details {\r\n    padding:\r\n      8px\r\n      0\r\n      8px\r\n      30px;\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MOBILE\r\n========================================================= *\/\r\n\r\n@media (max-width: 620px) {\r\n\r\n  #contact {\r\n    left: auto;\r\n\r\n    width: 100%;\r\n\r\n    transform: none;\r\n  }\r\n\r\n\r\n  #contact .pp-contact__inner {\r\n    width:\r\n      min(\r\n        100% - 36px,\r\n        540px\r\n      );\r\n\r\n    padding:\r\n      74px\r\n      0\r\n      60px;\r\n  }\r\n\r\n\r\n  #contact .pp-contact__eyebrow {\r\n    margin-bottom: 20px;\r\n\r\n    font-size: 9px;\r\n\r\n    letter-spacing: 0.21em;\r\n  }\r\n\r\n\r\n  #contact .pp-contact__title {\r\n    font-size:\r\n      clamp(\r\n        44px,\r\n        13vw,\r\n        58px\r\n      );\r\n  }\r\n\r\n\r\n  #contact .pp-contact__description {\r\n    margin-top: 23px;\r\n\r\n    font-size: 15.5px;\r\n  }\r\n\r\n\r\n  #contact .pp-contact__button {\r\n    width: 100%;\r\n\r\n    min-height: 55px;\r\n\r\n    margin-top: 31px;\r\n  }\r\n\r\n\r\n  #contact .pp-contact__cta {\r\n    padding-bottom: 51px;\r\n  }\r\n\r\n\r\n  #contact .pp-contact__details {\r\n    padding-left: 19px;\r\n  }\r\n\r\n\r\n  #contact .pp-contact__detail {\r\n    grid-template-columns:\r\n      42px\r\n      minmax(0, 1fr);\r\n\r\n    gap: 15px;\r\n\r\n    padding:\r\n      23px\r\n      0;\r\n  }\r\n\r\n\r\n  #contact .pp-contact__icon {\r\n    width: 40px;\r\n    height: 40px;\r\n\r\n    border-radius: 10px;\r\n  }\r\n\r\n\r\n  #contact .pp-contact__icon svg {\r\n    width: 19px;\r\n    height: 19px;\r\n  }\r\n\r\n\r\n  #contact .pp-contact__value {\r\n    font-size: 15px;\r\n  }\r\n\r\n\r\n  #contact .pp-contact__details::before {\r\n    height: 75px;\r\n  }\r\n\r\n\r\n  #contact .pp-contact__wave {\r\n    bottom: -120px;\r\n\r\n    opacity: 0.12;\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   REDUCED MOTION\r\n========================================================= *\/\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n\r\n  #contact *,\r\n  #contact *::before,\r\n  #contact *::after {\r\n    animation-duration:\r\n      0.01ms !important;\r\n\r\n    animation-iteration-count:\r\n      1 !important;\r\n\r\n    transition-duration:\r\n      0.01ms !important;\r\n  }\r\n\r\n\r\n  #contact .pp-contact-reveal {\r\n    opacity: 1;\r\n\r\n    transform: none;\r\n\r\n    filter: none;\r\n  }\r\n\r\n\r\n  #contact .pp-contact__details::before {\r\n    animation: none !important;\r\n  }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n\r\n<!-- =========================================================\r\n     HTML\r\n========================================================= -->\r\n\r\n<section\r\n  id=\"contact\"\r\n  aria-labelledby=\"pixel-pine-contact-title\"\r\n>\r\n\r\n  <!-- decorative wave -->\r\n\r\n  <div\r\n    class=\"pp-contact__wave\"\r\n    aria-hidden=\"true\"\r\n  ><\/div>\r\n\r\n\r\n  <div class=\"pp-contact__inner\">\r\n\r\n\r\n    <!-- =====================================================\r\n         LEFT CTA\r\n    ====================================================== -->\r\n\r\n    <div\r\n      class=\"\r\n        pp-contact__cta\r\n        pp-contact-reveal\r\n      \"\r\n    >\r\n\r\n      <p class=\"pp-contact__eyebrow\">\r\n        Ready to Make AI Operational\r\n      <\/p>\r\n\r\n\r\n      <h2\r\n        id=\"pixel-pine-contact-title\"\r\n        class=\"pp-contact__title\"\r\n      >\r\n        Let\u2019s make AI\r\n\r\n        <br \/>\r\n\r\n        <span>\r\n          operational.\r\n        <\/span>\r\n      <\/h2>\r\n\r\n\r\n      <p class=\"pp-contact__description\">\r\n        Talk to Pixel Pine about turning AI ideas\r\n        into practical systems that work across your business.\r\n      <\/p>\r\n\r\n\r\n      <!--\r\n        TALK TO OUR TEAM BUTTON REMOVED.\r\n        NOTHING ELSE CHANGED.\r\n      -->\r\n\r\n\r\n    <\/div>\r\n\r\n\r\n\r\n    <!-- =====================================================\r\n         RIGHT DETAILS\r\n    ====================================================== -->\r\n\r\n    <div\r\n      class=\"\r\n        pp-contact__details\r\n        pp-contact-reveal\r\n      \"\r\n    >\r\n\r\n\r\n      <!-- =================================================\r\n           PHONE\r\n      ================================================== -->\r\n\r\n      <div class=\"pp-contact__detail\">\r\n\r\n        <div\r\n          class=\"pp-contact__icon\"\r\n          aria-hidden=\"true\"\r\n        >\r\n\r\n          <svg viewBox=\"0 0 24 24\">\r\n\r\n            <path\r\n              d=\"\r\n                M8.2 3.8\r\n                10 8.2\r\n                7.8 10\r\n                a14 14 0 0 0 6.2 6.2\r\n                l1.8-2.2\r\n                4.4 1.8\r\n                v2.8\r\n                a2 2 0 0 1-2.2 2\r\n                C10.3 19.7 4.3 13.7 3.4 6\r\n                A2 2 0 0 1 5.4 3.8\r\n                h2.8Z\r\n              \"\r\n            \/>\r\n\r\n          <\/svg>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div>\r\n\r\n          <p class=\"pp-contact__label\">\r\n            Phone\r\n          <\/p>\r\n\r\n\r\n          <a\r\n            class=\"pp-contact__value\"\r\n            href=\"tel:+60360960063\"\r\n          >\r\n            +603-6096 0063\r\n          <\/a>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n\r\n\r\n      <!-- =================================================\r\n           WEBSITE\r\n      ================================================== -->\r\n\r\n      <div class=\"pp-contact__detail\">\r\n\r\n        <div\r\n          class=\"pp-contact__icon\"\r\n          aria-hidden=\"true\"\r\n        >\r\n\r\n          <svg viewBox=\"0 0 24 24\">\r\n\r\n            <circle\r\n              cx=\"12\"\r\n              cy=\"12\"\r\n              r=\"9\"\r\n            \/>\r\n\r\n\r\n            <path d=\"M3 12h18\"\/>\r\n\r\n\r\n            <path\r\n              d=\"\r\n                M12 3\r\n                c2.3 2.5 3.5 5.5 3.5 9\r\n                S14.3 18.5 12 21\r\n\r\n                M12 3\r\n                C9.7 5.5 8.5 8.5 8.5 12\r\n                s1.2 6.5 3.5 9\r\n              \"\r\n            \/>\r\n\r\n          <\/svg>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div>\r\n\r\n          <p class=\"pp-contact__label\">\r\n            Website\r\n          <\/p>\r\n\r\n\r\n          <a\r\n            class=\"pp-contact__value\"\r\n            href=\"https:\/\/pixel-pine.com\/\"\r\n            target=\"_blank\"\r\n            rel=\"noopener\"\r\n          >\r\n            pixel-pine.com\r\n          <\/a>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n\r\n\r\n      <!-- =================================================\r\n           ADDRESS\r\n      ================================================== -->\r\n\r\n      <div class=\"pp-contact__detail\">\r\n\r\n        <div\r\n          class=\"pp-contact__icon\"\r\n          aria-hidden=\"true\"\r\n        >\r\n\r\n          <svg viewBox=\"0 0 24 24\">\r\n\r\n            <path\r\n              d=\"\r\n                M20 10\r\n                c0 5.5-8 11-8 11\r\n                S4 15.5 4 10\r\n                a8 8 0 1 1 16 0Z\r\n              \"\r\n            \/>\r\n\r\n\r\n            <circle\r\n              cx=\"12\"\r\n              cy=\"10\"\r\n              r=\"2.6\"\r\n            \/>\r\n\r\n          <\/svg>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div>\r\n\r\n          <p class=\"pp-contact__label\">\r\n            Address\r\n          <\/p>\r\n\r\n\r\n          <span\r\n            class=\"pp-contact__value\"\r\n          >\r\n            SR-WG-01, ASB 11, Jalan Dato Onn,<br>\r\n            50480 Kuala Lumpur\r\n          <\/span>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n\r\n<script>\r\n\r\n(() => {\r\n\r\n  const section =\r\n    document.getElementById(\r\n      \"contact\"\r\n    );\r\n\r\n\r\n  if (\r\n    !section ||\r\n    section.dataset.ppContactReady ===\r\n      \"true\"\r\n  ) {\r\n    return;\r\n  }\r\n\r\n\r\n  section.dataset.ppContactReady =\r\n    \"true\";\r\n\r\n\r\n  const items =\r\n    section.querySelectorAll(\r\n      \".pp-contact-reveal\"\r\n    );\r\n\r\n\r\n  \/* =====================================================\r\n     FALLBACK\r\n  ===================================================== *\/\r\n\r\n  if (\r\n    !(\r\n      \"IntersectionObserver\"\r\n      in window\r\n    )\r\n  ) {\r\n\r\n    items.forEach(\r\n      item =>\r\n        item.classList.add(\r\n          \"is-visible\"\r\n        )\r\n    );\r\n\r\n    return;\r\n\r\n  }\r\n\r\n\r\n  \/* =====================================================\r\n     REVEAL\r\n  ===================================================== *\/\r\n\r\n  const observer =\r\n    new IntersectionObserver(\r\n      entries => {\r\n\r\n        entries.forEach(\r\n          entry => {\r\n\r\n            if (\r\n              !entry.isIntersecting\r\n            ) {\r\n              return;\r\n            }\r\n\r\n\r\n            entry.target.classList.add(\r\n              \"is-visible\"\r\n            );\r\n\r\n\r\n            observer.unobserve(\r\n              entry.target\r\n            );\r\n\r\n          }\r\n        );\r\n\r\n      },\r\n      {\r\n        threshold: 0.17,\r\n\r\n        rootMargin:\r\n          \"0px 0px -6% 0px\"\r\n      }\r\n    );\r\n\r\n\r\n  items.forEach(\r\n    item =>\r\n      observer.observe(\r\n        item\r\n      )\r\n  );\r\n\r\n})();\r\n\r\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>Enterprise AI Implementation &amp; Managed AI Operations Turn AI Ambition Into Operational Workflows. Pixel Pine designs and operates practical AI [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1130","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/pixel-pine.com\/index.php?rest_route=\/wp\/v2\/pages\/1130","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pixel-pine.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pixel-pine.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pixel-pine.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pixel-pine.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1130"}],"version-history":[{"count":175,"href":"https:\/\/pixel-pine.com\/index.php?rest_route=\/wp\/v2\/pages\/1130\/revisions"}],"predecessor-version":[{"id":1583,"href":"https:\/\/pixel-pine.com\/index.php?rest_route=\/wp\/v2\/pages\/1130\/revisions\/1583"}],"wp:attachment":[{"href":"https:\/\/pixel-pine.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1130"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}