{"id":455,"date":"2026-10-10T17:09:29","date_gmt":"2026-10-10T17:09:29","guid":{"rendered":"https:\/\/webavatarai.com\/?page_id=455"},"modified":"2026-10-27T08:44:49","modified_gmt":"2026-10-27T08:44:49","slug":"home","status":"publish","type":"page","link":"https:\/\/webavatarai.com\/en\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"455\" class=\"elementor elementor-455\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bbf37b6 e-con e-atomic-element e-flexbox-base e-default-div e-d708182 \" data-id=\"bbf37b6\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"bbf37b6\">\n    <div class=\"elementor-element elementor-element-2a8bae6 e-con e-atomic-element e-flexbox-base e-default-div e-8b1f283 \" data-id=\"2a8bae6\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"2a8bae6\">\n    \t\t<div class=\"elementor-element elementor-element-4476fb7 elementor-widget elementor-widget-html\" data-id=\"4476fb7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- WEBAVATARAI MASTER \u2014 3D CUBE + HOLOGRAPHIC WA -->\r\n\r\n<div class=\"wa-cube-scene\" id=\"wa-cube-master\">\r\n\r\n  <!-- WARSTWA 1: ORYGINALNE ANIMOWANE T\u0141O -->\r\n  <video\r\n    class=\"wa-cube-video\"\r\n    autoplay\r\n    muted\r\n    loop\r\n    playsinline\r\n    preload=\"metadata\"\r\n  >\r\n    <source\r\n      src=\"https:\/\/webavatarai.com\/wp-content\/uploads\/3d\/wa-3d-cube-loop-final1.mp4\"\r\n      type=\"video\/mp4\"\r\n    >\r\n  <\/video>\r\n\r\n  <!-- WARSTWA 2: B\u0141YSK HOLOGRAMU -->\r\n  <div class=\"wa-holo-flash\" aria-hidden=\"true\"><\/div>\r\n\r\n  <!-- WARSTWA 3: ORYGINALNE INTERAKTYWNE LOGO -->\r\n  <model-viewer\r\n    class=\"wa-cube-logo\"\r\n    src=\"https:\/\/webavatarai.com\/wp-content\/uploads\/3d\/WA.glb\"\r\n    camera-controls\r\n    auto-rotate\r\n    rotation-per-second=\"12deg\"\r\n    interaction-prompt=\"none\"\r\n    shadow-intensity=\"0\"\r\n    tone-mapping=\"neutral\"\r\n    loading=\"lazy\"\r\n    alt=\"Interaktywne logo WebAvatarAI 3D\"\r\n  >\r\n  <\/model-viewer>\r\n\r\n<\/div>\r\n\r\n<script\r\n  type=\"module\"\r\n  src=\"https:\/\/unpkg.com\/@google\/model-viewer\/dist\/model-viewer.min.js\">\r\n<\/script>\r\n\r\n<style>\r\n\r\n\/* G\u0141\u00d3WNY KONTENER \u2014 BEZ ZMIAN *\/\r\n\r\n#wa-cube-master {\r\n  position: relative;\r\n  width: 100%;\r\n  aspect-ratio: 1 \/ 1;\r\n  overflow: hidden;\r\n  background: #020611;\r\n  border-radius: 16px;\r\n}\r\n\r\n\/* ORYGINALNE T\u0141O WIDEO *\/\r\n\r\n#wa-cube-master .wa-cube-video {\r\n  position: absolute;\r\n  inset: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n  z-index: 1;\r\n}\r\n\r\n\/* DELIKATNY B\u0141YSK HOLOGRAMU *\/\r\n\r\n#wa-cube-master .wa-holo-flash {\r\n  position: absolute;\r\n  top: 25%;\r\n  left: 25%;\r\n  width: 50%;\r\n  height: 50%;\r\n  border-radius: 50%;\r\n  pointer-events: none;\r\n  z-index: 2;\r\n  opacity: 0;\r\n\r\n  background: radial-gradient(\r\n    circle,\r\n    rgba(80, 200, 255, 0.65) 0%,\r\n    rgba(0, 130, 255, 0.3) 35%,\r\n    rgba(0, 100, 255, 0) 75%\r\n  );\r\n}\r\n\r\n\/* ORYGINALNE LOGO 3D *\/\r\n\r\n#wa-cube-master .wa-cube-logo {\r\n  position: absolute;\r\n  top: 15%;\r\n  left: 15%;\r\n  width: 70%;\r\n  height: 70%;\r\n  z-index: 3;\r\n  background: transparent;\r\n  --poster-color: transparent;\r\n  transform-origin: center center;\r\n}\r\n\r\n\/* UKRYCIE LOGO PRZED ANIMACJ\u0104 *\/\r\n\r\n#wa-cube-master.wa-holo-enabled:not(.wa-holo-show)\r\n.wa-cube-logo {\r\n  opacity: 0;\r\n  transform: scale(0.15);\r\n}\r\n\r\n\/* URUCHOMIENIE MATERIALIZACJI *\/\r\n\r\n#wa-cube-master.wa-holo-show .wa-cube-logo {\r\n  animation: waHologramAppear 2.2s\r\n    cubic-bezier(0.2, 0.7, 0.2, 1) both;\r\n}\r\n\r\n#wa-cube-master.wa-holo-show .wa-holo-flash {\r\n  animation: waHologramFlash 1.8s ease-out both;\r\n}\r\n\r\n\/* ANIMACJA LOGO *\/\r\n\r\n@keyframes waHologramAppear {\r\n\r\n  0% {\r\n    opacity: 0;\r\n    transform: scale(0.15);\r\n    filter: blur(8px) brightness(2);\r\n  }\r\n\r\n  25% {\r\n    opacity: 0.7;\r\n    transform: scale(0.5);\r\n    filter: blur(3px) brightness(1.8);\r\n  }\r\n\r\n  55% {\r\n    opacity: 1;\r\n    transform: scale(1.06);\r\n    filter: blur(0) brightness(1.3);\r\n  }\r\n\r\n  80% {\r\n    opacity: 1;\r\n    transform: scale(0.98);\r\n    filter: brightness(1.1);\r\n  }\r\n\r\n  100% {\r\n    opacity: 1;\r\n    transform: scale(1);\r\n    filter: none;\r\n  }\r\n}\r\n\r\n\/* ANIMACJA B\u0141YSKU *\/\r\n\r\n@keyframes waHologramFlash {\r\n\r\n  0% {\r\n    opacity: 0;\r\n    transform: scale(0.1);\r\n  }\r\n\r\n  20% {\r\n    opacity: 0.75;\r\n    transform: scale(0.45);\r\n  }\r\n\r\n  55% {\r\n    opacity: 0.5;\r\n    transform: scale(1);\r\n  }\r\n\r\n  100% {\r\n    opacity: 0;\r\n    transform: scale(1.3);\r\n  }\r\n}\r\n\r\n\/* TELEFONY *\/\r\n\r\n@media (max-width: 767px) {\r\n\r\n  #wa-cube-master {\r\n    border-radius: 12px;\r\n  }\r\n\r\n}\r\n\r\n\/* OGRANICZENIE RUCHU \u2014 DOST\u0118PNO\u015a\u0106 *\/\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n\r\n  #wa-cube-master .wa-cube-logo {\r\n    animation: none !important;\r\n    opacity: 1 !important;\r\n    transform: none !important;\r\n    filter: none !important;\r\n  }\r\n\r\n  #wa-cube-master .wa-holo-flash {\r\n    animation: none !important;\r\n    opacity: 0 !important;\r\n  }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n<script>\r\n\r\n(function () {\r\n\r\n  const scene = document.getElementById(\"wa-cube-master\");\r\n\r\n  if (!scene || scene.dataset.holoInitialized === \"true\") {\r\n    return;\r\n  }\r\n\r\n  scene.dataset.holoInitialized = \"true\";\r\n\r\n  const logo = scene.querySelector(\"model-viewer\");\r\n\r\n  if (!logo) return;\r\n\r\n  const reducedMotion = window.matchMedia(\r\n    \"(prefers-reduced-motion: reduce)\"\r\n  ).matches;\r\n\r\n  if (reducedMotion) return;\r\n\r\n  let inView = false;\r\n  let modelReady = Boolean(logo.loaded);\r\n  let started = false;\r\n  let observer = null;\r\n\r\n  scene.classList.add(\"wa-holo-enabled\");\r\n\r\n  function startHologram() {\r\n\r\n    if (started || !inView || !modelReady) {\r\n      return;\r\n    }\r\n\r\n    started = true;\r\n\r\n    scene.classList.add(\"wa-holo-show\");\r\n\r\n    if (observer) {\r\n      observer.disconnect();\r\n    }\r\n  }\r\n\r\n  logo.addEventListener(\"load\", function () {\r\n\r\n    modelReady = true;\r\n    startHologram();\r\n\r\n  });\r\n\r\n  logo.addEventListener(\"error\", function () {\r\n\r\n    scene.classList.remove(\"wa-holo-enabled\");\r\n\r\n    if (observer) {\r\n      observer.disconnect();\r\n    }\r\n\r\n  });\r\n\r\n  if (\"IntersectionObserver\" in window) {\r\n\r\n    observer = new IntersectionObserver(\r\n      function (entries) {\r\n\r\n        inView = entries[0].isIntersecting;\r\n        startHologram();\r\n\r\n      },\r\n      {\r\n        threshold: 0.15\r\n      }\r\n    );\r\n\r\n    observer.observe(scene);\r\n\r\n  } else {\r\n\r\n    inView = true;\r\n\r\n  }\r\n\r\n  customElements.whenDefined(\"model-viewer\").then(function () {\r\n\r\n    if (logo.loaded) {\r\n      modelReady = true;\r\n    }\r\n\r\n    startHologram();\r\n\r\n  });\r\n\r\n})();\r\n\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-294d811 e-con e-atomic-element e-flexbox-base e-default-div e-294d811-b6d8277 \" data-id=\"294d811\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"294d811\">\n    \t\t<div class=\"elementor-element elementor-element-4d89920 elementor-widget elementor-widget-html\" data-id=\"4d89920\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- WEBAVATARAI \u2014 PREMIUM NEON GLASS V2 -->\r\n<!-- COMPLETE HTML + CSS -->\r\n\r\n<div class=\"wa-neon-glass\">\r\n\r\n  <!-- ANIMATED VIDEO BACKGROUND -->\r\n  <video\r\n    class=\"wa-neon-video\"\r\n    autoplay\r\n    muted\r\n    loop\r\n    playsinline\r\n    preload=\"metadata\"\r\n    aria-hidden=\"true\">\r\n    <source\r\n      src=\"https:\/\/webavatarai.com\/wp-content\/uploads\/2026\/10\/Petla-wwwavatar.mp4\"\r\n      type=\"video\/mp4\">\r\n  <\/video>\r\n\r\n  <div class=\"wa-neon-overlay\"><\/div>\r\n  <div class=\"wa-neon-reflection\"><\/div>\r\n\r\n  <div class=\"wa-neon-content\">\r\n\r\n    <div class=\"wa-neon-label\">\r\n      \u2726 DE TOEKOMST IS INTERACTIEF\r\n    <\/div>\r\n\r\n    <h2 class=\"wa-neon-title\">\r\n      <span class=\"wa-neon-white\">JOUW MERK<\/span>\r\n      <span class=\"wa-neon-blue\">IN EEN NIEUWE<\/span>\r\n      <span class=\"wa-neon-white\">DIMENSIE<\/span>\r\n    <\/h2>\r\n\r\n    <p class=\"wa-neon-description\">\r\n      Interactieve 3D, vloeiende animaties\r\n      en creatieve digitale ervaringen.\r\n      Samen maken we jouw merk\r\n      onderscheidend.\r\n    <\/p>\r\n\r\n    <a\r\n      class=\"wa-neon-button\"\r\n      href=\"https:\/\/webavatarai.com\/3d-bibliotheek\/\">\r\n      ONTDEK ONZE 3D-WERELD\r\n      <span aria-hidden=\"true\">\u2197<\/span>\r\n    <\/a>\r\n\r\n  <\/div>\r\n\r\n<\/div>\r\n\r\n<style>\r\n\r\n\/* MAIN PREMIUM GLASS *\/\r\n\r\n.wa-neon-glass {\r\n  position: relative;\r\n  isolation: isolate;\r\n  container-type: inline-size;\r\n\r\n  display: flex;\r\n  align-items: center;\r\n\r\n  width: 100%;\r\n  min-width: 0;\r\n  min-height: 400px;\r\n  box-sizing: border-box;\r\n\r\n  overflow: hidden;\r\n  border-radius: 24px;\r\n\r\n  background: #071426;\r\n  border: 1px solid rgba(175,235,255,.68);\r\n\r\n  box-shadow:\r\n    0 18px 48px rgba(0,0,0,.24),\r\n    0 0 26px rgba(0,180,255,.30),\r\n    0 0 55px rgba(0,110,255,.15),\r\n    inset 0 1px 0 rgba(255,255,255,.32);\r\n\r\n  transition:\r\n    border-color .35s ease,\r\n    box-shadow .35s ease;\r\n}\r\n\r\n.wa-neon-glass *,\r\n.wa-neon-glass *::before {\r\n  box-sizing: border-box;\r\n}\r\n\r\n.wa-neon-glass:hover {\r\n  border-color: rgba(225,250,255,.95);\r\n\r\n  box-shadow:\r\n    0 22px 55px rgba(0,0,0,.27),\r\n    0 0 34px rgba(0,200,255,.45),\r\n    0 0 65px rgba(0,130,255,.23),\r\n    inset 0 1px 0 rgba(255,255,255,.40);\r\n}\r\n\r\n\/* ORIGINAL VIDEO *\/\r\n\r\n.wa-neon-glass .wa-neon-video {\r\n  position: absolute;\r\n  inset: 0;\r\n\r\n  width: 100%;\r\n  height: 100%;\r\n\r\n  object-fit: cover;\r\n  object-position: center;\r\n\r\n  z-index: 0;\r\n  pointer-events: none;\r\n\r\n  filter:\r\n    brightness(.94)\r\n    saturate(1.16);\r\n}\r\n\r\n\/* TRANSPARENT GLASS OVERLAY *\/\r\n\r\n.wa-neon-glass .wa-neon-overlay {\r\n  position: absolute;\r\n  inset: 0;\r\n  z-index: 1;\r\n\r\n  background:\r\n    linear-gradient(\r\n      120deg,\r\n      rgba(3,13,34,.66),\r\n      rgba(7,29,63,.51) 55%,\r\n      rgba(4,17,42,.60)\r\n    );\r\n\r\n  backdrop-filter: blur(3px);\r\n  -webkit-backdrop-filter: blur(3px);\r\n\r\n  pointer-events: none;\r\n}\r\n\r\n\/* GLASS REFLECTION *\/\r\n\r\n.wa-neon-glass .wa-neon-reflection {\r\n  position: absolute;\r\n  inset: 0;\r\n  z-index: 2;\r\n\r\n  pointer-events: none;\r\n\r\n  background:\r\n    linear-gradient(\r\n      125deg,\r\n      rgba(255,255,255,.19) 0%,\r\n      rgba(255,255,255,.045) 21%,\r\n      transparent 43%\r\n    ),\r\n    radial-gradient(\r\n      ellipse at 90% 8%,\r\n      rgba(65,190,255,.28),\r\n      transparent 52%\r\n    );\r\n\r\n  box-shadow:\r\n    inset 0 1px 0 rgba(255,255,255,.35);\r\n}\r\n\r\n.wa-neon-glass .wa-neon-reflection::before {\r\n  content: \"\";\r\n  position: absolute;\r\n\r\n  top: -35%;\r\n  left: -45%;\r\n  width: 35%;\r\n  height: 170%;\r\n\r\n  transform: rotate(18deg);\r\n\r\n  background: linear-gradient(\r\n    90deg,\r\n    transparent,\r\n    rgba(220,250,255,.17),\r\n    transparent\r\n  );\r\n\r\n  filter: blur(10px);\r\n  animation: waNeonSweep 12s ease-in-out infinite;\r\n}\r\n\r\n\/* CONTENT *\/\r\n\r\n.wa-neon-glass .wa-neon-content {\r\n  position: relative;\r\n  z-index: 3;\r\n\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: flex-start;\r\n\r\n  width: 100%;\r\n  min-width: 0;\r\n\r\n  padding: clamp(26px,4vw,43px);\r\n\r\n  font-family: 'Segoe UI',Arial,sans-serif;\r\n}\r\n\r\n\/* SMALL LABEL *\/\r\n\r\n.wa-neon-glass .wa-neon-label {\r\n  display: inline-block;\r\n  max-width: 100%;\r\n\r\n  margin-bottom: 25px;\r\n  padding: 9px 14px;\r\n\r\n  border-radius: 30px;\r\n\r\n  background: rgba(0,155,255,.19);\r\n  border: 1px solid rgba(155,235,255,.60);\r\n\r\n  color: #c5f1ff !important;\r\n\r\n  font-size: 11px !important;\r\n  font-weight: 800 !important;\r\n  line-height: 1.5;\r\n  letter-spacing: 1.2px;\r\n\r\n  text-shadow: 0 0 12px rgba(0,190,255,.45);\r\n\r\n  box-shadow:\r\n    inset 0 1px 0 rgba(255,255,255,.20),\r\n    0 0 17px rgba(0,175,255,.25);\r\n}\r\n\r\n\/* MAIN NEON TITLE *\/\r\n\r\n.wa-neon-glass .wa-neon-title {\r\n  width: 100%;\r\n  max-width: 100%;\r\n\r\n  margin: 0 0 25px !important;\r\n  padding: 0 !important;\r\n\r\n  font-family: 'Segoe UI',Arial,sans-serif !important;\r\n\r\n  font-size: clamp(23px,7.5cqw,40px) !important;\r\n  font-weight: 900 !important;\r\n  line-height: 1.22 !important;\r\n  letter-spacing: -.6px !important;\r\n\r\n  color: #ffffff !important;\r\n  text-transform: uppercase !important;\r\n\r\n  overflow-wrap: normal;\r\n  word-break: normal;\r\n}\r\n\r\n\/* TITLE LINES *\/\r\n\r\n.wa-neon-glass .wa-neon-title span {\r\n  display: block;\r\n  width: 100%;\r\n\r\n  font-size: inherit !important;\r\n  font-weight: inherit !important;\r\n  line-height: inherit !important;\r\n}\r\n\r\n\/* WHITE NEON *\/\r\n\r\n.wa-neon-glass .wa-neon-white {\r\n  color: #ffffff !important;\r\n\r\n  text-shadow:\r\n    0 1px 0 rgba(205,245,255,.75),\r\n    0 3px 5px rgba(0,0,0,.42),\r\n    0 0 8px rgba(255,255,255,.45),\r\n    0 0 23px rgba(130,220,255,.34),\r\n    0 0 40px rgba(0,150,255,.20);\r\n}\r\n\r\n\/* BLUE NEON *\/\r\n\r\n.wa-neon-glass .wa-neon-blue {\r\n  margin: 8px 0;\r\n\r\n  color: #a7edff !important;\r\n\r\n  text-shadow:\r\n    0 1px 0 rgba(225,250,255,.75),\r\n    0 3px 6px rgba(0,0,0,.38),\r\n    0 0 11px rgba(120,225,255,.85),\r\n    0 0 27px rgba(0,185,255,.58),\r\n    0 0 48px rgba(0,110,255,.33);\r\n}\r\n\r\n\/* DESCRIPTION *\/\r\n\r\n.wa-neon-glass .wa-neon-description {\r\n  max-width: 470px;\r\n\r\n  margin: 0 0 29px !important;\r\n\r\n  color: #f0f8ff !important;\r\n\r\n  font-family: 'Segoe UI',Arial,sans-serif !important;\r\n  font-size: 16px !important;\r\n  font-weight: 400 !important;\r\n  line-height: 1.8 !important;\r\n\r\n  text-shadow:\r\n    0 2px 7px rgba(0,0,0,.53),\r\n    0 0 12px rgba(120,210,255,.15);\r\n}\r\n\r\n\/* PREMIUM GLASS BUTTON *\/\r\n\r\n.wa-neon-glass .wa-neon-button {\r\n  position: relative;\r\n\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 13px;\r\n\r\n  width: auto;\r\n  max-width: 100%;\r\n  min-height: 52px;\r\n\r\n  padding: 16px 22px;\r\n  border-radius: 13px;\r\n  overflow: hidden;\r\n\r\n  background:\r\n    linear-gradient(\r\n      135deg,\r\n      rgba(115,220,255,.34),\r\n      rgba(0,155,255,.30),\r\n      rgba(25,105,215,.30)\r\n    );\r\n\r\n  border: 1px solid rgba(195,245,255,.92);\r\n\r\n  backdrop-filter: blur(12px);\r\n  -webkit-backdrop-filter: blur(12px);\r\n\r\n  color: #ffffff !important;\r\n  text-decoration: none !important;\r\n\r\n  font-family: 'Segoe UI',Arial,sans-serif !important;\r\n  font-size: 13px !important;\r\n  font-weight: 800 !important;\r\n  line-height: 1.5 !important;\r\n  letter-spacing: .4px;\r\n\r\n  text-align: center;\r\n\r\n  box-shadow:\r\n    inset 0 1px 0 rgba(255,255,255,.42),\r\n    0 7px 22px rgba(0,40,110,.28),\r\n    0 0 23px rgba(0,195,255,.44),\r\n    0 0 45px rgba(0,120,255,.20);\r\n\r\n  cursor: pointer;\r\n\r\n  transition:\r\n    transform .3s ease,\r\n    background .3s ease,\r\n    box-shadow .3s ease;\r\n}\r\n\r\n\/* BUTTON REFLECTION *\/\r\n\r\n.wa-neon-glass .wa-neon-button::before {\r\n  content: \"\";\r\n  position: absolute;\r\n\r\n  top: 0;\r\n  left: -45%;\r\n  width: 35%;\r\n  height: 100%;\r\n\r\n  transform: skewX(-25deg);\r\n\r\n  background: linear-gradient(\r\n    90deg,\r\n    transparent,\r\n    rgba(255,255,255,.35),\r\n    transparent\r\n  );\r\n\r\n  transition: left .55s ease;\r\n  pointer-events: none;\r\n}\r\n\r\n\/* BUTTON HOVER *\/\r\n\r\n.wa-neon-glass .wa-neon-button:hover {\r\n  transform: translateY(-3px);\r\n  color: #ffffff !important;\r\n\r\n  background:\r\n    linear-gradient(\r\n      135deg,\r\n      rgba(155,240,255,.52),\r\n      rgba(0,175,255,.44),\r\n      rgba(35,125,235,.39)\r\n    );\r\n\r\n  box-shadow:\r\n    inset 0 1px 0 rgba(255,255,255,.55),\r\n    0 10px 27px rgba(0,50,125,.29),\r\n    0 0 28px rgba(0,210,255,.63),\r\n    0 0 55px rgba(0,150,255,.35);\r\n}\r\n\r\n.wa-neon-glass .wa-neon-button:hover::before {\r\n  left: 120%;\r\n}\r\n\r\n.wa-neon-glass .wa-neon-button:focus-visible {\r\n  outline: 3px solid #c1f4ff;\r\n  outline-offset: 4px;\r\n}\r\n\r\n.wa-neon-glass .wa-neon-button span {\r\n  flex-shrink: 0;\r\n  font-size: 19px;\r\n  line-height: 1;\r\n}\r\n\r\n\/* ANIMATED REFLECTION *\/\r\n\r\n@keyframes waNeonSweep {\r\n  0%,12% {\r\n    left: -45%;\r\n    opacity: 0;\r\n  }\r\n\r\n  23% {\r\n    opacity: .55;\r\n  }\r\n\r\n  58% {\r\n    left: 115%;\r\n    opacity: .55;\r\n  }\r\n\r\n  72%,100% {\r\n    left: 115%;\r\n    opacity: 0;\r\n  }\r\n}\r\n\r\n\/* TABLET \/ NARROW COLUMN *\/\r\n\r\n@container (max-width: 440px) {\r\n  .wa-neon-glass .wa-neon-title {\r\n    font-size: clamp(20px,7cqw,30px) !important;\r\n  }\r\n\r\n  .wa-neon-glass .wa-neon-description {\r\n    font-size: 14px !important;\r\n  }\r\n}\r\n\r\n\/* MOBILE *\/\r\n\r\n@media (max-width:767px) {\r\n  .wa-neon-glass {\r\n    min-height: 0;\r\n    border-radius: 19px;\r\n  }\r\n\r\n  .wa-neon-glass .wa-neon-content {\r\n    padding: 28px 21px;\r\n  }\r\n\r\n  .wa-neon-glass .wa-neon-label {\r\n    font-size: 10px !important;\r\n    letter-spacing: .7px;\r\n  }\r\n\r\n  .wa-neon-glass .wa-neon-title {\r\n    font-size: clamp(21px,7.2cqw,31px) !important;\r\n  }\r\n\r\n  .wa-neon-glass .wa-neon-description {\r\n    font-size: 14px !important;\r\n    line-height: 1.75 !important;\r\n  }\r\n\r\n  .wa-neon-glass .wa-neon-button {\r\n    width: 100%;\r\n    padding: 15px 12px;\r\n    font-size: 12px !important;\r\n  }\r\n}\r\n\r\n\/* REDUCED MOTION *\/\r\n\r\n@media (prefers-reduced-motion:reduce) {\r\n  .wa-neon-glass .wa-neon-reflection::before {\r\n    animation: none;\r\n    opacity: 0;\r\n  }\r\n\r\n  .wa-neon-glass .wa-neon-glass,\r\n  .wa-neon-glass .wa-neon-button,\r\n  .wa-neon-glass .wa-neon-button::before {\r\n    transition: none !important;\r\n  }\r\n\r\n  .wa-neon-glass .wa-neon-button:hover {\r\n    transform: none;\r\n  }\r\n}\r\n\r\n<\/style>\r\n\r\n<!-- END PREMIUM NEON GLASS V2 -->\r\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n\n<\/div>\n<div class=\"elementor-element elementor-element-33d0701 e-con e-atomic-element e-flexbox-base e-default-div e-0853cdd \" data-id=\"33d0701\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"33d0701\">\n    <div class=\"elementor-element elementor-element-ad993cc e-con e-atomic-element e-flexbox-base e-default-div e-233eb7d \" data-id=\"ad993cc\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"ad993cc\">\n    \t\t<div class=\"elementor-element elementor-element-54a364b elementor-widget elementor-widget-html\" data-id=\"54a364b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ==========================================\r\nWEBAVATARAI.COM \u2014 HOME HERO LEFT\r\nPREMIUM GLASS V2\r\nCOMPLETE HTML + CSS\r\n========================================== -->\r\n\r\n<style>\r\n\r\n\/* MAIN GLASS CONTAINER *\/\r\n\r\n#wa-hero-left {\r\n  position: relative;\r\n  isolation: isolate;\r\n  container-type: inline-size;\r\n\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n\r\n  width: 100%;\r\n  min-width: 0;\r\n  min-height: 550px;\r\n  padding: clamp(25px, 3vw, 40px);\r\n\r\n  box-sizing: border-box;\r\n  border-radius: 26px;\r\n  overflow: hidden;\r\n\r\n  background:\r\n    radial-gradient(\r\n      ellipse at 85% 12%,\r\n      rgba(0,185,255,.20),\r\n      transparent 60%\r\n    ),\r\n    linear-gradient(\r\n      135deg,\r\n      rgba(65,130,195,.23),\r\n      rgba(5,24,57,.32)\r\n    );\r\n\r\n  border: 1px solid rgba(165,230,255,.65);\r\n\r\n  backdrop-filter: blur(14px);\r\n  -webkit-backdrop-filter: blur(14px);\r\n\r\n  box-shadow:\r\n    0 18px 50px rgba(0,0,0,.20),\r\n    inset 0 1px 0 rgba(255,255,255,.30),\r\n    0 0 28px rgba(0,175,255,.24),\r\n    0 0 50px rgba(0,110,255,.10);\r\n\r\n  font-family: 'Segoe UI', Arial, sans-serif;\r\n\r\n  transition:\r\n    border-color .35s ease,\r\n    box-shadow .35s ease;\r\n}\r\n\r\n#wa-hero-left *,\r\n#wa-hero-left *::before {\r\n  box-sizing: border-box;\r\n}\r\n\r\n\/* BLUE AMBIENT GLOW *\/\r\n\r\n#wa-hero-left::before {\r\n  content: \"\";\r\n  position: absolute;\r\n\r\n  width: 320px;\r\n  height: 320px;\r\n\r\n  top: -135px;\r\n  right: -115px;\r\n\r\n  border-radius: 50%;\r\n\r\n  background: radial-gradient(\r\n    circle,\r\n    rgba(0,195,255,.30),\r\n    rgba(0,120,255,.11) 48%,\r\n    transparent 75%\r\n  );\r\n\r\n  filter: blur(12px);\r\n  pointer-events: none;\r\n  z-index: 0;\r\n}\r\n\r\n\/* MOVING GLASS REFLECTION *\/\r\n\r\n#wa-hero-left::after {\r\n  content: \"\";\r\n  position: absolute;\r\n\r\n  top: -30%;\r\n  left: -45%;\r\n\r\n  width: 35%;\r\n  height: 160%;\r\n\r\n  transform: rotate(18deg);\r\n\r\n  background: linear-gradient(\r\n    90deg,\r\n    transparent,\r\n    rgba(220,250,255,.19),\r\n    transparent\r\n  );\r\n\r\n  filter: blur(10px);\r\n  pointer-events: none;\r\n  z-index: 0;\r\n\r\n  animation: waHeroLeftSweep 12s ease-in-out infinite;\r\n}\r\n\r\n#wa-hero-left > * {\r\n  position: relative;\r\n  z-index: 1;\r\n}\r\n\r\n\/* CONTAINER HOVER *\/\r\n\r\n#wa-hero-left:hover {\r\n  border-color: rgba(215,250,255,.95);\r\n\r\n  box-shadow:\r\n    0 22px 55px rgba(0,0,0,.24),\r\n    inset 0 1px 0 rgba(255,255,255,.38),\r\n    0 0 35px rgba(0,195,255,.40),\r\n    0 0 60px rgba(0,120,255,.16);\r\n}\r\n\r\n\/* PREMIUM LABEL *\/\r\n\r\n#wa-hero-left .hero-label {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  align-self: flex-start;\r\n\r\n  max-width: 100%;\r\n\r\n  padding: 10px 16px;\r\n  margin-bottom: 29px;\r\n\r\n  border-radius: 30px;\r\n\r\n  background: rgba(0,165,255,.20);\r\n  border: 1px solid rgba(160,235,255,.62);\r\n\r\n  color: #c7f3ff !important;\r\n\r\n  font-size: 12px !important;\r\n  font-weight: 800 !important;\r\n  line-height: 1.5 !important;\r\n  letter-spacing: 1px;\r\n\r\n  box-shadow:\r\n    inset 0 1px 0 rgba(255,255,255,.20),\r\n    0 0 18px rgba(0,175,255,.23);\r\n\r\n  text-shadow:\r\n    0 0 12px rgba(0,185,255,.45);\r\n}\r\n\r\n\/* HERO TITLE *\/\r\n\r\n#wa-hero-left .hero-title {\r\n  display: block;\r\n  width: 100%;\r\n  max-width: 100%;\r\n\r\n  margin: 0 0 27px !important;\r\n  padding: 0 !important;\r\n\r\n  color: #ffffff !important;\r\n\r\n  font-family: 'Segoe UI', Arial, sans-serif !important;\r\n  font-size: clamp(26px, 8cqw, 49px) !important;\r\n  font-weight: 900 !important;\r\n  line-height: 1.13 !important;\r\n  letter-spacing: -1px !important;\r\n\r\n  text-align: left !important;\r\n  text-transform: uppercase !important;\r\n\r\n  overflow-wrap: normal;\r\n  word-break: normal;\r\n\r\n  text-shadow:\r\n    0 1px 0 rgba(210,245,255,.60),\r\n    0 3px 8px rgba(0,0,0,.30),\r\n    0 0 13px rgba(255,255,255,.30),\r\n    0 0 27px rgba(110,210,255,.27),\r\n    0 0 48px rgba(0,130,255,.16);\r\n}\r\n\r\n\/* BLUE TITLE ACCENT *\/\r\n\r\n#wa-hero-left .hero-title-accent {\r\n  color: #a9ecff !important;\r\n\r\n  text-shadow:\r\n    0 1px 0 rgba(220,250,255,.75),\r\n    0 3px 7px rgba(0,0,0,.30),\r\n    0 0 12px rgba(130,230,255,.80),\r\n    0 0 29px rgba(0,185,255,.54),\r\n    0 0 50px rgba(0,110,255,.28);\r\n}\r\n\r\n\/* DESCRIPTION *\/\r\n\r\n#wa-hero-left .hero-description {\r\n  max-width: 520px;\r\n\r\n  margin: 0 0 32px !important;\r\n  padding: 0 !important;\r\n\r\n  color: #edf7ff !important;\r\n\r\n  font-family: 'Segoe UI', Arial, sans-serif !important;\r\n  font-size: 16px !important;\r\n  font-weight: 400 !important;\r\n  line-height: 1.8 !important;\r\n\r\n  text-shadow:\r\n    0 1px 5px rgba(0,0,0,.22);\r\n}\r\n\r\n\/* BUTTON WRAPPER *\/\r\n\r\n#wa-hero-left .hero-buttons {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  gap: 15px;\r\n}\r\n\r\n\/* PREMIUM GLASS BUTTON *\/\r\n\r\n#wa-hero-left .hero-button {\r\n  position: relative;\r\n\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n\r\n  gap: 13px;\r\n\r\n  min-height: 54px;\r\n  max-width: 100%;\r\n\r\n  padding: 16px 25px;\r\n  border-radius: 14px;\r\n  overflow: hidden;\r\n\r\n  font-family: 'Segoe UI', Arial, sans-serif !important;\r\n  font-size: 14px !important;\r\n  font-weight: 800 !important;\r\n  line-height: 1.5 !important;\r\n  letter-spacing: .45px;\r\n\r\n  text-align: center;\r\n  text-decoration: none !important;\r\n\r\n  cursor: pointer;\r\n\r\n  transition:\r\n    transform .3s ease,\r\n    background .3s ease,\r\n    border-color .3s ease,\r\n    box-shadow .3s ease;\r\n}\r\n\r\n\/* GLASS SECONDARY BUTTON *\/\r\n\r\n#wa-hero-left .button-secondary {\r\n  color: #ffffff !important;\r\n\r\n  background: linear-gradient(\r\n    135deg,\r\n    rgba(120,220,255,.32),\r\n    rgba(0,150,255,.27),\r\n    rgba(30,105,215,.27)\r\n  );\r\n\r\n  border: 1px solid rgba(190,243,255,.94);\r\n\r\n  backdrop-filter: blur(12px);\r\n  -webkit-backdrop-filter: blur(12px);\r\n\r\n  box-shadow:\r\n    inset 0 1px 0 rgba(255,255,255,.42),\r\n    0 7px 22px rgba(0,40,110,.25),\r\n    0 0 22px rgba(0,195,255,.40),\r\n    0 0 45px rgba(0,125,255,.20);\r\n}\r\n\r\n\/* BUTTON LIGHT REFLECTION *\/\r\n\r\n#wa-hero-left .hero-button::before {\r\n  content: \"\";\r\n  position: absolute;\r\n\r\n  top: 0;\r\n  left: -45%;\r\n\r\n  width: 35%;\r\n  height: 100%;\r\n\r\n  transform: skewX(-25deg);\r\n\r\n  background: linear-gradient(\r\n    90deg,\r\n    transparent,\r\n    rgba(255,255,255,.34),\r\n    transparent\r\n  );\r\n\r\n  pointer-events: none;\r\n  transition: left .55s ease;\r\n}\r\n\r\n\/* BUTTON HOVER *\/\r\n\r\n#wa-hero-left .button-secondary:hover {\r\n  transform: translateY(-3px);\r\n\r\n  color: #ffffff !important;\r\n\r\n  background: linear-gradient(\r\n    135deg,\r\n    rgba(155,240,255,.54),\r\n    rgba(0,175,255,.43),\r\n    rgba(40,125,225,.38)\r\n  );\r\n\r\n  border-color: #e8fbff;\r\n\r\n  box-shadow:\r\n    inset 0 1px 0 rgba(255,255,255,.55),\r\n    0 10px 27px rgba(0,50,125,.27),\r\n    0 0 29px rgba(0,210,255,.63),\r\n    0 0 57px rgba(0,150,255,.32);\r\n}\r\n\r\n#wa-hero-left .hero-button:hover::before {\r\n  left: 120%;\r\n}\r\n\r\n#wa-hero-left .hero-button:focus-visible {\r\n  outline: 3px solid #c1f4ff;\r\n  outline-offset: 4px;\r\n}\r\n\r\n\/* ARROW *\/\r\n\r\n#wa-hero-left .hero-arrow {\r\n  display: inline-block;\r\n  flex-shrink: 0;\r\n\r\n  font-size: 20px;\r\n  line-height: 1;\r\n  color: #d3f7ff;\r\n\r\n  transition: transform .3s ease;\r\n}\r\n\r\n#wa-hero-left .hero-button:hover .hero-arrow {\r\n  transform: translateX(4px);\r\n}\r\n\r\n\/* MOVING REFLECTION ANIMATION *\/\r\n\r\n@keyframes waHeroLeftSweep {\r\n  0%, 12% {\r\n    left: -45%;\r\n    opacity: 0;\r\n  }\r\n\r\n  23% {\r\n    opacity: .55;\r\n  }\r\n\r\n  58% {\r\n    left: 115%;\r\n    opacity: .60;\r\n  }\r\n\r\n  72%, 100% {\r\n    left: 115%;\r\n    opacity: 0;\r\n  }\r\n}\r\n\r\n\/* NARROW ELEMENTOR COLUMN *\/\r\n\r\n@container (max-width: 430px) {\r\n  #wa-hero-left .hero-title {\r\n    font-size: clamp(25px, 7.5cqw, 34px) !important;\r\n    letter-spacing: -.6px !important;\r\n  }\r\n\r\n  #wa-hero-left .hero-description {\r\n    font-size: 15px !important;\r\n  }\r\n}\r\n\r\n\/* MOBILE *\/\r\n\r\n@media (max-width: 767px) {\r\n  #wa-hero-left {\r\n    min-height: 0;\r\n    padding: 27px 20px;\r\n    border-radius: 20px;\r\n  }\r\n\r\n  #wa-hero-left .hero-label {\r\n    font-size: 11px !important;\r\n    letter-spacing: .6px;\r\n    margin-bottom: 23px;\r\n  }\r\n\r\n  #wa-hero-left .hero-title {\r\n    font-size: clamp(28px, 8cqw, 37px) !important;\r\n    line-height: 1.18 !important;\r\n  }\r\n\r\n  #wa-hero-left .hero-description {\r\n    font-size: 15px !important;\r\n    line-height: 1.75 !important;\r\n  }\r\n\r\n  #wa-hero-left .hero-buttons {\r\n    flex-direction: column;\r\n  }\r\n\r\n  #wa-hero-left .hero-button {\r\n    width: 100%;\r\n    padding: 16px 14px;\r\n    font-size: 13px !important;\r\n  }\r\n}\r\n\r\n\/* REDUCED MOTION *\/\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  #wa-hero-left::after {\r\n    animation: none;\r\n    opacity: 0;\r\n  }\r\n\r\n  #wa-hero-left,\r\n  #wa-hero-left .hero-button,\r\n  #wa-hero-left .hero-button::before,\r\n  #wa-hero-left .hero-arrow {\r\n    transition: none !important;\r\n  }\r\n\r\n  #wa-hero-left .hero-button:hover,\r\n  #wa-hero-left .hero-button:hover .hero-arrow {\r\n    transform: none;\r\n  }\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n<!-- ==========================================\r\nHOME HERO \u2014 LEFT COLUMN\r\n========================================== -->\r\n\r\n<div id=\"wa-hero-left\">\r\n\r\n  <div class=\"hero-label\">\r\n    \u25cf MODERNE WEBSITES &amp; 3D\r\n  <\/div>\r\n\r\n  <h1 class=\"hero-title\">\r\n    WEBSITES DIE INDRUK MAKEN\r\n    <span class=\"hero-title-accent\">\r\n      EN KLANTEN OPLEVEREN\r\n    <\/span>\r\n  <\/h1>\r\n\r\n  <p class=\"hero-description\">\r\n    Professionele websites met moderne\r\n    3D-effecten, ontworpen voor jouw\r\n    onderneming.\r\n  <\/p>\r\n\r\n  <div class=\"hero-buttons\">\r\n\r\n    <a\r\n      href=\"https:\/\/webavatarai.com\/contact\/\"\r\n      class=\"hero-button button-secondary\">\r\n\r\n      PLAN EEN GESPREK\r\n\r\n      <span class=\"hero-arrow\" aria-hidden=\"true\">\r\n        \u2192\r\n      <\/span>\r\n\r\n    <\/a>\r\n\r\n  <\/div>\r\n\r\n<\/div>\r\n\r\n<!-- EINDE HOME HERO LEFT V2 -->\r\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-16876a6 e-con e-atomic-element e-flexbox-base e-default-div e-b739ef3 \" data-id=\"16876a6\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"16876a6\">\n    \t\t<div class=\"elementor-element elementor-element-1a3c61e elementor-widget elementor-widget-html\" data-id=\"1a3c61e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<script type=\"module\" src=\"https:\/\/cdn.jsdelivr.net\/npm\/@google\/model-viewer@4.4.0\/dist\/model-viewer.min.js\"><\/script>\r\n\r\n<div id=\"wavai-satellite-hero\">\r\n\r\n  <video\r\n    class=\"satellite-background\"\r\n    autoplay\r\n    muted\r\n    loop\r\n    playsinline\r\n    preload=\"metadata\">\r\n    <source\r\n      src=\"https:\/\/webavatarai.com\/wp-content\/uploads\/2026\/10\/satelita-davinci-20s-final.mp4\"\r\n      type=\"video\/mp4\">\r\n  <\/video>\r\n\r\n  <model-viewer\r\n    src=\"https:\/\/webavatarai.com\/wp-content\/uploads\/3d\/satelita.glb\"\r\n    alt=\"Interaktywny satelita 3D\"\r\n    camera-controls\r\n    disable-pan\r\n    touch-action=\"pan-y\"\r\n    auto-rotate\r\n    auto-rotate-delay=\"1000\"\r\n    rotation-per-second=\"18deg\"\r\n    tone-mapping=\"neutral\"\r\n    shadow-intensity=\"0\"\r\n    interaction-prompt=\"none\">\r\n  <\/model-viewer>\r\n\r\n<\/div>\r\n\r\n<style>\r\n#wavai-satellite-hero {\r\n  position: relative;\r\n  width: 100%;\r\n  height: clamp(350px, 55vw, 650px);\r\n  overflow: hidden;\r\n  background: #050b19;\r\n  isolation: isolate;\r\n}\r\n\r\n#wavai-satellite-hero .satellite-background {\r\n  position: absolute;\r\n  inset: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n  z-index: 1;\r\n  pointer-events: none;\r\n}\r\n\r\n#wavai-satellite-hero model-viewer {\r\n  position: absolute;\r\n  inset: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  z-index: 2;\r\n  background: transparent;\r\n  --poster-color: transparent;\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  #wavai-satellite-hero {\r\n    height: 380px;\r\n  }\r\n}\r\n<\/style>\r\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n\n<\/div>\n<div data-aos=\"fade-up\" class=\"hostinger-elementor-aos elementor-element elementor-element-278091ec e-con-full e-flex e-con e-parent\" data-id=\"278091ec\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6987b5c1 elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-invisible elementor-widget elementor-widget-icon-list\" data-id=\"6987b5c1\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeInUp&quot;}\" data-widget_type=\"icon-list.default\">\n\t\t\t\t\t\t\t<ul class=\"elementor-icon-list-items\">\n\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-circle\" viewBox=\"0 0 512 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z\"><\/path><\/svg>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\"><\/span>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t<div data-aos=\"fade-up\" class=\"hostinger-elementor-aos elementor-element elementor-element-69e8b714 e-con-full e-flex e-con e-child\" data-id=\"69e8b714\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8cbe85c elementor-widget elementor-widget-html\" data-id=\"8cbe85c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n#wavai-home-hero {\r\n  width: 100%;\r\n  max-width: 1050px;\r\n  color: #fff;\r\n  font-family: inherit;\r\n}\r\n\r\n#wavai-home-hero .hero-heading {\r\n  font-size: clamp(30px, 4.5vw, 68px);\r\n  line-height: 1.08;\r\n  font-weight: 800;\r\n  letter-spacing: -0.035em;\r\n  margin: 0;\r\n  text-transform: uppercase;\r\n}\r\n\r\n#wavai-home-hero .hero-line {\r\n  display: block;\r\n  opacity: 0;\r\n  animation: wavai-enter .85s ease-out forwards;\r\n}\r\n\r\n#wavai-home-hero .hero-line:nth-child(1) {\r\n  animation-delay: .12s;\r\n}\r\n\r\n#wavai-home-hero .hero-line:nth-child(2) {\r\n  animation-delay: .35s;\r\n}\r\n\r\n#wavai-home-hero .hero-line:nth-child(3) {\r\n  animation-delay: .58s;\r\n}\r\n\r\n#wavai-home-hero .hero-accent {\r\n  color: #fff;\r\n  text-shadow:\r\n    0 0 14px rgba(55,170,255,.45),\r\n    0 0 35px rgba(0,110,255,.22);\r\n}\r\n\r\n#wavai-home-hero .hero-description {\r\n  max-width: 790px;\r\n  margin: 22px 0 26px;\r\n  font-size: clamp(15px, 1.35vw, 18px);\r\n  line-height: 1.65;\r\n  color: rgba(255,255,255,.88);\r\n  opacity: 0;\r\n  animation: wavai-enter .9s ease-out .85s forwards;\r\n}\r\n\r\n#wavai-home-hero .hero-button {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 22px;\r\n  padding: 12px 15px 12px 22px;\r\n  border-radius: 13px;\r\n  border: 1px solid rgba(155,220,255,.45);\r\n  background: linear-gradient(\r\n    135deg,\r\n    rgba(20,95,170,.55),\r\n    rgba(10,40,95,.42)\r\n  );\r\n  box-shadow:\r\n    0 0 18px rgba(0,155,255,.20),\r\n    inset 0 0 12px rgba(255,255,255,.07);\r\n  color: #fff;\r\n  text-decoration: none;\r\n  font-size: 12px;\r\n  font-weight: 700;\r\n  letter-spacing: .045em;\r\n  transition: transform .3s ease,\r\n              box-shadow .3s ease,\r\n              background .3s ease;\r\n  opacity: 0;\r\n  animation: wavai-enter .8s ease-out 1.1s forwards;\r\n}\r\n\r\n#wavai-home-hero .hero-arrow {\r\n  display: grid;\r\n  place-items: center;\r\n  width: 31px;\r\n  height: 31px;\r\n  border-radius: 9px;\r\n  border: 1px solid rgba(160,225,255,.65);\r\n  background: rgba(40,170,255,.25);\r\n  font-size: 20px;\r\n  transition: transform .3s ease;\r\n}\r\n\r\n#wavai-home-hero .hero-button:hover {\r\n  transform: translateY(-3px);\r\n  background: rgba(15,105,190,.75);\r\n  box-shadow: 0 0 28px rgba(20,165,255,.5);\r\n}\r\n\r\n#wavai-home-hero .hero-button:hover .hero-arrow {\r\n  transform: translateX(3px);\r\n}\r\n\r\n#wavai-home-hero .hero-button:focus-visible {\r\n  outline: 2px solid #8edaff;\r\n  outline-offset: 4px;\r\n}\r\n\r\n@keyframes wavai-enter {\r\n  from {\r\n    opacity: 0;\r\n    transform: translateX(-28px);\r\n  }\r\n  to {\r\n    opacity: 1;\r\n    transform: translateX(0);\r\n  }\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  #wavai-home-hero .hero-heading {\r\n    font-size: clamp(23px, 6vw, 40px);\r\n    letter-spacing: -0.04em;\r\n  }\r\n\r\n  #wavai-home-hero .hero-description {\r\n    font-size: 15px;\r\n    margin: 18px 0 22px;\r\n  }\r\n\r\n  #wavai-home-hero .hero-button {\r\n    gap: 12px;\r\n    font-size: 11px;\r\n  }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  #wavai-home-hero *,\r\n  #wavai-home-hero *::before,\r\n  #wavai-home-hero *::after {\r\n    animation: none !important;\r\n    transition: none !important;\r\n    opacity: 1 !important;\r\n    transform: none !important;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<section id=\"wavai-home-hero\">\r\n  <h1 class=\"hero-heading\">\r\n    <span class=\"hero-line\">CREATIVE PROJECTEN<\/span>\r\n    <span class=\"hero-line\">INDRUKWEKKENDE<\/span>\r\n    <span class=\"hero-line hero-accent\">RESULTATEN.<\/span>\r\n  <\/h1>\r\n\r\n  <p class=\"hero-description\">\r\n    Van stijlvolle websites en levendige animaties\r\n    tot interactieve 3D-ervaringen. Wij brengen\r\n    merken, producten en idee\u00ebn digitaal tot leven.\r\n  <\/p>\r\n\r\n  <a class=\"hero-button\"\r\n     href=\"https:\/\/webavatarai.com\/over-ons-diensten\/\">\r\n    ONTDEK ONZE DIENSTEN\r\n    <span class=\"hero-arrow\" aria-hidden=\"true\">\u2192<\/span>\r\n  <\/a>\r\n<\/section>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-aa62e75 e-con e-atomic-element e-flexbox-base e-default-div e-8c5123e \" data-id=\"aa62e75\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"aa62e75\">\n    \t\t<div class=\"elementor-element elementor-element-2ae3773 elementor-widget elementor-widget-html\" data-id=\"2ae3773\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ==========================================\r\nWEBAVATARAI.COM \u2014 ONZE PROJECTEN\r\nPREMIUM GLASS MASTER V2\r\nTWO-DIRECTION SCROLL ANIMATION\r\nCOMPLETE HTML + CSS + JAVASCRIPT\r\n========================================== -->\r\n\r\n<style>\r\n\r\n\/* MAIN PREMIUM GLASS SECTION *\/\r\n\r\n#wa-projects-premium {\r\n  position: relative;\r\n  isolation: isolate;\r\n  width: 100%;\r\n  min-width: 0;\r\n  margin: 0;\r\n  padding: clamp(38px,5vw,70px) clamp(18px,4vw,52px);\r\n  box-sizing: border-box;\r\n  overflow: hidden;\r\n  border-radius: 27px;\r\n\r\n  background:\r\n    radial-gradient(\r\n      ellipse at 50% 5%,\r\n      rgba(0,185,255,.22),\r\n      transparent 62%\r\n    ),\r\n    linear-gradient(\r\n      135deg,\r\n      rgba(65,135,195,.23),\r\n      rgba(5,22,53,.34)\r\n    );\r\n\r\n  border: 1px solid rgba(160,230,255,.62);\r\n  backdrop-filter: blur(14px);\r\n  -webkit-backdrop-filter: blur(14px);\r\n\r\n  box-shadow:\r\n    0 20px 55px rgba(0,0,0,.21),\r\n    inset 0 1px 0 rgba(255,255,255,.29),\r\n    0 0 32px rgba(0,185,255,.23);\r\n\r\n  color: #ffffff;\r\n  font-family: 'Segoe UI',Arial,sans-serif;\r\n\r\n  transition: border-color .35s,box-shadow .35s;\r\n}\r\n\r\n#wa-projects-premium *,\r\n#wa-projects-premium *::before,\r\n#wa-projects-premium *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n\/* BLUE AMBIENT LIGHT *\/\r\n\r\n#wa-projects-premium::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  top: -180px;\r\n  right: -160px;\r\n  width: 450px;\r\n  height: 450px;\r\n  border-radius: 50%;\r\n\r\n  background: radial-gradient(\r\n    circle,\r\n    rgba(0,195,255,.28),\r\n    rgba(0,115,255,.10) 48%,\r\n    transparent 75%\r\n  );\r\n\r\n  filter: blur(18px);\r\n  pointer-events: none;\r\n  z-index: 0;\r\n}\r\n\r\n\/* MOVING GLASS REFLECTION *\/\r\n\r\n#wa-projects-premium::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  top: -35%;\r\n  left: -45%;\r\n  width: 35%;\r\n  height: 170%;\r\n\r\n  transform: rotate(18deg);\r\n\r\n  background: linear-gradient(\r\n    90deg,\r\n    transparent,\r\n    rgba(225,250,255,.17),\r\n    transparent\r\n  );\r\n\r\n  filter: blur(10px);\r\n  animation: waProjectsGlassSweep 12s ease-in-out infinite;\r\n\r\n  pointer-events: none;\r\n  z-index: 0;\r\n}\r\n\r\n#wa-projects-premium:hover {\r\n  border-color: rgba(215,250,255,.95);\r\n\r\n  box-shadow:\r\n    0 24px 60px rgba(0,0,0,.25),\r\n    inset 0 1px 0 rgba(255,255,255,.36),\r\n    0 0 40px rgba(0,195,255,.38);\r\n}\r\n\r\n\/* MAIN CONTENT *\/\r\n\r\n#wa-projects-premium .wa-projects-inner {\r\n  position: relative;\r\n  z-index: 1;\r\n\r\n  width: 100%;\r\n  max-width: 1250px;\r\n  margin: 0 auto;\r\n  text-align: center;\r\n}\r\n\r\n\/* TOP LABEL *\/\r\n\r\n#wa-projects-premium .wa-projects-label {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 11px;\r\n\r\n  margin-bottom: 32px;\r\n  padding: 10px 19px;\r\n  border-radius: 30px;\r\n\r\n  background: rgba(0,160,255,.19);\r\n  border: 1px solid rgba(165,235,255,.65);\r\n\r\n  color: #c7f3ff !important;\r\n  font-size: 12px !important;\r\n  font-weight: 800 !important;\r\n  line-height: 1.5 !important;\r\n  letter-spacing: 2px;\r\n\r\n  backdrop-filter: blur(10px);\r\n  -webkit-backdrop-filter: blur(10px);\r\n\r\n  box-shadow:\r\n    inset 0 1px 0 rgba(255,255,255,.23),\r\n    0 0 20px rgba(0,175,255,.25);\r\n}\r\n\r\n\/* NEON DOT *\/\r\n\r\n#wa-projects-premium .wa-projects-dot {\r\n  display: block;\r\n  flex-shrink: 0;\r\n  width: 9px;\r\n  height: 9px;\r\n  border-radius: 50%;\r\n\r\n  background: #b8f4ff;\r\n\r\n  box-shadow:\r\n    0 0 8px rgba(100,230,255,.95),\r\n    0 0 20px rgba(0,175,255,.70);\r\n}\r\n\r\n\/* MAIN TITLE *\/\r\n\r\n#wa-projects-premium .wa-projects-title {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  gap: 11px;\r\n\r\n  width: 100%;\r\n  margin: 0 !important;\r\n  padding: 0 !important;\r\n\r\n  font-family: 'Segoe UI',Arial,sans-serif !important;\r\n  font-size: clamp(28px,4.5vw,62px) !important;\r\n  font-weight: 900 !important;\r\n  line-height: 1.14 !important;\r\n  letter-spacing: -.045em !important;\r\n\r\n  text-align: center !important;\r\n  text-transform: uppercase !important;\r\n  color: #ffffff !important;\r\n}\r\n\r\n\/* FIRST TITLE \u2014 WHITE NEON *\/\r\n\r\n#wa-projects-premium .wa-projects-left {\r\n  display: block;\r\n  max-width: 100%;\r\n  color: #ffffff !important;\r\n\r\n  text-shadow:\r\n    0 1px 0 rgba(220,250,255,.58),\r\n    0 3px 9px rgba(0,0,0,.30),\r\n    0 0 14px rgba(255,255,255,.30),\r\n    0 0 32px rgba(110,210,255,.26);\r\n}\r\n\r\n\/* SECOND TITLE \u2014 BLUE NEON *\/\r\n\r\n#wa-projects-premium .wa-projects-right {\r\n  display: block;\r\n  max-width: 100%;\r\n\r\n  color: #a9edff !important;\r\n  overflow-wrap: break-word;\r\n\r\n  text-shadow:\r\n    0 1px 0 rgba(230,250,255,.75),\r\n    0 3px 9px rgba(0,0,0,.28),\r\n    0 0 13px rgba(110,225,255,.78),\r\n    0 0 31px rgba(0,185,255,.52),\r\n    0 0 53px rgba(0,125,255,.25);\r\n}\r\n\r\n\/* DESCRIPTION *\/\r\n\r\n#wa-projects-premium .wa-projects-description {\r\n  width: 100%;\r\n  max-width: 860px;\r\n  margin: 30px auto 0 !important;\r\n  padding: 0 !important;\r\n\r\n  color: #edf7ff !important;\r\n  font-family: 'Segoe UI',Arial,sans-serif !important;\r\n  font-size: clamp(15px,1.4vw,18px) !important;\r\n  font-weight: 400 !important;\r\n  line-height: 1.85 !important;\r\n\r\n  text-align: center !important;\r\n  text-transform: none !important;\r\n\r\n  text-shadow:\r\n    0 2px 8px rgba(0,0,0,.30);\r\n}\r\n\r\n\/* NEON LINE *\/\r\n\r\n#wa-projects-premium .wa-projects-light {\r\n  display: flex;\r\n  justify-content: center;\r\n  width: 100%;\r\n  margin-top: 36px;\r\n}\r\n\r\n#wa-projects-premium .wa-projects-light span {\r\n  display: block;\r\n  width: 245px;\r\n  max-width: 75%;\r\n  height: 3px;\r\n  border-radius: 5px;\r\n\r\n  background: linear-gradient(\r\n    90deg,\r\n    transparent,\r\n    #74e5ff,\r\n    #ffffff,\r\n    #74e5ff,\r\n    transparent\r\n  );\r\n\r\n  box-shadow:\r\n    0 0 12px rgba(0,195,255,.85),\r\n    0 0 29px rgba(0,145,255,.48);\r\n\r\n  transform-origin: center;\r\n}\r\n\r\n\/* ==========================================\r\n   SCROLL ENTRANCE ANIMATIONS\r\n========================================== *\/\r\n\r\n\/* TOP LABEL \u2014 DOWN *\/\r\n\r\n#wa-projects-premium.wa-projects-animate\r\n.wa-projects-label {\r\n  animation: waProjectsLabelV2 .8s ease both;\r\n}\r\n\r\n\/* FIRST TITLE \u2014 LEFT TO CENTER *\/\r\n\r\n#wa-projects-premium.wa-projects-animate\r\n.wa-projects-left {\r\n  animation:\r\n    waProjectsLeftV2 1.35s\r\n    cubic-bezier(.19,1,.22,1) both;\r\n}\r\n\r\n\/* SECOND TITLE \u2014 RIGHT TO CENTER *\/\r\n\r\n#wa-projects-premium.wa-projects-animate\r\n.wa-projects-right {\r\n  animation:\r\n    waProjectsRightV2 1.35s\r\n    cubic-bezier(.19,1,.22,1) .18s both;\r\n}\r\n\r\n\/* DESCRIPTION \u2014 FADE UP *\/\r\n\r\n#wa-projects-premium.wa-projects-animate\r\n.wa-projects-description {\r\n  animation:\r\n    waProjectsDescriptionV2 1s ease-out .6s both;\r\n}\r\n\r\n\/* NEON LINE \u2014 REVEAL *\/\r\n\r\n#wa-projects-premium.wa-projects-animate\r\n.wa-projects-light span {\r\n  animation:\r\n    waProjectsLineV2 1.2s ease .9s both;\r\n}\r\n\r\n\/* KEYFRAMES *\/\r\n\r\n@keyframes waProjectsLabelV2 {\r\n  from {\r\n    opacity: 0;\r\n    transform: translateY(-25px);\r\n  }\r\n  to {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n}\r\n\r\n@keyframes waProjectsLeftV2 {\r\n  from {\r\n    opacity: 0;\r\n    transform: translateX(-28vw);\r\n  }\r\n  to {\r\n    opacity: 1;\r\n    transform: translateX(0);\r\n  }\r\n}\r\n\r\n@keyframes waProjectsRightV2 {\r\n  from {\r\n    opacity: 0;\r\n    transform: translateX(28vw);\r\n  }\r\n  to {\r\n    opacity: 1;\r\n    transform: translateX(0);\r\n  }\r\n}\r\n\r\n@keyframes waProjectsDescriptionV2 {\r\n  from {\r\n    opacity: 0;\r\n    transform: translateY(30px);\r\n  }\r\n  to {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n}\r\n\r\n@keyframes waProjectsLineV2 {\r\n  from {\r\n    opacity: 0;\r\n    transform: scaleX(0);\r\n  }\r\n  to {\r\n    opacity: 1;\r\n    transform: scaleX(1);\r\n  }\r\n}\r\n\r\n\/* BACKGROUND REFLECTION *\/\r\n\r\n@keyframes waProjectsGlassSweep {\r\n  0%,12% {\r\n    left: -45%;\r\n    opacity: 0;\r\n  }\r\n  23% {\r\n    opacity: .5;\r\n  }\r\n  58% {\r\n    left: 115%;\r\n    opacity: .6;\r\n  }\r\n  72%,100% {\r\n    left: 115%;\r\n    opacity: 0;\r\n  }\r\n}\r\n\r\n\/* TABLET *\/\r\n\r\n@media (max-width:950px) {\r\n\r\n  #wa-projects-premium {\r\n    padding: 39px 22px;\r\n  }\r\n\r\n  #wa-projects-premium .wa-projects-title {\r\n    font-size: clamp(28px,4.5vw,49px) !important;\r\n  }\r\n\r\n  #wa-projects-premium .wa-projects-description {\r\n    font-size: 15px !important;\r\n  }\r\n}\r\n\r\n\/* MOBILE *\/\r\n\r\n@media (max-width:767px) {\r\n\r\n  #wa-projects-premium {\r\n    padding: 32px 17px 37px;\r\n    border-radius: 20px;\r\n  }\r\n\r\n  #wa-projects-premium .wa-projects-label {\r\n    font-size: 10px !important;\r\n    letter-spacing: 1.3px;\r\n    margin-bottom: 25px;\r\n  }\r\n\r\n  #wa-projects-premium .wa-projects-title {\r\n    font-size: clamp(23px,6.3vw,39px) !important;\r\n    line-height: 1.17 !important;\r\n    gap: 12px;\r\n  }\r\n\r\n  #wa-projects-premium .wa-projects-description {\r\n    margin-top: 26px !important;\r\n    font-size: 14px !important;\r\n    line-height: 1.75 !important;\r\n  }\r\n\r\n  #wa-projects-premium .wa-projects-light {\r\n    margin-top: 29px;\r\n  }\r\n\r\n  #wa-projects-premium.wa-projects-animate\r\n  .wa-projects-left {\r\n    animation-name: waProjectsMobileLeftV2;\r\n  }\r\n\r\n  #wa-projects-premium.wa-projects-animate\r\n  .wa-projects-right {\r\n    animation-name: waProjectsMobileRightV2;\r\n  }\r\n}\r\n\r\n@keyframes waProjectsMobileLeftV2 {\r\n  from {\r\n    opacity: 0;\r\n    transform: translateX(-65px);\r\n  }\r\n  to {\r\n    opacity: 1;\r\n    transform: translateX(0);\r\n  }\r\n}\r\n\r\n@keyframes waProjectsMobileRightV2 {\r\n  from {\r\n    opacity: 0;\r\n    transform: translateX(65px);\r\n  }\r\n  to {\r\n    opacity: 1;\r\n    transform: translateX(0);\r\n  }\r\n}\r\n\r\n\/* REDUCED MOTION *\/\r\n\r\n@media (prefers-reduced-motion:reduce) {\r\n\r\n  #wa-projects-premium::after,\r\n  #wa-projects-premium *,\r\n  #wa-projects-premium *::before,\r\n  #wa-projects-premium *::after {\r\n    animation: none !important;\r\n    transition: none !important;\r\n  }\r\n\r\n  #wa-projects-premium * {\r\n    opacity: 1 !important;\r\n    transform: none !important;\r\n  }\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n<!-- ==========================================\r\n   ONZE PROJECTEN \u2014 HTML\r\n========================================== -->\r\n\r\n<section\r\n  id=\"wa-projects-premium\"\r\n  aria-label=\"Onze projecten\">\r\n\r\n  <div class=\"wa-projects-inner\">\r\n\r\n    <div class=\"wa-projects-label\">\r\n\r\n      <span\r\n        class=\"wa-projects-dot\"\r\n        aria-hidden=\"true\">\r\n      <\/span>\r\n\r\n      ONZE PROJECTEN\r\n\r\n    <\/div>\r\n\r\n    <h2 class=\"wa-projects-title\">\r\n\r\n      <span class=\"wa-projects-left\">\r\n        CREATIEVE PROJECTEN\r\n      <\/span>\r\n\r\n      <span class=\"wa-projects-right\">\r\n        INDRUKWEKKENDE RESULTATEN\r\n      <\/span>\r\n\r\n    <\/h2>\r\n\r\n    <p class=\"wa-projects-description\">\r\n      Ontdek hoe wij idee\u00ebn tot leven brengen\r\n      met stijlvolle websites, indrukwekkende\r\n      animaties en interactieve 3D-ervaringen.\r\n      Creatief ontworpen om indruk te maken\r\n      \u00e9n klanten te overtuigen.\r\n    <\/p>\r\n\r\n    <div\r\n      class=\"wa-projects-light\"\r\n      aria-hidden=\"true\">\r\n      <span><\/span>\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<!-- ==========================================\r\n   JAVASCRIPT \u2014 SCROLL OBSERVER\r\n========================================== -->\r\n\r\n<script>\r\n(function () {\r\n  function initProjectsPremium() {\r\n    const section = document.getElementById(\r\n      \"wa-projects-premium\"\r\n    );\r\n\r\n    if (!section) return;\r\n\r\n    if (section.dataset.initialized === \"1\") {\r\n      return;\r\n    }\r\n\r\n    const reducedMotion = window.matchMedia(\r\n      \"(prefers-reduced-motion: reduce)\"\r\n    ).matches;\r\n\r\n    const inEditor =\r\n      document.body.classList.contains(\r\n        \"elementor-editor-active\"\r\n      ) ||\r\n      window.self !== window.top;\r\n\r\n    if (\r\n      reducedMotion ||\r\n      inEditor ||\r\n      !(\"IntersectionObserver\" in window)\r\n    ) {\r\n      return;\r\n    }\r\n\r\n    section.dataset.initialized = \"1\";\r\n\r\n    const observer = new IntersectionObserver(\r\n      function (entries) {\r\n        entries.forEach(function (entry) {\r\n          if (entry.isIntersecting) {\r\n            section.classList.add(\r\n              \"wa-projects-animate\"\r\n            );\r\n\r\n            observer.unobserve(section);\r\n          }\r\n        });\r\n      },\r\n      {\r\n        threshold: 0.05,\r\n        rootMargin: \"0px 0px -30px 0px\"\r\n      }\r\n    );\r\n\r\n    observer.observe(section);\r\n  }\r\n\r\n  if (document.readyState === \"loading\") {\r\n    document.addEventListener(\r\n      \"DOMContentLoaded\",\r\n      initProjectsPremium,\r\n      { once: true }\r\n    );\r\n  } else {\r\n    initProjectsPremium();\r\n  }\r\n})();\r\n<\/script>\r\n\r\n<!-- END WEBAVATARAI PROJECTS PREMIUM V2 -->\r\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-d5e899e e-con e-atomic-element e-flexbox-base e-default-div e-7b05f8c \" data-id=\"d5e899e\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"d5e899e\">\n    <div class=\"elementor-element elementor-element-7b7f6b1 e-con e-atomic-element e-flexbox-base e-default-div e-43cf010 \" data-id=\"7b7f6b1\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"7b7f6b1\">\n    \t\t<div class=\"elementor-element elementor-element-9df6f12 elementor-widget elementor-widget-html\" data-id=\"9df6f12\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ==========================================\r\nWEBAVATARAI.COM \u2014 HOME\r\nSMART WEBSITES PREMIUM GLASS V3\r\nENTRANCE FROM LEFT ON SCROLL\r\nCOMPLETE HTML + CSS + JAVASCRIPT\r\n========================================== -->\r\n\r\n<style>\r\n\r\n\/* MAIN SECTION *\/\r\n\r\n#wa-smart-websites {\r\n  position: relative;\r\n  container-type: inline-size;\r\n  width: 100%;\r\n  min-width: 0;\r\n  margin: 0;\r\n  padding: 6px;\r\n  box-sizing: border-box;\r\n  overflow: clip;\r\n  background: transparent;\r\n  color: #ffffff;\r\n  font-family: 'Segoe UI', Arial, sans-serif;\r\n}\r\n\r\n#wa-smart-websites *,\r\n#wa-smart-websites *::before,\r\n#wa-smart-websites *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n\/* PREMIUM GLASS CARD *\/\r\n\r\n#wa-smart-websites .wa-smart-card {\r\n  position: relative;\r\n  isolation: isolate;\r\n\r\n  width: 100%;\r\n  min-width: 0;\r\n\r\n  padding: clamp(25px, 3vw, 42px);\r\n  border-radius: 24px;\r\n  overflow: hidden;\r\n\r\n  background:\r\n    radial-gradient(\r\n      ellipse at 85% 12%,\r\n      rgba(0,190,255,.20),\r\n      transparent 60%\r\n    ),\r\n    linear-gradient(\r\n      135deg,\r\n      rgba(65,135,195,.23),\r\n      rgba(5,24,57,.31)\r\n    );\r\n\r\n  border: 1px solid rgba(160,230,255,.63);\r\n\r\n  backdrop-filter: blur(14px);\r\n  -webkit-backdrop-filter: blur(14px);\r\n\r\n  box-shadow:\r\n    0 18px 50px rgba(0,0,0,.20),\r\n    inset 0 1px 0 rgba(255,255,255,.30),\r\n    0 0 30px rgba(0,185,255,.23),\r\n    0 0 52px rgba(0,110,255,.10);\r\n\r\n  opacity: 1;\r\n  transform: translate3d(0,0,0);\r\n\r\n  transition:\r\n    border-color .35s ease,\r\n    box-shadow .35s ease;\r\n}\r\n\r\n\/* UPPER GLASS REFLECTION *\/\r\n\r\n#wa-smart-websites .wa-smart-card::before {\r\n  content: \"\";\r\n  position: absolute;\r\n\r\n  top: 0;\r\n  left: 10%;\r\n\r\n  width: 80%;\r\n  height: 2px;\r\n\r\n  background: linear-gradient(\r\n    90deg,\r\n    transparent,\r\n    #b9f3ff,\r\n    #ffffff,\r\n    #b9f3ff,\r\n    transparent\r\n  );\r\n\r\n  box-shadow:\r\n    0 0 17px rgba(0,190,255,.67);\r\n\r\n  pointer-events: none;\r\n  z-index: 2;\r\n}\r\n\r\n\/* MOVING LIGHT REFLECTION *\/\r\n\r\n#wa-smart-websites .wa-smart-card::after {\r\n  content: \"\";\r\n  position: absolute;\r\n\r\n  top: -30%;\r\n  left: -45%;\r\n\r\n  width: 35%;\r\n  height: 160%;\r\n\r\n  transform: rotate(18deg);\r\n\r\n  background: linear-gradient(\r\n    90deg,\r\n    transparent,\r\n    rgba(225,250,255,.18),\r\n    transparent\r\n  );\r\n\r\n  filter: blur(10px);\r\n\r\n  animation:\r\n    waSmartGlassSweep 12s ease-in-out infinite;\r\n\r\n  pointer-events: none;\r\n  z-index: 0;\r\n}\r\n\r\n#wa-smart-websites .wa-smart-card > * {\r\n  position: relative;\r\n  z-index: 1;\r\n}\r\n\r\n\/* CARD HOVER *\/\r\n\r\n#wa-smart-websites .wa-smart-card:hover {\r\n  border-color: rgba(215,250,255,.96);\r\n\r\n  box-shadow:\r\n    0 22px 55px rgba(0,0,0,.23),\r\n    inset 0 1px 0 rgba(255,255,255,.38),\r\n    0 0 36px rgba(0,200,255,.40),\r\n    0 0 60px rgba(0,130,255,.16);\r\n}\r\n\r\n\/* TOP LABEL *\/\r\n\r\n#wa-smart-websites .wa-smart-label {\r\n  display: inline-flex;\r\n  align-items: center;\r\n\r\n  gap: 11px;\r\n  max-width: 100%;\r\n\r\n  margin-bottom: 27px;\r\n  padding: 10px 15px;\r\n\r\n  border-radius: 30px;\r\n\r\n  background: rgba(0,160,255,.19);\r\n  border: 1px solid rgba(160,235,255,.60);\r\n\r\n  backdrop-filter: blur(10px);\r\n  -webkit-backdrop-filter: blur(10px);\r\n\r\n  color: #c4f2ff !important;\r\n\r\n  font-size: 11px !important;\r\n  font-weight: 800 !important;\r\n  line-height: 1.5 !important;\r\n  letter-spacing: 1.1px;\r\n\r\n  box-shadow:\r\n    inset 0 1px 0 rgba(255,255,255,.21),\r\n    0 0 18px rgba(0,180,255,.22);\r\n}\r\n\r\n\/* NEON DOT *\/\r\n\r\n#wa-smart-websites .wa-smart-dot {\r\n  display: inline-block;\r\n  flex: 0 0 9px;\r\n\r\n  width: 9px;\r\n  height: 9px;\r\n\r\n  border-radius: 50%;\r\n  background: #c1f6ff;\r\n\r\n  box-shadow:\r\n    0 0 9px rgba(100,230,255,.95),\r\n    0 0 20px rgba(0,175,255,.72);\r\n}\r\n\r\n\/* MAIN TITLE *\/\r\n\r\n#wa-smart-websites .wa-smart-title {\r\n  display: flex;\r\n  flex-direction: column;\r\n\r\n  gap: 6px;\r\n  width: 100%;\r\n\r\n  margin: 0 !important;\r\n  padding: 0 !important;\r\n\r\n  font-family:\r\n    'Segoe UI', Arial, sans-serif !important;\r\n\r\n  font-size:\r\n    clamp(23px, 6.2cqw, 44px) !important;\r\n\r\n  font-weight: 900 !important;\r\n  line-height: 1.15 !important;\r\n  letter-spacing: -.7px !important;\r\n\r\n  text-align: left !important;\r\n  text-transform: uppercase !important;\r\n\r\n  color: #ffffff !important;\r\n\r\n  overflow-wrap: normal;\r\n  word-break: normal;\r\n\r\n  text-shadow:\r\n    0 1px 0 rgba(220,250,255,.60),\r\n    0 3px 8px rgba(0,0,0,.32),\r\n    0 0 14px rgba(255,255,255,.27),\r\n    0 0 28px rgba(110,210,255,.26);\r\n}\r\n\r\n#wa-smart-websites .wa-smart-title span {\r\n  display: block;\r\n  max-width: 100%;\r\n\r\n  color: #ffffff !important;\r\n\r\n  font-size: inherit !important;\r\n  font-weight: inherit !important;\r\n  line-height: inherit !important;\r\n}\r\n\r\n\/* KLANTEN \u2014 BLUE NEON *\/\r\n\r\n#wa-smart-websites .wa-smart-title .wa-smart-accent {\r\n  color: #a9edff !important;\r\n\r\n  text-shadow:\r\n    0 1px 0 rgba(230,250,255,.80),\r\n    0 3px 8px rgba(0,0,0,.34),\r\n    0 0 12px rgba(120,230,255,.89),\r\n    0 0 30px rgba(0,190,255,.59),\r\n    0 0 53px rgba(0,115,255,.29);\r\n}\r\n\r\n\/* NEON DIVIDER *\/\r\n\r\n#wa-smart-websites .wa-smart-line {\r\n  width: 110px;\r\n  max-width: 75%;\r\n  height: 3px;\r\n\r\n  margin: 28px 0;\r\n\r\n  border-radius: 4px;\r\n\r\n  background: linear-gradient(\r\n    90deg,\r\n    #ffffff,\r\n    #76e6ff,\r\n    transparent\r\n  );\r\n\r\n  box-shadow:\r\n    0 0 13px rgba(0,190,255,.78),\r\n    0 0 28px rgba(0,130,255,.38);\r\n\r\n  transition: width .45s ease;\r\n}\r\n\r\n#wa-smart-websites .wa-smart-card:hover .wa-smart-line {\r\n  width: 185px;\r\n}\r\n\r\n\/* DESCRIPTIONS *\/\r\n\r\n#wa-smart-websites .wa-smart-description {\r\n  margin: 0 0 19px !important;\r\n  padding: 0 !important;\r\n\r\n  color: #edf7ff !important;\r\n\r\n  font-family:\r\n    'Segoe UI', Arial, sans-serif !important;\r\n\r\n  font-size: 16px !important;\r\n  font-weight: 400 !important;\r\n  line-height: 1.8 !important;\r\n\r\n  text-transform: none !important;\r\n\r\n  text-shadow:\r\n    0 1px 6px rgba(0,0,0,.25);\r\n}\r\n\r\n\/* FEATURE STACK *\/\r\n\r\n#wa-smart-websites .wa-smart-features {\r\n  display: grid;\r\n  grid-template-columns: 1fr;\r\n\r\n  gap: 12px;\r\n  width: 100%;\r\n  margin-top: 27px;\r\n}\r\n\r\n\/* MINI GLASS CARDS *\/\r\n\r\n#wa-smart-websites .wa-smart-features div {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 11px;\r\n\r\n  min-width: 0;\r\n  padding: 13px 16px;\r\n\r\n  border-radius: 12px;\r\n\r\n  background:\r\n    linear-gradient(\r\n      135deg,\r\n      rgba(95,195,255,.20),\r\n      rgba(10,65,135,.14)\r\n    );\r\n\r\n  border:\r\n    1px solid rgba(150,225,255,.46);\r\n\r\n  backdrop-filter: blur(10px);\r\n  -webkit-backdrop-filter: blur(10px);\r\n\r\n  color: #f0fbff !important;\r\n\r\n  font-size: 13px !important;\r\n  font-weight: 700 !important;\r\n  line-height: 1.6 !important;\r\n\r\n  box-shadow:\r\n    inset 0 1px 0 rgba(255,255,255,.18),\r\n    0 0 17px rgba(0,165,255,.12);\r\n\r\n  transition:\r\n    background .3s ease,\r\n    border-color .3s ease,\r\n    box-shadow .3s ease,\r\n    transform .3s ease;\r\n}\r\n\r\n\/* FEATURE SYMBOL *\/\r\n\r\n#wa-smart-websites .wa-smart-feature-icon {\r\n  flex: 0 0 auto;\r\n\r\n  color: #b2efff;\r\n\r\n  font-size: 17px;\r\n  line-height: 1;\r\n\r\n  text-shadow:\r\n    0 0 12px rgba(0,200,255,.70);\r\n}\r\n\r\n\/* MINI CARD HOVER *\/\r\n\r\n#wa-smart-websites .wa-smart-features div:hover {\r\n  transform: translateX(5px);\r\n\r\n  background:\r\n    linear-gradient(\r\n      135deg,\r\n      rgba(110,215,255,.29),\r\n      rgba(20,100,195,.20)\r\n    );\r\n\r\n  border-color: rgba(205,245,255,.87);\r\n\r\n  box-shadow:\r\n    inset 0 1px 0 rgba(255,255,255,.27),\r\n    0 0 22px rgba(0,185,255,.30);\r\n}\r\n\r\n\/* ==========================================\r\n   ENTRANCE ANIMATION FROM LEFT\r\n========================================== *\/\r\n\r\n#wa-smart-websites.wa-smart-animate .wa-smart-card {\r\n  animation:\r\n    waSmartEnterV3 1.3s\r\n    cubic-bezier(.19,1,.22,1) both;\r\n}\r\n\r\n@keyframes waSmartEnterV3 {\r\n  from {\r\n    opacity: 0;\r\n    transform: translate3d(-45vw,0,0);\r\n  }\r\n\r\n  to {\r\n    opacity: 1;\r\n    transform: translate3d(0,0,0);\r\n  }\r\n}\r\n\r\n\/* SUBTLE MOVING REFLECTION *\/\r\n\r\n@keyframes waSmartGlassSweep {\r\n  0%,12% {\r\n    left: -45%;\r\n    opacity: 0;\r\n  }\r\n\r\n  23% {\r\n    opacity: .5;\r\n  }\r\n\r\n  58% {\r\n    left: 115%;\r\n    opacity: .6;\r\n  }\r\n\r\n  72%,100% {\r\n    left: 115%;\r\n    opacity: 0;\r\n  }\r\n}\r\n\r\n\/* NARROW ELEMENTOR COLUMNS *\/\r\n\r\n@container (max-width: 450px) {\r\n\r\n  #wa-smart-websites .wa-smart-title {\r\n    font-size:\r\n      clamp(23px, 6.2cqw, 31px) !important;\r\n  }\r\n\r\n  #wa-smart-websites .wa-smart-description {\r\n    font-size: 15px !important;\r\n  }\r\n\r\n  #wa-smart-websites .wa-smart-label {\r\n    font-size: 10px !important;\r\n    letter-spacing: .6px;\r\n  }\r\n}\r\n\r\n\/* MOBILE *\/\r\n\r\n@media (max-width:767px) {\r\n\r\n  #wa-smart-websites {\r\n    padding: 4px;\r\n  }\r\n\r\n  #wa-smart-websites .wa-smart-card {\r\n    padding: 27px 20px;\r\n    border-radius: 20px;\r\n  }\r\n\r\n  #wa-smart-websites .wa-smart-label {\r\n    margin-bottom: 25px;\r\n    padding: 9px 12px;\r\n  }\r\n\r\n  #wa-smart-websites .wa-smart-title {\r\n    font-size:\r\n      clamp(23px, 6.4cqw, 34px) !important;\r\n\r\n    line-height: 1.18 !important;\r\n    gap: 7px;\r\n  }\r\n\r\n  #wa-smart-websites .wa-smart-description {\r\n    font-size: 14px !important;\r\n    line-height: 1.75 !important;\r\n  }\r\n\r\n  #wa-smart-websites .wa-smart-features div {\r\n    padding: 12px 13px;\r\n    font-size: 12px !important;\r\n  }\r\n\r\n  #wa-smart-websites .wa-smart-line {\r\n    margin: 25px 0;\r\n  }\r\n\r\n  #wa-smart-websites.wa-smart-animate .wa-smart-card {\r\n    animation-name: waSmartMobileEnterV3;\r\n  }\r\n}\r\n\r\n@keyframes waSmartMobileEnterV3 {\r\n  from {\r\n    opacity: 0;\r\n    transform: translate3d(-60px,0,0);\r\n  }\r\n\r\n  to {\r\n    opacity: 1;\r\n    transform: translate3d(0,0,0);\r\n  }\r\n}\r\n\r\n\/* REDUCED MOTION *\/\r\n\r\n@media (prefers-reduced-motion:reduce) {\r\n\r\n  #wa-smart-websites *,\r\n  #wa-smart-websites *::before,\r\n  #wa-smart-websites *::after {\r\n    animation: none !important;\r\n    transition: none !important;\r\n    opacity: 1 !important;\r\n    transform: none !important;\r\n  }\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n<!-- ==========================================\r\n   SMART WEBSITES \u2014 HTML\r\n========================================== -->\r\n\r\n<section\r\n  id=\"wa-smart-websites\"\r\n  aria-label=\"Slimme websites\">\r\n\r\n  <div class=\"wa-smart-card\">\r\n\r\n    <!-- TOP LABEL -->\r\n\r\n    <div class=\"wa-smart-label\">\r\n\r\n      <span\r\n        class=\"wa-smart-dot\"\r\n        aria-hidden=\"true\"><\/span>\r\n\r\n      WEBAVATARAI \/ SMART WEB DESIGN\r\n\r\n    <\/div>\r\n\r\n    <!-- MAIN HEADING -->\r\n\r\n    <h2 class=\"wa-smart-title\">\r\n\r\n      <span>\r\n        SLIMME WEBSITES\r\n      <\/span>\r\n\r\n      <span>\r\n        DIE BEZOEKERS\r\n      <\/span>\r\n\r\n      <span>\r\n        OMZETTEN IN\r\n      <\/span>\r\n\r\n      <span class=\"wa-smart-accent\">\r\n        KLANTEN\r\n      <\/span>\r\n\r\n    <\/h2>\r\n\r\n    <!-- NEON DIVIDER -->\r\n\r\n    <div\r\n      class=\"wa-smart-line\"\r\n      aria-hidden=\"true\">\r\n    <\/div>\r\n\r\n    <!-- DESCRIPTION 1 -->\r\n\r\n    <p class=\"wa-smart-description\">\r\n      Een sterke website doet meer dan er\r\n      goed uitzien. Met een duidelijke structuur,\r\n      overtuigende content en slimme functies\r\n      helpen wij bezoekers de volgende stap\r\n      te zetten.\r\n    <\/p>\r\n\r\n    <!-- DESCRIPTION 2 -->\r\n\r\n    <p class=\"wa-smart-description\">\r\n      Van nieuwe premium websites tot het\r\n      moderniseren van bestaande\r\n      WordPress-websites, met moderne\r\n      3D-effecten en interactieve elementen.\r\n    <\/p>\r\n\r\n    <!-- PREMIUM FEATURES -->\r\n\r\n    <div class=\"wa-smart-features\">\r\n\r\n      <div>\r\n        <span class=\"wa-smart-feature-icon\"\r\n              aria-hidden=\"true\">\u2726<\/span>\r\n        Conversiegericht design\r\n      <\/div>\r\n\r\n      <div>\r\n        <span class=\"wa-smart-feature-icon\"\r\n              aria-hidden=\"true\">\u2726<\/span>\r\n        Moderne WordPress-oplossingen\r\n      <\/div>\r\n\r\n      <div>\r\n        <span class=\"wa-smart-feature-icon\"\r\n              aria-hidden=\"true\">\u2726<\/span>\r\n        Interactieve 3D-elementen\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<!-- ==========================================\r\n   SCROLL OBSERVER\r\n========================================== -->\r\n\r\n<script>\r\n(function () {\r\n\r\n  function initSmartWebsites() {\r\n\r\n    const section = document.getElementById(\r\n      \"wa-smart-websites\"\r\n    );\r\n\r\n    if (!section) return;\r\n\r\n    if (section.dataset.initialized === \"1\") {\r\n      return;\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    const inEditor =\r\n      document.body.classList.contains(\r\n        \"elementor-editor-active\"\r\n      ) ||\r\n      window.self !== window.top;\r\n\r\n    if (\r\n      reducedMotion ||\r\n      inEditor ||\r\n      !(\"IntersectionObserver\" in window)\r\n    ) {\r\n      return;\r\n    }\r\n\r\n    section.dataset.initialized = \"1\";\r\n\r\n    const observer = new IntersectionObserver(\r\n      function (entries) {\r\n\r\n        entries.forEach(function (entry) {\r\n\r\n          if (entry.isIntersecting) {\r\n\r\n            section.classList.add(\r\n              \"wa-smart-animate\"\r\n            );\r\n\r\n            observer.unobserve(section);\r\n          }\r\n\r\n        });\r\n\r\n      },\r\n      {\r\n        threshold: 0.08,\r\n        rootMargin: \"0px 0px -30px 0px\"\r\n      }\r\n    );\r\n\r\n    observer.observe(section);\r\n  }\r\n\r\n  if (document.readyState === \"loading\") {\r\n\r\n    document.addEventListener(\r\n      \"DOMContentLoaded\",\r\n      initSmartWebsites,\r\n      { once: true }\r\n    );\r\n\r\n  } else {\r\n\r\n    initSmartWebsites();\r\n\r\n  }\r\n\r\n})();\r\n<\/script>\r\n\r\n<!-- ==========================================\r\n   END SMART WEBSITES PREMIUM V3\r\n========================================== -->\r\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n\n<\/div>\n<div class=\"elementor-element elementor-element-01fd86b e-con e-atomic-element e-flexbox-base e-default-div e-fc71ae9 wa-engine-section \" data-id=\"01fd86b\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"01fd86b\">\n    \t\t<div class=\"elementor-element elementor-element-d2ce035 elementor-widget elementor-widget-html\" data-id=\"d2ce035\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ==========================================\r\nWEBAVATARAI.COM \u2014 MASTER PROCESS V2\r\nHOE WIJ WERKEN \/ 03 STAPPEN\r\nPREMIUM GLASS + SCROLL ANIMATIONS\r\nCOMPLETE HTML + CSS + JAVASCRIPT\r\n========================================== -->\r\n\r\n<style>\r\n\r\n\/* MAIN SECTION *\/\r\n\r\n#wa-process-master {\r\n  position: relative;\r\n  isolation: isolate;\r\n  width: 100%;\r\n  min-width: 0;\r\n  margin: 0;\r\n  padding: 38px 12px 55px;\r\n  box-sizing: border-box;\r\n  overflow: hidden;\r\n  background: transparent;\r\n  color: #ffffff;\r\n  font-family: 'Segoe UI', Arial, sans-serif;\r\n}\r\n\r\n#wa-process-master *,\r\n#wa-process-master *::before,\r\n#wa-process-master *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n#wa-process-master .wa-process-inner {\r\n  width: 100%;\r\n  max-width: 1250px;\r\n  margin: 0 auto;\r\n}\r\n\r\n\/* SECTION HEADING *\/\r\n\r\n#wa-process-master .wa-process-heading {\r\n  position: relative;\r\n  margin-bottom: 46px;\r\n}\r\n\r\n#wa-process-master .wa-process-label {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 11px;\r\n  max-width: 100%;\r\n  margin-bottom: 26px;\r\n  padding: 10px 16px;\r\n  border-radius: 30px;\r\n\r\n  background: rgba(0,155,255,.18);\r\n  border: 1px solid rgba(160,235,255,.60);\r\n\r\n  color: #c2f1ff !important;\r\n  font-size: 11px !important;\r\n  font-weight: 800 !important;\r\n  letter-spacing: 1.5px;\r\n  line-height: 1.5;\r\n\r\n  backdrop-filter: blur(10px);\r\n  -webkit-backdrop-filter: blur(10px);\r\n\r\n  box-shadow:\r\n    inset 0 1px 0 rgba(255,255,255,.20),\r\n    0 0 19px rgba(0,175,255,.22);\r\n}\r\n\r\n#wa-process-master .wa-process-dot {\r\n  display: block;\r\n  flex: 0 0 9px;\r\n  width: 9px;\r\n  height: 9px;\r\n  border-radius: 50%;\r\n  background: #b6f4ff;\r\n\r\n  box-shadow:\r\n    0 0 9px rgba(100,230,255,.95),\r\n    0 0 19px rgba(0,175,255,.75);\r\n}\r\n\r\n\/* MAIN TITLE *\/\r\n\r\n#wa-process-master .wa-process-title {\r\n  max-width: 1100px;\r\n  margin: 0 !important;\r\n  padding: 0 !important;\r\n\r\n  color: #ffffff !important;\r\n  font-size: clamp(29px,4.4vw,63px) !important;\r\n  font-weight: 900 !important;\r\n  line-height: 1.13 !important;\r\n  letter-spacing: -.04em !important;\r\n  text-transform: uppercase !important;\r\n\r\n  overflow-wrap: break-word;\r\n\r\n  text-shadow:\r\n    0 1px 0 rgba(225,250,255,.60),\r\n    0 3px 9px rgba(0,0,0,.30),\r\n    0 0 18px rgba(255,255,255,.26),\r\n    0 0 35px rgba(0,160,255,.24);\r\n}\r\n\r\n#wa-process-master .wa-process-title span {\r\n  display: block;\r\n  margin-top: 8px;\r\n  color: #a9edff !important;\r\n\r\n  text-shadow:\r\n    0 0 12px rgba(125,230,255,.80),\r\n    0 0 30px rgba(0,190,255,.52),\r\n    0 0 50px rgba(0,120,255,.27);\r\n}\r\n\r\n\/* INTRODUCTION *\/\r\n\r\n#wa-process-master .wa-process-intro {\r\n  max-width: 850px;\r\n  margin: 25px 0 27px !important;\r\n\r\n  color: #ebf6ff !important;\r\n  font-size: clamp(15px,1.4vw,18px) !important;\r\n  line-height: 1.85 !important;\r\n\r\n  text-shadow: 0 2px 8px rgba(0,0,0,.25);\r\n}\r\n\r\n\/* HEADING LIGHT LINE *\/\r\n\r\n#wa-process-master .wa-process-heading-line {\r\n  width: 155px;\r\n  height: 3px;\r\n  border-radius: 4px;\r\n  transform-origin: left center;\r\n\r\n  background: linear-gradient(\r\n    90deg,\r\n    #ffffff,\r\n    #7ce9ff,\r\n    transparent\r\n  );\r\n\r\n  box-shadow:\r\n    0 0 14px rgba(0,190,255,.80),\r\n    0 0 30px rgba(0,135,255,.39);\r\n}\r\n\r\n\/* GRID LAYOUT *\/\r\n\r\n#wa-process-master .wa-process-grid {\r\n  display: grid;\r\n  grid-template-columns: repeat(2,minmax(0,1fr));\r\n  gap: 28px;\r\n  width: 100%;\r\n  align-items: stretch;\r\n}\r\n\r\n#wa-process-master .wa-process-slot {\r\n  min-width: 0;\r\n}\r\n\r\n#wa-process-master .wa-step-three {\r\n  grid-column: 1 \/ -1;\r\n}\r\n\r\n\/* PREMIUM GLASS CARDS *\/\r\n\r\n#wa-process-master .wa-process-card {\r\n  position: relative;\r\n  isolation: isolate;\r\n\r\n  width: 100%;\r\n  height: 100%;\r\n  min-width: 0;\r\n  min-height: 260px;\r\n\r\n  padding: clamp(26px,3vw,39px);\r\n  border-radius: 23px;\r\n  overflow: hidden;\r\n\r\n  background:\r\n    radial-gradient(\r\n      ellipse at 85% 12%,\r\n      rgba(0,190,255,.20),\r\n      transparent 65%\r\n    ),\r\n    linear-gradient(\r\n      135deg,\r\n      rgba(70,140,205,.24),\r\n      rgba(5,25,61,.33)\r\n    );\r\n\r\n  border: 1px solid rgba(160,230,255,.62);\r\n\r\n  backdrop-filter: blur(14px);\r\n  -webkit-backdrop-filter: blur(14px);\r\n\r\n  box-shadow:\r\n    0 16px 42px rgba(0,0,0,.20),\r\n    inset 0 1px 0 rgba(255,255,255,.29),\r\n    0 0 27px rgba(0,180,255,.23);\r\n\r\n  transition:\r\n    border-color .35s ease,\r\n    box-shadow .35s ease,\r\n    background .35s ease;\r\n}\r\n\r\n\/* TOP NEON EDGE *\/\r\n\r\n#wa-process-master .wa-process-card::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  top: 0;\r\n  left: 10%;\r\n  width: 80%;\r\n  height: 2px;\r\n\r\n  background: linear-gradient(\r\n    90deg,\r\n    transparent,\r\n    #b8f3ff,\r\n    #ffffff,\r\n    #b8f3ff,\r\n    transparent\r\n  );\r\n\r\n  box-shadow: 0 0 18px rgba(0,190,255,.65);\r\n  pointer-events: none;\r\n}\r\n\r\n\/* MOVING GLASS REFLECTION *\/\r\n\r\n#wa-process-master .wa-process-card::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  top: -35%;\r\n  left: -45%;\r\n  width: 35%;\r\n  height: 170%;\r\n\r\n  transform: rotate(18deg);\r\n\r\n  background: linear-gradient(\r\n    90deg,\r\n    transparent,\r\n    rgba(225,250,255,.17),\r\n    transparent\r\n  );\r\n\r\n  filter: blur(10px);\r\n  pointer-events: none;\r\n\r\n  animation: waProcessGlassSweep 12s ease-in-out infinite;\r\n}\r\n\r\n#wa-process-master .wa-process-card > * {\r\n  position: relative;\r\n  z-index: 1;\r\n}\r\n\r\n\/* CARD HOVER *\/\r\n\r\n#wa-process-master .wa-process-card:hover {\r\n  border-color: rgba(215,250,255,.95);\r\n\r\n  background:\r\n    radial-gradient(\r\n      ellipse at 85% 12%,\r\n      rgba(0,200,255,.28),\r\n      transparent 65%\r\n    ),\r\n    linear-gradient(\r\n      135deg,\r\n      rgba(85,160,225,.30),\r\n      rgba(8,38,80,.38)\r\n    );\r\n\r\n  box-shadow:\r\n    0 20px 48px rgba(0,0,0,.24),\r\n    inset 0 1px 0 rgba(255,255,255,.36),\r\n    0 0 34px rgba(0,195,255,.39),\r\n    0 0 55px rgba(0,130,255,.15);\r\n}\r\n\r\n\/* STEP TOP ROW *\/\r\n\r\n#wa-process-master .wa-process-top {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  gap: 15px;\r\n  margin-bottom: 22px;\r\n}\r\n\r\n#wa-process-master .wa-step-label {\r\n  display: inline-block;\r\n  padding: 8px 13px;\r\n  border-radius: 25px;\r\n\r\n  background: rgba(0,155,255,.19);\r\n  border: 1px solid rgba(150,230,255,.50);\r\n\r\n  color: #b9edff !important;\r\n  font-size: 11px !important;\r\n  font-weight: 800 !important;\r\n  letter-spacing: 1.5px;\r\n}\r\n\r\n#wa-process-master .wa-step-number {\r\n  color: rgba(185,238,255,.50);\r\n  font-size: 51px;\r\n  font-weight: 900;\r\n  line-height: 1;\r\n  letter-spacing: -3px;\r\n\r\n  text-shadow:\r\n    0 0 17px rgba(0,195,255,.34);\r\n}\r\n\r\n\/* GLASS ICON *\/\r\n\r\n#wa-process-master .wa-process-icon {\r\n  display: grid;\r\n  place-items: center;\r\n\r\n  width: 52px;\r\n  height: 52px;\r\n  margin-bottom: 23px;\r\n  border-radius: 15px;\r\n\r\n  background: linear-gradient(\r\n    135deg,\r\n    rgba(120,215,255,.27),\r\n    rgba(0,105,215,.20)\r\n  );\r\n\r\n  border: 1px solid rgba(175,238,255,.75);\r\n\r\n  color: #d1f6ff;\r\n  font-size: 26px;\r\n  font-weight: 800;\r\n\r\n  backdrop-filter: blur(10px);\r\n\r\n  box-shadow:\r\n    inset 0 1px 0 rgba(255,255,255,.32),\r\n    0 0 20px rgba(0,190,255,.31);\r\n\r\n  text-shadow: 0 0 15px rgba(0,195,255,.65);\r\n\r\n  transition:\r\n    border-color .3s ease,\r\n    box-shadow .3s ease;\r\n}\r\n\r\n#wa-process-master .wa-process-card:hover .wa-process-icon {\r\n  border-color: #e5fbff;\r\n  box-shadow:\r\n    inset 0 1px 0 rgba(255,255,255,.42),\r\n    0 0 29px rgba(0,200,255,.53);\r\n}\r\n\r\n\/* CARD HEADINGS *\/\r\n\r\n#wa-process-master .wa-process-card h3 {\r\n  margin: 0 !important;\r\n  padding: 0 !important;\r\n\r\n  color: #ffffff !important;\r\n\r\n  font-size: clamp(23px,2.4vw,34px) !important;\r\n  font-weight: 900 !important;\r\n  line-height: 1.19 !important;\r\n  letter-spacing: -.035em !important;\r\n\r\n  text-transform: uppercase !important;\r\n  overflow-wrap: break-word;\r\n\r\n  text-shadow:\r\n    0 0 15px rgba(190,235,255,.29);\r\n}\r\n\r\n#wa-process-master .wa-process-card h3 span {\r\n  display: block;\r\n  margin-top: 5px;\r\n  color: #a9edff !important;\r\n\r\n  text-shadow:\r\n    0 0 13px rgba(125,230,255,.70),\r\n    0 0 29px rgba(0,165,255,.35);\r\n}\r\n\r\n\/* CARD LIGHT LINE *\/\r\n\r\n#wa-process-master .wa-process-line {\r\n  width: 90px;\r\n  height: 3px;\r\n  margin: 23px 0;\r\n  border-radius: 4px;\r\n\r\n  background: linear-gradient(\r\n    90deg,\r\n    #ffffff,\r\n    #81eaff,\r\n    transparent\r\n  );\r\n\r\n  box-shadow:\r\n    0 0 13px rgba(0,190,255,.73);\r\n\r\n  transition: width .45s ease;\r\n}\r\n\r\n#wa-process-master .wa-process-card:hover .wa-process-line {\r\n  width: 155px;\r\n}\r\n\r\n\/* CARD TEXT *\/\r\n\r\n#wa-process-master .wa-process-card p {\r\n  max-width: 750px;\r\n  margin: 0 !important;\r\n  padding: 0 !important;\r\n\r\n  color: #edf7ff !important;\r\n\r\n  font-size: 16px !important;\r\n  font-weight: 400 !important;\r\n  line-height: 1.8 !important;\r\n\r\n  text-transform: none !important;\r\n\r\n  text-shadow: 0 1px 6px rgba(0,0,0,.24);\r\n}\r\n\r\n\/* THIRD CARD *\/\r\n\r\n#wa-process-master .wa-step-three .wa-process-card {\r\n  background:\r\n    radial-gradient(\r\n      ellipse at 75% 20%,\r\n      rgba(0,195,255,.23),\r\n      transparent 58%\r\n    ),\r\n    linear-gradient(\r\n      125deg,\r\n      rgba(75,150,220,.26),\r\n      rgba(5,26,62,.32)\r\n    );\r\n}\r\n\r\n\/* ==========================================\r\n   SCROLL ENTRANCE ANIMATIONS\r\n========================================== *\/\r\n\r\n#wa-process-master .wa-process-heading.wa-inview\r\n.wa-process-title {\r\n  animation:\r\n    waProcessTitleLeftV2 1.2s\r\n    cubic-bezier(.19,1,.22,1) both;\r\n}\r\n\r\n#wa-process-master .wa-process-heading.wa-inview\r\n.wa-process-label {\r\n  animation: waProcessFadeUpV2 .7s ease both;\r\n}\r\n\r\n#wa-process-master .wa-process-heading.wa-inview\r\n.wa-process-intro {\r\n  animation: waProcessFadeUpV2 .9s ease .3s both;\r\n}\r\n\r\n#wa-process-master .wa-process-heading.wa-inview\r\n.wa-process-heading-line {\r\n  animation: waProcessLineV2 .9s ease .55s both;\r\n}\r\n\r\n#wa-process-master .wa-left.wa-inview\r\n.wa-process-card {\r\n  animation:\r\n    waProcessFromLeftV2 1.25s\r\n    cubic-bezier(.19,1,.22,1) both;\r\n}\r\n\r\n#wa-process-master .wa-right.wa-inview\r\n.wa-process-card {\r\n  animation:\r\n    waProcessFromRightV2 1.25s\r\n    cubic-bezier(.19,1,.22,1) .12s both;\r\n}\r\n\r\n@keyframes waProcessTitleLeftV2 {\r\n  from {\r\n    opacity: 0;\r\n    transform: translateX(-30vw);\r\n  }\r\n  to {\r\n    opacity: 1;\r\n    transform: translateX(0);\r\n  }\r\n}\r\n\r\n@keyframes waProcessFromLeftV2 {\r\n  from {\r\n    opacity: 0;\r\n    transform: translateX(-30vw);\r\n  }\r\n  to {\r\n    opacity: 1;\r\n    transform: translateX(0);\r\n  }\r\n}\r\n\r\n@keyframes waProcessFromRightV2 {\r\n  from {\r\n    opacity: 0;\r\n    transform: translateX(30vw);\r\n  }\r\n  to {\r\n    opacity: 1;\r\n    transform: translateX(0);\r\n  }\r\n}\r\n\r\n@keyframes waProcessFadeUpV2 {\r\n  from {\r\n    opacity: 0;\r\n    transform: translateY(28px);\r\n  }\r\n  to {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n}\r\n\r\n@keyframes waProcessLineV2 {\r\n  from {\r\n    opacity: 0;\r\n    transform: scaleX(0);\r\n  }\r\n  to {\r\n    opacity: 1;\r\n    transform: scaleX(1);\r\n  }\r\n}\r\n\r\n@keyframes waProcessGlassSweep {\r\n  0%,12% {\r\n    left: -45%;\r\n    opacity: 0;\r\n  }\r\n  23% {\r\n    opacity: .5;\r\n  }\r\n  58% {\r\n    left: 115%;\r\n    opacity: .6;\r\n  }\r\n  72%,100% {\r\n    left: 115%;\r\n    opacity: 0;\r\n  }\r\n}\r\n\r\n\/* TABLET *\/\r\n\r\n@media (max-width:950px) {\r\n  #wa-process-master .wa-process-grid {\r\n    gap: 20px;\r\n  }\r\n\r\n  #wa-process-master .wa-process-card {\r\n    padding: 26px 22px;\r\n  }\r\n\r\n  #wa-process-master .wa-process-card h3 {\r\n    font-size: clamp(22px,2.8vw,29px) !important;\r\n  }\r\n\r\n  #wa-process-master .wa-process-card p {\r\n    font-size: 15px !important;\r\n  }\r\n}\r\n\r\n\/* MOBILE *\/\r\n\r\n@media (max-width:767px) {\r\n  #wa-process-master {\r\n    padding: 25px 6px 38px;\r\n  }\r\n\r\n  #wa-process-master .wa-process-heading {\r\n    margin-bottom: 32px;\r\n  }\r\n\r\n  #wa-process-master .wa-process-label {\r\n    font-size: 10px !important;\r\n    letter-spacing: .8px;\r\n  }\r\n\r\n  #wa-process-master .wa-process-title {\r\n    font-size: clamp(27px,6.5vw,42px) !important;\r\n    line-height: 1.17 !important;\r\n  }\r\n\r\n  #wa-process-master .wa-process-intro {\r\n    font-size: 14px !important;\r\n    line-height: 1.75 !important;\r\n  }\r\n\r\n  #wa-process-master .wa-process-grid {\r\n    grid-template-columns: minmax(0,1fr);\r\n    gap: 21px;\r\n  }\r\n\r\n  #wa-process-master .wa-step-three {\r\n    grid-column: auto;\r\n  }\r\n\r\n  #wa-process-master .wa-process-card {\r\n    min-height: 0;\r\n    padding: 26px 21px;\r\n    border-radius: 20px;\r\n  }\r\n\r\n  #wa-process-master .wa-process-card h3 {\r\n    font-size: clamp(23px,5.8vw,30px) !important;\r\n  }\r\n\r\n  #wa-process-master .wa-process-card p {\r\n    font-size: 14px !important;\r\n    line-height: 1.75 !important;\r\n  }\r\n\r\n  #wa-process-master .wa-step-number {\r\n    font-size: 42px;\r\n  }\r\n\r\n  #wa-process-master .wa-left.wa-inview\r\n  .wa-process-card {\r\n    animation-name: waProcessMobileLeftV2;\r\n  }\r\n\r\n  #wa-process-master .wa-right.wa-inview\r\n  .wa-process-card {\r\n    animation-name: waProcessMobileRightV2;\r\n  }\r\n\r\n  #wa-process-master .wa-process-heading.wa-inview\r\n  .wa-process-title {\r\n    animation-name: waProcessMobileLeftV2;\r\n  }\r\n}\r\n\r\n@keyframes waProcessMobileLeftV2 {\r\n  from {\r\n    opacity: 0;\r\n    transform: translateX(-60px);\r\n  }\r\n  to {\r\n    opacity: 1;\r\n    transform: translateX(0);\r\n  }\r\n}\r\n\r\n@keyframes waProcessMobileRightV2 {\r\n  from {\r\n    opacity: 0;\r\n    transform: translateX(60px);\r\n  }\r\n  to {\r\n    opacity: 1;\r\n    transform: translateX(0);\r\n  }\r\n}\r\n\r\n\/* REDUCED MOTION *\/\r\n\r\n@media (prefers-reduced-motion:reduce) {\r\n  #wa-process-master *,\r\n  #wa-process-master *::before,\r\n  #wa-process-master *::after {\r\n    animation: none !important;\r\n    transition: none !important;\r\n    opacity: 1 !important;\r\n    transform: none !important;\r\n  }\r\n}\r\n\r\n<\/style>\r\n\r\n<!-- ==========================================\r\n   PROCESS SECTION\r\n========================================== -->\r\n\r\n<section\r\n  id=\"wa-process-master\"\r\n  aria-labelledby=\"wa-process-title\">\r\n\r\n  <div class=\"wa-process-inner\">\r\n\r\n    <!-- HEADING -->\r\n\r\n    <header class=\"wa-process-heading\">\r\n\r\n      <div class=\"wa-process-label\">\r\n        <span class=\"wa-process-dot\"\r\n              aria-hidden=\"true\"><\/span>\r\n        HOE WIJ WERKEN \/ 03 STAPPEN\r\n      <\/div>\r\n\r\n      <h2\r\n        id=\"wa-process-title\"\r\n        class=\"wa-process-title\">\r\n\r\n        VAN IDEE TOT EEN\r\n\r\n        <span>\r\n          INDRUKWEKKENDE WEBSITE\r\n        <\/span>\r\n\r\n      <\/h2>\r\n\r\n      <p class=\"wa-process-intro\">\r\n        Van het eerste gesprek tot de lancering.\r\n        In drie duidelijke stappen cre\u00ebren we\r\n        een moderne, professionele website\r\n        die perfect aansluit bij jouw bedrijf.\r\n      <\/p>\r\n\r\n      <div\r\n        class=\"wa-process-heading-line\"\r\n        aria-hidden=\"true\"><\/div>\r\n\r\n    <\/header>\r\n\r\n    <!-- THREE STEPS -->\r\n\r\n    <div class=\"wa-process-grid\">\r\n\r\n      <!-- STEP 01 \u2014 FROM LEFT -->\r\n\r\n      <article class=\"wa-process-slot wa-left\">\r\n\r\n        <div class=\"wa-process-card\">\r\n\r\n          <div class=\"wa-process-top\">\r\n            <span class=\"wa-step-label\">STEP 01<\/span>\r\n            <span class=\"wa-step-number\"\r\n                  aria-hidden=\"true\">01<\/span>\r\n          <\/div>\r\n\r\n          <div class=\"wa-process-icon\"\r\n               aria-hidden=\"true\">\u2726<\/div>\r\n\r\n          <h3>\r\n            KENNISMAKING &amp;\r\n            <span>STRATEGIE<\/span>\r\n          <\/h3>\r\n\r\n          <div class=\"wa-process-line\"\r\n               aria-hidden=\"true\"><\/div>\r\n\r\n          <p>\r\n            We bespreken jouw wensen, idee\u00ebn\r\n            en doelen. Samen bepalen we de\r\n            juiste aanpak, uitstraling en\r\n            functies van jouw website.\r\n          <\/p>\r\n\r\n        <\/div>\r\n\r\n      <\/article>\r\n\r\n      <!-- STEP 02 \u2014 FROM RIGHT -->\r\n\r\n      <article class=\"wa-process-slot wa-right\">\r\n\r\n        <div class=\"wa-process-card\">\r\n\r\n          <div class=\"wa-process-top\">\r\n            <span class=\"wa-step-label\">STEP 02<\/span>\r\n            <span class=\"wa-step-number\"\r\n                  aria-hidden=\"true\">02<\/span>\r\n          <\/div>\r\n\r\n          <div class=\"wa-process-icon\"\r\n               aria-hidden=\"true\">\u25c8<\/div>\r\n\r\n          <h3>\r\n            DESIGN &amp;\r\n            <span>ONTWIKKELING<\/span>\r\n          <\/h3>\r\n\r\n          <div class=\"wa-process-line\"\r\n               aria-hidden=\"true\"><\/div>\r\n\r\n          <p>\r\n            We bouwen jouw website met\r\n            modern design, interactieve\r\n            animaties, 3D-effecten en\r\n            slimme digitale oplossingen.\r\n          <\/p>\r\n\r\n        <\/div>\r\n\r\n      <\/article>\r\n\r\n      <!-- STEP 03 \u2014 FULL WIDTH, FROM LEFT -->\r\n\r\n      <article\r\n        class=\"wa-process-slot wa-left wa-step-three\">\r\n\r\n        <div class=\"wa-process-card\">\r\n\r\n          <div class=\"wa-process-top\">\r\n            <span class=\"wa-step-label\">STEP 03<\/span>\r\n            <span class=\"wa-step-number\"\r\n                  aria-hidden=\"true\">03<\/span>\r\n          <\/div>\r\n\r\n          <div class=\"wa-process-icon\"\r\n               aria-hidden=\"true\">\u2713<\/div>\r\n\r\n          <h3>\r\n            LANCERING &amp;\r\n            <span>ONDERSTEUNING<\/span>\r\n          <\/h3>\r\n\r\n          <div class=\"wa-process-line\"\r\n               aria-hidden=\"true\"><\/div>\r\n\r\n          <p>\r\n            We testen en optimaliseren jouw\r\n            website, zetten deze online\r\n            en bieden ondersteuning\r\n            waar nodig.\r\n          <\/p>\r\n\r\n        <\/div>\r\n\r\n      <\/article>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n<!-- ==========================================\r\n   JAVASCRIPT \u2014 SCROLL OBSERVER\r\n========================================== -->\r\n\r\n<script>\r\n(function () {\r\n\r\n  function initProcessMaster() {\r\n\r\n    const section = document.getElementById(\r\n      \"wa-process-master\"\r\n    );\r\n\r\n    if (!section) return;\r\n\r\n    if (section.dataset.initialized === \"1\") {\r\n      return;\r\n    }\r\n\r\n    section.dataset.initialized = \"1\";\r\n\r\n    const reducedMotion = window.matchMedia(\r\n      \"(prefers-reduced-motion: reduce)\"\r\n    ).matches;\r\n\r\n    const inEditor =\r\n      document.body.classList.contains(\r\n        \"elementor-editor-active\"\r\n      ) ||\r\n      window.self !== window.top;\r\n\r\n    if (\r\n      reducedMotion ||\r\n      inEditor ||\r\n      !(\"IntersectionObserver\" in window)\r\n    ) {\r\n      return;\r\n    }\r\n\r\n    const targets = section.querySelectorAll(\r\n      \".wa-process-heading, .wa-process-slot\"\r\n    );\r\n\r\n    const observer = new IntersectionObserver(\r\n      function (entries) {\r\n\r\n        entries.forEach(function (entry) {\r\n\r\n          if (entry.isIntersecting) {\r\n\r\n            entry.target.classList.add(\r\n              \"wa-inview\"\r\n            );\r\n\r\n            observer.unobserve(entry.target);\r\n\r\n          }\r\n\r\n        });\r\n\r\n      },\r\n      {\r\n        threshold: 0.08,\r\n        rootMargin: \"0px 0px -35px 0px\"\r\n      }\r\n    );\r\n\r\n    targets.forEach(function (target) {\r\n      observer.observe(target);\r\n    });\r\n\r\n  }\r\n\r\n  if (document.readyState === \"loading\") {\r\n\r\n    document.addEventListener(\r\n      \"DOMContentLoaded\",\r\n      initProcessMaster,\r\n      { once: true }\r\n    );\r\n\r\n  } else {\r\n\r\n    initProcessMaster();\r\n\r\n  }\r\n\r\n})();\r\n<\/script>\r\n\r\n<!-- ==========================================\r\nEND WEBAVATARAI MASTER PROCESS V2\r\n========================================== -->\r\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-e763022 e-con e-atomic-element e-flexbox-base e-default-div e-5a204d2 \" data-id=\"e763022\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"e763022\">\n    \t\t<div class=\"elementor-element elementor-element-fdf66df elementor-widget elementor-widget-html\" data-id=\"fdf66df\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ==========================================\r\nWEBAVATARAI.COM \u2014 PREMIUM CTA V2\r\nONTDEK DE MOGELIJKHEDEN\r\nGLASS + LEFT \/ RIGHT SCROLL ANIMATION\r\nCOMPLETE HTML + CSS + JAVASCRIPT\r\n========================================== -->\r\n\r\n<style>\r\n\r\n\/* MAIN PREMIUM GLASS SECTION *\/\r\n\r\n#wa-cta-master {\r\n  position: relative;\r\n  isolation: isolate;\r\n\r\n  width: 100%;\r\n  min-width: 0;\r\n  box-sizing: border-box;\r\n  margin: 0;\r\n\r\n  padding: clamp(38px,5vw,70px)\r\n           clamp(18px,4vw,50px);\r\n\r\n  border-radius: 26px;\r\n  overflow: hidden;\r\n\r\n  background:\r\n    radial-gradient(\r\n      ellipse at 50% 8%,\r\n      rgba(0,190,255,.22),\r\n      transparent 65%\r\n    ),\r\n    linear-gradient(\r\n      135deg,\r\n      rgba(65,135,195,.23),\r\n      rgba(5,24,57,.33)\r\n    );\r\n\r\n  border: 1px solid rgba(160,230,255,.62);\r\n\r\n  backdrop-filter: blur(14px);\r\n  -webkit-backdrop-filter: blur(14px);\r\n\r\n  box-shadow:\r\n    0 18px 50px rgba(0,0,0,.20),\r\n    inset 0 1px 0 rgba(255,255,255,.30),\r\n    0 0 30px rgba(0,185,255,.25),\r\n    0 0 55px rgba(0,110,255,.11);\r\n\r\n  color: #ffffff;\r\n  font-family: 'Segoe UI',Arial,sans-serif;\r\n\r\n  transition:\r\n    border-color .35s ease,\r\n    box-shadow .35s ease;\r\n}\r\n\r\n#wa-cta-master *,\r\n#wa-cta-master *::before,\r\n#wa-cta-master *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n\/* BLUE AMBIENT GLOW *\/\r\n\r\n#wa-cta-master::before {\r\n  content: \"\";\r\n\r\n  position: absolute;\r\n  top: -170px;\r\n  right: -130px;\r\n\r\n  width: 420px;\r\n  height: 420px;\r\n  border-radius: 50%;\r\n\r\n  background: radial-gradient(\r\n    circle,\r\n    rgba(0,195,255,.28),\r\n    rgba(0,115,255,.09) 48%,\r\n    transparent 75%\r\n  );\r\n\r\n  filter: blur(17px);\r\n\r\n  pointer-events: none;\r\n  z-index: 0;\r\n}\r\n\r\n\/* MOVING GLASS REFLECTION *\/\r\n\r\n#wa-cta-master::after {\r\n  content: \"\";\r\n\r\n  position: absolute;\r\n  top: -35%;\r\n  left: -45%;\r\n\r\n  width: 35%;\r\n  height: 170%;\r\n\r\n  transform: rotate(18deg);\r\n\r\n  background: linear-gradient(\r\n    90deg,\r\n    transparent,\r\n    rgba(225,250,255,.18),\r\n    transparent\r\n  );\r\n\r\n  filter: blur(10px);\r\n\r\n  animation:\r\n    waCtaGlassSweepV2 12s ease-in-out infinite;\r\n\r\n  pointer-events: none;\r\n  z-index: 0;\r\n}\r\n\r\n\/* MAIN CONTENT *\/\r\n\r\n#wa-cta-master .wa-cta-inner {\r\n  position: relative;\r\n  z-index: 1;\r\n\r\n  width: 100%;\r\n  max-width: 1150px;\r\n  min-width: 0;\r\n\r\n  margin: 0 auto;\r\n  text-align: center;\r\n}\r\n\r\n\/* CONTAINER HOVER *\/\r\n\r\n#wa-cta-master:hover {\r\n  border-color: rgba(215,250,255,.96);\r\n\r\n  box-shadow:\r\n    0 22px 55px rgba(0,0,0,.24),\r\n    inset 0 1px 0 rgba(255,255,255,.38),\r\n    0 0 37px rgba(0,200,255,.42),\r\n    0 0 65px rgba(0,125,255,.16);\r\n}\r\n\r\n\/* SMALL PREMIUM LABEL *\/\r\n\r\n#wa-cta-master .wa-cta-label {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n\r\n  gap: 11px;\r\n  max-width: 100%;\r\n\r\n  margin-bottom: 30px;\r\n  padding: 10px 19px;\r\n\r\n  border-radius: 30px;\r\n\r\n  background: rgba(0,160,255,.19);\r\n  border: 1px solid rgba(165,235,255,.63);\r\n\r\n  backdrop-filter: blur(10px);\r\n  -webkit-backdrop-filter: blur(10px);\r\n\r\n  color: #c7f3ff !important;\r\n\r\n  font-size: 11px !important;\r\n  font-weight: 800 !important;\r\n  line-height: 1.5 !important;\r\n  letter-spacing: 1.7px;\r\n\r\n  box-shadow:\r\n    inset 0 1px 0 rgba(255,255,255,.23),\r\n    0 0 20px rgba(0,175,255,.23);\r\n}\r\n\r\n\/* NEON DOT *\/\r\n\r\n#wa-cta-master .wa-cta-dot {\r\n  display: block;\r\n  flex: 0 0 9px;\r\n\r\n  width: 9px;\r\n  height: 9px;\r\n\r\n  border-radius: 50%;\r\n  background: #c0f5ff;\r\n\r\n  box-shadow:\r\n    0 0 9px rgba(100,230,255,.95),\r\n    0 0 19px rgba(0,175,255,.73);\r\n}\r\n\r\n\/* MAIN TITLE *\/\r\n\r\n#wa-cta-master .wa-cta-title {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  gap: 12px;\r\n\r\n  width: 100%;\r\n  margin: 0 !important;\r\n  padding: 0 !important;\r\n\r\n  color: #ffffff !important;\r\n\r\n  font-family:\r\n    'Segoe UI',Arial,sans-serif !important;\r\n\r\n  font-size:\r\n    clamp(28px,4.5vw,60px) !important;\r\n\r\n  font-weight: 900 !important;\r\n  line-height: 1.15 !important;\r\n  letter-spacing: -.04em !important;\r\n\r\n  text-align: center !important;\r\n  text-transform: uppercase !important;\r\n\r\n  overflow-wrap: break-word;\r\n\r\n  text-shadow:\r\n    0 1px 0 rgba(225,250,255,.62),\r\n    0 3px 9px rgba(0,0,0,.32),\r\n    0 0 16px rgba(255,255,255,.28),\r\n    0 0 34px rgba(110,210,255,.27);\r\n}\r\n\r\n\/* WHITE TITLE LINE *\/\r\n\r\n#wa-cta-master .wa-cta-title span {\r\n  display: block;\r\n  max-width: 100%;\r\n\r\n  color: #ffffff !important;\r\n  font-size: inherit !important;\r\n  font-weight: inherit !important;\r\n  line-height: inherit !important;\r\n}\r\n\r\n\/* BLUE NEON TITLE LINE *\/\r\n\r\n#wa-cta-master .wa-cta-title .wa-cta-accent {\r\n  color: #a9edff !important;\r\n\r\n  text-shadow:\r\n    0 1px 0 rgba(230,250,255,.78),\r\n    0 3px 9px rgba(0,0,0,.30),\r\n    0 0 13px rgba(115,225,255,.83),\r\n    0 0 31px rgba(0,190,255,.54),\r\n    0 0 53px rgba(0,125,255,.28);\r\n}\r\n\r\n\/* DESCRIPTION *\/\r\n\r\n#wa-cta-master .wa-cta-description {\r\n  max-width: 830px;\r\n\r\n  margin: 31px auto 0 !important;\r\n  padding: 0 !important;\r\n\r\n  color: #eef8ff !important;\r\n\r\n  font-family:\r\n    'Segoe UI',Arial,sans-serif !important;\r\n\r\n  font-size:\r\n    clamp(15px,1.45vw,18px) !important;\r\n\r\n  font-weight: 400 !important;\r\n  line-height: 1.85 !important;\r\n\r\n  text-align: center !important;\r\n  text-transform: none !important;\r\n\r\n  text-shadow:\r\n    0 2px 9px rgba(0,0,0,.30);\r\n}\r\n\r\n\/* NEON LIGHT LINE *\/\r\n\r\n#wa-cta-master .wa-cta-line {\r\n  position: relative;\r\n\r\n  width: 195px;\r\n  max-width: 75%;\r\n  height: 3px;\r\n\r\n  margin: 36px auto 0;\r\n  border-radius: 5px;\r\n\r\n  background: linear-gradient(\r\n    90deg,\r\n    transparent,\r\n    #73e6ff,\r\n    #ffffff,\r\n    #73e6ff,\r\n    transparent\r\n  );\r\n\r\n  box-shadow:\r\n    0 0 14px rgba(0,195,255,.85),\r\n    0 0 29px rgba(0,145,255,.45);\r\n\r\n  transform-origin: center;\r\n}\r\n\r\n\/* LIGHT LINE GLOW *\/\r\n\r\n#wa-cta-master .wa-cta-line::after {\r\n  content: \"\";\r\n\r\n  position: absolute;\r\n  inset: -5px 0;\r\n\r\n  background: radial-gradient(\r\n    ellipse,\r\n    rgba(0,190,255,.30),\r\n    transparent 72%\r\n  );\r\n\r\n  filter: blur(9px);\r\n  pointer-events: none;\r\n}\r\n\r\n\/* ==========================================\r\n   SCROLL ENTRANCE ANIMATIONS\r\n========================================== *\/\r\n\r\n\/* LABEL \u2014 FROM ABOVE *\/\r\n\r\n#wa-cta-master.wa-cta-play .wa-cta-label {\r\n  animation:\r\n    waCtaFadeDownV2 .8s ease both;\r\n}\r\n\r\n\/* TITLE \u2014 FROM LEFT *\/\r\n\r\n#wa-cta-master.wa-cta-play .wa-cta-title {\r\n  animation:\r\n    waCtaLeftV2 1.3s\r\n    cubic-bezier(.19,1,.22,1) both;\r\n}\r\n\r\n\/* DESCRIPTION \u2014 FROM RIGHT *\/\r\n\r\n#wa-cta-master.wa-cta-play\r\n.wa-cta-description {\r\n  animation:\r\n    waCtaRightV2 1.3s\r\n    cubic-bezier(.19,1,.22,1) .18s both;\r\n}\r\n\r\n\/* LINE \u2014 GROW FROM CENTER *\/\r\n\r\n#wa-cta-master.wa-cta-play .wa-cta-line {\r\n  animation:\r\n    waCtaLineV2 1.1s ease .65s both;\r\n}\r\n\r\n\/* LEFT *\/\r\n\r\n@keyframes waCtaLeftV2 {\r\n  from {\r\n    opacity: 0;\r\n    transform: translate3d(-125px,0,0);\r\n  }\r\n\r\n  to {\r\n    opacity: 1;\r\n    transform: translate3d(0,0,0);\r\n  }\r\n}\r\n\r\n\/* RIGHT *\/\r\n\r\n@keyframes waCtaRightV2 {\r\n  from {\r\n    opacity: 0;\r\n    transform: translate3d(125px,0,0);\r\n  }\r\n\r\n  to {\r\n    opacity: 1;\r\n    transform: translate3d(0,0,0);\r\n  }\r\n}\r\n\r\n\/* LABEL *\/\r\n\r\n@keyframes waCtaFadeDownV2 {\r\n  from {\r\n    opacity: 0;\r\n    transform: translateY(-25px);\r\n  }\r\n\r\n  to {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n}\r\n\r\n\/* LINE *\/\r\n\r\n@keyframes waCtaLineV2 {\r\n  from {\r\n    opacity: 0;\r\n    transform: scaleX(0);\r\n  }\r\n\r\n  to {\r\n    opacity: 1;\r\n    transform: scaleX(1);\r\n  }\r\n}\r\n\r\n\/* MOVING REFLECTION *\/\r\n\r\n@keyframes waCtaGlassSweepV2 {\r\n  0%,12% {\r\n    left: -45%;\r\n    opacity: 0;\r\n  }\r\n\r\n  23% {\r\n    opacity: .5;\r\n  }\r\n\r\n  58% {\r\n    left: 115%;\r\n    opacity: .6;\r\n  }\r\n\r\n  72%,100% {\r\n    left: 115%;\r\n    opacity: 0;\r\n  }\r\n}\r\n\r\n\/* ==========================================\r\n   TABLET\r\n========================================== *\/\r\n\r\n@media (max-width:950px) {\r\n\r\n  #wa-cta-master {\r\n    padding: 43px 24px;\r\n  }\r\n\r\n  #wa-cta-master .wa-cta-title {\r\n    font-size:\r\n      clamp(28px,4.8vw,48px) !important;\r\n  }\r\n\r\n  #wa-cta-master .wa-cta-description {\r\n    font-size: 15px !important;\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  #wa-cta-master {\r\n    padding: 34px 18px;\r\n    border-radius: 20px;\r\n  }\r\n\r\n  #wa-cta-master .wa-cta-label {\r\n    padding: 9px 13px;\r\n    margin-bottom: 26px;\r\n\r\n    font-size: 10px !important;\r\n    letter-spacing: 1px;\r\n  }\r\n\r\n  #wa-cta-master .wa-cta-title {\r\n    font-size:\r\n      clamp(24px,6.4vw,37px) !important;\r\n\r\n    line-height: 1.19 !important;\r\n    gap: 13px;\r\n  }\r\n\r\n  #wa-cta-master .wa-cta-description {\r\n    margin-top: 26px !important;\r\n\r\n    font-size: 14px !important;\r\n    line-height: 1.75 !important;\r\n  }\r\n\r\n  #wa-cta-master .wa-cta-line {\r\n    margin-top: 30px;\r\n    width: 150px;\r\n  }\r\n\r\n  #wa-cta-master.wa-cta-play .wa-cta-title {\r\n    animation-name: waCtaMobileLeftV2;\r\n  }\r\n\r\n  #wa-cta-master.wa-cta-play\r\n  .wa-cta-description {\r\n    animation-name: waCtaMobileRightV2;\r\n  }\r\n}\r\n\r\n\/* MOBILE LEFT ENTRANCE *\/\r\n\r\n@keyframes waCtaMobileLeftV2 {\r\n  from {\r\n    opacity: 0;\r\n    transform: translateX(-55px);\r\n  }\r\n\r\n  to {\r\n    opacity: 1;\r\n    transform: translateX(0);\r\n  }\r\n}\r\n\r\n\/* MOBILE RIGHT ENTRANCE *\/\r\n\r\n@keyframes waCtaMobileRightV2 {\r\n  from {\r\n    opacity: 0;\r\n    transform: translateX(55px);\r\n  }\r\n\r\n  to {\r\n    opacity: 1;\r\n    transform: translateX(0);\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  #wa-cta-master::after,\r\n  #wa-cta-master *,\r\n  #wa-cta-master *::before,\r\n  #wa-cta-master *::after {\r\n    animation: none !important;\r\n    transition: none !important;\r\n  }\r\n\r\n  #wa-cta-master * {\r\n    opacity: 1 !important;\r\n    transform: none !important;\r\n  }\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n<!-- ==========================================\r\n   PREMIUM CTA \u2014 HTML\r\n========================================== -->\r\n\r\n<section\r\n  id=\"wa-cta-master\"\r\n  aria-labelledby=\"wa-cta-title\">\r\n\r\n  <div class=\"wa-cta-inner\">\r\n\r\n    <!-- TOP LABEL -->\r\n\r\n    <div class=\"wa-cta-label\">\r\n\r\n      <span\r\n        class=\"wa-cta-dot\"\r\n        aria-hidden=\"true\"><\/span>\r\n\r\n      ONTDEK DE MOGELIJKHEDEN\r\n\r\n    <\/div>\r\n\r\n    <!-- TITLE \u2014 FROM LEFT -->\r\n\r\n    <h2\r\n      id=\"wa-cta-title\"\r\n      class=\"wa-cta-title\">\r\n\r\n      <span>\r\n        ONTDEK WAT WIJ\r\n      <\/span>\r\n\r\n      <span class=\"wa-cta-accent\">\r\n        VOOR JOU KUNNEN CRE\u00cbREN\r\n      <\/span>\r\n\r\n    <\/h2>\r\n\r\n    <!-- DESCRIPTION \u2014 FROM RIGHT -->\r\n\r\n    <p class=\"wa-cta-description\">\r\n      Van interactieve 3D-websites tot\r\n      professionele video's en branding.\r\n      Wij brengen jouw idee\u00ebn digitaal\r\n      tot leven.\r\n    <\/p>\r\n\r\n    <!-- ANIMATED NEON LINE -->\r\n\r\n    <div\r\n      class=\"wa-cta-line\"\r\n      aria-hidden=\"true\">\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<!-- ==========================================\r\n   JAVASCRIPT \u2014 SCROLL OBSERVER\r\n========================================== -->\r\n\r\n<script>\r\n(function () {\r\n\r\n  function initCtaMaster() {\r\n\r\n    const section = document.getElementById(\r\n      \"wa-cta-master\"\r\n    );\r\n\r\n    if (!section) return;\r\n\r\n    if (section.dataset.initialized === \"1\") {\r\n      return;\r\n    }\r\n\r\n    const reducedMotion = window.matchMedia(\r\n      \"(prefers-reduced-motion: reduce)\"\r\n    ).matches;\r\n\r\n    const inEditor =\r\n      document.body.classList.contains(\r\n        \"elementor-editor-active\"\r\n      ) ||\r\n      window.self !== window.top;\r\n\r\n    if (\r\n      reducedMotion ||\r\n      inEditor ||\r\n      !(\"IntersectionObserver\" in window)\r\n    ) {\r\n      return;\r\n    }\r\n\r\n    section.dataset.initialized = \"1\";\r\n\r\n    const observer = new IntersectionObserver(\r\n      function (entries) {\r\n\r\n        entries.forEach(function (entry) {\r\n\r\n          if (entry.isIntersecting) {\r\n\r\n            section.classList.add(\r\n              \"wa-cta-play\"\r\n            );\r\n\r\n            observer.unobserve(section);\r\n          }\r\n\r\n        });\r\n\r\n      },\r\n      {\r\n        threshold: 0.12,\r\n        rootMargin: \"0px 0px -25px 0px\"\r\n      }\r\n    );\r\n\r\n    observer.observe(section);\r\n  }\r\n\r\n  if (document.readyState === \"loading\") {\r\n\r\n    document.addEventListener(\r\n      \"DOMContentLoaded\",\r\n      initCtaMaster,\r\n      { once: true }\r\n    );\r\n\r\n  } else {\r\n\r\n    initCtaMaster();\r\n  }\r\n\r\n})();\r\n<\/script>\r\n\r\n<!-- ==========================================\r\n   END PREMIUM CTA V2\r\n========================================== -->\r\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-05c2167 e-con e-atomic-element e-flexbox-base e-default-div e-2919910 \" data-id=\"05c2167\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"05c2167\">\n    \t\t<div class=\"elementor-element elementor-element-18fc39e elementor-widget elementor-widget-html\" data-id=\"18fc39e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- WEBAVATARAI \u2014 MASTER FOOTER 3D -->\r\n\r\n<footer class=\"wa-master-footer\" id=\"wa-master-footer-v2\">\r\n\r\n  <!-- ANIMOWANE T\u0141O MP4 -->\r\n\r\n  <div class=\"wa-footer-background\" aria-hidden=\"true\">\r\n    <video\r\n      class=\"wa-footer-wave\"\r\n      muted\r\n      loop\r\n      autoplay\r\n      playsinline\r\n      preload=\"none\"\r\n      data-src=\"https:\/\/webavatarai.com\/wp-content\/uploads\/2026\/10\/Petla-wwwavatar.mp4\">\r\n    <\/video>\r\n  <\/div>\r\n\r\n  <!-- TRZY KOLUMNY -->\r\n\r\n  <div class=\"wa-footer-container\">\r\n\r\n    <!-- NAWIGACJA -->\r\n\r\n    <nav class=\"wa-footer-navigation\"\r\n         aria-label=\"Footernavigatie\">\r\n\r\n      <h3>NAVIGATIE<\/h3>\r\n\r\n      <ul>\r\n        <li>\r\n          <a href=\"https:\/\/webavatarai.com\/\">\r\n            Home\r\n          <\/a>\r\n        <\/li>\r\n\r\n        <li>\r\n          <a href=\"https:\/\/webavatarai.com\/over-ons-diensten\/\">\r\n            Over ons &amp; Diensten\r\n          <\/a>\r\n        <\/li>\r\n\r\n        <li>\r\n          <a href=\"https:\/\/webavatarai.com\/prijzen\/\">\r\n            Prijzen\r\n          <\/a>\r\n        <\/li>\r\n\r\n        <li>\r\n          <a href=\"https:\/\/webavatarai.com\/3d-bibliotheek\/\">\r\n            3D Bibliotheek\r\n          <\/a>\r\n        <\/li>\r\n\r\n        <li>\r\n          <a href=\"https:\/\/webavatarai.com\/contact\/\">\r\n            Contact\r\n          <\/a>\r\n        <\/li>\r\n      <\/ul>\r\n\r\n    <\/nav>\r\n\r\n    <!-- INTERAKTYWNE LOGO 3D -->\r\n\r\n    <div class=\"wa-footer-center\">\r\n\r\n      <div class=\"wa-footer-cube\">\r\n\r\n        <video\r\n          class=\"wa-footer-cube-video\"\r\n          muted\r\n          loop\r\n          autoplay\r\n          playsinline\r\n          preload=\"none\"\r\n          data-src=\"https:\/\/webavatarai.com\/wp-content\/uploads\/3d\/wa-3d-cube-loop-final1.mp4\"\r\n          aria-hidden=\"true\">\r\n        <\/video>\r\n\r\n        <model-viewer\r\n          class=\"wa-footer-logo\"\r\n          data-src=\"https:\/\/webavatarai.com\/wp-content\/uploads\/3d\/WA.glb\"\r\n          camera-controls\r\n          auto-rotate\r\n          rotation-per-second=\"12deg\"\r\n          interaction-prompt=\"none\"\r\n          disable-zoom\r\n          shadow-intensity=\"0\"\r\n          tone-mapping=\"neutral\"\r\n          loading=\"lazy\"\r\n          alt=\"Interactief 3D-logo van WebAvatarAI\">\r\n        <\/model-viewer>\r\n\r\n      <\/div>\r\n\r\n      <div class=\"wa-footer-brand\">\r\n        WEB<span>AVATAR<\/span>AI\r\n      <\/div>\r\n\r\n      <p class=\"wa-footer-tagline\">\r\n        Digitale ervaringen die indruk maken.\r\n      <\/p>\r\n\r\n    <\/div>\r\n\r\n    <!-- KONTAKT -->\r\n\r\n    <div class=\"wa-footer-contact\">\r\n\r\n      <h3>CONTACT<\/h3>\r\n\r\n      <h4>\r\n        Samen iets bijzonders maken?\r\n      <\/h4>\r\n\r\n      <p>\r\n        Moderne websites en interactieve\r\n        3D-ervaringen, ontworpen voor\r\n        jouw onderneming.\r\n      <\/p>\r\n\r\n      <p>\r\n        Vertel ons over jouw idee.\r\n        Wij denken graag met je mee.\r\n      <\/p>\r\n\r\n      <a\r\n        href=\"https:\/\/webavatarai.com\/contact\/\"\r\n        class=\"wa-footer-contact-button\">\r\n        Neem contact op\r\n        <span aria-hidden=\"true\">\u2197<\/span>\r\n      <\/a>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n  <!-- DOLNY PASEK -->\r\n\r\n  <div class=\"wa-footer-bottom\">\r\n\r\n    <div>\r\n      \u00a9 2026 WebAvatarAI.\r\n      Alle rechten voorbehouden.\r\n    <\/div>\r\n\r\n    <div>\r\n      Premium Websites \u00b7 3D \u00b7 Animatie\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n<\/footer>\r\n\r\n<!-- GOOGLE MODEL VIEWER -->\r\n\r\n<script\r\n  type=\"module\"\r\n  src=\"https:\/\/unpkg.com\/@google\/model-viewer\/dist\/model-viewer.min.js\">\r\n<\/script>\r\n\r\n<style>\r\n\r\n\/* G\u0141\u00d3WNY FOOTER *\/\r\n\r\n.wa-master-footer {\r\n  position: relative;\r\n  isolation: isolate;\r\n  width: 100%;\r\n  min-height: 450px;\r\n  overflow: hidden;\r\n  background: #020814;\r\n  color: #ffffff;\r\n  font-family: inherit;\r\n  padding: 55px 30px 22px;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.wa-master-footer *,\r\n.wa-master-footer *::before,\r\n.wa-master-footer *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n\/* ANIMOWANA FALA *\/\r\n\r\n.wa-footer-background {\r\n  position: absolute;\r\n  inset: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  z-index: 0;\r\n  overflow: hidden;\r\n  pointer-events: none;\r\n}\r\n\r\n.wa-footer-wave {\r\n  position: absolute;\r\n  inset: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n  object-position: center center;\r\n  display: block;\r\n  filter: none;\r\n  opacity: 1;\r\n}\r\n\r\n\/* TRZY KOLUMNY *\/\r\n\r\n.wa-footer-container {\r\n  position: relative;\r\n  z-index: 2;\r\n  display: grid;\r\n  grid-template-columns:\r\n    minmax(0, 1fr)\r\n    minmax(250px, 320px)\r\n    minmax(0, 1fr);\r\n  column-gap: 55px;\r\n  align-items: center;\r\n  width: 100%;\r\n  max-width: 1200px;\r\n  margin: 0 auto;\r\n}\r\n\r\n\/* NAG\u0141\u00d3WKI *\/\r\n\r\n.wa-master-footer h3 {\r\n  font-family: inherit;\r\n  font-size: 15px;\r\n  font-weight: 700;\r\n  line-height: 1.4;\r\n  letter-spacing: 2px;\r\n  color: #65d5ff;\r\n  margin: 0 0 24px;\r\n  text-shadow:\r\n    0 0 12px rgba(0,120,255,.4);\r\n}\r\n\r\n\/* NAWIGACJA *\/\r\n\r\n.wa-footer-navigation {\r\n  min-width: 0;\r\n}\r\n\r\n.wa-footer-navigation ul {\r\n  list-style: none;\r\n  padding: 0;\r\n  margin: 0;\r\n}\r\n\r\n.wa-footer-navigation li {\r\n  margin: 0 0 16px;\r\n  padding: 0;\r\n}\r\n\r\n.wa-footer-navigation a {\r\n  display: inline-block;\r\n  color: #ffffff;\r\n  font-family: inherit;\r\n  font-size: 15px;\r\n  font-weight: 400;\r\n  line-height: 1.5;\r\n  text-decoration: none;\r\n  text-shadow:\r\n    0 2px 10px rgba(0,0,0,.65);\r\n  transition:\r\n    color .3s ease,\r\n    transform .3s ease,\r\n    text-shadow .3s ease;\r\n}\r\n\r\n.wa-footer-navigation a:hover {\r\n  color: #60d9ff;\r\n  transform: translateX(5px);\r\n  text-shadow:\r\n    0 0 15px rgba(0,180,255,.65);\r\n}\r\n\r\n\/* \u015aRODEK 3D *\/\r\n\r\n.wa-footer-center {\r\n  width: 100%;\r\n  min-width: 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  text-align: center;\r\n}\r\n\r\n.wa-footer-cube {\r\n  position: relative;\r\n  width: 100%;\r\n  max-width: 300px;\r\n  aspect-ratio: 1 \/ 1;\r\n  background: #020814;\r\n  border-radius: 18px;\r\n  overflow: hidden;\r\n  isolation: isolate;\r\n  box-shadow:\r\n    0 0 22px rgba(0,125,255,.22),\r\n    0 0 45px rgba(0,90,255,.12);\r\n}\r\n\r\n\/* WIDEO KOSTKI *\/\r\n\r\n.wa-footer-cube-video {\r\n  position: absolute;\r\n  inset: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n  object-position: center;\r\n  z-index: 1;\r\n  display: block;\r\n  background: #020814;\r\n}\r\n\r\n\/* INTERAKTYWNE LOGO *\/\r\n\r\n.wa-footer-logo {\r\n  position: absolute;\r\n  top: 15%;\r\n  left: 15%;\r\n  width: 70%;\r\n  height: 70%;\r\n  z-index: 2;\r\n  display: block;\r\n  background: transparent;\r\n  --poster-color: transparent;\r\n  outline: none;\r\n}\r\n\r\n\/* BRANDING *\/\r\n\r\n.wa-footer-brand {\r\n  margin-top: 19px;\r\n  color: #ffffff;\r\n  font-family: inherit;\r\n  font-size: 21px;\r\n  font-weight: 700;\r\n  line-height: 1.3;\r\n  letter-spacing: 1.8px;\r\n  text-shadow:\r\n    0 0 12px rgba(0,140,255,.65),\r\n    0 0 25px rgba(0,100,255,.3);\r\n}\r\n\r\n.wa-footer-brand span {\r\n  color: #52cfff;\r\n}\r\n\r\n.wa-footer-tagline {\r\n  margin: 8px 0 0;\r\n  color: #d6e9ff;\r\n  font-family: inherit;\r\n  font-size: 12px;\r\n  line-height: 1.6;\r\n  letter-spacing: .3px;\r\n  text-shadow:\r\n    0 2px 8px rgba(0,0,0,.75);\r\n}\r\n\r\n\/* KONTAKT *\/\r\n\r\n.wa-footer-contact {\r\n  min-width: 0;\r\n}\r\n\r\n.wa-footer-contact h4 {\r\n  color: #ffffff;\r\n  font-family: inherit;\r\n  font-size: 18px;\r\n  font-weight: 600;\r\n  line-height: 1.35;\r\n  letter-spacing: .2px;\r\n  margin: 0 0 18px;\r\n  text-transform: none;\r\n  text-shadow:\r\n    0 2px 12px rgba(0,0,0,.65);\r\n}\r\n\r\n.wa-footer-contact p {\r\n  color: #e1efff;\r\n  font-family: inherit;\r\n  font-size: 14px;\r\n  font-weight: 400;\r\n  line-height: 1.75;\r\n  margin: 0 0 14px;\r\n  text-shadow:\r\n    0 2px 10px rgba(0,0,0,.75);\r\n}\r\n\r\n\/* PRZYCISK KONTAKT *\/\r\n\r\n.wa-footer-contact-button {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 14px;\r\n  margin-top: 14px;\r\n  padding: 13px 21px;\r\n  color: #ffffff !important;\r\n  background: rgba(0,105,255,.22);\r\n  border:\r\n    1px solid rgba(93,208,255,.65);\r\n  border-radius: 11px;\r\n  font-family: inherit;\r\n  font-size: 14px;\r\n  font-weight: 600;\r\n  text-decoration: none !important;\r\n  backdrop-filter: blur(8px);\r\n  -webkit-backdrop-filter: blur(8px);\r\n  box-shadow:\r\n    0 0 18px rgba(0,115,255,.2);\r\n  transition:\r\n    background .3s ease,\r\n    box-shadow .3s ease,\r\n    transform .3s ease;\r\n}\r\n\r\n.wa-footer-contact-button:hover {\r\n  color: #ffffff !important;\r\n  background: rgba(0,140,255,.38);\r\n  box-shadow:\r\n    0 0 25px rgba(0,145,255,.45);\r\n  transform: translateY(-2px);\r\n}\r\n\r\n.wa-footer-contact-button span {\r\n  font-size: 17px;\r\n}\r\n\r\n\/* DOLNY PASEK *\/\r\n\r\n.wa-footer-bottom {\r\n  position: relative;\r\n  z-index: 2;\r\n  width: 100%;\r\n  max-width: 1200px;\r\n  margin: 45px auto 0;\r\n  padding-top: 22px;\r\n  border-top:\r\n    1px solid rgba(160,210,255,.28);\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  gap: 15px;\r\n  color: #d0e2f5;\r\n  font-family: inherit;\r\n  font-size: 12px;\r\n  line-height: 1.5;\r\n  text-shadow:\r\n    0 2px 8px rgba(0,0,0,.7);\r\n}\r\n\r\n\/* TABLET *\/\r\n\r\n@media (max-width: 950px) {\r\n\r\n  .wa-master-footer {\r\n    padding: 45px 25px 22px;\r\n  }\r\n\r\n  .wa-footer-container {\r\n    grid-template-columns: 1fr 1fr;\r\n    column-gap: 45px;\r\n    row-gap: 45px;\r\n  }\r\n\r\n  .wa-footer-center {\r\n    grid-column: 1 \/ -1;\r\n    grid-row: 1;\r\n  }\r\n\r\n  .wa-footer-navigation {\r\n    grid-column: 1;\r\n    grid-row: 2;\r\n  }\r\n\r\n  .wa-footer-contact {\r\n    grid-column: 2;\r\n    grid-row: 2;\r\n  }\r\n\r\n  .wa-footer-cube {\r\n    max-width: 280px;\r\n  }\r\n\r\n}\r\n\r\n\/* TELEFON *\/\r\n\r\n@media (max-width: 600px) {\r\n\r\n  .wa-master-footer {\r\n    padding: 38px 22px 20px;\r\n  }\r\n\r\n  .wa-footer-container {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: stretch;\r\n    gap: 35px;\r\n  }\r\n\r\n  .wa-footer-center {\r\n    order: 1;\r\n  }\r\n\r\n  .wa-footer-navigation {\r\n    order: 2;\r\n  }\r\n\r\n  .wa-footer-contact {\r\n    order: 3;\r\n  }\r\n\r\n  .wa-footer-cube {\r\n    max-width: 270px;\r\n    margin: 0 auto;\r\n    border-radius: 15px;\r\n  }\r\n\r\n  .wa-footer-brand {\r\n    font-size: 19px;\r\n  }\r\n\r\n  .wa-footer-navigation h3,\r\n  .wa-footer-contact h3 {\r\n    font-size: 14px;\r\n    margin-bottom: 18px;\r\n  }\r\n\r\n  .wa-footer-navigation li {\r\n    margin-bottom: 14px;\r\n  }\r\n\r\n  .wa-footer-navigation a {\r\n    font-size: 14px;\r\n  }\r\n\r\n  .wa-footer-contact h4 {\r\n    font-size: 18px;\r\n  }\r\n\r\n  .wa-footer-contact p {\r\n    font-size: 13px;\r\n    line-height: 1.7;\r\n  }\r\n\r\n  .wa-footer-bottom {\r\n    flex-direction: column;\r\n    text-align: center;\r\n    gap: 8px;\r\n    margin-top: 35px;\r\n    font-size: 11px;\r\n  }\r\n\r\n}\r\n\r\n\/* OGRANICZENIE ANIMACJI *\/\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n\r\n  .wa-footer-navigation a,\r\n  .wa-footer-contact-button {\r\n    transition: none;\r\n  }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n<!-- OPTYMALIZACJA \u0141ADOWANIA -->\r\n\r\n<script>\r\n(function () {\r\n\r\n  const footer = document.getElementById(\r\n    \"wa-master-footer-v2\"\r\n  );\r\n\r\n  if (!footer) return;\r\n\r\n  const wave = footer.querySelector(\r\n    \".wa-footer-wave\"\r\n  );\r\n\r\n  const cubeVideo = footer.querySelector(\r\n    \".wa-footer-cube-video\"\r\n  );\r\n\r\n  const logo = footer.querySelector(\r\n    \".wa-footer-logo\"\r\n  );\r\n\r\n  if (!wave || !cubeVideo || !logo) return;\r\n\r\n  const reducedMotion = window.matchMedia(\r\n    \"(prefers-reduced-motion: reduce)\"\r\n  ).matches;\r\n\r\n  let initialized = false;\r\n\r\n  function initializeScene() {\r\n\r\n    if (initialized) return;\r\n\r\n    initialized = true;\r\n\r\n    wave.src = wave.dataset.src;\r\n    cubeVideo.src = cubeVideo.dataset.src;\r\n\r\n    wave.muted = true;\r\n    cubeVideo.muted = true;\r\n\r\n    wave.load();\r\n    cubeVideo.load();\r\n\r\n    logo.setAttribute(\r\n      \"src\",\r\n      logo.dataset.src\r\n    );\r\n\r\n  }\r\n\r\n  function safePlay(video) {\r\n\r\n    const promise = video.play();\r\n\r\n    if (\r\n      promise &&\r\n      typeof promise.catch === \"function\"\r\n    ) {\r\n      promise.catch(function () {});\r\n    }\r\n\r\n  }\r\n\r\n  function updateScene(visible) {\r\n\r\n    if (visible) {\r\n\r\n      initializeScene();\r\n\r\n      if (!reducedMotion) {\r\n\r\n        safePlay(wave);\r\n        safePlay(cubeVideo);\r\n\r\n        logo.setAttribute(\r\n          \"auto-rotate\",\r\n          \"\"\r\n        );\r\n\r\n      }\r\n\r\n    } else {\r\n\r\n      wave.pause();\r\n      cubeVideo.pause();\r\n\r\n      logo.removeAttribute(\r\n        \"auto-rotate\"\r\n      );\r\n\r\n    }\r\n\r\n  }\r\n\r\n  if (\"IntersectionObserver\" in window) {\r\n\r\n    const observer = new IntersectionObserver(\r\n\r\n      function (entries) {\r\n\r\n        entries.forEach(function (entry) {\r\n\r\n          updateScene(entry.isIntersecting);\r\n\r\n        });\r\n\r\n      },\r\n\r\n      {\r\n        rootMargin: \"200px 0px\",\r\n        threshold: 0.01\r\n      }\r\n\r\n    );\r\n\r\n    observer.observe(footer);\r\n\r\n  } else {\r\n\r\n    updateScene(true);\r\n\r\n  }\r\n\r\n  document.addEventListener(\r\n    \"visibilitychange\",\r\n    function () {\r\n\r\n      if (document.hidden) {\r\n\r\n        wave.pause();\r\n        cubeVideo.pause();\r\n\r\n      } else {\r\n\r\n        const rect = footer.getBoundingClientRect();\r\n\r\n        const nearViewport =\r\n          rect.bottom > -200 &&\r\n          rect.top < window.innerHeight + 200;\r\n\r\n        if (nearViewport) {\r\n          updateScene(true);\r\n        }\r\n\r\n      }\r\n\r\n    }\r\n  );\r\n\r\n})();\r\n<\/script>\r\n\r\n<!-- KONIEC WEBAVATARAI MASTER FOOTER 3D -->\r\n\r\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u2726 DE TOEKOMST IS INTERACTIEF JOUW MERK IN EEN NIEUWE DIMENSIE Interactieve 3D, vloeiende animaties en creatieve digitale ervaringen. Samen maken we jouw merk onderscheidend. ONTDEK ONZE 3D-WERELD \u2197 \u25cf MODERNE WEBSITES &amp; 3D WEBSITES DIE INDRUK MAKEN EN KLANTEN OPLEVEREN Professionele websites met moderne 3D-effecten, ontworpen voor jouw onderneming. PLAN EEN GESPREK \u2192 CREATIVE [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_kadence_starter_templates_imported_post":false,"footnotes":""},"class_list":["post-455","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/webavatarai.com\/en\/wp-json\/wp\/v2\/pages\/455","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webavatarai.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/webavatarai.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/webavatarai.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webavatarai.com\/en\/wp-json\/wp\/v2\/comments?post=455"}],"version-history":[{"count":316,"href":"https:\/\/webavatarai.com\/en\/wp-json\/wp\/v2\/pages\/455\/revisions"}],"predecessor-version":[{"id":1631,"href":"https:\/\/webavatarai.com\/en\/wp-json\/wp\/v2\/pages\/455\/revisions\/1631"}],"wp:attachment":[{"href":"https:\/\/webavatarai.com\/en\/wp-json\/wp\/v2\/media?parent=455"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}