{"id":242316,"date":"2025-07-24T04:09:43","date_gmt":"2025-07-24T04:09:43","guid":{"rendered":"https:\/\/opollo.com\/?page_id=242316"},"modified":"2026-05-06T12:41:37","modified_gmt":"2026-05-06T12:41:37","slug":"home","status":"publish","type":"page","link":"https:\/\/opollo.com\/","title":{"rendered":"Home 2025"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"242316\" class=\"elementor elementor-242316\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-689ef24 e-con-full e-flex e-con e-parent\" data-id=\"689ef24\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c3ad723 exad-sticky-section-no exad-glass-effect-no elementor-widget elementor-widget-html\" data-id=\"c3ad723\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- Opollo Homepage v11 \u2014 Widget-ready (drop into a single Elementor Custom HTML widget,\r\n     OR split each <section data-section=\"X\"> block into separate widgets and place the\r\n     shared <style id=\"ophv11-shared\"> block inside the first one only). -->\r\n\r\n<style id=\"ophv11-shared\">\r\n\/* ==========================================================================\r\n   OPOLLO HOMEPAGE V11 \u2014 SHARED DESIGN SYSTEM\r\n   Class prefix: ophv11- (Opollo Homepage v11)\r\n   ========================================================================== *\/\r\n\r\n\/* EmBauhausW00 is loaded site-wide by the Opollo theme's fonts.css \u2014\r\n   no @font-face needed when deployed. For local preview, we load\r\n   Bowlby One from Google Fonts as a visually-similar chunky geometric fallback. *\/\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Bowlby+One&display=swap');\r\n\r\n:root {\r\n  --ophv11-bg: #000000;\r\n  --ophv11-bg-2: #0a0a0a;\r\n  --ophv11-bg-3: #141414;\r\n  --ophv11-text: #ffffff;\r\n  --ophv11-text-dim: rgba(255,255,255,0.65);\r\n  --ophv11-text-faint: rgba(255,255,255,0.35);\r\n  --ophv11-border: rgba(255,255,255,0.08);\r\n  --ophv11-border-hover: rgba(255,255,255,0.2);\r\n  --ophv11-pink: #FF03A5;\r\n  --ophv11-green: #00e5a0;\r\n  --ophv11-blue: #4da6ff;\r\n  --ophv11-display: 'EmBauhausW00', 'Bowlby One', 'Arial Black', 'Helvetica Neue', sans-serif;\r\n  --ophv11-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\r\n  --ophv11-max: 1280px;\r\n}\r\n\r\n[class*=\"ophv11-\"] *,\r\n[class*=\"ophv11-\"] *::before,\r\n[class*=\"ophv11-\"] *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n[class*=\"ophv11-\"] {\r\n  font-family: var(--ophv11-body);\r\n  -webkit-font-smoothing: antialiased;\r\n  -moz-osx-font-smoothing: grayscale;\r\n}\r\n\r\n\/* Reset Elementor heading defaults inside our sections so nothing leaks in *\/\r\n.ophv11-section h1,\r\n.ophv11-section h2,\r\n.ophv11-section h3,\r\n.ophv11-section h4,\r\n.ophv11-section h5,\r\n.ophv11-section h6 {\r\n  margin: 0;\r\n  text-transform: none;\r\n  font-style: normal;\r\n}\r\n\r\n.ophv11-section {\r\n  background: var(--ophv11-bg);\r\n  color: var(--ophv11-text);\r\n  padding: clamp(60px, 8vw, 120px) clamp(20px, 4vw, 40px);\r\n  position: relative;\r\n  overflow-x: clip;\r\n}\r\n\r\n.ophv11-container {\r\n  max-width: var(--ophv11-max);\r\n  margin: 0 auto;\r\n  position: relative;\r\n}\r\n\r\n.ophv11-eyebrow {\r\n  font-family: var(--ophv11-body);\r\n  font-size: 12px;\r\n  font-weight: 600;\r\n  letter-spacing: 0.2em;\r\n  text-transform: uppercase;\r\n  color: var(--ophv11-green);\r\n  margin: 0 0 24px 0;\r\n}\r\n\r\n.ophv11-h1 {\r\n  font-family: var(--ophv11-display) !important;\r\n  font-weight: 700 !important;\r\n  font-size: clamp(40px, 6vw, 80px) !important;\r\n  line-height: 1.1 !important;\r\n  letter-spacing: -0.01em !important;\r\n  margin: 0 !important;\r\n  color: var(--ophv11-text) !important;\r\n  text-transform: none !important;\r\n}\r\n\r\n.ophv11-h2 {\r\n  font-family: var(--ophv11-display) !important;\r\n  font-weight: 700 !important;\r\n  font-size: clamp(32px, 4.5vw, 56px) !important;\r\n  line-height: 1.1 !important;\r\n  letter-spacing: -0.01em !important;\r\n  margin: 0 !important;\r\n  color: var(--ophv11-text) !important;\r\n  text-transform: none !important;\r\n}\r\n\r\n.ophv11-h3 {\r\n  font-family: var(--ophv11-display) !important;\r\n  font-weight: 700 !important;\r\n  font-size: clamp(24px, 2.8vw, 36px) !important;\r\n  line-height: 1.15 !important;\r\n  letter-spacing: -0.005em !important;\r\n  margin: 0 !important;\r\n  color: var(--ophv11-text) !important;\r\n  text-transform: none !important;\r\n}\r\n\r\n.ophv11-body {\r\n  font-family: var(--ophv11-body);\r\n  font-size: 17px;\r\n  line-height: 1.6;\r\n  color: var(--ophv11-text-dim);\r\n  margin: 0;\r\n}\r\n\r\n.ophv11-btn {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 10px;\r\n  padding: 16px 28px;\r\n  font-family: var(--ophv11-body);\r\n  font-size: 15px;\r\n  font-weight: 600;\r\n  letter-spacing: 0.04em;\r\n  text-transform: uppercase;\r\n  text-decoration: none;\r\n  border-radius: 999px;\r\n  border: none;\r\n  cursor: pointer;\r\n  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;\r\n}\r\n\r\n.ophv11-btn--primary {\r\n  background: var(--ophv11-green);\r\n  color: #000;\r\n}\r\n.ophv11-btn--primary:hover {\r\n  background: #00ffb3;\r\n  transform: translateY(-2px);\r\n  box-shadow: 0 12px 30px rgba(0, 229, 160, 0.3);\r\n}\r\n\r\n.ophv11-btn--ghost {\r\n  background: transparent;\r\n  color: var(--ophv11-text);\r\n  border: 1px solid var(--ophv11-border-hover);\r\n}\r\n.ophv11-btn--ghost:hover {\r\n  background: rgba(255,255,255,0.05);\r\n  border-color: var(--ophv11-text);\r\n}\r\n\r\n.ophv11-btn svg {\r\n  width: 16px;\r\n  height: 16px;\r\n  transition: transform 0.25s ease;\r\n}\r\n.ophv11-btn:hover svg {\r\n  transform: translateX(4px);\r\n}\r\n\r\n@media (max-width: 768px) {\r\n  .ophv11-section { padding: 60px 20px; }\r\n}\r\n<\/style>\r\n\r\n<!-- ============================================================\r\n     SECTION 1: HERO\r\n     Clean, atmospheric, single CTA. Old-version energy.\r\n     ============================================================ -->\r\n<section class=\"ophv11-section ophv11-hero\" data-section=\"1\">\r\n  <style>\r\n    .ophv11-hero {\r\n      min-height: 92vh;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      text-align: center;\r\n      padding-top: clamp(80px, 12vw, 140px);\r\n      padding-bottom: clamp(80px, 12vw, 140px);\r\n      background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(255,3,165,0.18) 0%, transparent 55%),\r\n                  radial-gradient(ellipse 60% 50% at 30% 70%, rgba(0,229,160,0.10) 0%, transparent 60%),\r\n                  radial-gradient(ellipse 60% 50% at 70% 30%, rgba(77,166,255,0.08) 0%, transparent 60%),\r\n                  #000;\r\n      position: relative;\r\n      overflow: hidden;\r\n    }\r\n    .ophv11-hero__rings {\r\n      position: absolute;\r\n      top: 50%;\r\n      left: 50%;\r\n      transform: translate(-50%, -50%);\r\n      width: 140%;\r\n      height: 140%;\r\n      pointer-events: none;\r\n      opacity: 1;\r\n    }\r\n    .ophv11-hero__ring {\r\n      position: absolute;\r\n      top: 50%;\r\n      left: 50%;\r\n      transform: translate(-50%, -50%);\r\n      border-radius: 50%;\r\n      border: 1px solid rgba(255,255,255,0.18);\r\n    }\r\n    .ophv11-hero__ring--glow {\r\n      border-color: rgba(255,255,255,0.28);\r\n      box-shadow: 0 0 60px rgba(255,3,165,0.15), inset 0 0 60px rgba(0,229,160,0.08);\r\n    }\r\n    .ophv11-hero__inner {\r\n      position: relative;\r\n      max-width: 920px;\r\n      margin: 0 auto;\r\n      z-index: 2;\r\n    }\r\n    .ophv11-hero h1 {\r\n      animation: ophv11-fade-up 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s both;\r\n    }\r\n    .ophv11-hero__sub {\r\n      max-width: 620px;\r\n      margin: 28px auto 36px;\r\n      font-size: clamp(16px, 1.4vw, 19px);\r\n      line-height: 1.55;\r\n      color: var(--ophv11-text-dim);\r\n      animation: ophv11-fade-up 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s both;\r\n    }\r\n    .ophv11-hero__cta-row {\r\n      display: flex;\r\n      gap: 16px;\r\n      justify-content: center;\r\n      flex-wrap: wrap;\r\n      animation: ophv11-fade-up 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.4s both;\r\n    }\r\n    .ophv11-hero__trust {\r\n      margin-top: 48px;\r\n      animation: ophv11-fade-up 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.55s both;\r\n    }\r\n    .ophv11-hero__trust img {\r\n      height: clamp(80px, 9vw, 120px);\r\n      width: auto;\r\n    }\r\n    .ophv11-hero__eyebrow {\r\n      animation: ophv11-fade-up 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;\r\n    }\r\n    @keyframes ophv11-fade-up {\r\n      from { opacity: 0; transform: translateY(16px); }\r\n      to { opacity: 1; transform: translateY(0); }\r\n    }\r\n  <\/style>\r\n\r\n  <div class=\"ophv11-hero__rings\" aria-hidden=\"true\">\r\n    <div class=\"ophv11-hero__ring ophv11-hero__ring--glow\" style=\"width:40%;height:55%;\"><\/div>\r\n    <div class=\"ophv11-hero__ring\" style=\"width:55%;height:70%;\"><\/div>\r\n    <div class=\"ophv11-hero__ring ophv11-hero__ring--glow\" style=\"width:70%;height:85%;\"><\/div>\r\n    <div class=\"ophv11-hero__ring\" style=\"width:85%;height:100%;\"><\/div>\r\n    <div class=\"ophv11-hero__ring ophv11-hero__ring--glow\" style=\"width:100%;height:115%;\"><\/div>\r\n    <div class=\"ophv11-hero__ring\" style=\"width:115%;height:130%;\"><\/div>\r\n  <\/div>\r\n\r\n  <div class=\"ophv11-container ophv11-hero__inner\">\r\n    <p class=\"ophv11-eyebrow ophv11-hero__eyebrow\">MSP &amp; IT Marketing Agency<\/p>\r\n    <h1 class=\"ophv11-h1\">The Growth Engine For Some Of The World's Most Powerful IT Brands<\/h1>\r\n    <p class=\"ophv11-hero__sub\">From standout branding to clever digital marketing, you'll get the tools to make your company impossible to ignore.<\/p>\r\n    <div class=\"ophv11-hero__cta-row\">\r\n      <a href=\"\/quote\/\" class=\"ophv11-btn ophv11-btn--primary\">\r\n        Get a Proposal\r\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 5l7 7-7 7\"\/><\/svg>\r\n      <\/a>\r\n    <\/div>\r\n    <div class=\"ophv11-hero__trust\">\r\n      <img decoding=\"async\" src=\"https:\/\/opollo.com\/wp-content\/uploads\/2025\/05\/top_clutch.co_conversion_optimization_company_Clutch_US.svg\" alt=\"Top Clutch.co Conversion Optimization Company\" loading=\"eager\">\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- ============================================================\r\n     SECTION 2: INTERACTIVE SLIDER (THE CENTERPIECE)\r\n     This is the visual hook. Gradient bg, big mockup images,\r\n     animated marquee, side nav with progress bars.\r\n     ============================================================ -->\r\n<section class=\"ophv11-section ophv11-slider-section\" data-section=\"2\">\r\n  <style>\r\n    .ophv11-slider-section {\r\n      padding: 0;\r\n      background: linear-gradient(135deg, #0a4a4a 0%, #2a1f4a 50%, #4a1f3a 100%);\r\n      position: relative;\r\n      overflow: hidden;\r\n    }\r\n    .ophv11-slider-section::before {\r\n      content: '';\r\n      position: absolute;\r\n      inset: 0;\r\n      background: radial-gradient(ellipse 70% 90% at 30% 50%, rgba(0,229,160,0.15) 0%, transparent 60%),\r\n                  radial-gradient(ellipse 50% 70% at 80% 60%, rgba(255,3,165,0.18) 0%, transparent 65%);\r\n      pointer-events: none;\r\n    }\r\n    .ophv11-slider {\r\n      width: 100%;\r\n      max-width: 1800px;\r\n      margin: 0 auto;\r\n      padding: clamp(60px, 7vw, 120px) clamp(20px, 5vw, 100px);\r\n      display: grid;\r\n      grid-template-columns: 1fr;\r\n      gap: clamp(24px, 3vw, 40px);\r\n      align-items: center;\r\n      position: relative;\r\n      z-index: 1;\r\n    }\r\n    .ophv11-slider__top {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: space-between;\r\n      gap: 24px;\r\n      flex-wrap: wrap;\r\n    }\r\n    .ophv11-slider__main {\r\n      position: relative;\r\n      display: grid;\r\n      grid-template-columns: minmax(0, 1fr) clamp(220px, 22vw, 320px);\r\n      gap: clamp(24px, 3vw, 60px);\r\n      align-items: center;\r\n    }\r\n    .ophv11-slider__label {\r\n      font-family: var(--ophv11-body);\r\n      font-size: 12px;\r\n      font-weight: 600;\r\n      letter-spacing: 0.25em;\r\n      text-transform: uppercase;\r\n      color: rgba(255,255,255,0.7);\r\n      margin: 0;\r\n    }\r\n    .ophv11-slider__stage {\r\n      position: relative;\r\n      width: 100%;\r\n      aspect-ratio: 16 \/ 9;\r\n      border-radius: 16px;\r\n      overflow: hidden;\r\n      background: #000;\r\n      box-shadow: 0 40px 100px rgba(0,0,0,0.6);\r\n      min-width: 0;\r\n    }\r\n    .ophv11-slider__slide {\r\n      position: absolute;\r\n      inset: 0;\r\n      opacity: 0;\r\n      transition: opacity 0.7s ease;\r\n    }\r\n    .ophv11-slider__slide.is-active {\r\n      opacity: 1;\r\n    }\r\n    .ophv11-slider__slide img {\r\n      width: 100%;\r\n      height: 100%;\r\n      object-fit: cover;\r\n      display: block;\r\n    }\r\n    .ophv11-slider__marquee {\r\n      margin-top: clamp(20px, 3vw, 40px);\r\n      margin-left: calc(-1 * clamp(20px, 5vw, 100px));\r\n      margin-right: calc(-1 * clamp(20px, 5vw, 100px));\r\n      overflow: hidden;\r\n      position: relative;\r\n      white-space: nowrap;\r\n      padding: 12px 0;\r\n      mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);\r\n      -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);\r\n    }\r\n    .ophv11-slider__marquee-track {\r\n      display: inline-block;\r\n      vertical-align: middle;\r\n      animation: ophv11-marquee 40s linear infinite;\r\n      font-family: var(--ophv11-display);\r\n      font-weight: 700;\r\n      font-size: clamp(36px, 5vw, 64px);\r\n      line-height: 1.2;\r\n      letter-spacing: -0.005em;\r\n      color: rgba(255,255,255,0.9);\r\n    }\r\n    @keyframes ophv11-marquee {\r\n      from { transform: translateX(0); }\r\n      to { transform: translateX(-50%); }\r\n    }\r\n    .ophv11-slider__nav {\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: 0;\r\n    }\r\n    .ophv11-slider__nav-item {\r\n      cursor: pointer;\r\n      padding: 18px 0 14px;\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: 12px;\r\n      transition: opacity 0.3s ease;\r\n      opacity: 0.55;\r\n      background: transparent;\r\n      border: none;\r\n      text-align: left;\r\n    }\r\n    .ophv11-slider__nav-item.is-active {\r\n      opacity: 1;\r\n    }\r\n    .ophv11-slider__nav-item:hover {\r\n      opacity: 0.85;\r\n    }\r\n    .ophv11-slider__nav-label {\r\n      font-family: var(--ophv11-body);\r\n      font-size: 15px;\r\n      font-weight: 600;\r\n      color: #fff;\r\n      letter-spacing: 0.01em;\r\n    }\r\n    .ophv11-slider__nav-bar {\r\n      height: 2px;\r\n      background: rgba(255,255,255,0.15);\r\n      position: relative;\r\n      overflow: hidden;\r\n    }\r\n    .ophv11-slider__nav-bar::after {\r\n      content: '';\r\n      position: absolute;\r\n      inset: 0;\r\n      width: 0;\r\n      background: var(--ophv11-green);\r\n      transition: width 0.1s linear;\r\n    }\r\n    .ophv11-slider__nav-item.is-active .ophv11-slider__nav-bar::after {\r\n      animation: ophv11-progress 6s linear forwards;\r\n    }\r\n    @keyframes ophv11-progress {\r\n      from { width: 0; }\r\n      to { width: 100%; }\r\n    }\r\n    @media (max-width: 900px) {\r\n      .ophv11-slider__main {\r\n        grid-template-columns: 1fr;\r\n      }\r\n      .ophv11-slider__nav {\r\n        flex-direction: row;\r\n        flex-wrap: wrap;\r\n        gap: 10px;\r\n      }\r\n      .ophv11-slider__nav-item {\r\n        flex: 1 1 calc(50% - 10px);\r\n        padding: 10px 0;\r\n      }\r\n    }\r\n  <\/style>\r\n\r\n  <div class=\"ophv11-slider\">\r\n    <p class=\"ophv11-slider__label\">\u2014 What we do<\/p>\r\n\r\n    <div class=\"ophv11-slider__main\">\r\n      <div class=\"ophv11-slider__stage\" id=\"ophv11SliderStage\">\r\n        <div class=\"ophv11-slider__slide is-active\" data-slide=\"0\">\r\n          <img decoding=\"async\" src=\"https:\/\/opollo.com\/wp-content\/uploads\/2024\/06\/ascentient-case-study-lets-have-a-look-into-its-journey.jpg\" alt=\"Strategy work\">\r\n        <\/div>\r\n        <div class=\"ophv11-slider__slide\" data-slide=\"1\">\r\n          <img decoding=\"async\" src=\"https:\/\/opollo.com\/wp-content\/uploads\/2024\/06\/Content-slide.jpg\" alt=\"Content marketing\">\r\n        <\/div>\r\n        <div class=\"ophv11-slider__slide\" data-slide=\"2\">\r\n          <img decoding=\"async\" src=\"https:\/\/opollo.com\/wp-content\/uploads\/2024\/06\/sparknav-case-studies-the-journey-to-the-success.jpg\" alt=\"SEO and inbound\">\r\n        <\/div>\r\n        <div class=\"ophv11-slider__slide\" data-slide=\"3\">\r\n          <img decoding=\"async\" src=\"https:\/\/opollo.com\/wp-content\/uploads\/2024\/06\/opollo-mockup-displaying-website-magzine-digital-intro-cards.jpg\" alt=\"Branding\">\r\n        <\/div>\r\n        <div class=\"ophv11-slider__slide\" data-slide=\"4\">\r\n          <img decoding=\"async\" src=\"https:\/\/opollo.com\/wp-content\/uploads\/2024\/06\/social-media-services.jpg\" alt=\"Social media\">\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"ophv11-slider__nav\" id=\"ophv11SliderNav\">\r\n        <div class=\"ophv11-slider__nav-item is-active\" data-target=\"0\">\r\n          <span class=\"ophv11-slider__nav-label\">Strategy<\/span>\r\n          <div class=\"ophv11-slider__nav-bar\"><\/div>\r\n        <\/div>\r\n        <div class=\"ophv11-slider__nav-item\" data-target=\"1\">\r\n          <span class=\"ophv11-slider__nav-label\">Content Marketing<\/span>\r\n          <div class=\"ophv11-slider__nav-bar\"><\/div>\r\n        <\/div>\r\n        <div class=\"ophv11-slider__nav-item\" data-target=\"2\">\r\n          <span class=\"ophv11-slider__nav-label\">Inbound<\/span>\r\n          <div class=\"ophv11-slider__nav-bar\"><\/div>\r\n        <\/div>\r\n        <div class=\"ophv11-slider__nav-item\" data-target=\"3\">\r\n          <span class=\"ophv11-slider__nav-label\">Branding<\/span>\r\n          <div class=\"ophv11-slider__nav-bar\"><\/div>\r\n        <\/div>\r\n        <div class=\"ophv11-slider__nav-item\" data-target=\"4\">\r\n          <span class=\"ophv11-slider__nav-label\">Social media<\/span>\r\n          <div class=\"ophv11-slider__nav-bar\"><\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"ophv11-slider__marquee\">\r\n      <div class=\"ophv11-slider__marquee-track\" id=\"ophv11MarqueeTrack\">\r\n        <span>STRATEGY \u2014 SALES OUTREACH \u2014 MARKETING \u2014 WEBSITES \u2014 SEO \u2014 DEVELOPMENT \u2014 CONTENT \u2014 <\/span>\r\n        <span>STRATEGY \u2014 SALES OUTREACH \u2014 MARKETING \u2014 WEBSITES \u2014 SEO \u2014 DEVELOPMENT \u2014 CONTENT \u2014 <\/span>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <script>\r\n    (function() {\r\n      const stage = document.getElementById('ophv11SliderStage');\r\n      const nav = document.getElementById('ophv11SliderNav');\r\n      if (!stage || !nav) return;\r\n      const slides = stage.querySelectorAll('.ophv11-slider__slide');\r\n      const items = nav.querySelectorAll('.ophv11-slider__nav-item');\r\n      let current = 0;\r\n      let timer;\r\n\r\n      function go(i) {\r\n        slides.forEach((s, idx) => s.classList.toggle('is-active', idx === i));\r\n        items.forEach((it, idx) => {\r\n          it.classList.remove('is-active');\r\n          if (idx === i) {\r\n            \/\/ Force reflow to restart progress animation\r\n            void it.offsetWidth;\r\n            it.classList.add('is-active');\r\n          }\r\n        });\r\n        current = i;\r\n      }\r\n\r\n      function start() {\r\n        timer = setInterval(() => {\r\n          go((current + 1) % slides.length);\r\n        }, 6000);\r\n      }\r\n\r\n      items.forEach((it) => {\r\n        it.addEventListener('click', () => {\r\n          clearInterval(timer);\r\n          go(parseInt(it.dataset.target, 10));\r\n          start();\r\n        });\r\n      });\r\n\r\n      start();\r\n    })();\r\n  <\/script>\r\n<\/section>\r\n\r\n<!-- ============================================================\r\n     SECTION 3: STATS\r\n     Three clean numbers. No carousel. No clutter.\r\n     ============================================================ -->\r\n<section class=\"ophv11-section ophv11-stats\" data-section=\"3\">\r\n  <style>\r\n    .ophv11-stats {\r\n      padding: clamp(80px, 10vw, 140px) clamp(20px, 4vw, 40px);\r\n      background: var(--ophv11-bg);\r\n    }\r\n    .ophv11-stats__grid {\r\n      display: grid;\r\n      grid-template-columns: repeat(3, 1fr);\r\n      gap: clamp(40px, 5vw, 80px);\r\n      align-items: start;\r\n    }\r\n    .ophv11-stats__item {\r\n      border-top: 1px solid var(--ophv11-border);\r\n      padding-top: 24px;\r\n    }\r\n    .ophv11-stats__num {\r\n      font-family: var(--ophv11-display);\r\n      font-weight: 700;\r\n      font-size: clamp(56px, 8vw, 110px);\r\n      line-height: 1.05;\r\n      letter-spacing: -0.02em;\r\n      color: var(--ophv11-text);\r\n      display: block;\r\n      margin: 0 0 12px 0;\r\n      padding: 4px 0;\r\n    }\r\n    .ophv11-stats__num span {\r\n      color: var(--ophv11-pink);\r\n    }\r\n    .ophv11-stats__label {\r\n      font-family: var(--ophv11-body);\r\n      font-size: 15px;\r\n      font-weight: 500;\r\n      letter-spacing: 0.02em;\r\n      color: var(--ophv11-text-dim);\r\n      margin: 0;\r\n    }\r\n    @media (max-width: 768px) {\r\n      .ophv11-stats__grid {\r\n        grid-template-columns: 1fr;\r\n        gap: 32px;\r\n      }\r\n    }\r\n  <\/style>\r\n  <div class=\"ophv11-container\">\r\n    <div class=\"ophv11-stats__grid\">\r\n      <div class=\"ophv11-stats__item\">\r\n        <span class=\"ophv11-stats__num\">350<span>%<\/span><\/span>\r\n        <p class=\"ophv11-stats__label\">Average ROI improvement<\/p>\r\n      <\/div>\r\n      <div class=\"ophv11-stats__item\">\r\n        <span class=\"ophv11-stats__num\"><span>$<\/span>145M<\/span>\r\n        <p class=\"ophv11-stats__label\">Sales pipeline generated<\/p>\r\n      <\/div>\r\n      <div class=\"ophv11-stats__item\">\r\n        <span class=\"ophv11-stats__num\">85<span>%<\/span><\/span>\r\n        <p class=\"ophv11-stats__label\">Clients partner with us 3+ years<\/p>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- ============================================================\r\n     SECTION 4: WHY CHOOSE US\r\n     Two-column. Left = headline + CTA. Right = the love.\r\n     Old version's clean style.\r\n     ============================================================ -->\r\n<section class=\"ophv11-section ophv11-why\" data-section=\"4\">\r\n  <style>\r\n    .ophv11-why {\r\n      background: var(--ophv11-bg-2);\r\n    }\r\n    .ophv11-why__grid {\r\n      display: grid;\r\n      grid-template-columns: 1fr 1.2fr;\r\n      gap: clamp(40px, 6vw, 100px);\r\n      align-items: start;\r\n    }\r\n    .ophv11-why__left .ophv11-eyebrow {\r\n      color: var(--ophv11-pink);\r\n    }\r\n    .ophv11-why__cta {\r\n      margin-top: 32px;\r\n    }\r\n    .ophv11-why__right h2 {\r\n      margin-bottom: 24px;\r\n    }\r\n    .ophv11-why__right p {\r\n      font-size: 17px;\r\n      line-height: 1.65;\r\n      color: var(--ophv11-text-dim);\r\n      margin: 0 0 20px 0;\r\n    }\r\n    .ophv11-why__right p strong {\r\n      color: var(--ophv11-text);\r\n      font-weight: 600;\r\n    }\r\n    .ophv11-why__right a {\r\n      color: var(--ophv11-green);\r\n      text-decoration: underline;\r\n      text-decoration-thickness: 1px;\r\n      text-underline-offset: 4px;\r\n    }\r\n    @media (max-width: 900px) {\r\n      .ophv11-why__grid {\r\n        grid-template-columns: 1fr;\r\n        gap: 40px;\r\n      }\r\n    }\r\n  <\/style>\r\n  <div class=\"ophv11-container\">\r\n    <div class=\"ophv11-why__grid\">\r\n      <div class=\"ophv11-why__left\">\r\n        <p class=\"ophv11-eyebrow\">Why choose us<\/p>\r\n        <h2 class=\"ophv11-h2\">Don't just talk the talk.<\/h2>\r\n        <a href=\"\/quote\/\" class=\"ophv11-btn ophv11-btn--primary ophv11-why__cta\">\r\n          Get a Quote Today\r\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 5l7 7-7 7\"\/><\/svg>\r\n        <\/a>\r\n      <\/div>\r\n      <div class=\"ophv11-why__right\">\r\n        <h3 class=\"ophv11-h3\">\u2764\ufe0f IT Services, Cyber &amp; SaaS<\/h3>\r\n        <br>\r\n        <p><strong>Our deep understanding of the IT industry<\/strong> means we create strategies that speak your language and target your audience effectively.<\/p>\r\n        <p><strong>Numbers don't lie<\/strong> \u2014 <a href=\"\/our-work\/case-studies\/\">our proven track record<\/a> of boosting brand visibility, driving sales, and achieving growth means you're in good hands.<\/p>\r\n        <p><strong>We keep it real with our authentic, no-nonsense approach<\/strong>, delivering relatable and effective strategies without the fluff.<\/p>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- ============================================================\r\n     SECTION 5: CASE STUDIES CAROUSEL\r\n     Bigger images, 3 visible at once, horizontal scroll.\r\n     ============================================================ -->\r\n<section class=\"ophv11-section ophv11-cases\" data-section=\"5\">\r\n  <style>\r\n    .ophv11-cases__head {\r\n      display: flex;\r\n      justify-content: space-between;\r\n      align-items: end;\r\n      gap: 24px;\r\n      margin-bottom: 48px;\r\n      flex-wrap: wrap;\r\n    }\r\n    .ophv11-cases__title h2 {\r\n      max-width: 600px;\r\n    }\r\n    .ophv11-cases__scroll {\r\n      display: flex;\r\n      gap: 24px;\r\n      overflow-x: auto;\r\n      scroll-snap-type: x mandatory;\r\n      -webkit-overflow-scrolling: touch;\r\n      scrollbar-width: none;\r\n      padding: 0 0 16px 0;\r\n      margin: 0 calc(-1 * clamp(20px, 4vw, 40px));\r\n      padding-left: clamp(20px, 4vw, 40px);\r\n      padding-right: clamp(20px, 4vw, 40px);\r\n    }\r\n    .ophv11-cases__scroll::-webkit-scrollbar { display: none; }\r\n    .ophv11-cases__card {\r\n      flex: 0 0 clamp(280px, 32vw, 420px);\r\n      scroll-snap-align: start;\r\n      text-decoration: none;\r\n      color: var(--ophv11-text);\r\n      transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);\r\n      display: block;\r\n    }\r\n    .ophv11-cases__card:hover {\r\n      transform: translateY(-6px);\r\n    }\r\n    .ophv11-cases__img {\r\n      aspect-ratio: 16 \/ 10;\r\n      border-radius: 12px;\r\n      overflow: hidden;\r\n      background: var(--ophv11-bg-3);\r\n      margin-bottom: 20px;\r\n      position: relative;\r\n    }\r\n    .ophv11-cases__img img {\r\n      width: 100%;\r\n      height: 100%;\r\n      object-fit: cover;\r\n      display: block;\r\n      transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);\r\n    }\r\n    .ophv11-cases__card:hover .ophv11-cases__img img {\r\n      transform: scale(1.05);\r\n    }\r\n    .ophv11-cases__card h3 {\r\n      font-family: var(--ophv11-display);\r\n      font-weight: 700;\r\n      font-size: clamp(20px, 1.8vw, 26px);\r\n      line-height: 1.2;\r\n      margin: 0 0 12px 0;\r\n      color: var(--ophv11-text);\r\n    }\r\n    .ophv11-cases__view {\r\n      font-family: var(--ophv11-body);\r\n      font-size: 13px;\r\n      font-weight: 600;\r\n      letter-spacing: 0.1em;\r\n      text-transform: uppercase;\r\n      color: var(--ophv11-green);\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: 6px;\r\n    }\r\n  <\/style>\r\n  <div class=\"ophv11-container\">\r\n    <div class=\"ophv11-cases__head\">\r\n      <div class=\"ophv11-cases__title\">\r\n        <p class=\"ophv11-eyebrow\">Selected work<\/p>\r\n        <h2 class=\"ophv11-h2\">Results that move the needle.<\/h2>\r\n      <\/div>\r\n      <a href=\"\/our-work\/\" class=\"ophv11-btn ophv11-btn--ghost\">\r\n        View all case studies\r\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 5l7 7-7 7\"\/><\/svg>\r\n      <\/a>\r\n    <\/div>\r\n  <\/div>\r\n  <div class=\"ophv11-cases__scroll\">\r\n    <a href=\"\/blog\/threat-advice\/\" class=\"ophv11-cases__card\">\r\n      <div class=\"ophv11-cases__img\">\r\n        <img decoding=\"async\" src=\"https:\/\/opollo.com\/wp-content\/uploads\/2024\/12\/threat-advice.jpg\" alt=\"ThreatAdvice case study\">\r\n      <\/div>\r\n      <h3>ThreatAdvice improved lead gen by 1,115%<\/h3>\r\n      <span class=\"ophv11-cases__view\">View project \u2192<\/span>\r\n    <\/a>\r\n    <a href=\"\/blog\/platform-24s-digital-triumph-300-visibility-surge\/\" class=\"ophv11-cases__card\">\r\n      <div class=\"ophv11-cases__img\">\r\n        <img decoding=\"async\" src=\"https:\/\/opollo.com\/wp-content\/uploads\/2023\/12\/platform-24-digital-triumph.jpg\" alt=\"Platform 24 case study\">\r\n      <\/div>\r\n      <h3>Platform 24 improved ROI by 7x<\/h3>\r\n      <span class=\"ophv11-cases__view\">View project \u2192<\/span>\r\n    <\/a>\r\n    <a href=\"\/blog\/case-study-arizona-msps-journey-to-increase-online-leads-by-24x\/\" class=\"ophv11-cases__card\">\r\n      <div class=\"ophv11-cases__img\">\r\n        <img decoding=\"async\" src=\"https:\/\/opollo.com\/wp-content\/uploads\/2023\/08\/how-technology-solutions-generate-over-five-qualified-leads-each-week.jpeg\" alt=\"Technology Solutions case study\">\r\n      <\/div>\r\n      <h3>Technology Solutions improved ROI by 24x<\/h3>\r\n      <span class=\"ophv11-cases__view\">View project \u2192<\/span>\r\n    <\/a>\r\n    <a href=\"\/blog\/case-study-linktech-australia-increase-lead-gen\/\" class=\"ophv11-cases__card\">\r\n      <div class=\"ophv11-cases__img\">\r\n        <img decoding=\"async\" src=\"https:\/\/opollo.com\/wp-content\/uploads\/2022\/01\/case-study-of-linktech-australia-transformation.jpg\" alt=\"Linktech case study\">\r\n      <\/div>\r\n      <h3>Linktech improved lead gen by 200x<\/h3>\r\n      <span class=\"ophv11-cases__view\">View project \u2192<\/span>\r\n    <\/a>\r\n    <a href=\"\/blog\/case-study-how-steadfast-solutions-signed-largest-client-and-increased-lead-generation-by-400-per-cent\/\" class=\"ophv11-cases__card\">\r\n      <div class=\"ophv11-cases__img\">\r\n        <img decoding=\"async\" src=\"https:\/\/opollo.com\/wp-content\/uploads\/2022\/08\/a-digital-mockup-of-steadfast-solutions.jpg\" alt=\"Steadfast Solutions case study\">\r\n      <\/div>\r\n      <h3>Steadfast Solutions increased ROI by 5x<\/h3>\r\n      <span class=\"ophv11-cases__view\">View project \u2192<\/span>\r\n    <\/a>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- ============================================================\r\n     SECTION 6: HOW IT WORKS\r\n     3 rows only. Two-column: headline left, paragraph right.\r\n     ============================================================ -->\r\n<section class=\"ophv11-section ophv11-how\" data-section=\"6\">\r\n  <style>\r\n    .ophv11-how {\r\n      background: var(--ophv11-bg);\r\n    }\r\n    .ophv11-how__intro {\r\n      max-width: 760px;\r\n      margin: 0 0 80px 0;\r\n    }\r\n    .ophv11-how__row {\r\n      display: grid;\r\n      grid-template-columns: 1fr 1.3fr;\r\n      gap: clamp(30px, 6vw, 100px);\r\n      padding: 48px 0;\r\n      border-top: 1px solid var(--ophv11-border);\r\n      align-items: start;\r\n    }\r\n    .ophv11-how__row:last-child {\r\n      border-bottom: 1px solid var(--ophv11-border);\r\n    }\r\n    .ophv11-how__num {\r\n      font-family: var(--ophv11-display);\r\n      font-weight: 700;\r\n      font-size: 14px;\r\n      letter-spacing: 0.2em;\r\n      color: var(--ophv11-green);\r\n      margin: 0 0 16px 0;\r\n    }\r\n    .ophv11-how__row h3 {\r\n      font-family: var(--ophv11-display);\r\n      font-weight: 700;\r\n      font-size: clamp(28px, 3vw, 40px);\r\n      line-height: 1.1;\r\n      letter-spacing: -0.005em;\r\n      color: var(--ophv11-text);\r\n      margin: 0;\r\n    }\r\n    .ophv11-how__row p {\r\n      font-size: 17px;\r\n      line-height: 1.65;\r\n      color: var(--ophv11-text-dim);\r\n      margin: 0;\r\n    }\r\n    @media (max-width: 900px) {\r\n      .ophv11-how__row {\r\n        grid-template-columns: 1fr;\r\n        gap: 16px;\r\n        padding: 32px 0;\r\n      }\r\n    }\r\n  <\/style>\r\n  <div class=\"ophv11-container\">\r\n    <div class=\"ophv11-how__intro\">\r\n      <p class=\"ophv11-eyebrow\">The approach<\/p>\r\n      <h2 class=\"ophv11-h2\">How our technology marketing strategy works.<\/h2>\r\n    <\/div>\r\n\r\n    <div class=\"ophv11-how__row\">\r\n      <div>\r\n        <p class=\"ophv11-how__num\">\u2014 01<\/p>\r\n        <h3>Build a consistent sales pipeline.<\/h3>\r\n      <\/div>\r\n      <p>Most agencies focus only on rankings, traffic, and outbound calls. But rankings won't matter if your conversion rates are low. We build the entire funnel \u2014 so visitors actually turn into revenue.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"ophv11-how__row\">\r\n      <div>\r\n        <p class=\"ophv11-how__num\">\u2014 02<\/p>\r\n        <h3>Dominate online search.<\/h3>\r\n      <\/div>\r\n      <p>Sit back and rise to the top of Google. Multiple first-page rankings on the search terms that matter to your business. Stay ahead of competitors with strategies that expand the horizons of your managed IT business.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"ophv11-how__row\">\r\n      <div>\r\n        <p class=\"ophv11-how__num\">\u2014 03<\/p>\r\n        <h3>Outreach that converts.<\/h3>\r\n      <\/div>\r\n      <p>Personalized phone calls and LinkedIn messages that connect with potential clients. Targeted outreach that ensures your message reaches the right audience and turns prospects into loyal customers.<\/p>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- ============================================================\r\n     SECTION 7: TESTIMONIALS\r\n     Single rotating quote. Big, clean, confident.\r\n     ============================================================ -->\r\n<section class=\"ophv11-section ophv11-test\" data-section=\"7\">\r\n  <style>\r\n    .ophv11-test {\r\n      background: var(--ophv11-bg-2);\r\n      padding: clamp(80px, 10vw, 140px) clamp(20px, 4vw, 40px);\r\n    }\r\n    .ophv11-test__inner {\r\n      max-width: 920px;\r\n      margin: 0 auto;\r\n      text-align: center;\r\n    }\r\n    .ophv11-test__quote-mark {\r\n      font-family: var(--ophv11-display);\r\n      font-size: 120px;\r\n      line-height: 1;\r\n      color: var(--ophv11-pink);\r\n      margin-bottom: 20px;\r\n      display: block;\r\n      padding: 10px 0;\r\n    }\r\n    .ophv11-test__quote {\r\n      font-family: var(--ophv11-display);\r\n      font-weight: 700;\r\n      font-size: clamp(22px, 2.6vw, 34px);\r\n      line-height: 1.3;\r\n      letter-spacing: -0.005em;\r\n      color: var(--ophv11-text);\r\n      margin: 0 0 32px 0;\r\n      min-height: 4em;\r\n      transition: opacity 0.5s ease;\r\n    }\r\n    .ophv11-test__author {\r\n      font-family: var(--ophv11-body);\r\n      font-size: 15px;\r\n      font-weight: 500;\r\n      color: var(--ophv11-text-dim);\r\n      margin: 0;\r\n      transition: opacity 0.5s ease;\r\n    }\r\n    .ophv11-test__author strong {\r\n      color: var(--ophv11-text);\r\n      font-weight: 600;\r\n    }\r\n    .ophv11-test.is-fading .ophv11-test__quote,\r\n    .ophv11-test.is-fading .ophv11-test__author {\r\n      opacity: 0;\r\n    }\r\n    .ophv11-test__dots {\r\n      display: flex;\r\n      gap: 8px;\r\n      justify-content: center;\r\n      margin-top: 40px;\r\n    }\r\n    .ophv11-test__dot {\r\n      width: 8px;\r\n      height: 8px;\r\n      border-radius: 50%;\r\n      background: var(--ophv11-text-faint);\r\n      border: none;\r\n      cursor: pointer;\r\n      padding: 0;\r\n      transition: background 0.3s ease;\r\n    }\r\n    .ophv11-test__dot.is-active {\r\n      background: var(--ophv11-green);\r\n    }\r\n  <\/style>\r\n  <div class=\"ophv11-container\">\r\n    <div class=\"ophv11-test__inner\" id=\"ophv11Test\">\r\n      <span class=\"ophv11-test__quote-mark\">\"<\/span>\r\n      <p class=\"ophv11-test__quote\" id=\"ophv11TestQuote\">From the very beginning, Opollo was clear about what they could and couldn't achieve, and how they were going to do as they described \u2014 and they stuck to that all the way through.<\/p>\r\n      <p class=\"ophv11-test__author\" id=\"ophv11TestAuthor\"><strong>Rick Williams<\/strong> \u2014 Director, Platform 24<\/p>\r\n      <div class=\"ophv11-test__dots\" id=\"ophv11TestDots\">\r\n        <button class=\"ophv11-test__dot is-active\" data-test=\"0\" aria-label=\"Testimonial 1\"><\/button>\r\n        <button class=\"ophv11-test__dot\" data-test=\"1\" aria-label=\"Testimonial 2\"><\/button>\r\n        <button class=\"ophv11-test__dot\" data-test=\"2\" aria-label=\"Testimonial 3\"><\/button>\r\n        <button class=\"ophv11-test__dot\" data-test=\"3\" aria-label=\"Testimonial 4\"><\/button>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <script>\r\n    (function() {\r\n      const data = [\r\n        {\r\n          quote: \"From the very beginning, Opollo was clear about what they could and couldn't achieve, and how they were going to do as they described \u2014 and they stuck to that all the way through.\",\r\n          author: \"<strong>Rick Williams<\/strong> \u2014 Director, Platform 24\"\r\n        },\r\n        {\r\n          quote: \"It's a rare situation where a company simply gets it. The Opollo team understands exactly what I need and delivers beyond expectations.\",\r\n          author: \"<strong>Chris<\/strong> \u2014 ComPro Business Solutions\"\r\n        },\r\n        {\r\n          quote: \"We just landed our second biggest client and they found us through Opollo. I appreciate what you're doing.\",\r\n          author: \"<strong>Dan Burt<\/strong> \u2014 President, Solzorro\"\r\n        },\r\n        {\r\n          quote: \"It was a no-brainer to choose Opollo and get a partner with experience who keeps us updated and understands the IT space.\",\r\n          author: \"<strong>Adam Dodds<\/strong> \u2014 Director, Itopia\"\r\n        }\r\n      ];\r\n\r\n      const wrap = document.getElementById('ophv11Test');\r\n      const quoteEl = document.getElementById('ophv11TestQuote');\r\n      const authorEl = document.getElementById('ophv11TestAuthor');\r\n      const dots = document.querySelectorAll('#ophv11TestDots .ophv11-test__dot');\r\n      if (!wrap || !quoteEl) return;\r\n\r\n      let current = 0;\r\n      let timer;\r\n\r\n      function show(i) {\r\n        wrap.classList.add('is-fading');\r\n        setTimeout(() => {\r\n          quoteEl.textContent = data[i].quote;\r\n          authorEl.innerHTML = data[i].author;\r\n          dots.forEach((d, idx) => d.classList.toggle('is-active', idx === i));\r\n          wrap.classList.remove('is-fading');\r\n          current = i;\r\n        }, 400);\r\n      }\r\n\r\n      function start() {\r\n        timer = setInterval(() => show((current + 1) % data.length), 7000);\r\n      }\r\n\r\n      dots.forEach((d) => {\r\n        d.addEventListener('click', () => {\r\n          clearInterval(timer);\r\n          show(parseInt(d.dataset.test, 10));\r\n          start();\r\n        });\r\n      });\r\n\r\n      start();\r\n    })();\r\n  <\/script>\r\n<\/section>\r\n\r\n<!-- ============================================================\r\n     SECTION 8: GUARANTEE\r\n     Big bold confidence statement. One CTA.\r\n     ============================================================ -->\r\n<section class=\"ophv11-section ophv11-guarantee\" data-section=\"8\">\r\n  <style>\r\n    .ophv11-guarantee {\r\n      background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(255,3,165,0.18) 0%, transparent 65%),\r\n                  radial-gradient(ellipse 70% 50% at 30% 30%, rgba(0,229,160,0.10) 0%, transparent 60%),\r\n                  #050505;\r\n      text-align: center;\r\n      padding: clamp(100px, 14vw, 180px) clamp(20px, 4vw, 40px);\r\n    }\r\n    .ophv11-guarantee__inner {\r\n      max-width: 820px;\r\n      margin: 0 auto;\r\n    }\r\n    .ophv11-guarantee h2 {\r\n      margin-bottom: 24px;\r\n    }\r\n    .ophv11-guarantee__sub {\r\n      font-family: var(--ophv11-display);\r\n      font-weight: 700;\r\n      font-size: clamp(20px, 2vw, 26px);\r\n      color: var(--ophv11-green);\r\n      margin: 0 0 24px 0;\r\n      letter-spacing: -0.005em;\r\n    }\r\n    .ophv11-guarantee__body {\r\n      font-size: 17px;\r\n      line-height: 1.65;\r\n      color: var(--ophv11-text-dim);\r\n      margin: 0 0 40px 0;\r\n    }\r\n  <\/style>\r\n  <div class=\"ophv11-container ophv11-guarantee__inner\">\r\n    <p class=\"ophv11-eyebrow\">The guarantee<\/p>\r\n    <h2 class=\"ophv11-h2\">Guaranteed long-term results.<\/h2>\r\n    <p class=\"ophv11-guarantee__sub\">Get results within 90 days or we work for free.<\/p>\r\n    <p class=\"ophv11-guarantee__body\">Search engine optimization can be a tricky process. Luckily, we're an SEO company that has the experience and the know-how to take care of an MSP and IT company \u2014 and protect your ranking status while we're at it.<\/p>\r\n    <a href=\"\/quote\/\" class=\"ophv11-btn ophv11-btn--primary\">\r\n      Get a Quote Today\r\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 5l7 7-7 7\"\/><\/svg>\r\n    <\/a>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- ============================================================\r\n     SECTION 9: LATEST INSIGHTS\r\n     4 posts, clean grid. Done.\r\n     ============================================================ -->\r\n<section class=\"ophv11-section ophv11-insights\" data-section=\"9\">\r\n  <style>\r\n    .ophv11-insights {\r\n      background: var(--ophv11-bg);\r\n    }\r\n    .ophv11-insights__head {\r\n      display: flex;\r\n      justify-content: space-between;\r\n      align-items: end;\r\n      gap: 24px;\r\n      margin-bottom: 48px;\r\n      flex-wrap: wrap;\r\n    }\r\n    .ophv11-insights__head h2 {\r\n      max-width: 600px;\r\n    }\r\n    .ophv11-insights__grid {\r\n      display: grid;\r\n      grid-template-columns: repeat(4, 1fr);\r\n      gap: 24px;\r\n    }\r\n    .ophv11-insights__card {\r\n      text-decoration: none;\r\n      color: var(--ophv11-text);\r\n      display: block;\r\n      transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);\r\n    }\r\n    .ophv11-insights__card:hover {\r\n      transform: translateY(-4px);\r\n    }\r\n    .ophv11-insights__img {\r\n      aspect-ratio: 16 \/ 10;\r\n      border-radius: 8px;\r\n      overflow: hidden;\r\n      background: var(--ophv11-bg-3);\r\n      margin-bottom: 16px;\r\n    }\r\n    .ophv11-insights__img img {\r\n      width: 100%;\r\n      height: 100%;\r\n      object-fit: cover;\r\n      transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);\r\n    }\r\n    .ophv11-insights__card:hover .ophv11-insights__img img {\r\n      transform: scale(1.05);\r\n    }\r\n    .ophv11-insights__card h3 {\r\n      font-family: var(--ophv11-display);\r\n      font-weight: 700;\r\n      font-size: 17px;\r\n      line-height: 1.25;\r\n      margin: 0 0 10px 0;\r\n      color: var(--ophv11-text);\r\n    }\r\n    .ophv11-insights__read {\r\n      font-family: var(--ophv11-body);\r\n      font-size: 12px;\r\n      font-weight: 600;\r\n      letter-spacing: 0.1em;\r\n      text-transform: uppercase;\r\n      color: var(--ophv11-green);\r\n    }\r\n    @media (max-width: 1024px) {\r\n      .ophv11-insights__grid { grid-template-columns: repeat(2, 1fr); }\r\n    }\r\n    @media (max-width: 600px) {\r\n      .ophv11-insights__grid { grid-template-columns: 1fr; }\r\n    }\r\n  <\/style>\r\n  <div class=\"ophv11-container\">\r\n    <div class=\"ophv11-insights__head\">\r\n      <div>\r\n        <p class=\"ophv11-eyebrow\">Insights<\/p>\r\n        <h2 class=\"ophv11-h2\">Latest from the blog.<\/h2>\r\n      <\/div>\r\n      <a href=\"\/blog\/\" class=\"ophv11-btn ophv11-btn--ghost\">\r\n        View all insights\r\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M13 5l7 7-7 7\"\/><\/svg>\r\n      <\/a>\r\n    <\/div>\r\n\r\n    <div class=\"ophv11-insights__grid\">\r\n      <a href=\"\/blog\/financial-services-marketing-in-2025-key-challenges-and-bold-solutions\/\" class=\"ophv11-insights__card\">\r\n        <div class=\"ophv11-insights__img\">\r\n          <img decoding=\"async\" src=\"https:\/\/opollo.com\/wp-content\/uploads\/2025\/06\/Financial-Services-Marketing.jpg\" alt=\"\">\r\n        <\/div>\r\n        <h3>Financial Services Marketing: Key Challenges and Bold Solutions<\/h3>\r\n        <span class=\"ophv11-insights__read\">Continue reading \u2192<\/span>\r\n      <\/a>\r\n      <a href=\"\/blog\/finding-the-right-seo-marketing-consultant-for-your-msp\/\" class=\"ophv11-insights__card\">\r\n        <div class=\"ophv11-insights__img\">\r\n          <img decoding=\"async\" src=\"https:\/\/opollo.com\/wp-content\/uploads\/2025\/06\/seo-marketing-consultant.jpg\" alt=\"\">\r\n        <\/div>\r\n        <h3>Finding the Right SEO Marketing Consultant for Your MSP<\/h3>\r\n        <span class=\"ophv11-insights__read\">Continue reading \u2192<\/span>\r\n      <\/a>\r\n      <a href=\"\/blog\/from-guesswork-to-guarantees-how-opollo-delivers-seo-that-performs\/\" class=\"ophv11-insights__card\">\r\n        <div class=\"ophv11-insights__img\">\r\n          <img decoding=\"async\" src=\"https:\/\/opollo.com\/wp-content\/uploads\/2025\/06\/Opollo-SEO-Results.jpg\" alt=\"\">\r\n        <\/div>\r\n        <h3>From Guesswork to Guarantees: How Opollo Delivers SEO That Performs<\/h3>\r\n        <span class=\"ophv11-insights__read\">Continue reading \u2192<\/span>\r\n      <\/a>\r\n      <a href=\"\/blog\/it-marketing-agencies-your-strategic-partner-for-tech-business-growth\/\" class=\"ophv11-insights__card\">\r\n        <div class=\"ophv11-insights__img\">\r\n          <img decoding=\"async\" src=\"https:\/\/opollo.com\/wp-content\/uploads\/2025\/05\/IT-Marketing-agencies.jpg\" alt=\"\">\r\n        <\/div>\r\n        <h3>IT Marketing Agencies: Your Strategic Partner for Tech Growth<\/h3>\r\n        <span class=\"ophv11-insights__read\">Continue reading \u2192<\/span>\r\n      <\/a>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\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>MSP &amp; IT Marketing Agency The Growth Engine For Some Of The World&#8217;s Most Powerful IT Brands From standout branding to clever digital marketing, you&#8217;ll get the tools to make your company impossible to ignore. Get a Proposal \u2014 What we do Strategy Content Marketing Inbound Branding Social media STRATEGY \u2014 SALES OUTREACH \u2014 MARKETING [&hellip;]<\/p>\n","protected":false},"author":10,"featured_media":236309,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-242316","page","type-page","status-publish","has-post-thumbnail","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.0 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Opollo: MSP IT Marketing Agency<\/title>\n<meta name=\"description\" content=\"Award Winning MSP Marketing &amp; IT Marketing Agency. Our experts create creative, engaging campaigns that help your business grow and achieve expected results.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/opollo.com\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Opollo: MSP IT Marketing Agency\" \/>\n<meta property=\"og:description\" content=\"Award Winning MSP Marketing &amp; IT Marketing Agency. Our experts create creative, engaging campaigns that help your business grow and achieve expected results.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/opollo.com\/\" \/>\n<meta property=\"og:site_name\" content=\"Opollo\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/opollomarketing\/\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-06T12:41:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/opollo.com\/wp-content\/uploads\/2024\/07\/a-new-chapter-in-it-digital-marketing.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@Opolloau\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/opollo.com\\\/\",\"url\":\"https:\\\/\\\/opollo.com\\\/\",\"name\":\"Opollo: MSP IT Marketing Agency\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/opollo.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/opollo.com\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/opollo.com\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/opollo.com\\\/wp-content\\\/uploads\\\/2024\\\/07\\\/a-new-chapter-in-it-digital-marketing.png\",\"datePublished\":\"2025-07-24T04:09:43+00:00\",\"dateModified\":\"2026-05-06T12:41:37+00:00\",\"description\":\"Award Winning MSP Marketing & IT Marketing Agency. Our experts create creative, engaging campaigns that help your business grow and achieve expected results.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/opollo.com\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/opollo.com\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/opollo.com\\\/#primaryimage\",\"url\":\"https:\\\/\\\/opollo.com\\\/wp-content\\\/uploads\\\/2024\\\/07\\\/a-new-chapter-in-it-digital-marketing.png\",\"contentUrl\":\"https:\\\/\\\/opollo.com\\\/wp-content\\\/uploads\\\/2024\\\/07\\\/a-new-chapter-in-it-digital-marketing.png\",\"width\":1200,\"height\":628,\"caption\":\"Innovation Unleashed A New Chapter in IT Digital Marketing\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/opollo.com\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/opollo.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Home 2025\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/opollo.com\\\/#website\",\"url\":\"https:\\\/\\\/opollo.com\\\/\",\"name\":\"Opollo\",\"description\":\"MSP &amp; IT Marketing\",\"publisher\":{\"@id\":\"https:\\\/\\\/opollo.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/opollo.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/opollo.com\\\/#organization\",\"name\":\"Opollo\",\"url\":\"https:\\\/\\\/opollo.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/opollo.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/opollo.com\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/cropped-Icon-black_inverse-rounded-corners.gif\",\"contentUrl\":\"https:\\\/\\\/opollo.com\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/cropped-Icon-black_inverse-rounded-corners.gif\",\"width\":512,\"height\":512,\"caption\":\"Opollo\"},\"image\":{\"@id\":\"https:\\\/\\\/opollo.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/opollomarketing\\\/\",\"https:\\\/\\\/x.com\\\/Opolloau\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Opollo: MSP IT Marketing Agency","description":"Award Winning MSP Marketing & IT Marketing Agency. Our experts create creative, engaging campaigns that help your business grow and achieve expected results.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/opollo.com\/","og_locale":"en_US","og_type":"article","og_title":"Opollo: MSP IT Marketing Agency","og_description":"Award Winning MSP Marketing & IT Marketing Agency. Our experts create creative, engaging campaigns that help your business grow and achieve expected results.","og_url":"https:\/\/opollo.com\/","og_site_name":"Opollo","article_publisher":"https:\/\/www.facebook.com\/opollomarketing\/","article_modified_time":"2026-05-06T12:41:37+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/opollo.com\/wp-content\/uploads\/2024\/07\/a-new-chapter-in-it-digital-marketing.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_site":"@Opolloau","twitter_misc":{"Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/opollo.com\/","url":"https:\/\/opollo.com\/","name":"Opollo: MSP IT Marketing Agency","isPartOf":{"@id":"https:\/\/opollo.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/opollo.com\/#primaryimage"},"image":{"@id":"https:\/\/opollo.com\/#primaryimage"},"thumbnailUrl":"https:\/\/opollo.com\/wp-content\/uploads\/2024\/07\/a-new-chapter-in-it-digital-marketing.png","datePublished":"2025-07-24T04:09:43+00:00","dateModified":"2026-05-06T12:41:37+00:00","description":"Award Winning MSP Marketing & IT Marketing Agency. Our experts create creative, engaging campaigns that help your business grow and achieve expected results.","breadcrumb":{"@id":"https:\/\/opollo.com\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/opollo.com\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/opollo.com\/#primaryimage","url":"https:\/\/opollo.com\/wp-content\/uploads\/2024\/07\/a-new-chapter-in-it-digital-marketing.png","contentUrl":"https:\/\/opollo.com\/wp-content\/uploads\/2024\/07\/a-new-chapter-in-it-digital-marketing.png","width":1200,"height":628,"caption":"Innovation Unleashed A New Chapter in IT Digital Marketing"},{"@type":"BreadcrumbList","@id":"https:\/\/opollo.com\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/opollo.com\/"},{"@type":"ListItem","position":2,"name":"Home 2025"}]},{"@type":"WebSite","@id":"https:\/\/opollo.com\/#website","url":"https:\/\/opollo.com\/","name":"Opollo","description":"MSP &amp; IT Marketing","publisher":{"@id":"https:\/\/opollo.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/opollo.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/opollo.com\/#organization","name":"Opollo","url":"https:\/\/opollo.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/opollo.com\/#\/schema\/logo\/image\/","url":"https:\/\/opollo.com\/wp-content\/uploads\/2025\/04\/cropped-Icon-black_inverse-rounded-corners.gif","contentUrl":"https:\/\/opollo.com\/wp-content\/uploads\/2025\/04\/cropped-Icon-black_inverse-rounded-corners.gif","width":512,"height":512,"caption":"Opollo"},"image":{"@id":"https:\/\/opollo.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/opollomarketing\/","https:\/\/x.com\/Opolloau"]}]}},"_links":{"self":[{"href":"https:\/\/opollo.com\/wp-json\/wp\/v2\/pages\/242316","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/opollo.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/opollo.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/opollo.com\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/opollo.com\/wp-json\/wp\/v2\/comments?post=242316"}],"version-history":[{"count":394,"href":"https:\/\/opollo.com\/wp-json\/wp\/v2\/pages\/242316\/revisions"}],"predecessor-version":[{"id":246170,"href":"https:\/\/opollo.com\/wp-json\/wp\/v2\/pages\/242316\/revisions\/246170"}],"wp:attachment":[{"href":"https:\/\/opollo.com\/wp-json\/wp\/v2\/media?parent=242316"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}