{"id":11,"date":"2026-08-04T15:14:34","date_gmt":"2026-08-04T15:14:34","guid":{"rendered":"https:\/\/brandwebhub.com\/?page_id=11"},"modified":"2026-08-04T16:51:56","modified_gmt":"2026-08-04T16:51:56","slug":"home","status":"publish","type":"page","link":"https:\/\/brandwebhub.com\/","title":{"rendered":"Home"},"content":{"rendered":"\n<style data-wp-block-html=\"css\">\n@import url(\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap\");\n\n.bwh-hero {\n  --bwh-red: #ff2028;\n  --bwh-red-dark: #d9141c;\n  --bwh-dark: #0b0b0d;\n  --bwh-white: #ffffff;\n  --bwh-muted: #a7a7ad;\n  --bwh-border: rgba(255, 255, 255, 0.12);\n\n  position: relative;\n  isolation: isolate;\n  width: 100%;\n  min-height: clamp(720px, 100svh, 960px);\n  margin: 0;\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  color: var(--bwh-white);\n  background:\n    radial-gradient(\n      circle at 74% 42%,\n      rgba(255, 32, 40, 0.09),\n      transparent 28%\n    ),\n    linear-gradient(135deg, #09090b 0%, #0e0e12 55%, #09090b 100%);\n  font-family: \"Inter\", Arial, sans-serif;\n}\n\n.bwh-hero * {\n  box-sizing: border-box;\n}\n\n.bwh-grid {\n  position: absolute;\n  inset: 0;\n  z-index: -3;\n  opacity: 0.32;\n  pointer-events: none;\n  background-image:\n    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),\n    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);\n  background-size: 64px 64px;\n  mask-image: linear-gradient(to bottom, black, transparent 90%);\n  -webkit-mask-image: linear-gradient(to bottom, black, transparent 90%);\n}\n\n.bwh-glow {\n  position: absolute;\n  z-index: -2;\n  border-radius: 50%;\n  pointer-events: none;\n}\n\n.bwh-glow-one {\n  width: 520px;\n  height: 520px;\n  top: 10%;\n  right: 1%;\n  background: radial-gradient(\n    circle,\n    rgba(255, 32, 40, 0.15),\n    transparent 68%\n  );\n  animation: bwhPulse 6s ease-in-out infinite;\n}\n\n.bwh-glow-two {\n  width: 300px;\n  height: 300px;\n  left: -120px;\n  bottom: -100px;\n  background: radial-gradient(\n    circle,\n    rgba(255, 32, 40, 0.08),\n    transparent 70%\n  );\n}\n\n.bwh-hero-inner {\n  width: min(1240px, calc(100% - 48px));\n  margin: auto;\n  padding: 20px 0 10px;\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(480px, 0.92fr);\n  align-items: center;\n  gap: clamp(40px, 6vw, 100px);\n}\n\n\/* Left content *\/\n\n.bwh-copy {\n  position: relative;\n  z-index: 2;\n  max-width: 700px;\n}\n\n.bwh-kicker {\n  margin: 0 0 24px;\n  display: flex;\n  align-items: center;\n  gap: 11px;\n  color: #d5d5da;\n  font-size: 12px;\n  font-weight: 700;\n  letter-spacing: 0.19em;\n  line-height: 1.4;\n  text-transform: uppercase;\n}\n\n.bwh-kicker span {\n  width: 30px;\n  height: 2px;\n  flex-shrink: 0;\n  background: var(--bwh-red);\n  box-shadow: 0 0 15px var(--bwh-red);\n}\n\n.bwh-copy h1 {\n  max-width: 740px;\n  margin: 0;\n  color: var(--bwh-white);\n  font-family: \"Manrope\", \"Inter\", sans-serif;\n  \/*font-size: clamp(55px, 5.5vw, 78px);*\/\n  font-weight: 800;\n  line-height: 1.02;\n  letter-spacing: -0.055em;\n  text-wrap: balance;\n}\n\n.bwh-copy h1 em {\n  display: block;\n  color: var(--bwh-red);\n  font-style: normal;\n  text-shadow: 0 0 38px rgba(255, 32, 40, 0.18);\n}\n\n.bwh-intro {\n  max-width: 620px;\n  margin: 28px 0 0;\n  color: var(--bwh-muted);\n  font-size: clamp(16px, 1.4vw, 19px);\n  line-height: 1.75;\n}\n\n.bwh-actions {\n  margin-top: 35px;\n  display: flex;\n  flex-wrap: wrap;\n  gap: 14px;\n}\n\n.bwh-btn {\n  min-height: 54px;\n  padding: 0 23px;\n  border: 1px solid transparent;\n  border-radius: 10px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  color: #ffffff !important;\n  font-size: 14px;\n  font-weight: 700;\n  line-height: 1;\n  text-decoration: none !important;\n  transition:\n    transform 0.25s ease,\n    background 0.25s ease,\n    border-color 0.25s ease,\n    box-shadow 0.25s ease;\n}\n\n.bwh-btn svg {\n  width: 19px;\n  fill: none;\n  stroke: currentColor;\n  stroke-width: 1.8;\n  transition: transform 0.25s ease;\n}\n\n.bwh-btn:hover {\n  color: #ffffff !important;\n  transform: translateY(-3px);\n}\n\n.bwh-btn:hover svg {\n  transform: translateX(4px);\n}\n\n.bwh-btn-primary {\n  background: var(--bwh-red);\n  box-shadow: 0 12px 35px rgba(255, 32, 40, 0.18);\n}\n\n.bwh-btn-primary:hover {\n  background: var(--bwh-red-dark);\n  box-shadow: 0 15px 38px rgba(255, 32, 40, 0.3);\n}\n\n.bwh-btn-ghost {\n  border-color: rgba(255, 255, 255, 0.22);\n  background: rgba(255, 255, 255, 0.025);\n  backdrop-filter: blur(8px);\n  -webkit-backdrop-filter: blur(8px);\n}\n\n.bwh-btn-ghost:hover {\n  border-color: rgba(255, 255, 255, 0.48);\n  background: rgba(255, 255, 255, 0.07);\n}\n\n.bwh-proof {\n  margin-top: 48px;\n  padding-top: 27px;\n  border-top: 1px solid var(--bwh-border);\n  display: flex;\n  gap: 30px;\n}\n\n.bwh-proof > div {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: center;\n  gap: 9px;\n}\n\n.bwh-proof > div + div {\n  padding-left: 30px;\n  border-left: 1px solid var(--bwh-border);\n}\n\n.bwh-proof strong {\n  color: #ffffff;\n  font-family: \"Manrope\", sans-serif;\n  font-size: 20px;\n}\n\n.bwh-proof span {\n  max-width: 75px;\n  color: #888890;\n  font-size: 10px;\n  line-height: 1.35;\n  letter-spacing: 0.09em;\n  text-transform: uppercase;\n}\n\n\/* Right animated area *\/\n\n.bwh-stage {\n  position: relative;\n  height: 590px;\n  perspective: 1200px;\n  transform-style: preserve-3d;\n  transition: transform 0.18s ease-out;\n}\n\n.bwh-open-frame {\n  position: absolute;\n  left: 11%;\n  top: 10%;\n  width: 72%;\n  height: 75%;\n  filter: drop-shadow(0 0 22px rgba(255, 32, 40, 0.16));\n}\n\n.bwh-edge {\n  position: absolute;\n  display: block;\n  border-radius: 3px;\n  background: var(--bwh-red);\n}\n\n.bwh-edge-top {\n  top: 0;\n  left: 0;\n  width: 72%;\n  height: 3px;\n  transform-origin: left;\n  animation: bwhDrawX 0.8s 0.15s both;\n}\n\n.bwh-edge-right {\n  top: 0;\n  right: 0;\n  width: 3px;\n  height: 43%;\n  transform-origin: top;\n  animation: bwhDrawY 0.7s 0.8s both;\n}\n\n.bwh-edge-bottom {\n  right: 0;\n  bottom: 0;\n  width: 58%;\n  height: 3px;\n  transform-origin: right;\n  animation: bwhDrawX 0.8s 1.35s both;\n}\n\n.bwh-edge-left {\n  left: 0;\n  bottom: 0;\n  width: 3px;\n  height: 54%;\n  transform-origin: bottom;\n  animation: bwhDrawY 0.7s 2s both;\n}\n\n\/* Browser display *\/\n\n.bwh-browser {\n  position: absolute;\n  z-index: 3;\n  top: 17%;\n  left: 0;\n  width: 83%;\n  height: 345px;\n  overflow: hidden;\n  border: 1px solid rgba(255, 255, 255, 0.15);\n  border-radius: 14px;\n  background: #15151a;\n  box-shadow: 0 35px 70px rgba(0, 0, 0, 0.55);\n  transform: rotateY(-7deg) rotateX(2deg);\n}\n\n.bwh-browser-bar {\n  height: 36px;\n  padding: 0 12px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: #1c1c22;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.07);\n}\n\n.bwh-browser-bar span {\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  background: #3b3b43;\n}\n\n.bwh-browser-bar span:first-child {\n  background: var(--bwh-red);\n}\n\n.bwh-browser-bar small {\n  margin: auto;\n  color: #6f6f77;\n  font-size: 8px;\n  letter-spacing: 0.05em;\n}\n\n.bwh-browser-body {\n  height: calc(100% - 36px);\n  padding: 19px 22px;\n  background:\n    radial-gradient(\n      circle at 75% 30%,\n      rgba(255, 32, 40, 0.14),\n      transparent 24%\n    ),\n    linear-gradient(130deg, #101014, #17171d);\n}\n\n.bwh-mini-nav {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.bwh-mini-nav b {\n  margin-right: auto;\n  color: var(--bwh-red);\n  font-size: 13px;\n}\n\n.bwh-mini-nav i {\n  width: 25px;\n  height: 3px;\n  border-radius: 4px;\n  background: #3b3b42;\n}\n\n.bwh-mini-hero {\n  padding: 38px 0 25px;\n}\n\n.bwh-mini-hero small {\n  color: var(--bwh-red);\n  font-size: 7px;\n  font-weight: 700;\n  letter-spacing: 0.2em;\n}\n\n.bwh-mini-hero strong {\n  display: block;\n  margin-top: 8px;\n  color: #ffffff;\n  font-family: \"Manrope\", sans-serif;\n  font-size: 29px;\n  line-height: 1.03;\n  letter-spacing: -0.04em;\n}\n\n.bwh-mini-hero strong em {\n  color: var(--bwh-red);\n  font-style: normal;\n}\n\n.bwh-mini-hero > span {\n  display: block;\n  width: 65px;\n  height: 18px;\n  margin-top: 16px;\n  border-radius: 4px;\n  background: var(--bwh-red);\n}\n\n.bwh-mini-cards {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 8px;\n}\n\n.bwh-mini-cards i {\n  height: 45px;\n  border: 1px solid rgba(255, 255, 255, 0.08);\n  border-radius: 7px;\n  background: rgba(255, 255, 255, 0.035);\n}\n\n\/* Performance card *\/\n\n.bwh-dashboard {\n  position: absolute;\n  z-index: 5;\n  right: -3%;\n  bottom: 12%;\n  width: 205px;\n  padding: 16px;\n  border: 1px solid rgba(255, 255, 255, 0.14);\n  border-radius: 13px;\n  background: rgba(24, 24, 30, 0.92);\n  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.45);\n  backdrop-filter: blur(12px);\n  -webkit-backdrop-filter: blur(12px);\n}\n\n.bwh-dash-top {\n  display: flex;\n  align-items: center;\n  gap: 7px;\n}\n\n.bwh-dash-top i {\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  background: var(--bwh-red);\n  box-shadow: 0 0 9px var(--bwh-red);\n}\n\n.bwh-dash-top b {\n  color: #ffffff;\n  font-size: 10px;\n}\n\n.bwh-dash-top span {\n  margin-left: auto;\n  color: #65d79a;\n  font-size: 7px;\n  text-transform: uppercase;\n}\n\n.bwh-dashboard p {\n  margin: 18px 0 4px;\n  color: #777780;\n  font-size: 8px;\n}\n\n.bwh-dashboard > strong {\n  color: #ffffff;\n  font-size: 25px;\n}\n\n.bwh-chart {\n  height: 45px;\n  margin-top: 14px;\n  display: flex;\n  align-items: end;\n  gap: 6px;\n}\n\n.bwh-chart i {\n  flex: 1;\n  height: 40%;\n  border-radius: 2px 2px 0 0;\n  background: #373740;\n}\n\n.bwh-chart i:nth-child(2) { height: 55%; }\n.bwh-chart i:nth-child(3) { height: 43%; }\n.bwh-chart i:nth-child(4) { height: 72%; background: #7c2a30; }\n.bwh-chart i:nth-child(5) { height: 65%; background: #a8272e; }\n.bwh-chart i:nth-child(6) { height: 94%; background: var(--bwh-red); }\n\n\/* Code card *\/\n\n.bwh-code-card {\n  position: absolute;\n  z-index: 4;\n  left: 4%;\n  bottom: 0;\n  width: 175px;\n  padding: 16px;\n  border: 1px solid rgba(255, 255, 255, 0.12);\n  border-radius: 12px;\n  background: rgba(12, 12, 15, 0.9);\n  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.4);\n}\n\n.bwh-code-card span {\n  color: var(--bwh-red);\n  font: 9px monospace;\n}\n\n.bwh-code-card b {\n  display: block;\n  margin: 9px 0 12px;\n  color: #ffffff;\n  font-size: 11px;\n  line-height: 1.45;\n}\n\n.bwh-code-card i {\n  display: block;\n  width: 100%;\n  height: 3px;\n  margin: 5px 0;\n  border-radius: 3px;\n  background: #303038;\n}\n\n.bwh-code-card i:nth-of-type(2) {\n  width: 75%;\n}\n\n.bwh-code-card i:nth-of-type(3) {\n  width: 48%;\n  background: #702127;\n}\n\n\/* Floating badges *\/\n\n.bwh-badge {\n  position: absolute;\n  z-index: 6;\n  display: flex;\n  align-items: center;\n  border: 1px solid rgba(255, 255, 255, 0.13);\n  background: rgba(18, 18, 22, 0.86);\n  box-shadow: 0 18px 35px rgba(0, 0, 0, 0.35);\n  backdrop-filter: blur(10px);\n  -webkit-backdrop-filter: blur(10px);\n}\n\n.bwh-badge-speed {\n  top: 7%;\n  right: 1%;\n  gap: 10px;\n  padding: 10px 13px;\n  border-radius: 10px;\n  animation: bwhFloat 5.5s ease-in-out infinite;\n}\n\n.bwh-badge-speed > span {\n  width: 29px;\n  height: 29px;\n  border-radius: 8px;\n  display: grid;\n  place-items: center;\n  background: rgba(255, 32, 40, 0.14);\n  font-size: 13px;\n}\n\n.bwh-badge-speed div {\n  display: grid;\n}\n\n.bwh-badge-speed b {\n  color: #ffffff;\n  font-size: 9px;\n}\n\n.bwh-badge-speed small {\n  margin-top: 2px;\n  color: #777780;\n  font-size: 7px;\n}\n\n.bwh-badge-status {\n  top: 8%;\n  left: 15%;\n  gap: 7px;\n  padding: 8px 11px;\n  border-radius: 20px;\n  color: #b9b9bf;\n  font-size: 8px;\n  animation: bwhFloat 6.5s -2s ease-in-out infinite;\n}\n\n.bwh-badge-status i {\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: #65d79a;\n  box-shadow: 0 0 8px #65d79a;\n}\n\n\/* Decorative orbits *\/\n\n.bwh-orbit {\n  position: absolute;\n  border: 1px solid rgba(255, 255, 255, 0.045);\n  border-radius: 50%;\n  pointer-events: none;\n}\n\n.bwh-orbit-one {\n  inset: 3%;\n  animation: bwhSpin 24s linear infinite;\n}\n\n.bwh-orbit-two {\n  inset: 16%;\n  border-color: rgba(255, 32, 40, 0.07);\n  animation: bwhSpin 18s reverse linear infinite;\n}\n\n\/* Scroll indicator *\/\n\n.bwh-scroll {\n  position: absolute;\n  left: 50%;\n  bottom: 24px;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  transform: translateX(-50%);\n  color: #66666e;\n  font-size: 9px;\n  letter-spacing: 0.18em;\n  text-transform: uppercase;\n}\n\n.bwh-scroll span {\n  position: relative;\n  width: 1px;\n  height: 28px;\n  overflow: hidden;\n  background: #313138;\n}\n\n.bwh-scroll span::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background: var(--bwh-red);\n  transform: translateY(-100%);\n  animation: bwhScroll 2s infinite;\n}\n\n\/* Loading and floating animation *\/\n\n.bwh-reveal {\n  opacity: 0;\n  transform: translateY(24px);\n}\n\n.bwh-ready .bwh-reveal {\n  animation: bwhReveal 0.8s ease forwards;\n}\n\n.bwh-ready .bwh-stage {\n  animation-delay: 0.18s;\n}\n\n.bwh-float-main {\n  animation: bwhMain 7s ease-in-out infinite;\n}\n\n.bwh-float-side {\n  animation: bwhFloat 6s -1.5s ease-in-out infinite;\n}\n\n.bwh-float-code {\n  animation: bwhFloat 7s -3s ease-in-out infinite;\n}\n\n@keyframes bwhReveal {\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes bwhDrawX {\n  from { transform: scaleX(0); }\n  to { transform: scaleX(1); }\n}\n\n@keyframes bwhDrawY {\n  from { transform: scaleY(0); }\n  to { transform: scaleY(1); }\n}\n\n@keyframes bwhMain {\n  0%, 100% { translate: 0 0; }\n  50% { translate: 0 -10px; }\n}\n\n@keyframes bwhFloat {\n  0%, 100% { translate: 0 0; }\n  50% { translate: 0 -13px; }\n}\n\n@keyframes bwhPulse {\n  0%, 100% {\n    opacity: 0.65;\n    scale: 0.95;\n  }\n  50% {\n    opacity: 1;\n    scale: 1.06;\n  }\n}\n\n@keyframes bwhSpin {\n  to { transform: rotate(360deg); }\n}\n\n@keyframes bwhScroll {\n  0% { transform: translateY(-100%); }\n  50%, 100% { transform: translateY(100%); }\n}\n\n\/* Tablet *\/\n\n@media (max-width: 1024px) {\n  .bwh-hero-inner {\n    grid-template-columns: 1fr minmax(390px, 0.8fr);\n    gap: 30px;\n  }\n\n  .bwh-stage {\n    height: 520px;\n  }\n\n  .bwh-proof {\n    gap: 18px;\n  }\n\n  .bwh-proof > div + div {\n    padding-left: 18px;\n  }\n}\n\n\/* Small tablet *\/\n\n@media (max-width: 820px) {\n  .bwh-hero {\n    min-height: auto;\n  }\n\n  .bwh-hero-inner {\n    width: min(680px, calc(100% - 36px));\n    padding: 130px 0 90px;\n    grid-template-columns: 1fr;\n  }\n\n  .bwh-copy {\n    margin: auto;\n    text-align: center;\n  }\n\n  .bwh-kicker,\n  .bwh-actions {\n    justify-content: center;\n  }\n\n  .bwh-copy h1 em {\n    display: inline;\n  }\n\n  .bwh-intro {\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n  .bwh-proof {\n    justify-content: center;\n  }\n\n  .bwh-stage {\n    width: 100%;\n    max-width: 560px;\n    height: 500px;\n    margin: -10px auto 0;\n  }\n\n  .bwh-browser {\n    left: 5%;\n    width: 82%;\n  }\n\n  .bwh-code-card {\n    left: 5%;\n  }\n\n  .bwh-dashboard {\n    right: 2%;\n  }\n\n  .bwh-scroll {\n    display: none;\n  }\n}\n\n\/* Mobile *\/\n\n@media (max-width: 520px) {\n  .bwh-hero-inner {\n    width: min(calc(100% - 28px), 460px);\n    padding: 105px 0 65px;\n  }\n\n  .bwh-copy h1 {\n    font-size: 40px;\n    letter-spacing: -0.045em;\n  }\n\n  .bwh-intro {\n    font-size: 15px;\n    line-height: 1.65;\n  }\n\n  .bwh-actions {\n    display: grid;\n  }\n\n  .bwh-btn {\n    width: 100%;\n  }\n\n  .bwh-proof {\n    gap: 0;\n    justify-content: space-between;\n  }\n\n  .bwh-proof > div {\n    display: block;\n    text-align: left;\n  }\n\n  .bwh-proof > div + div {\n    padding-left: 12px;\n  }\n\n  .bwh-proof strong {\n    display: block;\n    font-size: 17px;\n  }\n\n  .bwh-proof span {\n    display: block;\n    margin-top: 5px;\n    font-size: 8px;\n  }\n\n  .bwh-stage {\n    height: 400px;\n    margin-top: 5px;\n  }\n\n  .bwh-browser {\n    top: 16%;\n    height: 270px;\n  }\n\n  .bwh-browser-body {\n    padding: 14px 16px;\n  }\n\n  .bwh-mini-hero {\n    padding: 25px 0 18px;\n  }\n\n  .bwh-mini-hero strong {\n    font-size: 22px;\n  }\n\n  .bwh-dashboard {\n    width: 150px;\n    bottom: 4%;\n    padding: 11px;\n  }\n\n  .bwh-dashboard p {\n    margin-top: 10px;\n  }\n\n  .bwh-chart {\n    height: 30px;\n  }\n\n  .bwh-code-card {\n    display: none;\n  }\n\n  .bwh-badge-speed {\n    right: 0;\n  }\n\n  .bwh-badge-status {\n    top: 5%;\n    left: 5%;\n  }\n\n  .bwh-open-frame {\n    left: 8%;\n    width: 82%;\n  }\n}\n\n\/* Accessibility *\/\n\n@media (prefers-reduced-motion: reduce) {\n  .bwh-hero * {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    scroll-behavior: auto !important;\n  }\n\n  .bwh-stage {\n    transition: none !important;\n  }\n\n  .bwh-reveal {\n    opacity: 1;\n    transform: none;\n  }\n}\n\n\n<\/style>\n\n<script data-wp-block-html=\"js\">\n(function () {\n  function initialiseBwhHero() {\n    const hero = document.querySelector(\".bwh-hero\");\n    const stage = document.querySelector(\"[data-bwh-stage]\");\n\n    if (!hero || hero.dataset.bwhInitialised === \"true\") {\n      return;\n    }\n\n    hero.dataset.bwhInitialised = \"true\";\n\n    const reducedMotion = window.matchMedia(\n      \"(prefers-reduced-motion: reduce)\"\n    ).matches;\n\n    requestAnimationFrame(function () {\n      hero.classList.add(\"bwh-ready\");\n    });\n\n    if (\n      !stage ||\n      reducedMotion ||\n      !window.matchMedia(\"(pointer: fine)\").matches\n    ) {\n      return;\n    }\n\n    let animationFrame;\n\n    hero.addEventListener(\"pointermove\", function (event) {\n      cancelAnimationFrame(animationFrame);\n\n      animationFrame = requestAnimationFrame(function () {\n        const rect = hero.getBoundingClientRect();\n\n        const x =\n          (event.clientX - rect.left) \/ rect.width - 0.5;\n\n        const y =\n          (event.clientY - rect.top) \/ rect.height - 0.5;\n\n        stage.style.transform =\n          \"rotateY(\" + x * 3.5 + \"deg) \" +\n          \"rotateX(\" + y * -3 + \"deg) \" +\n          \"translate3d(\" + x * 5 + \"px, \" + y * 5 + \"px, 0)\";\n      });\n    });\n\n    hero.addEventListener(\"pointerleave\", function () {\n      stage.style.transform = \"\";\n    });\n  }\n\n  if (document.readyState === \"loading\") {\n    document.addEventListener(\n      \"DOMContentLoaded\",\n      initialiseBwhHero\n    );\n  } else {\n    initialiseBwhHero();\n  }\n})();\n<\/script>\n\n<section class=\"bwh-hero\" id=\"bwh-home\" aria-labelledby=\"bwh-hero-title\">\n\n  <div class=\"bwh-grid\" aria-hidden=\"true\"><\/div>\n  <div class=\"bwh-glow bwh-glow-one\" aria-hidden=\"true\"><\/div>\n  <div class=\"bwh-glow bwh-glow-two\" aria-hidden=\"true\"><\/div>\n\n  <div class=\"bwh-hero-inner\">\n\n    <!-- Left content -->\n    <div class=\"bwh-copy bwh-reveal\">\n\n      <p class=\"bwh-kicker\">\n        <span><\/span>\n        Web \u00b7 Software \u00b7 Digital Growth\n      <\/p>\n\n      <h1 id=\"bwh-hero-title\">\n        We build digital experiences\n        <em>beyond the frame.<\/em>\n      <\/h1>\n\n      <p class=\"bwh-intro\">\n        High-performance websites, e-commerce platforms and custom business\n        systems that help ambitious companies work smarter and grow faster.\n      <\/p>\n\n      <div class=\"bwh-actions\">\n\n        <a class=\"bwh-btn bwh-btn-primary\" href=\"\/contact\/\">\n          Start your project\n          <svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n            <path d=\"M4 10h11M11 5l5 5-5 5\"><\/path>\n          <\/svg>\n        <\/a>\n\n        <a class=\"bwh-btn bwh-btn-ghost\" href=\"\/portfolio\/\">\n          Explore our work\n        <\/a>\n\n      <\/div>\n\n      <div class=\"bwh-proof\" aria-label=\"Brand Web Hub highlights\">\n\n        <div>\n          <strong>10+<\/strong>\n          <span>Years of experience<\/span>\n        <\/div>\n\n        <div>\n          <strong>360\u00b0<\/strong>\n          <span>Digital support<\/span>\n        <\/div>\n\n        <div>\n          <strong>100%<\/strong>\n          <span>Tailored solutions<\/span>\n        <\/div>\n\n      <\/div>\n    <\/div>\n\n    <!-- Right animated display -->\n    <div class=\"bwh-stage bwh-reveal\" data-bwh-stage=\"\" aria-label=\"Animated display of Brand Web Hub services\">\n\n      <div class=\"bwh-orbit bwh-orbit-one\" aria-hidden=\"true\"><\/div>\n      <div class=\"bwh-orbit bwh-orbit-two\" aria-hidden=\"true\"><\/div>\n\n      <div class=\"bwh-open-frame\" aria-hidden=\"true\">\n        <i class=\"bwh-edge bwh-edge-top\"><\/i>\n        <i class=\"bwh-edge bwh-edge-right\"><\/i>\n        <i class=\"bwh-edge bwh-edge-bottom\"><\/i>\n        <i class=\"bwh-edge bwh-edge-left\"><\/i>\n      <\/div>\n\n      <!-- Main browser -->\n      <div class=\"bwh-browser bwh-float-main\">\n\n        <div class=\"bwh-browser-bar\">\n          <span><\/span>\n          <span><\/span>\n          <span><\/span>\n          <small>brandwebhub.com<\/small>\n        <\/div>\n\n        <div class=\"bwh-browser-body\">\n\n          <div class=\"bwh-mini-nav\">\n            <b>BWH<\/b>\n            <i><\/i>\n            <i><\/i>\n            <i><\/i>\n          <\/div>\n\n          <div class=\"bwh-mini-hero\">\n            <small>DIGITAL PRODUCTS<\/small>\n            <strong>\n              Ideas made<br>\n              <em>remarkable.<\/em>\n            <\/strong>\n            <span><\/span>\n          <\/div>\n\n          <div class=\"bwh-mini-cards\">\n            <i><\/i>\n            <i><\/i>\n            <i><\/i>\n          <\/div>\n\n        <\/div>\n      <\/div>\n\n      <!-- Performance card -->\n      <div class=\"bwh-dashboard bwh-float-side\" aria-hidden=\"true\">\n\n        <div class=\"bwh-dash-top\">\n          <i><\/i>\n          <b>Growth<\/b>\n          <span>Live<\/span>\n        <\/div>\n\n        <p>Project performance<\/p>\n        <strong>+38.4%<\/strong>\n\n        <div class=\"bwh-chart\">\n          <i><\/i>\n          <i><\/i>\n          <i><\/i>\n          <i><\/i>\n          <i><\/i>\n          <i><\/i>\n        <\/div>\n\n      <\/div>\n\n      <!-- Code card -->\n      <div class=\"bwh-code-card bwh-float-code\" aria-hidden=\"true\">\n        <span>&lt;build&gt;<\/span>\n        <b>Fast. Scalable.<br>Purpose-built.<\/b>\n        <i><\/i>\n        <i><\/i>\n        <i><\/i>\n      <\/div>\n\n      <div class=\"bwh-badge bwh-badge-speed\" aria-hidden=\"true\">\n        <span>\u26a1<\/span>\n        <div>\n          <b>Fast by design<\/b>\n          <small>Performance first<\/small>\n        <\/div>\n      <\/div>\n\n      <div class=\"bwh-badge bwh-badge-status\" aria-hidden=\"true\">\n        <i><\/i>\n        Systems online\n      <\/div>\n\n    <\/div>\n  <\/div>\n\n  <div class=\"bwh-scroll\" aria-hidden=\"true\">\n    <span><\/span>\n    Scroll to explore\n  <\/div>\n\n<\/section>\n","protected":false},"excerpt":{"rendered":"<p>Web \u00b7 Software \u00b7 Digital Growth We build digital experiences beyond the frame. High-performance websites, e-commerce platforms and custom business [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","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":"","footer-sml-layout":"","ast-disable-related-posts":"","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-11","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/brandwebhub.com\/index.php?rest_route=\/wp\/v2\/pages\/11","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/brandwebhub.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/brandwebhub.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/brandwebhub.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/brandwebhub.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=11"}],"version-history":[{"count":5,"href":"https:\/\/brandwebhub.com\/index.php?rest_route=\/wp\/v2\/pages\/11\/revisions"}],"predecessor-version":[{"id":33,"href":"https:\/\/brandwebhub.com\/index.php?rest_route=\/wp\/v2\/pages\/11\/revisions\/33"}],"wp:attachment":[{"href":"https:\/\/brandwebhub.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=11"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}