{"id":151,"date":"2026-01-20T18:09:59","date_gmt":"2026-01-20T18:09:59","guid":{"rendered":"https:\/\/aivoo.merkhetop.nl\/?page_id=151"},"modified":"2026-03-04T11:14:39","modified_gmt":"2026-03-04T11:14:39","slug":"home-versie-2","status":"publish","type":"page","link":"https:\/\/aivoo.merkhetop.nl\/","title":{"rendered":"Home versie 2"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"151\" class=\"elementor elementor-151\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e1fb05d e-con-full e-flex e-con e-parent\" data-id=\"e1fb05d\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ee273c4 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"ee273c4\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section class=\"hero-section animate-on-view\">\n\n  <div class=\"hero-inner\">\n\n    <!-- LINKERKANT -->\n    <div class=\"hero-left\">\n      <h1 class=\"hero-title\">\n        <span class=\"line-1\">AI stap voor stap,<\/span><br>\n        <span class=\"line-2\">met gezond verstand.<\/span>\n      <\/h1>\n\n      <a href=\"#\" class=\"btn primary hero-primary\">\n        Quick Scan aanvragen\n      <\/a>\n    <\/div>\n\n    <!-- RECHTERKANT -->\n    <div class=\"hero-right\">\n      <p class=\"hero-text\">\n        AI hoeft geen grote stap te zijn, wij zorgen voor een rustige, praktische aanpak die past bij jullie manier van werken.\n      <\/p>\n\n      <a href=\"#werkwijze\" class=\"btn secondary\">\n        Onze werkwijze\n      <\/a>\n    <\/div>\n\n  <\/div>\n\n  <!-- VISUAL -->\n  <div class=\"hero-visual\">\n    <div class=\"dashboard\">\n      <img decoding=\"async\"\n        src=\"https:\/\/aivoo.merkhetop.nl\/wp-content\/uploads\/2026\/01\/WhatsApp-Image-2026-01-19-at-20.04.14.jpeg\"\n        alt=\"Product of platform visual\"\n      \/>\n    <\/div>\n  <\/div>\n\n<\/section>\n\n<style>\n\/* ================= BASIS ================= *\/\n.hero-section {\n  width: 100%;\n  padding: 100px 60px;\n  background: #FAFCFD;\n  overflow: hidden;\n}\n\n.hero-inner {\n  max-width: 1400px;\n  margin: 0 auto;\n  display: grid;\n  grid-template-columns: 1.1fr 0.9fr;\n  gap: 60px;\n}\n\n\/* ================= TITELS ================= *\/\n.hero-title {\n  font-size: 64px;\n  line-height: 1.1;\n  margin-bottom: 32px;\n}\n\n.line-1,\n.line-2 {\n  display: inline-block;\n  opacity: 0;\n}\n\n.line-1 {\n  color: #14B9A5;\n  font-weight: 600;\n  transform: translateX(-60px);\n}\n\n.line-2 {\n  color: reen #14B9A5;\n  font-weight: 800;\n  transform: translateX(60px);\n}\n\n\/* ================= TEKST ================= *\/\n.hero-text {\n  font-size: 18px;\n  color: #333;\n  max-width: 420px;\n  margin-bottom: 32px;\n  opacity: 0;\n  transform: translateY(40px);\n}\n\n\/* ================= BUTTONS ================= *\/\n.btn {\n  display: inline-block;\n  padding: 14px 28px;\n  border-radius: 30px;\n  font-size: 16px;\n  text-decoration: none;\n  transition: transform 0.3s ease;\n}\n\n.btn:hover {\n  transform: scale(1.05);\n}\n\n.btn.primary {\n  background: #14B9A5\n;\n  color: #fff;\n}\n\n.btn.secondary {\n  border: 1px solid #F4B740;\n  color: #F4B740;\n  background: transparent;\n}\n\n\/* primaire CTA animatie *\/\n.hero-primary {\n  opacity: 0;\n  transform: translateY(40px);\n}\n\n\/* ================= VISUAL ================= *\/\n.hero-visual {\n  max-width: 1400px;\n  margin: 80px auto 0;\n  opacity: 0;\n  transform: translateY(40px);\n}\n\n.dashboard {\n  height: 520px;\n  border-radius: 24px;\n  overflow: hidden;\n  background: #f2f2f2;\n}\n\n.dashboard img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n\/* ================= ANIMATIES ================= *\/\n.animate-on-view.is-visible .line-1 {\n  animation: fadeLeft 0.9s ease forwards;\n}\n\n.animate-on-view.is-visible .line-2 {\n  animation: fadeRight 0.9s ease forwards;\n  animation-delay: 0.2s;\n}\n\n.animate-on-view.is-visible .hero-primary {\n  animation: fadeUp 0.8s ease forwards;\n  animation-delay: 0.45s;\n}\n\n.animate-on-view.is-visible .hero-text,\n.animate-on-view.is-visible .hero-right {\n  animation: fadeUp 0.8s ease forwards;\n  animation-delay: 0.65s;\n}\n\n.animate-on-view.is-visible .hero-visual {\n  animation: fadeUp 0.9s ease forwards;\n  animation-delay: 0.9s;\n}\n\n\/* ================= KEYFRAMES ================= *\/\n@keyframes fadeLeft {\n  to { opacity: 1; transform: translateX(0); }\n}\n\n@keyframes fadeRight {\n  to { opacity: 1; transform: translateX(0); }\n}\n\n@keyframes fadeUp {\n  to { opacity: 1; transform: translateY(0); }\n}\n\n\/* ================= RESPONSIVE ================= *\/\n@media (max-width: 1024px) {\n  .hero-inner { grid-template-columns: 1fr; }\n  .hero-title { font-size: 48px; }\n  .dashboard { height: 420px; }\n}\n\n\/* ================= ELEMENTOR FIX ================= *\/\n.elementor-editor-active .hero-section * {\n  opacity: 1 !important;\n  transform: none !important;\n  animation: none !important;\n}\n<\/style>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n  if (document.body.classList.contains('elementor-editor-active')) return;\n\n  const section = document.querySelector('.animate-on-view');\n  if (!section) return;\n\n  const observer = new IntersectionObserver(\n    ([entry]) => {\n      if (entry.isIntersecting) {\n        section.classList.add('is-visible');\n        observer.unobserve(section);\n      }\n    },\n    { threshold: 0.3 }\n  );\n\n  observer.observe(section);\n});\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1d10e3a e-flex e-con-boxed e-con e-parent\" data-id=\"1d10e3a\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7f82294 elementor-widget elementor-widget-html\" data-id=\"7f82294\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"reviews-container\">\n  <div class=\"star-reviews\">\n <img decoding=\"async\"\n    class=\"shopify-image\"\n    width = \"65\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0798\/4267\/2987\/files\/Revive_39.png?v=1733346031\"\n    alt=\"shopifyImage\"\n  \/>\n  <\/div>\n  <span class=\"text-grey\">\nBeoordeeld met <strong>5\/5<\/strong>  <strong><\/strong>\n<\/span>\n<\/div>\n\n<style>\n  .reviews-container {\n    display: flex;\n    align-items: center;\n\n  }\n\n\n  .text-grey {\n    font-weight: normal;\n    font-size: 15px;\n    color: #868686;\n  line-height: 0px;\n\n  }\n\n  .text-grey strong {\n    font-weight: 800;\n\ncolor: #2e2f3c\n  }\n  .star-reviews{\n  width: 65px;\nmargin-right: 5px;\n  }\n\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a454957 elementor-widget elementor-widget-heading\" data-id=\"a454957\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Vertrouwd door<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6284447 elementor-widget elementor-widget-html\" data-id=\"6284447\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\/* ===== MARQUEE CONTAINER ===== *\/\n.marquee {\n  width: 100%;\n  overflow: hidden;\n}\n\n\/* ===== MARQUEE INNER ===== *\/\n.marquee__inner {\n  display: flex;\n  gap: 5px;\n  width: max-content;\n  animation: marquee 10s linear infinite;\n  will-change: transform;\n}\n\n\/* ===== LOGO STYLING ===== *\/\n.marquee__inner img {\n  width: 170px;\n  height: 100px;\n  object-fit: contain;\n  flex-shrink: 0;\n}\n\n\/* ===== ANIMATIE ===== *\/\n@keyframes marquee {\n  from {\n    transform: translateX(0);\n  }\n  to {\n    transform: translateX(-50%);\n  }\n}\n<\/style>\n\n<div class=\"marquee\">\n  <div class=\"marquee__inner\">\n    <!-- SET 1 -->\n    <img decoding=\"async\" src=\"https:\/\/aivoo.merkhetop.nl\/wp-content\/uploads\/2026\/01\/Logo-trek-aivoo.png\" alt=\"\">\n    <img decoding=\"async\" src=\"https:\/\/aivoo.merkhetop.nl\/wp-content\/uploads\/2026\/01\/Logo-reswing-aivoo.png\" alt=\"\">\n    <img decoding=\"async\" src=\"https:\/\/aivoo.merkhetop.nl\/wp-content\/uploads\/2026\/01\/Logo-innomarca-aivoo.png\" alt=\"\">\n    <img decoding=\"async\" src=\"https:\/\/aivoo.merkhetop.nl\/wp-content\/uploads\/2026\/01\/3642daee-58b1-4fb9-9656-574f3efcf1b9.png\" alt=\"\">\n\n\n    <!-- DUPLICAAT -->\n    <img decoding=\"async\" src=\"https:\/\/aivoo.merkhetop.nl\/wp-content\/uploads\/2026\/01\/Logo-trek-aivoo.png\" alt=\"\">\n    <img decoding=\"async\" src=\"https:\/\/aivoo.merkhetop.nl\/wp-content\/uploads\/2026\/01\/Logo-reswing-aivoo.png\" alt=\"\">\n    <img decoding=\"async\" src=\"https:\/\/aivoo.merkhetop.nl\/wp-content\/uploads\/2026\/01\/Logo-innomarca-aivoo.png\" alt=\"\">\n    <img decoding=\"async\" src=\"https:\/\/aivoo.merkhetop.nl\/wp-content\/uploads\/2026\/01\/3642daee-58b1-4fb9-9656-574f3efcf1b9.png\" alt=\"\">\n  <\/div>\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-bdaf2cb e-con-full e-flex e-con e-parent\" data-id=\"bdaf2cb\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a730e91 werkwijze elementor-widget elementor-widget-html\" data-id=\"a730e91\" data-element_type=\"widget\" id=\"werkwijze\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section class=\"ai-infinity-section animate-on-view\">\n  <div class=\"ai-infinity-container\">\n\n    <!-- TITEL -->\n    <h2 class=\"ai-infinity-title fade-left\">\n      Waarom bedrijven kiezen voor Aivoo?\n    <\/h2>\n\n    <!-- AFBEELDING -->\n    <div class=\"ai-infinity-visual fade-right\">\n      <img decoding=\"async\"\n        src=\"https:\/\/aivoo.merkhetop.nl\/wp-content\/uploads\/2026\/01\/c7e1f90b-5a6a-4761-bb22-054af8255cca.png\"\n        alt=\"Placeholder visual\"\n      \/>\n    <\/div>\n\n    <!-- KAARTEN -->\n    <div class=\"ai-infinity-cards\">\n\n      <div class=\"ai-infinity-card fade-up\">\n        <h3>Stap voor stap, zonder risico<\/h3>\n        <p>\n          Stap voor stap, zonder risico\nWe beginnen klein met een gratis Quick Scan en nemen geen beslissingen voordat er duidelijkheid is. Zo blijft AI overzichtelijk en beheersbaar.\n        <\/p>\n        <a href=\"#cta\" class=\"ai-infinity-cta\">Start hier met AIVOO<\/a>\n      <\/div>\n\n      <div class=\"ai-infinity-card fade-up\">\n        <h3>AI als ondersteuning, niet als vervanging<\/h3>\n        <p>\n          AI helpt bij het verminderen van handmatig werk, zodat mensen meer tijd houden voor wat echt belangrijk is in hun werk.\n        <\/p>\n        <a href=\"#cta\" class=\"ai-infinity-cta\">Bekijk onze oplossingen<\/a>\n      <\/div>\n\n      <div class=\"ai-infinity-card fade-up\">\n        <h3>Geen hype, wel resultaat<\/h3>\n        <p>\n          We zetten alleen AI in waar het echt waarde toevoegt. Wat niets oplevert, laten we bewust achterwege.\n        <\/p>\n        <a href=\"#cta\" class=\"ai-infinity-cta\">Neem contact op<\/a>\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<style>\n\/* ================= BASIS ================= *\/\n.ai-infinity-section {\n  background: #111;\n  padding: 120px 24px 160px;\n  overflow: hidden;\n}\n\n.ai-infinity-container {\n  max-width: 1200px;\n  margin: 0 auto;\n  text-align: center;\n  position: relative;\n}\n\n\/* ================= TITEL ================= *\/\n.ai-infinity-title {\n  color: #14B9A5;\n  font-size: 42px;\n  line-height: 1.2;\n  max-width: 800px;\n  margin: 0 auto 80px;\n  opacity: 0;\n  transform: translateX(-60px);\n}\n\n\/* ================= VISUAL ================= *\/\n.ai-infinity-visual {\n  width: 100%;\n  max-width: 900px;\n  margin: 0 auto;\n  border-radius: 15px;\n  overflow: hidden;\n  opacity: 0;\n  transform: translateX(60px);\n}\n\n.ai-infinity-visual img {\n  width: 100%;\n  height: auto;\n  display: block;\n  object-fit: contain;\n}\n\n\/* ================= KAARTEN ================= *\/\n.ai-infinity-cards {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 32px;\n  margin-top: -10px;\n  position: relative;\n  z-index: 2;\n}\n\n.ai-infinity-card {\n  background: #1a1a1a;\n  border-radius: 15px;\n  padding: 32px;\n  text-align: left;\n  opacity: 0;\n  transform: translateY(40px);\n}\n\n\/* ================= TEKST ================= *\/\n.ai-infinity-card h3 {\n  color: #ffffff;\n  font-size: 22px;\n  margin-bottom: 12px;\n}\n\n.ai-infinity-card p {\n  color: #f2f2f2;\n  font-size: 15px;\n  line-height: 1.6;\n  margin-bottom: 20px;\n}\n\n\/* ================= CTA ================= *\/\n.ai-infinity-cta {\n  display: inline-block;\n  font-size: 14px;\n  color: #14B9A5\n;\n  text-decoration: underline;\n}\n\n\/* ================= ANIMATIES ================= *\/\n.animate-on-view.is-visible .fade-left {\n  animation: fadeLeft 0.9s ease forwards;\n}\n\n.animate-on-view.is-visible .fade-right {\n  animation: fadeRight 0.9s ease forwards;\n  animation-delay: 0.2s;\n}\n\n.ai-infinity-card.is-visible {\n  animation: fadeUp 0.8s ease forwards;\n}\n\n\/* ================= KEYFRAMES ================= *\/\n@keyframes fadeLeft {\n  to { opacity: 1; transform: translateX(0); }\n}\n\n@keyframes fadeRight {\n  to { opacity: 1; transform: translateX(0); }\n}\n\n@keyframes fadeUp {\n  to { opacity: 1; transform: translateY(0); }\n}\n\n\/* ================= RESPONSIVE ================= *\/\n@media (max-width: 900px) {\n  .ai-infinity-cards {\n    grid-template-columns: 1fr;\n    margin-top: -80px;\n  }\n\n  .ai-infinity-title {\n    font-size: 32px;\n    margin-bottom: 60px;\n  }\n\n  \/* \u2705 OPLOSSING: extra ruimte onder afbeelding *\/\n  .ai-infinity-visual {\n    padding-bottom: 120px;\n  }\n}\n\n\n\/* ================= ELEMENTOR FIX ================= *\/\n.elementor-editor-active .ai-infinity-section * {\n  opacity: 1 !important;\n  transform: none !important;\n  animation: none !important;\n}\n<\/style>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n  if (document.body.classList.contains('elementor-editor-active')) return;\n\n  \/* TITEL + AFBEELDING *\/\n  const section = document.querySelector('.ai-infinity-section');\n  const sectionObserver = new IntersectionObserver(\n    ([entry]) => {\n      if (entry.isIntersecting) {\n        section.classList.add('is-visible');\n        sectionObserver.unobserve(section);\n      }\n    },\n    { threshold: 0.3 }\n  );\n  sectionObserver.observe(section);\n\n  \/* KAARTEN 1 VOOR 1 *\/\n  const cards = document.querySelectorAll('.ai-infinity-card');\n  cards.forEach((card, index) => {\n    const cardObserver = new IntersectionObserver(\n      ([entry]) => {\n        if (entry.isIntersecting) {\n          setTimeout(() => {\n            card.classList.add('is-visible');\n          }, index * 150);\n          cardObserver.unobserve(card);\n        }\n      },\n      { threshold: 0.3 }\n    );\n    cardObserver.observe(card);\n  });\n});\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-97f17d0 e-flex e-con-boxed e-con e-parent\" data-id=\"97f17d0\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e7fb0e1 elementor-widget elementor-widget-html\" data-id=\"e7fb0e1\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section class=\"cases-section animate-on-view\">\n  <div class=\"cases-container\">\n\n    <!-- LINKER CONTENT -->\n    <div class=\"cases-content\">\n\n      <h2 class=\"cases-title fade-left\">\n        AI met gezond verstand\n      <\/h2>\n\n      <p class=\"cases-text fade-right\">\n        Aivoo helpt MKB-bedrijven om slimmer te werken met AI, op een manier die begrijpelijk en beheersbaar blijft.\n      <\/p>\n\n      <p class=\"cases-text fade-left extra-text\">\n        Onze aanpak is praktisch en resultaatgericht. We starten klein, meten wat het oplevert en schalen alleen op wanneer dat ook echt waarde toevoegt.\n      <\/p>\n\n      <ul class=\"cases-list\">\n        <li class=\"fade-up\">Structurele tijdsbesparing in dagelijkse processen<\/li>\n        <li class=\"fade-up\">Minder handmatig werk en meer overzicht voor medewerkers<\/li>\n        <li class=\"fade-up\">Concrete verbeteringen die direct in de praktijk worden gebruikt<\/li>\n      <\/ul>\n\n      <a href=\"#\" class=\"cases-button fade-down\" id=\"scroll-to-third-case\">\n        Meer cases\n      <\/a>\n    <\/div>\n\n    <!-- RECHTER CASES -->\n    <div class=\"cases-slider\">\n      <div class=\"cases-track\">\n\n        <div class=\"case-card fade-up\">\n          <div class=\"case-image\">\n            <img decoding=\"async\" src=\"https:\/\/aivoo.merkhetop.nl\/wp-content\/uploads\/2026\/01\/Scherm\u00adafbeelding-2026-01-22-om-21.46.09.png\" alt=\"\">\n          <\/div>\n          <div class=\"case-overlay\">\n            <h3>Trek Bikes Benelux<\/h3>\n            <p>Maakt de klantreis compleet door onze offerte-generator app.<\/p>\n          <\/div>\n        <\/div>\n\n        <div class=\"case-card fade-up\">\n          <div class=\"case-image\">\n            <img decoding=\"async\" src=\"https:\/\/aivoo.merkhetop.nl\/wp-content\/uploads\/2026\/01\/Foto_mels_einde_slag-1-scaled.jpg\" alt=\"\">\n          <\/div>\n          <div class=\"case-overlay\">\n            <h3>Reswing Golfstore<\/h3>\n            <p>50% meer producten live per week door onze custom bewerkingsapp.<\/p>\n          <\/div>\n        <\/div>\n\n        <div class=\"case-card fade-up\" id=\"third-case\">\n          <div class=\"case-image\">\n            <img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/600x900\" alt=\"\">\n          <\/div>\n          <div class=\"case-overlay\">\n            <h3>[Case naam 3]<\/h3>\n            <p>[Korte omschrijving van deze klantcase.]<\/p>\n          <\/div>\n        <\/div>\n\n      <\/div>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<style>\n\/* ================= BASIS ================= *\/\n.cases-section {\n  background: #FAFCFD;\n  padding: 120px 24px;\n  overflow: hidden;\n}\n\n.cases-container {\n  max-width: 1200px;\n  margin: 0 auto;\n  display: grid;\n  grid-template-columns: 1.1fr 0.9fr;\n  gap: 64px;\n  align-items: center;\n}\n\n\/* ================= CONTENT ================= *\/\n.cases-title,\n.cases-text,\n.cases-button,\n.case-card,\n.cases-list li {\n  opacity: 0;\n}\n\n.fade-left { transform: translateX(-60px); }\n.fade-right { transform: translateX(60px); }\n.fade-up { transform: translateY(40px); }\n.fade-down { transform: translateY(-40px); }\n\n\/* ================= TITELS \/ TEKST ================= *\/\n.cases-title {\n  font-size: 42px;\n  margin-bottom: 24px;\n  color: #14B9A5;\n}\n\n.cases-text {\n  font-size: 16px;\n  line-height: 1.7;\n  color: #333;\n  margin-bottom: 16px;\n  max-width: 520px;\n}\n\n.extra-text {\n  margin-top: 16px;\n}\n\n\/* ================= RESULTATEN ================= *\/\n.cases-list {\n  list-style: none;\n  padding: 0;\n  margin: 32px 0;\n}\n\n.cases-list li {\n  position: relative;\n  padding-left: 26px;\n  margin-bottom: 12px;\n}\n\n.cases-list li::before {\n  content: \"\u2713\";\n  position: absolute;\n  left: 0;\n  font-weight: bold;\n}\n\n\/* ================= CTA ================= *\/\n.cases-button {\n  display: inline-block;\n  margin-top: 16px;\n  padding: 14px 28px;\n  background: #14B9A5;\n  color: #fff;\n  text-decoration: none;\n  border-radius: 30px;\n}\n\n\/* ================= CASES ================= *\/\n.cases-slider {\n  overflow: hidden;\n}\n\n.cases-track {\n  display: flex;\n  gap: 24px;\n}\n\n.case-card {\n  flex: 0 0 calc(50% - 12px);\n  position: relative;\n  border-radius: 18px;\n  overflow: hidden;\n  background: #000;\n}\n\n.case-image {\n  width: 100%;\n  aspect-ratio: 2 \/ 3;\n}\n\n.case-image img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.case-overlay {\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.2));\n  padding: 24px;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n}\n\n.case-overlay h3 {\n  color: #14B9A5;\n}\n\n.case-overlay p {\n  color: #ffffff;\n}\n\n\/* ================= ACTIEF ================= *\/\n.animate-on-view.is-visible .fade-left {\n  animation: fadeLeft 0.9s ease forwards;\n}\n\n.animate-on-view.is-visible .fade-right {\n  animation: fadeRight 0.9s ease forwards;\n  animation-delay: 0.2s;\n}\n\n.animate-on-view.is-visible .fade-up {\n  animation: fadeUp 0.9s ease forwards;\n}\n\n.animate-on-view.is-visible .fade-down {\n  animation: fadeDown 0.9s ease forwards;\n}\n\n\/* ================= KEYFRAMES ================= *\/\n@keyframes fadeLeft { to { opacity: 1; transform: translateX(0); } }\n@keyframes fadeRight { to { opacity: 1; transform: translateX(0); } }\n@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }\n@keyframes fadeDown { to { opacity: 1; transform: translateY(0); } }\n\n\/* ================= RESPONSIVE ================= *\/\n@media (max-width: 900px) {\n  .cases-container {\n    grid-template-columns: 1fr;\n  }\n\n  .case-card {\n    flex: 0 0 100%;\n  }\n}\n\n\/* ================= ELEMENTOR FIX ================= *\/\n.elementor-editor-active .cases-section * {\n  opacity: 1 !important;\n  transform: none !important;\n  animation: none !important;\n}\n<\/style>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function () {\n  if (document.body.classList.contains('elementor-editor-active')) return;\n\n  const section = document.querySelector('.cases-section');\n  if (!section) return;\n\n  \/* ZET is-visible OP DE SECTIE *\/\n  const observer = new IntersectionObserver(\n    ([entry]) => {\n      if (entry.isIntersecting) {\n        section.classList.add('is-visible');\n        observer.unobserve(section);\n      }\n    },\n    { threshold: 0.3 }\n  );\n\n  observer.observe(section);\n\n  \/* SCROLL NAAR 3E CASE *\/\n  const scrollBtn = document.getElementById('scroll-to-third-case');\n  const thirdCase = document.getElementById('third-case');\n\n  if (scrollBtn && thirdCase) {\n    scrollBtn.addEventListener('click', e => {\n      e.preventDefault();\n      thirdCase.scrollIntoView({ behavior: 'smooth', block: 'center' });\n    });\n  }\n});\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-354c454 e-con-full Over-ons e-flex e-con e-parent\" data-id=\"354c454\" data-element_type=\"container\" id=\"Over-ons\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-079b094 elementor-widget elementor-widget-html\" data-id=\"079b094\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section class=\"about-section animate-on-view\">\n  <div class=\"about-container\">\n\n    <!-- HEADER -->\n    <div class=\"about-header\">\n      <h2 class=\"about-main-title fade-down\">\n        Wie wij zijn en waar wij voor staan\n      <\/h2>\n      <p class=\"about-main-subtitle fade-up\">\n        Aivoo is opgericht vanuit de overtuiging dat bedrijven slimmer kunnen werken zonder onnodige complexiteit. Wij helpen MKB-bedrijven om AI op een begrijpelijke en verantwoorde manier toe te passen, met aandacht voor mensen, processen en resultaat. Niet omdat AI \u2018moet\u2019, maar omdat het werk \u00e9cht kan ondersteunen.\n\nWij geloven dat technologie pas waardevol is als het past bij de dagelijkse praktijk en door mensen zelf wordt begrepen en gebruikt.\n      <\/p>\n    <\/div>\n\n    <!-- CONTENT -->\n    <div class=\"about-content\">\n\n      <!-- TEKST -->\n      <div class=\"about-text\">\n        <h3 class=\"about-title fade-left\">\n          Onze aanpak\n        <\/h3>\n\n        <p class=\"fade-right\">\n         Wij werken stap voor stap. Eerst brengen we in kaart hoe jullie processen lopen en waar tijd verloren gaat. Op basis daarvan geven we een duidelijke aanbeveling en bepalen we samen of AI kan ondersteunen.\n\nWe zetten AI alleen in waar het echt bijdraagt aan overzicht en werkbaarheid. We starten klein en schalen pas op wanneer het aantoonbaar waarde oplevert.\n        <\/p>\n\n        <p class=\"fade-right\">\n        Aivoo combineert ondernemerschap met ervaring in procesverbetering binnen het MKB. We begrijpen omgevingen waar tijd schaars is en helderheid belangrijk.\n\nOnze aanpak is transparant en praktisch, gericht op oplossingen die in de dagelijkse praktijk gebruikt blijven worden.\n        <\/p>\n      <\/div>\n\n      <!-- AFBEELDINGEN -->\n      <div class=\"about-images\">\n\n        <div class=\"about-image large fade-up\">\n          <img decoding=\"async\"\n            src=\"https:\/\/aivoo.merkhetop.nl\/wp-content\/uploads\/2026\/01\/Google_AI_Studio_2026-01-19T07_48_05.219Z.png\"\n            alt=\"Over ons beeld 1\"\n          \/>\n        <\/div>\n\n        <div class=\"about-image fade-up\">\n          <img decoding=\"async\"\n            src=\"https:\/\/aivoo.merkhetop.nl\/wp-content\/uploads\/2026\/01\/Google_AI_Studio_2026-01-19T07_48_05.219Z.png\"\n            alt=\"Over ons beeld 2\"\n          \/>\n        <\/div>\n\n        <div class=\"about-image fade-up\">\n          <img decoding=\"async\"\n            src=\"https:\/\/aivoo.merkhetop.nl\/wp-content\/uploads\/2026\/01\/Google_AI_Studio_2026-01-19T07_48_05.219Z.png\"\n            alt=\"Over ons beeld 3\"\n          \/>\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n  <\/div>\n<\/section>\n\n<style>\n\/* ================= BASIS ================= *\/\n.about-section {\n  background: #111;\n  padding: 120px 24px;\n  overflow: hidden;\n}\n\n.about-container {\n  max-width: 1200px;\n  margin: 0 auto;\n}\n\n\/* ================= HEADER ================= *\/\n.about-header {\n  text-align: center;\n  max-width: 820px;\n  margin: 0 auto 80px;\n}\n\n.about-main-title {\n  font-size: 42px;\n  line-height: 1.2;\n  margin-bottom: 16px;\n  color: #14B9A5;\n  opacity: 0;\n}\n\n.about-main-subtitle {\n  font-size: 18px;\n  color: #fff;\n  line-height: 1.6;\n  opacity: 0;\n}\n\n\/* ================= CONTENT ================= *\/\n.about-content {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 64px;\n  align-items: center;\n}\n\n\/* ================= TEKST ================= *\/\n.about-title {\n  font-size: 32px;\n  margin-bottom: 24px;\n  color: #14B9A5;\n  opacity: 0;\n}\n\n.about-text p {\n  font-size: 16px;\n  line-height: 1.7;\n  color: #fff;\n  margin-bottom: 16px;\n  max-width: 520px;\n  opacity: 0;\n}\n\n\/* ================= AFBEELDINGEN ================= *\/\n.about-images {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  grid-auto-rows: 220px;\n  gap: 16px;\n}\n\n.about-image {\n  border-radius: 16px;\n  overflow: hidden;\n  background: #e5e5e5;\n  opacity: 0;\n  transform: translateY(40px);\n  transition: transform 0.35s ease;\n}\n\n.about-image:hover {\n  transform: scale(1.05);\n}\n\n.about-image.large {\n  grid-row: span 2;\n}\n\n.about-image img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n}\n\n\/* ================= ANIMATIE BASIS ================= *\/\n.fade-left { transform: translateX(-60px); }\n.fade-right { transform: translateX(60px); }\n.fade-up { transform: translateY(40px); }\n.fade-down { transform: translateY(-40px); }\n\n\/* ================= ACTIEF ================= *\/\n.animate-on-view.is-visible .fade-left {\n  animation: fadeLeft 0.9s ease forwards;\n}\n\n.animate-on-view.is-visible .fade-right {\n  animation: fadeRight 0.9s ease forwards;\n  animation-delay: 0.2s;\n}\n\n.animate-on-view.is-visible .fade-up {\n  animation: fadeUp 0.9s ease forwards;\n}\n\n.animate-on-view.is-visible .fade-down {\n  animation: fadeDown 0.9s ease forwards;\n}\n\n\/* ================= KEYFRAMES ================= *\/\n@keyframes fadeLeft { to { opacity: 1; transform: translateX(0); } }\n@keyframes fadeRight { to { opacity: 1; transform: translateX(0); } }\n@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }\n@keyframes fadeDown { to { opacity: 1; transform: translateY(0); } }\n\n\/* ================= RESPONSIVE ================= *\/\n@media (max-width: 900px) {\n  .about-content {\n    grid-template-columns: 1fr;\n  }\n\n  .about-images {\n    grid-template-columns: 1fr;\n    grid-auto-rows: 260px;\n  }\n\n  .about-image.large {\n    grid-row: span 1;\n  }\n\n  \/* \ud83d\udd34 ENIGE WIJZIGING *\/\n  .about-image:not(:first-child) {\n    display: none;\n  }\n\n  .about-main-title {\n    font-size: 32px;\n  }\n\n  .about-title {\n    font-size: 26px;\n  }\n}\n\n\/* ================= ELEMENTOR FIX ================= *\/\n.elementor-editor-active .about-section * {\n  opacity: 1 !important;\n  transform: none !important;\n  animation: none !important;\n}\n<\/style>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n  if (document.body.classList.contains('elementor-editor-active')) return;\n\n  const section = document.querySelector('.about-section');\n\n  const sectionObserver = new IntersectionObserver(\n    ([entry]) => {\n      if (entry.isIntersecting) {\n        section.classList.add('is-visible');\n        sectionObserver.unobserve(section);\n      }\n    },\n    { threshold: 0.3 }\n  );\n  sectionObserver.observe(section);\n\n  document.querySelectorAll('.about-image').forEach((img, i) => {\n    const obs = new IntersectionObserver(([e]) => {\n      if (e.isIntersecting) {\n        setTimeout(() => img.classList.add('is-visible'), i * 150);\n        obs.unobserve(img);\n      }\n    }, { threshold: 0.3 });\n    obs.observe(img);\n  });\n});\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0fde392 e-con-full e-flex e-con e-parent\" data-id=\"0fde392\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-da701c8 elementor-widget__width-inherit quick-scan elementor-widget elementor-widget-html\" data-id=\"da701c8\" data-element_type=\"widget\" id=\"quick-scan\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section class=\"ai-levels-section animate-on-view\">\n  <div class=\"ai-levels-container\">\n\n    <!-- TITEL -->\n    <div class=\"ai-levels-header\">\n      <h2 class=\"ai-levels-title fade-left\">\n        Een fase van AI voor ieder bedrijf\n      <\/h2>\n      <p class=\"ai-levels-subtitle fade-right\">\n       Voor bedrijven die rustig en gecontroleerd met AI willen starten en doorgroeien.\n\nEen praktisch groeimodel voor organisaties die AI spannend vinden, maar wel vooruit willen.\n      <\/p>\n    <\/div>\n\n    <!-- KAARTEN -->\n    <div class=\"ai-levels-grid\">\n\n      <div class=\"ai-level-card fade-up\">\n        <h3>Niveau 0 \u2013 Quick scan<\/h3>\n        <p>\n          Wij kijken persoonlijk mee waar wij echt een toevoeging kunnen bieden,\n          zodat jij ook echt merkbare waarde eruit kan halen.\n        <\/p>\n      <\/div>\n\n      <div class=\"ai-level-card fade-up\">\n        <h3>Niveau 1 \u2013 AI-gebruik binnen teams<\/h3>\n        <p>\n          Teams beginnen tools zoals ChatGPT, Copilot of Gemini te gebruiken ter\n          ondersteuning van dagelijkse taken.\n        <\/p>\n      <\/div>\n\n      <div class=\"ai-level-card highlight fade-up\">\n        <h3>Niveau 2 \u2013 Teamexpertise verankerd in AI<\/h3>\n        <p>\n          Kennis en ervaring worden vertaald naar custom GPT\u2019s en assistenten,\n          waardoor expertise direct wordt ingebed in dagelijkse workflows.\n        <\/p>\n      <\/div>\n\n      <div class=\"ai-level-card fade-up\">\n        <h3>Niveau 3 \u2013 AI-apps voor repetitieve taken<\/h3>\n        <p>\n          Terugkerende taken worden afgehandeld door lichte AI-applicaties,\n          afgestemd op Trek-specifieke workflows.\n        <\/p>\n      <\/div>\n\n      <div class=\"ai-level-card fade-up\">\n        <h3>Niveau 4 \u2013 Procesautomatisering<\/h3>\n        <p>\n          Systematische processen worden waar mogelijk geautomatiseerd, met\n          specialisten die de regie behouden.\n        <\/p>\n      <\/div>\n\n      <div class=\"ai-level-card fade-up\">\n        <h3>Niveau 5 \u2013 Cross-channel AI-orkestratie<\/h3>\n        <p>\n          Meerdere systemen en processen worden verbonden en geoptimaliseerd via\n          AI-gedreven managementlagen.\n        <\/p>\n      <\/div>\n\n    <\/div>\n\n    <!-- CTA -->\n    <div class=\"ai-levels-cta fade-down\">\n      <a href=\"https:\/\/aivoo.merkhetop.nl\/?page_id=74#Over-ons\" class=\"ai-levels-button\">Gratis Quick-scan<\/a>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<style>\n\/* ================= BASIS ================= *\/\n.ai-levels-section {\n  background: linear-gradient(135deg, #FAFCFD, #FAFCFD);\n  padding: 120px 24px;\n  overflow: hidden;\n}\n\n.ai-levels-container {\n  max-width: 1200px;\n  margin: 0 auto;\n}\n\n\/* ================= HEADER ================= *\/\n.ai-levels-header {\n  max-width: 700px;\n  margin-bottom: 64px;\n}\n\n.ai-levels-title {\n  font-size: 42px;\n  line-height: 1.2;\n  margin-bottom: 16px;\n  color: #14B9A5;\n  opacity: 0;\n  transform: translateX(-60px);\n}\n\n.ai-levels-subtitle {\n  font-size: 18px;\n  color: #333;\n  opacity: 0;\n  transform: translateX(60px);\n}\n\n\/* ================= GRID ================= *\/\n.ai-levels-grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 32px;\n}\n\n\/* ================= KAART ================= *\/\n.ai-level-card {\n  background: #111;\n  border-radius: 18px;\n  padding: 32px;\n  box-shadow: 0 8px 24px rgba(0,0,0,0.08);\n  opacity: 0;\n  transform: translateY(40px);\n  transition: transform 0.35s ease, box-shadow 0.35s ease;\n}\n\n\/* hover blijft intact *\/\n.ai-level-card:hover {\n  transform: scale(1.05);\n  box-shadow: 0 18px 40px rgba(0,0,0,0.18);\n}\n\n.ai-level-card h3 {\n  font-size: 18px;\n  margin-bottom: 12px;\n  color: #14B9A5;\n}\n\n.ai-level-card p {\n  font-size: 15px;\n  line-height: 1.6;\n  color: #fff;\n}\n\n\/* ================= CTA ================= *\/\n.ai-levels-cta {\n  margin-top: 64px;\n  text-align: center;\n  opacity: 0;\n  transform: translateY(-40px);\n}\n\n.ai-levels-button {\n  display: inline-block;\n  padding: 14px 32px;\n  border-radius: 30px;\n  background: #14B9A5;\n  color: #fff;\n  text-decoration: none;\n  font-size: 15px;\n  transition: transform 0.25s ease;\n}\n\n.ai-levels-button:hover {\n  transform: scale(1.08);\n}\n\n\/* ================= ACTIEVE ANIMATIES ================= *\/\n.animate-on-view.is-visible .fade-left {\n  animation: fadeLeft 0.9s ease forwards;\n}\n\n.animate-on-view.is-visible .fade-right {\n  animation: fadeRight 0.9s ease forwards;\n  animation-delay: 0.2s;\n}\n\n.ai-level-card.is-visible {\n  animation: fadeUp 0.9s ease forwards;\n}\n\n.animate-on-view.is-visible .fade-down {\n  animation: fadeDown 0.9s ease forwards;\n  animation-delay: 0.3s;\n}\n\n\/* ================= KEYFRAMES ================= *\/\n@keyframes fadeLeft { to { opacity: 1; transform: translateX(0); } }\n@keyframes fadeRight { to { opacity: 1; transform: translateX(0); } }\n@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }\n@keyframes fadeDown { to { opacity: 1; transform: translateY(0); } }\n\n\/* ================= RESPONSIVE ================= *\/\n@media (max-width: 900px) {\n  .ai-levels-grid {\n    grid-template-columns: 1fr;\n  }\n\n  .ai-levels-title {\n    font-size: 32px;\n  }\n}\n\n\/* ================= ELEMENTOR FIX ================= *\/\n.elementor-editor-active .ai-levels-section * {\n  opacity: 1 !important;\n  transform: none !important;\n  animation: none !important;\n}\n<\/style>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n  if (document.body.classList.contains('elementor-editor-active')) return;\n\n  const section = document.querySelector('.ai-levels-section');\n\n  \/* Titel & subtitel *\/\n  const sectionObserver = new IntersectionObserver(\n    ([entry]) => {\n      if (entry.isIntersecting) {\n        section.classList.add('is-visible');\n        sectionObserver.unobserve(section);\n      }\n    },\n    { threshold: 0.3 }\n  );\n  sectionObserver.observe(section);\n\n  \/* Kaarten 1 voor 1 *\/\n  document.querySelectorAll('.ai-level-card').forEach((card, i) => {\n    const obs = new IntersectionObserver(([e]) => {\n      if (e.isIntersecting) {\n        setTimeout(() => card.classList.add('is-visible'), i * 150);\n        obs.unobserve(card);\n      }\n    }, { threshold: 0.3 });\n    obs.observe(card);\n  });\n});\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7e5c28e e-flex e-con-boxed e-con e-parent\" data-id=\"7e5c28e\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3a1695b elementor-widget elementor-widget-html\" data-id=\"3a1695b\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section class=\"contact-overview-section animate-on-view\">\n\n  <div class=\"contact-overview-inner\">\n\n    <!-- LINKERKANT -->\n    <div class=\"contact-overview-left\">\n      <h2 class=\"contact-overview-title fade-left\">\n        Alles wat je rustig verder helpt\n      <\/h2>\n\n      <p class=\"contact-overview-text fade-right\">\n        Bekijk op je eigen tempo hoe we werken, wat we al hebben gedaan en welke oplossingen mogelijk zijn. Geen verplichtingen, wel duidelijkheid.\n      <\/p>\n    <\/div>\n\n    <!-- RECHTERKANT -->\n    <div class=\"contact-overview-card fade-up\">\n\n      <div class=\"overview-item fade-up\">\n        <div class=\"overview-icon\">\n          <svg viewBox=\"0 0 24 24\" width=\"20\" height=\"20\">\n            <circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\/>\n          <\/svg>\n        <\/div>\n        <div class=\"overview-content\">\n          <h3>Contact<\/h3>\n          <p>Beschrijving voor contact opnemen.<\/p>\n        <\/div>\n        <div class=\"overview-arrow\">\u2192<\/div>\n      <\/div>\n\n      <div class=\"overview-item fade-up\">\n        <div class=\"overview-icon\">\n          <svg viewBox=\"0 0 24 24\" width=\"20\" height=\"20\">\n            <rect x=\"4\" y=\"4\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\/>\n          <\/svg>\n        <\/div>\n        <div class=\"overview-content\">\n          <h3>Cases<\/h3>\n          <p>Beschrijving voor cases of klantverhalen.<\/p>\n        <\/div>\n        <div class=\"overview-arrow\">\u2192<\/div>\n      <\/div>\n\n      <div class=\"overview-item fade-up\">\n        <div class=\"overview-icon\">\n          <svg viewBox=\"0 0 24 24\" width=\"20\" height=\"20\">\n            <polygon points=\"12,2 22,22 2,22\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\/>\n          <\/svg>\n        <\/div>\n        <div class=\"overview-content\">\n          <h3>Apps<\/h3>\n          <p>Beschrijving van beschikbare apps of tools.<\/p>\n        <\/div>\n        <div class=\"overview-arrow\">\u2192<\/div>\n      <\/div>\n\n      <div class=\"overview-item fade-up\">\n        <div class=\"overview-icon\">\n          <svg viewBox=\"0 0 24 24\" width=\"20\" height=\"20\">\n            <line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\" stroke=\"currentColor\" stroke-width=\"2\"\/>\n            <line x1=\"12\" y1=\"4\" x2=\"12\" y2=\"20\" stroke=\"currentColor\" stroke-width=\"2\"\/>\n          <\/svg>\n        <\/div>\n        <div class=\"overview-content\">\n          <h3>Veel gestelde vragen<\/h3>\n          <p>Beschrijving van veel gestelde vragen.<\/p>\n        <\/div>\n        <div class=\"overview-arrow\">\u2192<\/div>\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n<style>\n\/* ================= BASIS ================= *\/\n.contact-overview-section {\n  width: 100%;\n  padding: 100px 60px;\n  background: #1a1a1a;\n  overflow: hidden;\n  border-radius: 15px;\n}\n\n.contact-overview-inner {\n  max-width: 1400px;\n  margin: 0 auto;\n  display: grid;\n  grid-template-columns: 1fr 1.2fr;\n  gap: 80px;\n}\n\n\/* ================= LINKERKANT ================= *\/\n.contact-overview-title {\n  font-size: 48px;\n  margin-bottom: 24px;\n  opacity: 0;\n  color: #14B9A5;\n  transform: translateX(-60px);\n}\n\n.contact-overview-text {\n  font-size: 18px;\n  color: #f2f2f2;\n  max-width: 420px;\n  opacity: 0;\n  transform: translateX(60px);\n}\n\n\/* ================= KAART ================= *\/\n.contact-overview-card {\n  background: #111;\n  border-radius: 15px;\n  padding: 32px 40px;\n  opacity: 0;\n  transform: translateY(40px);\n}\n\n\/* ================= ITEMS ================= *\/\n.overview-item {\n  display: grid;\n  grid-template-columns: 56px 1fr 32px;\n  gap: 24px;\n  padding: 24px 0;\n  border-bottom: 1px solid #ddd;\n  align-items: center;\n  opacity: 0;\n  transform: translateY(30px);\n}\n\n.overview-item:last-child {\n  border-bottom: none;\n}\n\n.overview-icon {\n  width: 44px;\n  height: 44px;\n  border-radius: 50%;\n  border: 1px solid #14B9A5;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #F4B740;\n}\n\n.overview-content h3 {\n  margin: 0 0 6px;\n  font-size: 22px;\n  color: #14B9A5;\n}\n\n.overview-content p {\n  margin: 0;\n  font-size: 15px;\n  color: #f2f2f2;\n}\n\n.overview-arrow {\n  font-size: 20px;\n  color: #F4B740;\n}\n\n\/* ================= ANIMATIES ================= *\/\n.animate-on-view.is-visible .fade-left {\n  animation: fadeLeft 0.9s ease forwards;\n}\n\n.animate-on-view.is-visible .fade-right {\n  animation: fadeRight 0.9s ease forwards;\n  animation-delay: 0.2s;\n}\n\n.animate-on-view.is-visible .fade-up {\n  animation: fadeUp 0.9s ease forwards;\n}\n\n\/* ================= KEYFRAMES ================= *\/\n@keyframes fadeLeft {\n  to { opacity: 1; transform: translateX(0); }\n}\n\n@keyframes fadeRight {\n  to { opacity: 1; transform: translateX(0); }\n}\n\n@keyframes fadeUp {\n  to { opacity: 1; transform: translateY(0); }\n}\n\n\/* ================= RESPONSIVE ================= *\/\n@media (max-width: 1024px) {\n  .contact-overview-inner {\n    grid-template-columns: 1fr;\n  }\n}\n\n\/* ================= ELEMENTOR FIX ================= *\/\n.elementor-editor-active .contact-overview-section * {\n  opacity: 1 !important;\n  transform: none !important;\n  animation: none !important;\n}\n<\/style>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', () => {\n  if (document.body.classList.contains('elementor-editor-active')) return;\n\n  const section = document.querySelector('.contact-overview-section');\n\n  \/* Titel, tekst en kaart *\/\n  const sectionObserver = new IntersectionObserver(\n    ([entry]) => {\n      if (entry.isIntersecting) {\n        section.classList.add('is-visible');\n        sectionObserver.unobserve(section);\n      }\n    },\n    { threshold: 0.3 }\n  );\n  sectionObserver.observe(section);\n\n  \/* Items 1 voor 1 na kaart *\/\n  document.querySelectorAll('.overview-item').forEach((item, i) => {\n    const obs = new IntersectionObserver(([e]) => {\n      if (e.isIntersecting) {\n        setTimeout(() => item.classList.add('is-visible'), 300 + i * 150);\n        obs.unobserve(item);\n      }\n    }, { threshold: 0.3 });\n    obs.observe(item);\n  });\n});\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a514619 e-flex e-con-boxed e-con e-parent\" data-id=\"a514619\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5ba7d89 elementor-widget elementor-widget-spacer\" data-id=\"5ba7d89\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>AI stap voor stap, met gezond verstand. Quick Scan aanvragen AI hoeft geen grote stap te zijn, wij zorgen voor een rustige, praktische aanpak die past bij jullie manier van werken. Onze werkwijze Beoordeeld met 5\/5 Vertrouwd door Waarom bedrijven kiezen voor Aivoo? Stap voor stap, zonder risico Stap voor stap, zonder risico We beginnen [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-151","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/aivoo.merkhetop.nl\/index.php?rest_route=\/wp\/v2\/pages\/151","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aivoo.merkhetop.nl\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/aivoo.merkhetop.nl\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/aivoo.merkhetop.nl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/aivoo.merkhetop.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=151"}],"version-history":[{"count":40,"href":"https:\/\/aivoo.merkhetop.nl\/index.php?rest_route=\/wp\/v2\/pages\/151\/revisions"}],"predecessor-version":[{"id":265,"href":"https:\/\/aivoo.merkhetop.nl\/index.php?rest_route=\/wp\/v2\/pages\/151\/revisions\/265"}],"wp:attachment":[{"href":"https:\/\/aivoo.merkhetop.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=151"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}