{"id":7138,"date":"2026-05-08T12:13:05","date_gmt":"2026-05-08T09:13:05","guid":{"rendered":"https:\/\/datarevolt.startweb.ro\/?page_id=7138"},"modified":"2026-05-08T12:14:58","modified_gmt":"2026-05-08T09:14:58","slug":"social-media","status":"publish","type":"page","link":"https:\/\/datarevolt.startweb.ro\/ro\/social-media\/","title":{"rendered":"Social Media"},"content":{"rendered":"<div\n  id=\"alt-social-custom-wrap\"\n  class=\"dark\"\n  style=\"    width: 100vw !important;    max-width: 100vw !important;    position: relative;    left: 50% !important;    right: 50% !important;    margin-left: -50vw !important;    margin-right: -50vw !important;    background-color: #070808 !important;    overflow-x: hidden !important;  \"\n>\n  <style id=\"alt-social-ultimate-reset\">\n    \/* Replic\u0103m resetul Tailwind pentru Box Sizing \u0219i Borders care probabil e spart de tema WP *\/\n    #alt-social-custom-wrap,\n    #alt-social-custom-wrap *,\n    #alt-social-custom-wrap ::before,\n    #alt-social-custom-wrap ::after {\n      box-sizing: border-box !important;\n      border-width: 0;\n      border-style: solid;\n      border-color: #e5e7eb;\n    }\n\n    \/* Reset margin\/padding care pot fi mo\u0219tenite incorect *\/\n    #alt-social-custom-wrap p,\n    #alt-social-custom-wrap h1,\n    #alt-social-custom-wrap h2,\n    #alt-social-custom-wrap h3,\n    #alt-social-custom-wrap h4,\n    #alt-social-custom-wrap ul,\n    #alt-social-custom-wrap li {\n      margin: 0;\n      padding: 0;\n    }\n\n    #alt-social-custom-wrap {\n      line-height: 1.5;\n      -webkit-text-size-adjust: 100%;\n      -webkit-font-smoothing: antialiased;\n    }\n  <\/style>\n\n  <link\n    href=\"https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@200;400;500;700;800&amp;family=Inter:wght@400;500;600;700&amp;family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap\"\n    rel=\"stylesheet\"\n  \/>\n  <script src=\"https:\/\/cdn.tailwindcss.com?plugins=forms,container-queries\"><\/script>\n  <script id=\"tailwind-config\">\n    tailwind.config = {\n      important: true,\n      darkMode: \"class\",\n      theme: {\n        extend: {\n          colors: {\n            tertiary: \"#c9c5c8\",\n            \"on-background\": \"#f2dedd\",\n            \"tertiary-container\": \"#4c4a4c\",\n            surface: \"#1b1111\",\n            \"on-tertiary-container\": \"#bdb9bb\",\n            \"outline-variant\": \"#5b403c\",\n            \"on-error\": \"#690005\",\n            \"surface-container-highest\": \"#3e3232\",\n            \"on-surface\": \"#f2dedd\",\n            \"surface-variant\": \"#3e3232\",\n            \"surface-container\": \"#281d1d\",\n            \"on-secondary-fixed\": \"#410002\",\n            secondary: \"#ffb4ab\",\n            \"on-secondary-container\": \"#ff998f\",\n            \"tertiary-fixed\": \"#e6e1e3\",\n            \"on-error-container\": \"#ffdad6\",\n            \"tertiary-fixed-dim\": \"#c9c5c8\",\n            error: \"#ffb4ab\",\n            \"on-surface-variant\": \"#e4beb8\",\n            \"surface-dim\": \"#1b1111\",\n            outline: \"#ab8984\",\n            background: \"#1b1111\",\n            \"on-tertiary-fixed\": \"#1c1b1d\",\n            \"surface-container-lowest\": \"#150c0c\",\n            \"on-primary-fixed-variant\": \"#930001\",\n            primary: \"#ffb4a8\",\n            \"inverse-primary\": \"#b82014\",\n            \"primary-fixed\": \"#ffdad4\",\n            \"on-primary-fixed\": \"#410000\",\n            \"on-tertiary-fixed-variant\": \"#484648\",\n            \"surface-container-low\": \"#231919\",\n            \"surface-tint\": \"#ffb4a8\",\n            \"on-primary-container\": \"#ffa294\",\n            \"error-container\": \"#93000a\",\n            \"inverse-on-surface\": \"#392e2d\",\n            \"on-tertiary\": \"#313032\",\n            \"secondary-fixed-dim\": \"#ffb4ab\",\n            \"primary-container\": \"#9a0101\",\n            \"secondary-fixed\": \"#ffdad6\",\n            \"secondary-container\": \"#85231e\",\n            \"inverse-surface\": \"#f2dedd\",\n            \"on-secondary\": \"#930001\",\n            \"primary-fixed-dim\": \"#ffb4a8\",\n            \"on-primary\": \"#690000\",\n            \"surface-bright\": \"#433636\",\n            \"on-secondary-fixed-variant\": \"#85231e\",\n            \"surface-container-high\": \"#332727\",\n          },\n          fontFamily: {\n            headline: [\"Manrope\"],\n            body: [\"Manrope\"],\n            label: [\"Inter\"],\n          },\n          borderRadius: {\n            DEFAULT: \"0.125rem\",\n            lg: \"0.25rem\",\n            xl: \"0.5rem\",\n            full: \"0.75rem\",\n          },\n        },\n      },\n    };\n  <\/script>\n  <script id=\"tailwind-rem-to-px\">\n    (function () {\n      function normalizeRems() {\n        document.querySelectorAll(\"style\").forEach(function (style) {\n          \/\/ Identific\u0103m absolut sigur stylesheet-ul generat de Tailwind dup\u0103 semn\u0103tura textului\n          if (!style.innerHTML || !style.innerHTML.includes(\"tailwindcss\"))\n            return;\n          if (style.id === \"alt-social-ultimate-reset\") return;\n\n          var newCSS = style.innerHTML.replace(\n            \/([-+0-9.]+)rem\\b\/g,\n            function (match, num) {\n              return parseFloat(num) * 16 + \"px\";\n            },\n          );\n\n          if (newCSS !== style.innerHTML) {\n            style.innerHTML = newCSS;\n          }\n        });\n      }\n      var observer = new MutationObserver(normalizeRems);\n      if (document.head)\n        observer.observe(document.head, { childList: true, subtree: true });\n      setInterval(normalizeRems, 800);\n      document.addEventListener(\"DOMContentLoaded\", normalizeRems);\n    })();\n  <\/script>\n  <style>\n    .material-symbols-outlined {\n      font-variation-settings:\n        \"FILL\" 0,\n        \"wght\" 400,\n        \"GRAD\" 0,\n        \"opsz\" 24;\n    }\n\n    @keyframes s1-scroll {\n      0% {\n        transform: translateX(0);\n      }\n\n      100% {\n        transform: translateX(-50%);\n      }\n    }\n\n    @keyframes unique-scroll {\n      0% {\n        transform: translateX(0);\n      }\n\n      100% {\n        transform: translateX(-50%);\n      }\n    }\n\n    html {\n      scroll-behavior: smooth;\n    }\n\n    \/* Prevent horizontal scroll caused by 100vw wrapper + scrollbar width *\/\n    html,\n    body {\n      overflow-x: hidden !important;\n    }\n\n    \/* ===== SECTION 0 \u2014 Hero ===== *\/\n    .s0-hero-grain {\n      \/* background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='noiseFilter1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter1)'\/%3E%3C\/svg%3E\"); *\/\n      opacity: 0.04;\n      pointer-events: none;\n    }\n\n    .s0-manifesto-scroll {\n      display: flex;\n      width: max-content;\n      animation: unique-scroll 35s linear infinite;\n    }\n\n    @keyframes s0-pulse-glow {\n      0%,\n      100% {\n        opacity: 0.4;\n        transform: scale(1);\n      }\n\n      50% {\n        opacity: 0.7;\n        transform: scale(1.05);\n      }\n    }\n\n    .s0-hero-glow {\n      animation: s0-pulse-glow 6s ease-in-out infinite;\n    }\n\n    \/* ===== SECTION 1 \u2014 Our Approach (from index.html) ===== *\/\n    .s1-grainy-overlay {\n      \/* background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='noiseFilter2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter2)'\/%3E%3C\/svg%3E\"); *\/\n      opacity: 0.03;\n      pointer-events: none;\n    }\n\n    .s1-animate-scroll {\n      display: flex;\n      width: max-content;\n      animation: s1-scroll 25s linear infinite;\n    }\n\n    .s1-glass-gradient {\n      background: linear-gradient(135deg, #930001 0%, #9a0101 100%);\n    }\n\n    \/* ===== SECTION 2 \u2014 The Content Growth System (from index copy.html) ===== *\/\n    .s2-data-trace {\n      width: 2px;\n      height: 100%;\n      background-color: #ffb4a8;\n    }\n\n    .s2-scrolling-wrapper {\n      display: flex;\n      width: fit-content;\n      animation: s1-scroll 6s linear infinite !important;\n    }\n\n    .s2-glass-card {\n      background: linear-gradient(\n        135deg,\n        rgba(31, 21, 21, 0.8) 0%,\n        rgba(42, 26, 26, 0.8) 100%\n      );\n      backdrop-filter: blur(20px);\n    }\n\n    \/* Accordion card gradient (overrides Tailwind bg-surface-container-lowest\/50) *\/\n    .section-2 [data-accordion] {\n      background: linear-gradient(135deg, #2a272a 0%, #0d0b0d 100%) !important;\n    }\n\n    \/* Accordion *\/\n    .section-2 [data-accordion-content] {\n      display: grid;\n      grid-template-rows: 0fr;\n      opacity: 0;\n      transition:\n        grid-template-rows 0.5s cubic-bezier(0.4, 0, 0.2, 1),\n        opacity 0.3s ease;\n    }\n\n    .section-2 [data-accordion-content] > div {\n      overflow: hidden;\n      min-height: 0;\n    }\n\n    .section-2 [data-accordion][data-open] [data-accordion-content] {\n      grid-template-rows: 1fr;\n      opacity: 1;\n    }\n\n    .section-2 [data-accordion-chevron] {\n      transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .section-2 [data-accordion][data-open] [data-accordion-chevron] {\n      transform: rotate(180deg);\n    }\n\n    .section-2 [data-accordion-header] {\n      width: 100%;\n      text-align: left;\n      background: none;\n      border: 0;\n      cursor: pointer;\n      color: inherit;\n      font: inherit;\n    }\n\n    \/* Auto-cycle progress bar *\/\n    .section-2 .accordion-progress {\n      height: 2px;\n      background: rgba(255, 255, 255, 0.06);\n      overflow: hidden;\n    }\n\n    .section-2 .accordion-progress-bar {\n      height: 100%;\n      width: 0%;\n      background: #9a0101;\n      transition: width 0.1s linear;\n    }\n\n    .section-2 [data-accordion][data-open] .accordion-progress-bar {\n      background: linear-gradient(90deg, #930001 0%, #9a0101 100%);\n    }\n\n    \/* ===== SECTION 3 \u2014 The Growth Capabilities (from index copy 2.html) ===== *\/\n    .s3-grain-overlay {\n      \/* background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='noiseFilter3'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter3)'\/%3E%3C\/svg%3E\"); *\/\n      opacity: 0.03;\n      pointer-events: none;\n    }\n\n    .s3-glass-card {\n      background: linear-gradient(135deg, #2a272a 0%, #0d0b0d 100%);\n      backdrop-filter: blur(12px);\n      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .s3-glass-card:hover {\n      background: linear-gradient(135deg, #332f33 0%, #141114 100%);\n      border-color: rgba(255, 180, 168, 0.3);\n      box-shadow: 0 0 40px rgba(101, 10, 11, 0.2);\n      transform: scale(1.01);\n    }\n\n    .s3-data-trace {\n      width: 2px;\n      background: linear-gradient(to bottom, #ffb4a8, transparent);\n    }\n\n    \/* Capabilities cards \u2014 expand\/collapse *\/\n    .section-3 [data-expandable] {\n      cursor: pointer;\n      min-height: 220px;\n    }\n\n    .section-3 [data-expand-body] {\n      display: grid;\n      grid-template-rows: 0fr;\n      opacity: 0;\n      transition:\n        grid-template-rows 0.45s cubic-bezier(0.4, 0, 0.2, 1),\n        opacity 0.3s ease,\n        margin-top 0.3s ease;\n      margin-top: 0;\n    }\n\n    .section-3 [data-expand-body] > div {\n      overflow: hidden;\n      min-height: 0;\n    }\n\n    .section-3 [data-expandable][data-open] [data-expand-body] {\n      grid-template-rows: 1fr;\n      opacity: 1;\n      margin-top: 1.5rem;\n    }\n\n    .section-3 [data-expand-chevron] {\n      transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .section-3 [data-expandable][data-open] [data-expand-chevron] {\n      transform: rotate(180deg);\n    }\n\n    \/* ===== SECTION 4 \u2014 Stack (from index copy 4.html) ===== *\/\n    .s4-red-grading-overlay {\n      background: linear-gradient(\n        180deg,\n        rgba(27, 17, 17, 0.2) 0%,\n        rgba(154, 1, 1, 0.2) 100%\n      );\n    }\n\n    \/* Subgrid: image \/ h3 \/ p \/ ul all align across cards *\/\n    .s4-stack-grid {\n      grid-template-rows: auto auto auto 1fr;\n    }\n\n    .s4-stack-grid > article {\n      display: grid;\n      grid-template-rows: subgrid;\n      grid-row: span 4;\n      row-gap: 1rem;\n    }\n\n    .s4-noise-overlay {\n      background-image: url(https:\/\/lh3.googleusercontent.com\/aida-public\/AB6AXuChyaFB9WTbI9MAtnRzaoTQcCAp1MjAIfTLHbhtw8lbesRuVvcdiuHnZuRATDeHj8URNwLZY30mSm52UwABtNzsClJjG2p-oFaCK9k13OUP0g0DVAnQ6hO3LwuxIWgbI_wtGcra3_Rc0je0VhUGuojy94hsJQuGFIreRJhdzfyQnsPendwZOrRhyOSrLxSd8XYSuTdqPQlgmBzQfjgZoUUQefTSasGPe9iJaL59WPBoR9z6Goo4siR6fN1xgtR4qaisxacErJio0R0);\n      opacity: 0.03;\n    }\n\n    \/* ===== SECTION 5 \u2014 Proof of Work (from index copy 3.html) ===== *\/\n    .s5-animate-scroll {\n      animation: unique-scroll 15s linear infinite;\n    }\n\n    .s5-noise-overlay {\n      background-image: url(https:\/\/lh3.googleusercontent.com\/aida-public\/AB6AXuDJ0-IjM481Ipb45jLFV1XnTOtZuh2b7FcmzOH6rZTpVstxHJNjCFLWVzGPeQl_NsmxELICgkbBNGYBoMS72hI8z9ClfxyILZ030oXkr0rBrEbBNquY_MEnxOj-TR-sKvT2lpp8_zCXZJJDTkc_gIE16Xvx73xKWzUtCA8MIWFgAhxcEvyt4riv_b57zmZY3uhNDX6exOpgXOX9di7egHO5MLqb-QVA0MNYqVe6_rGas4K9NiVRPmUy0gAr4xyxFsdAxFA8Ak1edFI);\n      opacity: 0.03;\n      pointer-events: none;\n    }\n\n    .s5-glass-card {\n      background: rgba(62, 50, 50, 0.4);\n      backdrop-filter: blur(12px);\n      border: 1px solid rgba(255, 180, 168, 0.1);\n    }\n\n    .s5-mask-fade {\n      mask-image: linear-gradient(\n        to right,\n        transparent,\n        black 15%,\n        black 85%,\n        transparent\n      );\n      -webkit-mask-image: linear-gradient(\n        to right,\n        transparent,\n        black 15%,\n        black 85%,\n        transparent\n      );\n    }\n\n    \/* ===== SECTION 6 \u2014 Conversion \/ CTA (from index copy 5.html) ===== *\/\n    .s6-glass-panel {\n      background: rgba(62, 50, 50, 0.4);\n      backdrop-filter: blur(20px);\n      -webkit-backdrop-filter: blur(20px);\n    }\n\n    .s6-noise-overlay {\n      \/* background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='noiseFilter4'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter4)'\/%3E%3C\/svg%3E\"); *\/\n      opacity: 0.03;\n      pointer-events: none;\n    }\n\n    .s6-cta-glow:hover {\n      box-shadow: 0 0 30px rgba(154, 1, 1, 0.4);\n    }\n\n    \/* ===== HERO (from s1.html) ===== *\/\n    .hero-full-width-vayner {\n      position: relative;\n      width: 100%;\n      height: 500px;\n      min-height: 500px;\n      overflow: hidden;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: #ffffff;\n      font-family: \"Manrope\", sans-serif;\n    }\n\n    .video-bg {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      min-width: 100%;\n      min-height: 100%;\n      width: auto;\n      height: auto;\n      z-index: 1;\n      transform: translate(-50%, -50%);\n      object-fit: cover;\n    }\n\n    .video-overlay {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      background-color: #000000;\n      opacity: 0.8;\n      z-index: 2;\n    }\n\n    .play-trigger-round-custom {\n      position: absolute;\n      top: 40px;\n      right: 40px;\n      z-index: 10;\n      width: 85px;\n      height: 85px;\n      border-radius: 50%;\n      background-image: url(\"https:\/\/datarevolt.startweb.ro\/wp-content\/uploads\/2026\/03\/Logo-DRA-experimental.png\");\n      background-size: cover;\n      background-position: center;\n      border: 3px solid #ffffff;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);\n      transition: transform 0.3s ease;\n    }\n\n    .play-trigger-round-custom:hover {\n      transform: scale(1.1) rotate(5deg);\n    }\n\n    .play-icon-mini {\n      background: rgba(255, 255, 255, 0.8);\n      color: #000;\n      width: 25px;\n      height: 25px;\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 12px;\n      padding-left: 2px;\n    }\n\n    .ticker-wrap-purple {\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      width: 100%;\n      background: #930001;\n      color: #ffffff;\n      padding: 6px 0;\n      z-index: 4;\n      overflow: hidden;\n      border-top: 1px solid rgba(255, 255, 255, 0.2);\n    }\n\n    .ticker {\n      display: flex;\n      white-space: nowrap;\n    }\n\n    .ticker__item {\n      display: inline-block;\n      padding-right: 20px;\n      font-weight: 300;\n      text-transform: uppercase;\n      font-size: 1.5rem;\n      letter-spacing: 0.05em;\n      font-family: \"Manrope\", sans-serif;\n      animation: ticker-scroll-fast 15s linear infinite;\n    }\n\n    @keyframes ticker-scroll-fast {\n      0% {\n        transform: translateX(0);\n      }\n\n      100% {\n        transform: translateX(-100%);\n      }\n    }\n\n    .hero-content {\n      position: relative;\n      z-index: 3;\n      text-align: center;\n    }\n\n    .hero-content h1 {\n      font-size: clamp(2.5rem, 6vw, 5rem);\n      font-weight: 900;\n      text-transform: uppercase;\n      margin: 0;\n    }\n\n    .modal-overlay {\n      display: none;\n      position: fixed;\n      z-index: 9999;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      background: rgba(0, 0, 0, 0.9);\n      align-items: center;\n      justify-content: center;\n    }\n\n    .modal-content {\n      position: relative;\n      width: 85%;\n      max-width: 1100px;\n    }\n\n    .close-modal {\n      position: absolute;\n      top: -50px;\n      right: 0;\n      color: #fff;\n      font-size: 40px;\n      cursor: pointer;\n    }\n\n    .video-container {\n      position: relative;\n      padding-bottom: 56.25%;\n      height: 0;\n    }\n\n    .video-container iframe {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n    }\n\n    @media (max-width: 768px) {\n      .play-trigger-round-custom {\n        top: 20px;\n        right: 20px;\n        width: 60px;\n        height: 60px;\n      }\n\n      .ticker__item {\n        animation-duration: 8s;\n      }\n    }\n  <\/style>\n\n  <!-- ===== Unified Top Navigation ===== -->\n  <main>\n    <!-- ============================================================ -->\n    <!-- SECTION 0 \u2014 HERO (from s1.html)                              -->\n    <!-- ============================================================ -->\n    <section class=\"hero-full-width-vayner\">\n      <video\n        autoplay\n muted\n loop\n playsinline\n poster=\"https:\/\/datarevolt.startweb.ro\/wp-content\/uploads\/2026\/04\/ALT-Social-Data-Revolt-Ad-02.mp4\"\n        class=\"video-bg\"\n      >\n        <source\n          src=\"https:\/\/datarevolt.startweb.ro\/wp-content\/uploads\/2026\/04\/ALT-Social-Data-Revolt-Ad-02.mp4\"\n          type=\"video\/mp4\"\n        \/>\n      <\/video>\n\n      <div class=\"video-overlay\"><\/div>\n\n      <button\n        class=\"play-trigger-round-custom\"\n        id=\"openVideo\"\n        aria-label=\"Play Video\"\n      >\n        <span class=\"play-icon-mini\">&#9654;<\/span>\n      <\/button>\n\n      <!-- Hero Content (merged from backup\/s2.html) -->\n      <div\n        class=\"relative z-[3] w-full h-full flex items-center px-6 lg:px-24 pt-10 pb-24\"\n      >\n        <div class=\"max-w-6xl w-full\">\n          <h1\n            class=\"font-headline font-extrabold text-4xl md:text-5xl lg:text-6xl text-white tracking-tighter leading-[0.95] mb-6 flex items-center gap-4 flex-wrap\"\n          >\n            <span>We&#8217;re<\/span>\n            <img decoding=\"async\"\n              src=\"https:\/\/datarevolt.startweb.ro\/wp-content\/uploads\/2026\/04\/Alt_Social_Logo.png\"\n              alt=\"ALT Social\"\n              class=\"inline-block h-10 md:h-16 lg:h-20 w-auto ml-2\"\n            \/>\n          <\/h1>\n          <p\n            class=\"text-lg md:text-2xl text-white\/90 font-medium tracking-tight max-w-2xl leading-tight mb-8\"\n          >\n            We engineer Social Media for\n            <span class=\"text-primary\">business growth<\/span>.\n          <\/p>\n          <div\n            class=\"flex flex-col sm:flex-row gap-4 items-start sm:items-center\"\n          >\n            <a\n              href=\"#approach\"\n              class=\"group relative px-10 py-5 bg-gradient-to-r from-[#930001] to-[#9A0101] text-white rounded-lg font-label font-bold uppercase tracking-[0.15em] text-sm transition-all duration-300 transform hover:scale-[1.03] active:scale-95 s6-cta-glow\"\n            >\n              See how we work\n              <span\n                class=\"material-symbols-outlined text-sm group-hover:translate-x-1 transition-transform\"\n                >arrow_forward<\/span\n>\n            <\/a>\n            <a\n              href=\"\/ro\/contact\/#contact-form\"\n              class=\"font-label text-xs uppercase tracking-widest text-[#e4beb8]\/80 hover:text-white transition-colors px-4 py-4\"\n            >\n              Or start a conversation \u2192\n            <\/a>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- Scrolling Ticker (matches Section 1 style) -->\n      <div\n        class=\"absolute bottom-0 left-0 w-full py-5 bg-[#930001] flex items-center overflow-hidden z-[4] border-t border-white\/20\"\n      >\n        <div class=\"s1-animate-scroll items-center gap-2 whitespace-nowrap\">\n          <span\n            class=\"text-white font-headline text-xl md:text-2xl font-light tracking-tight uppercase\"\n            >Content that performs. Data that proves. Growth that lasts.<\/span\n>\n          <span\n            class=\"text-white font-headline text-xl md:text-2xl font-light tracking-tight uppercase\"\n            >Content that performs. Data that proves. Growth that lasts.<\/span\n>\n          <span\n            class=\"text-white font-headline text-xl md:text-2xl font-light tracking-tight uppercase\"\n            >Content that performs. Data that proves. Growth that lasts.<\/span\n>\n          <span\n            class=\"text-white font-headline text-xl md:text-2xl font-light tracking-tight uppercase\"\n            >Content that performs. Data that proves. Growth that lasts.<\/span\n>\n          <span\n            class=\"text-white font-headline text-xl md:text-2xl font-light tracking-tight uppercase\"\n            >Content that performs. Data that proves. Growth that lasts.<\/span\n>\n          <span\n            class=\"text-white font-headline text-xl md:text-2xl font-light tracking-tight uppercase\"\n            >Content that performs. Data that proves. Growth that lasts.<\/span\n>\n        <\/div>\n      <\/div>\n    <\/section>\n\n    <div id=\"videoModal\" class=\"modal-overlay\">\n      <div class=\"modal-content\">\n        <span class=\"close-modal\">&times;<\/span>\n        <div class=\"video-container\">\n          <div id=\"player-placeholder\"><\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n\n\n    <!-- ============================================================ -->\n    <!-- SECTION 1 \u2014 OUR APPROACH                                     -->\n    <!-- ============================================================ -->\n    <section\n      id=\"approach\"\n      class=\"section-1 relative overflow-hidden\"\n    >\n      <div class=\"s1-grainy-overlay absolute inset-0 z-0\"><\/div>\n\n    <!-- ============================================================ -->\n    <!-- AI SMART SUMMARY                                             -->\n    <!-- ============================================================ -->\n    <style>\n        .dr-ai-summary-outer {\n            width: 100vw !important;\n            position: relative !important;\n            left: 50% !important;\n            margin-left: -50vw !important;\n            background-color: transparent !important;\n            padding: 80px 0 40px 0 !important;\n            display: block !important;\n            z-index: 10;\n        }\n    \n        .dr-ai-box {\n            background: linear-gradient(135deg, rgba(31, 21, 21, 0.8) 0%, rgba(42, 26, 26, 0.8) 100%) !important;\n            backdrop-filter: blur(20px);\n            border: 1px solid rgba(255, 180, 168, 0.15) !important;\n            border-radius: 32px !important;\n            padding: 48px !important;\n            position: relative !important;\n            overflow: hidden !important;\n            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;\n            max-width: 1200px;\n            margin: 0 auto;\n            width: 90%;\n        }\n    \n        .dr-ai-box::before {\n            content: \"\" !important;\n            position: absolute !important;\n            top: 0;\n            left: 0;\n            width: 6px;\n            height: 100%;\n            background: linear-gradient(to bottom, #ffb4a8, #930001) !important;\n        }\n    \n        .ai-header {\n            display: flex !important;\n            align-items: center !important;\n            gap: 12px !important;\n            margin-bottom: 24px !important;\n        }\n    \n        .ai-sparkle-icon {\n            color: #ffb4a8 !important;\n            font-size: 24px !important;\n            font-variation-settings: 'FILL' 1 !important;\n        }\n    \n        .ai-badge-text {\n            font-family: 'Manrope', sans-serif !important;\n            font-weight: 800 !important;\n            font-size: 14px !important;\n            text-transform: uppercase !important;\n            letter-spacing: 0.15em !important;\n            color: #f2dedd !important;\n        }\n    \n        .ai-quick-summary {\n            font-family: 'Manrope', sans-serif !important;\n            font-size: 24px !important;\n            font-weight: 800 !important;\n            line-height: 1.3 !important;\n            color: #f2dedd !important;\n            margin-bottom: 12px !important;\n        }\n    \n        .ai-lead-text {\n            font-family: 'Inter', sans-serif !important;\n            font-size: 17px !important;\n            line-height: 1.6 !important;\n            color: #e4beb8 !important;\n            margin-bottom: 32px !important;\n            max-width: 1000px !important;\n        }\n    \n        .ai-info-grid {\n            display: grid !important;\n            grid-template-columns: repeat(3, 1fr) !important;\n            gap: 32px !important;\n            border-top: 1px solid rgba(255, 255, 255, 0.08) !important;\n            padding-top: 32px !important;\n            margin-bottom: 16px !important;\n        }\n    \n        .ai-column-title {\n            font-family: 'Manrope', sans-serif !important;\n            font-weight: 800 !important;\n            font-size: 13px !important;\n            text-transform: uppercase !important;\n            letter-spacing: 0.05em !important;\n            color: #ffb4a8 !important;\n            margin-bottom: 16px !important;\n            display: block !important;\n        }\n    \n        .ai-info-item {\n            font-family: 'Inter', sans-serif !important;\n            font-size: 14.5px !important;\n            line-height: 1.5 !important;\n            color: #f2dedd !important;\n            margin-bottom: 12px !important;\n            display: flex !important;\n            gap: 10px !important;\n        }\n    \n        .ai-bullet {\n            color: #ffb4a8 !important;\n            font-weight: 900 !important;\n        }\n    \n        @media (max-width: 768px) {\n            .dr-ai-summary-outer {\n                padding: 40px 0 40px 0 !important;\n            }\n            \n            .dr-ai-box {\n                padding: 32px 20px !important;\n            }\n    \n            .ai-quick-summary {\n                font-size: 20px !important;\n            }\n    \n            .ai-lead-text {\n                font-size: 15px !important;\n                margin-bottom: 20px !important;\n            }\n    \n            .ai-info-grid {\n                display: block !important;\n                padding-top: 0 !important;\n                border-top: none !important;\n            }\n    \n            .ai-column-title {\n                margin-bottom: 12px !important;\n                margin-top: 24px !important;\n                padding: 0 !important;\n                border-top: 1px solid rgba(255,255,255,0.08) !important;\n                padding-top: 20px !important;\n            }\n        }\n    <\/style>\n    \n    <div class=\"dr-ai-summary-outer\">\n        <div class=\"dr-ai-box\">\n            <div class=\"ai-header\">\n                <span class=\"material-symbols-outlined ai-sparkle-icon\">auto_awesome<\/span>\n                <span class=\"ai-badge-text\">AI Overview<\/span>\n            <\/div>\n    \n            <h3 class=\"ai-quick-summary\">Who We Are<\/h3>\n            <p class=\"ai-lead-text\">\n                We are a specialized agency that engineers Social Media for measurable business growth. We transform traditional content calendars into revenue-driving growth systems.\n            <\/p>\n    \n            <div class=\"ai-info-grid\">\n                <div class=\"mobile-accordion-item\">\n                    <label class=\"ai-column-title\">Our Core Methodology<\/label>\n                    <div class=\"accordion-content\">\n                        <p class=\"ai-info-item\" style=\"color: #e4beb8; font-size: 13px; margin-bottom: 16px;\">\n                            <strong>(The Content Growth System)<\/strong><br\/>\n                            We move beyond vanity metrics by connecting three core pillars into a single ecosystem:\n                        <\/p>\n                        <div class=\"ai-info-item\"><span class=\"ai-bullet\">\u203a<\/span> <span><strong>Data Layer:<\/strong> Driven by search behavior, audience intent, and performance benchmarks.<\/span><\/div>\n                        <div class=\"ai-info-item\"><span class=\"ai-bullet\">\u203a<\/span> <span><strong>Creative Engine:<\/strong> Engineering content designed to convert and sell, not just engage.<\/span><\/div>\n                        <div class=\"ai-info-item\"><span class=\"ai-bullet\">\u203a<\/span> <span><strong>Performance Engine:<\/strong> Scaling what works through integrated amplification.<\/span><\/div>\n                    <\/div>\n                <\/div>\n    \n                <div class=\"mobile-accordion-item\">\n                    <label class=\"ai-column-title\">Key Capabilities &amp; Services<\/label>\n                    <div class=\"accordion-content\">\n                        <div class=\"ai-info-item\"><span class=\"ai-bullet\">\u203a<\/span> <span>Communication Strategy &amp; Growth Architecture<\/span><\/div>\n                        <div class=\"ai-info-item\"><span class=\"ai-bullet\">\u203a<\/span> <span>Data Analytics &amp; Social Signals<\/span><\/div>\n                        <div class=\"ai-info-item\"><span class=\"ai-bullet\">\u203a<\/span> <span>Creative Engineering &amp; Production<\/span><\/div>\n                        <div class=\"ai-info-item\"><span class=\"ai-bullet\">\u203a<\/span> <span>Integrated Performance Amplification<\/span><\/div>\n                        <div class=\"ai-info-item\"><span class=\"ai-bullet\">\u203a<\/span> <span>Influencer &amp; Creator Campaigns<\/span><\/div>\n                        <div class=\"ai-info-item\"><span class=\"ai-bullet\">\u203a<\/span> <span>Social Search &amp; SEO Engine<\/span><\/div>\n                    <\/div>\n                <\/div>\n    \n                <div class=\"mobile-accordion-item\">\n                    <label class=\"ai-column-title\">Measurable Business Impact<\/label>\n                    <div class=\"accordion-content\">\n                        <p class=\"ai-info-item\" style=\"color: #e4beb8; font-size: 13px; margin-bottom: 16px;\">\n                            Our data-driven approach shifts focus from social metrics to real commercial demand. Tracked via standardized UTM structures and GA4 integrations, our systems have generated:\n                        <\/p>\n                        <div class=\"ai-info-item\"><span class=\"ai-bullet\">\u203a<\/span> <span><strong>+726%<\/strong> traffic from Social Media campaigns<\/span><\/div>\n                        <div class=\"ai-info-item\"><span class=\"ai-bullet\">\u203a<\/span> <span><strong>+750%<\/strong> new users and <strong>+1,112%<\/strong> returning users<\/span><\/div>\n                        <div class=\"ai-info-item\"><span class=\"ai-bullet\">\u203a<\/span> <span><strong>+16%<\/strong> increase in total conversions<\/span><\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n    \n        <\/div>\n    <\/div>\n\n      <!-- Editorial + Engineered Visual -->\n      <div\n        class=\"relative z-10 grid grid-cols-1 lg:grid-cols-2 items-center px-6 lg:px-24 gap-12 lg:gap-0 pb-16\"\n      >\n        <!-- Left Side: Editorial Content -->\n        <div\n          class=\"flex flex-col justify-center space-y-12 py-12 lg:py-0 lg:pr-16\"\n        >\n          <div class=\"flex items-start gap-8\">\n            <div class=\"w-[2px] h-32 bg-primary\"><\/div>\n            <div class=\"flex flex-col space-y-8\">\n              <h2\n                class=\"font-headline font-extrabold text-4xl lg:text-6xl text-white tracking-tighter leading-tight max-w-xl\"\n              >\n                Social Media was never meant to be a content calendar.\n              <\/h2>\n              <p\n                class=\"text-white text-2xl lg:text-3xl font-medium tracking-tight my-8\"\n              >\n                We believe in an alternative way to build Social Media. As a\n                growth system.\n              <\/p>\n              <div\n                class=\"space-y-4 text-lg leading-relaxed text-on-surface-variant\"\n              >\n                <p class=\"block py-1\">\n                  <span class=\"block\"\n                    >Where every piece of content is designed to sell.<\/span\n>\n                  <span class=\"block\"\n                    >Where creativity is engineered to convert, not just\n                    engage.<\/span\n>\n                  <span class=\"block\"\n                    >Where influencers are part of the system, not just a\n                    distribution channel.<\/span\n>\n                  <span class=\"block\"\n                    >Where performance scales what works, not what looks\n                    good.<\/span\n>\n                <\/p>\n              <\/div>\n              <p\n                class=\"font-headline font-bold text-xl text-primary tracking-tight pt-4\"\n              >\n                Because Social Media should move the business forward.\n              <\/p>\n            <\/div>\n          <\/div>\n        <\/div>\n        <!-- Right Side: Old Way vs Our Way Comparison -->\n        <div class=\"relative flex items-center justify-center py-12 lg:py-0\">\n          <div\n            class=\"absolute w-[500px] h-[500px] bg-on-secondary\/10 blur-[120px] rounded-full -z-10\"\n          ><\/div>\n          <div\n            class=\"relative w-full max-w-2xl p-[1px] rounded-lg overflow-hidden bg-outline-variant\/20 shadow-2xl\"\n          >\n            <video\n              class=\"block w-full h-auto rounded-lg\"\n              src=\"https:\/\/datarevolt.startweb.ro\/wp-content\/uploads\/2026\/04\/video-section-2.mp4\"\n              autoplay\n muted\n loop\n playsinline\n preload=\"auto\"\n            ><\/video>\n          <\/div>\n        <\/div>\n      <\/div>\n\n\n\n      <!-- Scrolling Ticker -->\n      <div\n        class=\"relative w-full py-5 bg-[#930001] flex items-center overflow-hidden z-20 border-y border-white\/20\"\n      >\n        <div\n          class=\"s1-animate-scroll items-center gap-6 whitespace-nowrap text-white font-headline text-xl md:text-2xl font-light tracking-tight uppercase\"\n        >\n          <span>+16% conversions from Social Media<\/span>\n          <span class=\"text-white\/60\">\u2022<\/span>\n          <span>+726% traffic from Social Media campaigns<\/span>\n          <span class=\"text-white\/60\">\u2022<\/span>\n          <span>+750% new users from Social Media<\/span>\n          <span class=\"text-white\/60\">\u2022<\/span>\n          <span>+1,112% returning users from Social Media<\/span>\n          <span class=\"text-white\/60\">\u2022<\/span>\n          <span>+120% CTR from Social Media<\/span>\n          <span class=\"text-white\/60\">\u2022<\/span>\n          <span>+42% website users from Social Media<\/span>\n          <span class=\"text-white\/60\">\u2022<\/span>\n          <span>+70% engagement growth from Social Media<\/span>\n          <span class=\"text-white\/60\">\u2022<\/span>\n          <span>+70% more interactions from Social Media traffic<\/span>\n          <span class=\"text-white\/60\">\u2022<\/span>\n          <span>+35% organic Social Media traffic<\/span>\n          <span class=\"text-white\/60\">\u2022<\/span>\n          <!-- Loop -->\n          <span>+16% conversions from Social Media<\/span>\n          <span class=\"text-white\/60\">\u2022<\/span>\n          <span>+726% traffic from Social Media campaigns<\/span>\n          <span class=\"text-white\/60\">\u2022<\/span>\n          <span>+750% new users from Social Media<\/span>\n          <span class=\"text-white\/60\">\u2022<\/span>\n          <span>+1,112% returning users from Social Media<\/span>\n          <span class=\"text-white\/60\">\u2022<\/span>\n          <span>+120% CTR from Social Media<\/span>\n          <span class=\"text-white\/60\">\u2022<\/span>\n          <span>+42% website users from Social Media<\/span>\n          <span class=\"text-white\/60\">\u2022<\/span>\n          <span>+70% engagement growth from Social Media<\/span>\n          <span class=\"text-white\/60\">\u2022<\/span>\n          <span>+70% more interactions from Social Media traffic<\/span>\n          <span class=\"text-white\/60\">\u2022<\/span>\n          <span>+35% organic Social Media traffic<\/span>\n          <span class=\"text-white\/60\">\u2022<\/span>\n        <\/div>\n      <\/div>\n    <\/section>\n\n\n\n    <!-- ============================================================ -->\n    <!-- SECTION 2 \u2014 THE CONTENT GROWTH SYSTEM                        -->\n    <!-- ============================================================ -->\n    <section\n      id=\"methodology\"\n      class=\"section-2 py-24 overflow-x-hidden text-on-surface-variant\"\n    >\n      <!-- Two-column layout: accordion left, sticky intro right -->\n      <div\n        class=\"max-w-7xl mx-auto px-8 mb-32 grid grid-cols-1 lg:grid-cols-[3fr_2fr] gap-12 lg:gap-16 items-start\"\n      >\n        <!-- LEFT: Accordion modules -->\n        <div data-accordion-group class=\"space-y-4 order-2 lg:order-1\">\n          <!-- Module 01 -->\n          <div\n            data-accordion\n data-open\n class=\"group bg-surface-container-lowest\/50 border border-outline-variant\/10 rounded-xl overflow-hidden hover:border-primary\/30 transition-all duration-300\"\n          >\n            <button\n              data-accordion-header\n class=\"p-8 flex justify-between items-center hover:bg-surface-container-low transition-colors\"\n            >\n              <div class=\"flex items-center gap-6\">\n                <h3\n                  class=\"font-headline text-2xl font-extrabold text-white tracking-tight\"\n                >\n                  Data Layer\n                <\/h3>\n              <\/div>\n              <div class=\"flex items-center gap-4\">\n                <span class=\"material-symbols-outlined text-primary\"\n                  >analytics<\/span\n>\n                <span\n                  data-accordion-chevron\n class=\"material-symbols-outlined text-primary\"\n                  >expand_more<\/span\n>\n              <\/div>\n            <\/button>\n            <div class=\"accordion-progress\" data-accordion-progress>\n              <div class=\"accordion-progress-bar\"><\/div>\n            <\/div>\n            <div data-accordion-content>\n              <div>\n                <div class=\"px-8 pb-8 grid md:grid-cols-2 gap-12 items-center\">\n                  <div class=\"space-y-6\">\n                    <p class=\"text-lg text-on-surface-variant leading-relaxed\">\n                      We start with signals.\n                    <\/p>\n                    <div class=\"flex flex-wrap gap-3\">\n                      <span\n                        class=\"px-4 py-2 bg-surface-variant\/40 rounded-DEFAULT border border-outline-variant\/20 text-xs font-label uppercase tracking-wider\"\n                        >Search behaviour<\/span\n>\n                      <span\n                        class=\"px-4 py-2 bg-surface-variant\/40 rounded-DEFAULT border border-outline-variant\/20 text-xs font-label uppercase tracking-wider\"\n                        >Audience intent<\/span\n>\n                      <span\n                        class=\"px-4 py-2 bg-surface-variant\/40 rounded-DEFAULT border border-outline-variant\/20 text-xs font-label uppercase tracking-wider\"\n                        >Platform trends<\/span\n>\n                      <span\n                        class=\"px-4 py-2 bg-surface-variant\/40 rounded-DEFAULT border border-outline-variant\/20 text-xs font-label uppercase tracking-wider\"\n                        >Performance benchmarks<\/span\n>\n                    <\/div>\n                  <\/div>\n                  <div\n                    class=\"relative h-64 md:h-full min-h-[260px] overflow-hidden rounded-lg\"\n                  >\n                    <img decoding=\"async\"\n                      class=\"absolute inset-0 w-full h-full object-cover opacity-60 transition-all duration-700\"\n                      alt=\"Abstract data visualization dashboard\"\n                      src=\"https:\/\/datarevolt.startweb.ro\/wp-content\/uploads\/2026\/04\/DL.jpg\"\n                    \/>\n                    <div\n                      class=\"absolute inset-0 bg-gradient-to-t from-surface-container-low via-transparent to-transparent\"\n                    ><\/div>\n                  <\/div>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n          <!-- Module 02 -->\n          <div\n            data-accordion\n class=\"group bg-surface-container-lowest\/50 border border-outline-variant\/10 rounded-xl overflow-hidden hover:border-primary\/30 transition-all duration-300\"\n          >\n            <button\n              data-accordion-header\n class=\"p-8 flex justify-between items-center hover:bg-surface-container-low transition-colors\"\n            >\n              <div class=\"flex items-center gap-6\">\n                <h3\n                  class=\"font-headline text-2xl font-extrabold text-on-surface-variant group-hover:text-white transition-colors tracking-tight\"\n                >\n                  Creative Engine\n                <\/h3>\n              <\/div>\n              <div class=\"flex items-center gap-4\">\n                <span\n                  class=\"material-symbols-outlined text-on-surface-variant group-hover:text-primary transition-colors\"\n                  >precision_manufacturing<\/span\n>\n                <span\n                  data-accordion-chevron\n class=\"material-symbols-outlined text-on-surface-variant group-hover:text-primary transition-colors\"\n                  >expand_more<\/span\n>\n              <\/div>\n            <\/button>\n            <div class=\"accordion-progress\" data-accordion-progress>\n              <div class=\"accordion-progress-bar\"><\/div>\n            <\/div>\n            <div data-accordion-content>\n              <div>\n                <div class=\"px-8 pb-8 grid md:grid-cols-2 gap-12 items-center\">\n                  <div class=\"space-y-6\">\n                    <p class=\"text-lg text-on-surface-variant leading-relaxed\">\n                      Content engineered for impact and amplification.\n                    <\/p>\n                    <div class=\"flex flex-wrap gap-3\">\n                      <span\n                        class=\"px-4 py-2 bg-surface-variant\/40 rounded-DEFAULT border border-outline-variant\/20 text-xs font-label uppercase tracking-wider\"\n                        >High stopping-power formats<\/span\n>\n                      <span\n                        class=\"px-4 py-2 bg-surface-variant\/40 rounded-DEFAULT border border-outline-variant\/20 text-xs font-label uppercase tracking-wider\"\n                        >Culture-driven concepts and creative campaigns<\/span\n>\n                      <span\n                        class=\"px-4 py-2 bg-surface-variant\/40 rounded-DEFAULT border border-outline-variant\/20 text-xs font-label uppercase tracking-wider\"\n                        >Creative designed for paid distribution<\/span\n>\n                      <span\n                        class=\"px-4 py-2 bg-surface-variant\/40 rounded-DEFAULT border border-outline-variant\/20 text-xs font-label uppercase tracking-wider\"\n                        >Assets built to scale across platforms<\/span\n>\n                    <\/div>\n                  <\/div>\n                  <div\n                    class=\"relative w-full aspect-[4\/3] overflow-hidden rounded-lg\"\n                  >\n                    <img decoding=\"async\"\n                      class=\"absolute inset-0 w-full h-full object-cover opacity-60 transition-all duration-700\"\n                      alt=\"Creative engineering and content production\"\n                      src=\"https:\/\/datarevolt.startweb.ro\/wp-content\/uploads\/2026\/04\/CE.jpg\"\n                    \/>\n                    <div\n                      class=\"absolute inset-0 bg-gradient-to-t from-surface-container-low via-transparent to-transparent\"\n                    ><\/div>\n                  <\/div>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n          <!-- Module 03 -->\n          <div\n            data-accordion\n class=\"group bg-surface-container-lowest\/50 border border-outline-variant\/10 rounded-xl overflow-hidden hover:border-primary\/30 transition-all duration-300\"\n          >\n            <button\n              data-accordion-header\n class=\"p-8 flex justify-between items-center hover:bg-surface-container-low transition-colors\"\n            >\n              <div class=\"flex items-center gap-6\">\n                <h3\n                  class=\"font-headline text-2xl font-extrabold text-on-surface-variant group-hover:text-white transition-colors tracking-tight\"\n                >\n                  Performance Engine\n                <\/h3>\n              <\/div>\n              <div class=\"flex items-center gap-4\">\n                <span\n                  class=\"material-symbols-outlined text-on-surface-variant group-hover:text-primary transition-colors\"\n                  >bolt<\/span\n>\n                <span\n                  data-accordion-chevron\n class=\"material-symbols-outlined text-on-surface-variant group-hover:text-primary transition-colors\"\n                  >expand_more<\/span\n>\n              <\/div>\n            <\/button>\n            <div class=\"accordion-progress\" data-accordion-progress>\n              <div class=\"accordion-progress-bar\"><\/div>\n            <\/div>\n            <div data-accordion-content>\n              <div>\n                <div class=\"px-8 pb-8 grid md:grid-cols-2 gap-12 items-center\">\n                  <div class=\"space-y-6\">\n                    <p class=\"text-lg text-on-surface-variant leading-relaxed\">\n                      Amplify, validate, optimise.\n                    <\/p>\n                    <div class=\"flex flex-wrap gap-3\">\n                      <span\n                        class=\"px-4 py-2 bg-surface-variant\/40 rounded-DEFAULT border border-outline-variant\/20 text-xs font-label uppercase tracking-wider\"\n                        >Paid amplification across platforms<\/span\n>\n                      <span\n                        class=\"px-4 py-2 bg-surface-variant\/40 rounded-DEFAULT border border-outline-variant\/20 text-xs font-label uppercase tracking-wider\"\n                        >Continuous creative testing<\/span\n>\n                      <span\n                        class=\"px-4 py-2 bg-surface-variant\/40 rounded-DEFAULT border border-outline-variant\/20 text-xs font-label uppercase tracking-wider\"\n                        >Data feedback loops<\/span\n>\n                      <span\n                        class=\"px-4 py-2 bg-surface-variant\/40 rounded-DEFAULT border border-outline-variant\/20 text-xs font-label uppercase tracking-wider\"\n                        >Business metrics: intent, leads, revenue<\/span\n>\n                    <\/div>\n                  <\/div>\n                  <div\n                    class=\"relative w-full aspect-[4\/3] overflow-hidden rounded-lg\"\n                  >\n                    <img decoding=\"async\"\n                      class=\"absolute inset-0 w-full h-full object-cover opacity-60 transition-all duration-700\"\n                      alt=\"Performance amplification and optimisation\"\n                      src=\"https:\/\/datarevolt.startweb.ro\/wp-content\/uploads\/2026\/04\/PE.jpg\"\n                    \/>\n                    <div\n                      class=\"absolute inset-0 bg-gradient-to-t from-surface-container-low via-transparent to-transparent\"\n                    ><\/div>\n                  <\/div>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n          <!-- end LEFT col -->\n        <\/div>\n        <!-- RIGHT: Sticky intro -->\n        <div class=\"order-1 lg:order-2 lg:sticky lg:top-24\">\n          <div class=\"flex gap-6 items-stretch\">\n            <div class=\"s2-data-trace self-stretch\"><\/div>\n            <div>\n              <div class=\"w-16 h-[2px] bg-primary mb-6\"><\/div>\n              <h2\n                class=\"font-headline text-4xl lg:text-6xl font-extrabold text-white tracking-tighter leading-tight mb-8\"\n              >\n                The Content <br \/>Growth System\n              <\/h2>\n              <p class=\"text-lg leading-relaxed text-on-surface-variant\">\n                Social Media doesn\u2019t fail because of creativity. It fails\n                because creativity is disconnected from data and amplification.\n                Our model connects\n                <span class=\"text-white font-bold\">Data, Creative<\/span> and\n                <span class=\"text-white font-bold\">Performance<\/span> into a\n                single growth system.\n              <\/p>\n            <\/div>\n          <\/div>\n        <\/div>\n        <!-- end RIGHT col -->\n      <\/div>\n      <!-- Scrolling Client Band -->\n      <div\n        class=\"w-full bg-[#930001] border-y border-white\/20 py-5 overflow-hidden relative\"\n      >\n        <div\n          class=\"s2-scrolling-wrapper flex items-center gap-12 whitespace-nowrap\"\n        >\n          <img decoding=\"async\"\n            src=\"https:\/\/datarevolt.startweb.ro\/wp-content\/uploads\/2026\/04\/cbre_logo.png\"\n            alt=\"cbre_logo\"\n            class=\"max-h-[50px] w-auto object-contain\"\n          \/>\n          <img decoding=\"async\"\n            src=\"https:\/\/datarevolt.startweb.ro\/wp-content\/uploads\/2026\/04\/envisia_logo.png\"\n            alt=\"envisia_logo\"\n            class=\"max-h-[50px] w-auto object-contain\"\n          \/>\n          <img decoding=\"async\"\n            src=\"https:\/\/datarevolt.startweb.ro\/wp-content\/uploads\/2026\/04\/epic_logo-1.png\"\n            alt=\"epic_logo\"\n            class=\"max-h-[50px] w-auto object-contain\"\n          \/>\n          <img decoding=\"async\"\n            src=\"https:\/\/datarevolt.startweb.ro\/wp-content\/uploads\/2026\/04\/flanco-smart-discounter-logo-fascie-orizontal-RGB-fin01-01.png\"\n            alt=\"flanco_logo\"\n            class=\"max-h-[50px] w-auto object-contain\"\n          \/>\n          <img decoding=\"async\"\n            src=\"https:\/\/datarevolt.startweb.ro\/wp-content\/uploads\/2026\/04\/garnier_logo.png\"\n            alt=\"garnier_logo\"\n            class=\"max-h-[50px] w-auto object-contain\"\n          \/>\n          <img decoding=\"async\"\n            src=\"https:\/\/datarevolt.startweb.ro\/wp-content\/uploads\/2026\/04\/isopan_logo.png\"\n            alt=\"isopan_logo\"\n            class=\"max-h-[50px] w-auto object-contain\"\n          \/>\n          <img decoding=\"async\"\n            src=\"https:\/\/datarevolt.startweb.ro\/wp-content\/uploads\/2026\/04\/kera_logo.png\"\n            alt=\"kera_logo\"\n            class=\"max-h-[50px] w-auto object-contain\"\n          \/>\n          <img decoding=\"async\"\n            src=\"https:\/\/datarevolt.startweb.ro\/wp-content\/uploads\/2026\/04\/ldl_logo.png\"\n            alt=\"ldl_logo\"\n            class=\"max-h-[50px] w-auto object-contain\"\n          \/>\n          <img decoding=\"async\"\n            src=\"https:\/\/datarevolt.startweb.ro\/wp-content\/uploads\/2026\/04\/lp_logo.png\"\n            alt=\"lp_logo\"\n            class=\"max-h-[50px] w-auto object-contain\"\n          \/>\n          <img decoding=\"async\"\n            src=\"https:\/\/datarevolt.startweb.ro\/wp-content\/uploads\/2026\/04\/matrix_logo.png\"\n            alt=\"matrix_logo\"\n            class=\"max-h-[50px] w-auto object-contain\"\n          \/>\n          <img decoding=\"async\"\n            src=\"https:\/\/datarevolt.startweb.ro\/wp-content\/uploads\/2026\/04\/maybelline_logo.png\"\n            alt=\"maybelline_logo\"\n            class=\"max-h-[50px] w-auto object-contain\"\n          \/>\n          <img decoding=\"async\"\n            src=\"https:\/\/datarevolt.startweb.ro\/wp-content\/uploads\/2026\/04\/megagen_logo.png\"\n            alt=\"megagen_logo\"\n            class=\"max-h-[50px] w-auto object-contain\"\n          \/>\n          <img decoding=\"async\"\n            src=\"https:\/\/datarevolt.startweb.ro\/wp-content\/uploads\/2026\/04\/mixa_logo.png\"\n            alt=\"mixa_logo\"\n            class=\"max-h-[50px] w-auto object-contain\"\n          \/>\n          <img decoding=\"async\"\n            src=\"https:\/\/datarevolt.startweb.ro\/wp-content\/uploads\/2026\/04\/primo_logo.png\"\n            alt=\"primo_logo\"\n            class=\"max-h-[50px] w-auto object-contain\"\n          \/>\n          <img decoding=\"async\"\n            src=\"https:\/\/datarevolt.startweb.ro\/wp-content\/uploads\/2026\/04\/redken_logo.png\"\n            alt=\"redken_logo\"\n            class=\"max-h-[50px] w-auto object-contain\"\n          \/>\n          <img decoding=\"async\"\n            src=\"https:\/\/datarevolt.startweb.ro\/wp-content\/uploads\/2026\/04\/redport_logo.png\"\n            alt=\"redport_logo\"\n            class=\"max-h-[50px] w-auto object-contain\"\n          \/>\n          <img decoding=\"async\"\n            src=\"https:\/\/datarevolt.startweb.ro\/wp-content\/uploads\/2026\/04\/sema-home_logo.png\"\n            alt=\"sema-home_logo\"\n            class=\"max-h-[50px] w-auto object-contain\"\n          \/>\n          <!-- Loop -->\n          <img decoding=\"async\"\n            src=\"https:\/\/datarevolt.startweb.ro\/wp-content\/uploads\/2026\/04\/cbre_logo.png\"\n            alt=\"cbre_logo\"\n            class=\"max-h-[50px] w-auto object-contain\"\n          \/>\n          <img decoding=\"async\"\n            src=\"https:\/\/datarevolt.startweb.ro\/wp-content\/uploads\/2026\/04\/envisia_logo.png\"\n            alt=\"envisia_logo\"\n            class=\"max-h-[50px] w-auto object-contain\"\n          \/>\n          <img decoding=\"async\"\n            src=\"https:\/\/datarevolt.startweb.ro\/wp-content\/uploads\/2026\/04\/epic_logo-1.png\"\n            alt=\"epic_logo\"\n            class=\"max-h-[50px] w-auto object-contain\"\n          \/>\n          <img decoding=\"async\"\n            src=\"https:\/\/datarevolt.startweb.ro\/wp-content\/uploads\/2026\/04\/flanco-smart-discounter-logo-fascie-orizontal-RGB-fin01-01.png\"\n            alt=\"flanco_logo\"\n            class=\"max-h-[50px] w-auto object-contain\"\n          \/>\n          <img decoding=\"async\"\n            src=\"https:\/\/datarevolt.startweb.ro\/wp-content\/uploads\/2026\/04\/garnier_logo.png\"\n            alt=\"garnier_logo\"\n            class=\"max-h-[50px] w-auto object-contain\"\n          \/>\n          <img decoding=\"async\"\n            src=\"https:\/\/datarevolt.startweb.ro\/wp-content\/uploads\/2026\/04\/isopan_logo.png\"\n            alt=\"isopan_logo\"\n            class=\"max-h-[50px] w-auto object-contain\"\n          \/>\n          <img decoding=\"async\"\n            src=\"https:\/\/datarevolt.startweb.ro\/wp-content\/uploads\/2026\/04\/kera_logo.png\"\n            alt=\"kera_logo\"\n            class=\"max-h-[50px] w-auto object-contain\"\n          \/>\n          <img decoding=\"async\"\n            src=\"https:\/\/datarevolt.startweb.ro\/wp-content\/uploads\/2026\/04\/ldl_logo.png\"\n            alt=\"ldl_logo\"\n            class=\"max-h-[50px] w-auto object-contain\"\n          \/>\n          <img decoding=\"async\"\n            src=\"https:\/\/datarevolt.startweb.ro\/wp-content\/uploads\/2026\/04\/lp_logo.png\"\n            alt=\"lp_logo\"\n            class=\"max-h-[50px] w-auto object-contain\"\n          \/>\n          <img decoding=\"async\"\n            src=\"https:\/\/datarevolt.startweb.ro\/wp-content\/uploads\/2026\/04\/matrix_logo.png\"\n            alt=\"matrix_logo\"\n            class=\"max-h-[50px] w-auto object-contain\"\n          \/>\n          <img decoding=\"async\"\n            src=\"https:\/\/datarevolt.startweb.ro\/wp-content\/uploads\/2026\/04\/maybelline_logo.png\"\n            alt=\"maybelline_logo\"\n            class=\"max-h-[50px] w-auto object-contain\"\n          \/>\n          <img decoding=\"async\"\n            src=\"https:\/\/datarevolt.startweb.ro\/wp-content\/uploads\/2026\/04\/megagen_logo.png\"\n            alt=\"megagen_logo\"\n            class=\"max-h-[50px] w-auto object-contain\"\n          \/>\n          <img decoding=\"async\"\n            src=\"https:\/\/datarevolt.startweb.ro\/wp-content\/uploads\/2026\/04\/mixa_logo.png\"\n            alt=\"mixa_logo\"\n            class=\"max-h-[50px] w-auto object-contain\"\n          \/>\n          <img decoding=\"async\"\n            src=\"https:\/\/datarevolt.startweb.ro\/wp-content\/uploads\/2026\/04\/primo_logo.png\"\n            alt=\"primo_logo\"\n            class=\"max-h-[50px] w-auto object-contain\"\n          \/>\n          <img decoding=\"async\"\n            src=\"https:\/\/datarevolt.startweb.ro\/wp-content\/uploads\/2026\/04\/redken_logo.png\"\n            alt=\"redken_logo\"\n            class=\"max-h-[50px] w-auto object-contain\"\n          \/>\n          <img decoding=\"async\"\n            src=\"https:\/\/datarevolt.startweb.ro\/wp-content\/uploads\/2026\/04\/redport_logo.png\"\n            alt=\"redport_logo\"\n            class=\"max-h-[50px] w-auto object-contain\"\n          \/>\n          <img decoding=\"async\"\n            src=\"https:\/\/datarevolt.startweb.ro\/wp-content\/uploads\/2026\/04\/sema-home_logo.png\"\n            alt=\"sema-home_logo\"\n            class=\"max-h-[50px] w-auto object-contain\"\n          \/>\n        <\/div>\n      <\/div>\n    <\/section>\n\n    <!-- ============================================================ -->\n    <!-- SECTION 3 \u2014 THE GROWTH CAPABILITIES                          -->\n    <!-- ============================================================ -->\n    <section id=\"capabilities\" class=\"section-3 relative overflow-hidden\">\n      <div class=\"max-w-[1440px] mx-auto px-6\">\n        <!-- Header -->\n        <header class=\"mb-8 max-w-4xl relative\">\n          <div class=\"absolute -left-6 top-0 h-full s3-data-trace\"><\/div>\n          <h2\n            class=\"font-headline text-4xl lg:text-6xl font-extrabold text-white tracking-tighter leading-tight mb-6\"\n          >\n            The Growth Capabilities\n          <\/h2>\n          <p\n            class=\"text-on-surface-variant text-xl md:text-2xl leading-relaxed font-light max-w-2xl\"\n          >\n            Social Media sits at the center of a fully integrated growth system\n            to drive measurable business outcomes.\n          <\/p>\n        <\/header>\n        <!-- 3 fixed columns \u2014 opening a card only stretches its own column -->\n        <div class=\"grid grid-cols-1 md:grid-cols-3 gap-4 items-start\">\n          <div class=\"flex flex-col gap-4\">\n            <!-- Card 1 -->\n            <article\n              data-expandable\n class=\"s3-glass-card border border-outline-variant\/20 p-8 flex flex-col group relative\"\n            >\n              <span\n                data-expand-chevron\n class=\"material-symbols-outlined text-primary\/70 absolute top-6 right-6\"\n                >expand_more<\/span\n>\n              <span\n                class=\"material-symbols-outlined text-primary mb-6 text-3xl\"\n                style=\"font-variation-settings: &quot;FILL&quot; 1\"\n                >architecture<\/span\n>\n              <h3 class=\"font-headline text-xl font-bold text-white pr-10\">\n                Communication Strategy &amp; Growth Architecture\n              <\/h3>\n              <div data-expand-body>\n                <div>\n                  <p class=\"text-on-surface-variant mb-8 max-w-md pt-4\">\n                    We design the architecture behind content-driven growth.\n                  <\/p>\n                  <ul\n                    class=\"grid grid-cols-1 sm:grid-cols-2 gap-y-3 gap-x-6 border-t border-outline-variant\/10 pt-6\"\n                  >\n                    <li\n                      class=\"flex items-start gap-2 text-xs font-label uppercase tracking-widest text-on-surface-variant\/80\"\n                    >\n                      <span\n                        class=\"w-1.5 h-1.5 bg-primary\/40 rounded-full flex-shrink-0 mt-[5px]\"\n                      ><\/span>\n                      Business-driven communication strategy\n                    <\/li>\n                    <li\n                      class=\"flex items-start gap-2 text-xs font-label uppercase tracking-widest text-on-surface-variant\/80\"\n                    >\n                      <span\n                        class=\"w-1.5 h-1.5 bg-primary\/40 rounded-full flex-shrink-0 mt-[5px]\"\n                      ><\/span>\n                      Customer journey mapping\n                    <\/li>\n                    <li\n                      class=\"flex items-start gap-2 text-xs font-label uppercase tracking-widest text-on-surface-variant\/80\"\n                    >\n                      <span\n                        class=\"w-1.5 h-1.5 bg-primary\/40 rounded-full flex-shrink-0 mt-[5px]\"\n                      ><\/span>\n                      Content funnel design\n                    <\/li>\n                    <li\n                      class=\"flex items-start gap-2 text-xs font-label uppercase tracking-widest text-on-surface-variant\/80\"\n                    >\n                      <span\n                        class=\"w-1.5 h-1.5 bg-primary\/40 rounded-full flex-shrink-0 mt-[5px]\"\n                      ><\/span>\n                      Campaign &amp; platform architecture\n                    <\/li>\n                  <\/ul>\n                <\/div>\n              <\/div>\n            <\/article>\n            <!-- Card 4 -->\n            <article\n              data-expandable\n class=\"s3-glass-card border border-outline-variant\/20 p-8 flex flex-col group overflow-hidden relative\"\n            >\n              <div\n                class=\"absolute -right-4 top-0 opacity-10 group-hover:opacity-20 transition-opacity\"\n              >\n                <span\n                  class=\"material-symbols-outlined text-[120px]\"\n                  style=\"font-variation-settings: &quot;FILL&quot; 1\"\n                  >analytics<\/span\n>\n              <\/div>\n              <span\n                data-expand-chevron\n class=\"material-symbols-outlined text-primary\/70 absolute top-6 right-6 z-20\"\n                >expand_more<\/span\n>\n              <span\n                class=\"material-symbols-outlined text-primary mb-6 text-3xl relative z-10\"\n                >monitoring<\/span\n>\n              <h3\n                class=\"font-headline text-xl font-bold text-white pr-10 relative z-10\"\n              >\n                DATA &amp; Social Signals\n              <\/h3>\n              <div data-expand-body class=\"relative z-10\">\n                <div>\n                  <p class=\"text-on-surface-variant text-sm mb-6 pt-4\">\n                    We connect Social Media activity to business impact.\n                  <\/p>\n                  <ul class=\"space-y-2 pt-4 border-t border-outline-variant\/10\">\n                    <li\n                      class=\"text-[10px] font-label uppercase tracking-wider text-on-surface-variant\/70 flex items-start gap-2\"\n                    >\n                      <span\n                        class=\"w-1 h-1 bg-primary\/60 rounded-full flex-shrink-0 mt-[5px]\"\n                      ><\/span>\n                      <span>UTM-based tracking infrastructure<\/span>\n                    <\/li>\n                    <li\n                      class=\"text-[10px] font-label uppercase tracking-wider text-on-surface-variant\/70 flex items-start gap-2\"\n                    >\n                      <span\n                        class=\"w-1 h-1 bg-primary\/60 rounded-full flex-shrink-0 mt-[5px]\"\n                      ><\/span>\n                      <span>Custom reports<\/span>\n                    <\/li>\n                    <li\n                      class=\"text-[10px] font-label uppercase tracking-wider text-on-surface-variant\/70 flex items-start gap-2\"\n                    >\n                      <span\n                        class=\"w-1 h-1 bg-primary\/60 rounded-full flex-shrink-0 mt-[5px]\"\n                      ><\/span>\n                      <span\n                        >Monthly reporting vanity metrics with business\n                        indicators<\/span\n>\n                    <\/li>\n                  <\/ul>\n                <\/div>\n              <\/div>\n            <\/article>\n          <\/div>\n          <div class=\"flex flex-col gap-4\">\n            <!-- Card 2 -->\n            <article\n              data-expandable\n class=\"s3-glass-card border border-outline-variant\/20 p-8 flex flex-col group relative\"\n            >\n              <span\n                data-expand-chevron\n class=\"material-symbols-outlined text-primary\/70 absolute top-6 right-6\"\n                >expand_more<\/span\n>\n              <span class=\"material-symbols-outlined text-primary mb-6 text-3xl\"\n                >precision_manufacturing<\/span\n>\n              <h3 class=\"font-headline text-xl font-bold text-white pr-10\">\n                Creative Engineering &amp; Production\n              <\/h3>\n              <div data-expand-body>\n                <div>\n                  <p class=\"text-on-surface-variant text-sm mb-6 pt-4\">\n                    Content designed for stopping power and scalable campaigns.\n                  <\/p>\n                  <ul class=\"space-y-2 pt-4 border-t border-outline-variant\/10\">\n                    <li\n                      class=\"text-[10px] font-label uppercase tracking-wider text-on-surface-variant\/70 flex items-center gap-2\"\n                    >\n                      <span class=\"w-1 h-1 bg-primary\/60 rounded-full\"><\/span>\n                      Short-form videos\n                    <\/li>\n                    <li\n                      class=\"text-[10px] font-label uppercase tracking-wider text-on-surface-variant\/70 flex items-center gap-2\"\n                    >\n                      <span class=\"w-1 h-1 bg-primary\/60 rounded-full\"><\/span>\n                      Motion systems\n                    <\/li>\n                    <li\n                      class=\"text-[10px] font-label uppercase tracking-wider text-on-surface-variant\/70 flex items-center gap-2\"\n                    >\n                      <span class=\"w-1 h-1 bg-primary\/60 rounded-full\"><\/span>\n                      Visual storytelling\n                    <\/li>\n                    <li\n                      class=\"text-[10px] font-label uppercase tracking-wider text-on-surface-variant\/70 flex items-center gap-2\"\n                    >\n                      <span class=\"w-1 h-1 bg-primary\/60 rounded-full\"><\/span>\n                      Creative assets built for amplification\n                    <\/li>\n                  <\/ul>\n                <\/div>\n              <\/div>\n            <\/article>\n            <!-- Card 5 -->\n            <article\n              data-expandable\n class=\"s3-glass-card border border-outline-variant\/20 p-8 flex flex-col group relative\"\n            >\n              <span\n                data-expand-chevron\n class=\"material-symbols-outlined text-primary\/70 absolute top-6 right-6\"\n                >expand_more<\/span\n>\n              <span class=\"material-symbols-outlined text-primary mb-6 text-3xl\"\n                >rocket_launch<\/span\n>\n              <h3 class=\"font-headline text-xl font-bold text-white pr-10\">\n                Integrated Performance Amplification\n              <\/h3>\n              <div data-expand-body>\n                <div>\n                  <div class=\"flex flex-col gap-6 pt-4\">\n                    <div class=\"flex flex-col gap-4\">\n                      <p class=\"text-on-surface-variant text-sm\">\n                        Content doesn\u2019t stop at publishing. It becomes campaigns\n                        through performance media.\n                      <\/p>\n                    <\/div>\n                    <div\n                      class=\"bg-surface-container-highest\/40 p-6 rounded-lg flex flex-col gap-4 border border-white\/5\"\n                    >\n                      <ul class=\"space-y-3\">\n                        <li\n                          class=\"text-[10px] font-label uppercase tracking-wider text-on-surface-variant\/80 flex items-start gap-2\"\n                        >\n                          <span\n                            class=\"w-1 h-1 bg-primary rounded-full flex-shrink-0 mt-[5px]\"\n                          ><\/span>\n                          <span>Paid social campaigns<\/span>\n                        <\/li>\n                        <li\n                          class=\"text-[10px] font-label uppercase tracking-wider text-on-surface-variant\/80 flex items-start gap-2\"\n                        >\n                          <span\n                            class=\"w-1 h-1 bg-primary rounded-full flex-shrink-0 mt-[5px]\"\n                          ><\/span>\n                          <span>Creative testing frameworks<\/span>\n                        <\/li>\n                        <li\n                          class=\"text-[10px] font-label uppercase tracking-wider text-on-surface-variant\/80 flex items-start gap-2\"\n                        >\n                          <span\n                            class=\"w-1 h-1 bg-primary rounded-full flex-shrink-0 mt-[5px]\"\n                          ><\/span>\n                          <span>Audience expansion<\/span>\n                        <\/li>\n                        <li\n                          class=\"text-[10px] font-label uppercase tracking-wider text-on-surface-variant\/80 flex items-start gap-2\"\n                        >\n                          <span\n                            class=\"w-1 h-1 bg-primary rounded-full flex-shrink-0 mt-[5px]\"\n                          ><\/span>\n                          <span>Scaling high-performing assets<\/span>\n                        <\/li>\n                      <\/ul>\n                    <\/div>\n                  <\/div>\n                <\/div>\n              <\/div>\n            <\/article>\n          <\/div>\n          <div class=\"flex flex-col gap-4\">\n            <!-- Card 3 -->\n            <article\n              data-expandable\n class=\"s3-glass-card border border-outline-variant\/20 p-8 flex flex-col group relative\"\n            >\n              <span\n                data-expand-chevron\n class=\"material-symbols-outlined text-primary\/70 absolute top-6 right-6\"\n                >expand_more<\/span\n>\n              <span class=\"material-symbols-outlined text-primary mb-6 text-3xl\"\n                >groups_3<\/span\n>\n              <h3 class=\"font-headline text-xl font-bold text-white pr-10\">\n                Influencer &amp; Creator Campaigns\n              <\/h3>\n              <div data-expand-body>\n                <div>\n                  <p class=\"text-on-surface-variant text-sm mb-6 pt-4\">\n                    Building credibility through creator partnerships.\n                  <\/p>\n                  <ul class=\"space-y-2 pt-4 border-t border-outline-variant\/10\">\n                    <li\n                      class=\"text-[10px] font-label uppercase tracking-wider text-on-surface-variant\/70 flex items-center gap-2\"\n                    >\n                      <span class=\"w-1 h-1 bg-primary\/60 rounded-full\"><\/span>\n                      Influencer strategy\n                    <\/li>\n                    <li\n                      class=\"text-[10px] font-label uppercase tracking-wider text-on-surface-variant\/70 flex items-center gap-2\"\n                    >\n                      <span class=\"w-1 h-1 bg-primary\/60 rounded-full\"><\/span>\n                      Creator collaborations\n                    <\/li>\n                    <li\n                      class=\"text-[10px] font-label uppercase tracking-wider text-on-surface-variant\/70 flex items-center gap-2\"\n                    >\n                      <span class=\"w-1 h-1 bg-primary\/60 rounded-full\"><\/span>\n                      Campaign orchestration\n                    <\/li>\n                    <li\n                      class=\"text-[10px] font-label uppercase tracking-wider text-on-surface-variant\/70 flex items-center gap-2\"\n                    >\n                      <span class=\"w-1 h-1 bg-primary\/60 rounded-full\"><\/span>\n                      Performance-driven influencer content\n                    <\/li>\n                  <\/ul>\n                <\/div>\n              <\/div>\n            <\/article>\n            <!-- Card 6 -->\n            <article\n              data-expandable\n class=\"s3-glass-card border border-outline-variant\/20 p-8 flex flex-col group relative\"\n            >\n              <span\n                data-expand-chevron\n class=\"material-symbols-outlined text-primary\/70 absolute top-6 right-6\"\n                >expand_more<\/span\n>\n              <span class=\"material-symbols-outlined text-primary mb-6 text-3xl\"\n                >search_insights<\/span\n>\n              <h3 class=\"font-headline text-xl font-bold text-white pr-10\">\n                Social Search &amp; SEO Engine\n              <\/h3>\n              <div data-expand-body>\n                <div>\n                  <p class=\"text-on-surface-variant text-sm mb-6 pt-4\">\n                    Visibility where modern search behaviour happens.\n                  <\/p>\n                  <ul class=\"space-y-2 pt-4 border-t border-outline-variant\/10\">\n                    <li\n                      class=\"text-[10px] font-label uppercase tracking-wider text-on-surface-variant\/70 flex items-start gap-2\"\n                    >\n                      <span\n                        class=\"w-1 h-1 bg-primary\/60 rounded-full flex-shrink-0 mt-[5px]\"\n                      ><\/span>\n                      <span>SEO-driven content<\/span>\n                    <\/li>\n                    <li\n                      class=\"text-[10px] font-label uppercase tracking-wider text-on-surface-variant\/70 flex items-start gap-2\"\n                    >\n                      <span\n                        class=\"w-1 h-1 bg-primary\/60 rounded-full flex-shrink-0 mt-[5px]\"\n                      ><\/span>\n                      <span>Search intent integration<\/span>\n                    <\/li>\n                    <li\n                      class=\"text-[10px] font-label uppercase tracking-wider text-on-surface-variant\/70 flex items-start gap-2\"\n                    >\n                      <span\n                        class=\"w-1 h-1 bg-primary\/60 rounded-full flex-shrink-0 mt-[5px]\"\n                      ><\/span>\n                      <span\n                        >Content aligned with platform discovery\n                        algorithms<\/span\n>\n                    <\/li>\n                  <\/ul>\n                <\/div>\n              <\/div>\n            <\/article>\n          <\/div>\n        <\/div>\n        <!-- Connecting Decorator -->\n        <div class=\"mt-8 flex justify-center items-center gap-4 opacity-20\">\n          <div\n            class=\"h-px w-24 bg-gradient-to-r from-transparent to-primary\"\n          ><\/div>\n          <div\n            class=\"w-2 h-2 rounded-full bg-primary shadow-[0_0_8px_#ffb4a8]\"\n          ><\/div>\n          <div\n            class=\"h-px w-24 bg-gradient-to-l from-transparent to-primary\"\n          ><\/div>\n        <\/div>\n      <\/div>\n    <\/section>\n\n    <!-- ============================================================ -->\n    <!-- SECTION 5 \u2014 PROOF OF WORK                                    -->\n    <!-- ============================================================ -->\n    <section\n      id=\"work\"\n      class=\"section-5 relative overflow-hidden\"\n      style=\"background-color: #070808\"\n    >\n      <div class=\"absolute inset-0 s5-noise-overlay\"><\/div>\n      <!-- Evidence -->\n      <div class=\"relative w-full px-8 md:px-16 py-12\">\n        <!-- Header -->\n        <div class=\"relative z-20 mb-8\">\n          <h2\n            class=\"font-headline text-4xl lg:text-6xl font-extrabold text-white tracking-tighter leading-tight max-w-2xl\"\n          >\n            Proof of Work\n          <\/h2>\n        <\/div>\n        <!-- Wall Gallery \u2014 drag\/swipe horizontal -->\n        <div\n          id=\"s5-wall\"\n          class=\"s5-wall relative w-full mx-auto select-none\"\n          style=\"max-width: min(92vw, 1800px); overflow: hidden\"\n        >\n          <button\n            type=\"button\"\n            data-wall-prev\n aria-label=\"Previous\"\n            class=\"hidden md:flex absolute left-4 top-1\/2 -translate-y-1\/2 z-30 w-12 h-12 rounded-full bg-black\/60 backdrop-blur border border-white\/10 text-white items-center justify-center hover:bg-black\/80 transition-colors\"\n          >\n            <span class=\"material-symbols-outlined\">chevron_left<\/span>\n          <\/button>\n          <button\n            type=\"button\"\n            data-wall-next\n aria-label=\"Next\"\n            class=\"hidden md:flex absolute right-4 top-1\/2 -translate-y-1\/2 z-30 w-12 h-12 rounded-full bg-black\/60 backdrop-blur border border-white\/10 text-white items-center justify-center hover:bg-black\/80 transition-colors\"\n          >\n            <span class=\"material-symbols-outlined\">chevron_right<\/span>\n          <\/button>\n          <div\n            data-wall-track\n class=\"s5-wall-track overflow-x-auto overflow-y-hidden cursor-grab active:cursor-grabbing\"\n          >\n            <div class=\"s5-strip\">\n              <img decoding=\"async\"\n                class=\"s5-slide\"\n                draggable=\"false\"\n                src=\"https:\/\/datarevolt.startweb.ro\/wp-content\/uploads\/2026\/04\/image-1.jpg\"\n                alt=\"Post\u0103ri site 1\"\n              \/>\n              <img decoding=\"async\"\n                class=\"s5-slide\"\n                draggable=\"false\"\n                src=\"https:\/\/datarevolt.startweb.ro\/wp-content\/uploads\/2026\/04\/image-2.jpg\"\n                alt=\"Post\u0103ri site 2\"\n              \/>\n              <img decoding=\"async\"\n                class=\"s5-slide\"\n                draggable=\"false\"\n                src=\"https:\/\/datarevolt.startweb.ro\/wp-content\/uploads\/2026\/04\/image-3.jpg\"\n                alt=\"Post\u0103ri site 3\"\n              \/>\n              <img decoding=\"async\"\n                class=\"s5-slide\"\n                draggable=\"false\"\n                src=\"https:\/\/datarevolt.startweb.ro\/wp-content\/uploads\/2026\/04\/image-4.jpg\"\n                alt=\"Post\u0103ri site 4\"\n              \/>\n            <\/div>\n          <\/div>\n        <\/div>\n        <style>\n          #s5-wall .s5-wall-track::-webkit-scrollbar {\n            display: none;\n          }\n\n          #s5-wall .s5-wall-track {\n            scrollbar-width: none;\n            -ms-overflow-style: none;\n          }\n\n          #s5-wall .s5-wall-track img {\n            -webkit-user-drag: none;\n            -webkit-touch-callout: none;\n            user-select: none;\n          }\n\n          \/* Continuous strip \u2014 flush together, fixed height, width derived from aspect ratio *\/\n          .s5-strip {\n            display: flex;\n            gap: 0;\n            width: max-content;\n          }\n\n          .s5-slide {\n            height: clamp(640px, 95vh, 1080px);\n            width: auto;\n            display: block;\n            flex-shrink: 0;\n          }\n\n          @media (max-width: 768px) {\n            .s5-slide {\n              height: clamp(480px, 70vh, 680px);\n            }\n          }\n        <\/style>\n      <\/div>\n      <!-- Scrolling Band -->\n      <div\n        class=\"relative z-50 py-5 bg-[#930001] border-y border-white\/20 overflow-hidden\"\n      >\n        <div class=\"flex whitespace-nowrap s5-mask-fade\">\n          <div class=\"flex s5-animate-scroll gap-12 items-center\">\n            <span\n              class=\"text-white font-headline text-xl md:text-2xl font-light tracking-tight uppercase\"\n              >For too long, Social Media has been treated as an extension of\n              the \u201creal\u201d performance channels. We chose to change that.<\/span\n>\n            <span\n              class=\"text-white font-headline text-xl md:text-2xl font-light tracking-tight uppercase\"\n              >For too long, Social Media has been treated as an extension of\n              the \u201creal\u201d performance channels. We chose to change that.<\/span\n>\n            <span\n              class=\"text-white font-headline text-xl md:text-2xl font-light tracking-tight uppercase\"\n              >For too long, Social Media has been treated as an extension of\n              the \u201creal\u201d performance channels. We chose to change that.<\/span\n>\n          <\/div>\n          <div class=\"flex s5-animate-scroll gap-12 items-center\">\n            <span\n              class=\"text-white font-headline text-xl md:text-2xl font-light tracking-tight uppercase\"\n              >For too long, Social Media has been treated as an extension of\n              the \u201creal\u201d performance channels. We chose to change that.<\/span\n>\n            <span\n              class=\"text-white font-headline text-xl md:text-2xl font-light tracking-tight uppercase\"\n              >For too long, Social Media has been treated as an extension of\n              the \u201creal\u201d performance channels. We chose to change that.<\/span\n>\n            <span\n              class=\"text-white font-headline text-xl md:text-2xl font-light tracking-tight uppercase\"\n              >For too long, Social Media has been treated as an extension of\n              the \u201creal\u201d performance channels. We chose to change that.<\/span\n>\n          <\/div>\n        <\/div>\n      <\/div>\n      <!-- The Vault section \u2014 ELIMINATED per feedback -->\n    <\/section>\n\n    <!-- ============================================================ -->\n    <!-- SECTION 4 \u2014 STACK \/ FROM PERFORMANCE TO BUSINESS IMPACT      -->\n    <!-- ============================================================ -->\n    <section id=\"stack\" class=\"section-4 py-16 px-8\">\n      <div class=\"max-w-7xl mx-auto\">\n        <!-- Header -->\n        <header class=\"mb-12 max-w-3xl relative\">\n          <div class=\"absolute -left-6 top-2 w-[2px] h-16 bg-primary\"><\/div>\n          <h2\n            class=\"font-headline text-4xl lg:text-6xl font-extrabold text-white tracking-tighter leading-tight mb-6\"\n          >\n            From Social Media performance to business impact\n          <\/h2>\n          <p\n            class=\"text-on-surface-variant text-xl md:text-2xl leading-relaxed font-light max-w-2xl\"\n          >\n            We measure Social Media where it matters: inside the business\n            ecosystem.\n          <\/p>\n        <\/header>\n        <!-- Tools Stack Grid \u2014 aligned via subgrid -->\n        <div\n          class=\"s4-stack-grid grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-6\"\n        >\n          <!-- Card 1 -->\n          <article class=\"group cursor-pointer\">\n            <div\n              class=\"relative overflow-hidden aspect-[4\/3] bg-surface-container-low\"\n            >\n              <img decoding=\"async\"\n                alt=\"Social Demand\"\n                class=\"w-full h-full object-cover transition-transform duration-500 group-hover:scale-110\"\n                src=\"https:\/\/datarevolt.startweb.ro\/wp-content\/uploads\/2026\/04\/Social-Demand.png\"\n              \/>\n            <\/div>\n            <h3\n              class=\"text-2xl font-bold text-white font-headline transition-colors group-hover:text-primary\"\n            >\n              Social Demand\n            <\/h3>\n            <p class=\"text-on-surface-variant text-sm leading-relaxed\">\n              A custom report that aligns Social Media with real commercial\n              demand.\n            <\/p>\n            <ul class=\"space-y-3\">\n              <li class=\"flex items-start gap-3\">\n                <span\n                  class=\"material-symbols-outlined text-primary text-[14px] mt-1\"\n                  style=\"font-variation-settings: &quot;FILL&quot; 1\"\n                  >circle<\/span\n><span class=\"text-xs text-on-surface-variant\/80 font-medium\"\n                  >Identification of high-potential product categories<\/span\n>\n              <\/li>\n              <li class=\"flex items-start gap-3\">\n                <span\n                  class=\"material-symbols-outlined text-primary text-[14px] mt-1\"\n                  style=\"font-variation-settings: &quot;FILL&quot; 1\"\n                  >circle<\/span\n><span class=\"text-xs text-on-surface-variant\/80 font-medium\"\n                  >Content prioritization based on demand signals<\/span\n>\n              <\/li>\n            <\/ul>\n          <\/article>\n          <!-- Card 2 -->\n          <article class=\"group cursor-pointer\">\n            <div\n              class=\"relative overflow-hidden aspect-[4\/3] bg-surface-container-low\"\n            >\n              <img decoding=\"async\"\n                alt=\"Social Contribution\"\n                class=\"w-full h-full object-cover transition-transform duration-500 group-hover:scale-110\"\n                src=\"https:\/\/datarevolt.startweb.ro\/wp-content\/uploads\/2026\/04\/Social-Contribution.png\"\n              \/>\n            <\/div>\n            <h3\n              class=\"text-2xl font-bold text-white font-headline transition-colors group-hover:text-primary\"\n            >\n              Social Contribution\n            <\/h3>\n            <p class=\"text-on-surface-variant text-sm leading-relaxed\">\n              Understanding how Social Media drives revenue across the customer\n              journey.\n            <\/p>\n            <ul class=\"space-y-3\">\n              <li class=\"flex items-start gap-3\">\n                <span\n                  class=\"material-symbols-outlined text-primary text-[14px] mt-1\"\n                  style=\"font-variation-settings: &quot;FILL&quot; 1\"\n                  >circle<\/span\n><span class=\"text-xs text-on-surface-variant\/80 font-medium\"\n                  >Mapping Social Media touchpoints across the funnel<\/span\n>\n              <\/li>\n              <li class=\"flex items-start gap-3\">\n                <span\n                  class=\"material-symbols-outlined text-primary text-[14px] mt-1\"\n                  style=\"font-variation-settings: &quot;FILL&quot; 1\"\n                  >circle<\/span\n><span class=\"text-xs text-on-surface-variant\/80 font-medium\"\n                  >Contribution analysis in the purchase path<\/span\n>\n              <\/li>\n              <li class=\"flex items-start gap-3\">\n                <span\n                  class=\"material-symbols-outlined text-primary text-[14px] mt-1\"\n                  style=\"font-variation-settings: &quot;FILL&quot; 1\"\n                  >circle<\/span\n><span class=\"text-xs text-on-surface-variant\/80 font-medium\"\n                  >Measurement of the average customer journey<\/span\n>\n              <\/li>\n            <\/ul>\n          <\/article>\n          <!-- Card 3 -->\n          <article class=\"group cursor-pointer\">\n            <div\n              class=\"relative overflow-hidden aspect-[4\/3] bg-surface-container-low\"\n            >\n              <img decoding=\"async\"\n                alt=\"Social Performance\"\n                class=\"w-full h-full object-cover transition-transform duration-500 group-hover:scale-110\"\n                src=\"https:\/\/datarevolt.startweb.ro\/wp-content\/uploads\/2026\/04\/Social-Performance.png\"\n              \/>\n            <\/div>\n            <h3\n              class=\"text-2xl font-bold text-white font-headline transition-colors group-hover:text-primary\"\n            >\n              Social Performance\n            <\/h3>\n            <p class=\"text-on-surface-variant text-sm leading-relaxed\">\n              A unified view of Social Media performance.\n            <\/p>\n            <ul class=\"space-y-3\">\n              <li class=\"flex items-start gap-3\">\n                <span\n                  class=\"material-symbols-outlined text-primary text-[14px] mt-1\"\n                  style=\"font-variation-settings: &quot;FILL&quot; 1\"\n                  >circle<\/span\n><span class=\"text-xs text-on-surface-variant\/80 font-medium\"\n                  >Connecting Social Media performance signals with commercial\n                  objectives<\/span\n>\n              <\/li>\n              <li class=\"flex items-start gap-3\">\n                <span\n                  class=\"material-symbols-outlined text-primary text-[14px] mt-1\"\n                  style=\"font-variation-settings: &quot;FILL&quot; 1\"\n                  >circle<\/span\n><span class=\"text-xs text-on-surface-variant\/80 font-medium\"\n                  >Identifying how content contributes to revenue-driving\n                  actions<\/span\n>\n              <\/li>\n              <li class=\"flex items-start gap-3\">\n                <span\n                  class=\"material-symbols-outlined text-primary text-[14px] mt-1\"\n                  style=\"font-variation-settings: &quot;FILL&quot; 1\"\n                  >circle<\/span\n><span class=\"text-xs text-on-surface-variant\/80 font-medium\"\n                  >Turning platform data into actionable business insights<\/span\n>\n              <\/li>\n            <\/ul>\n          <\/article>\n          <!-- Card 4 -->\n          <article class=\"group cursor-pointer\">\n            <div\n              class=\"relative overflow-hidden aspect-[4\/3] bg-surface-container-low\"\n            >\n              <img decoding=\"async\"\n                alt=\"Social Tracking Framework\"\n                class=\"w-full h-full object-cover transition-transform duration-500 group-hover:scale-110\"\n                src=\"https:\/\/datarevolt.startweb.ro\/wp-content\/uploads\/2026\/04\/Social-Tracking.png\"\n              \/>\n            <\/div>\n            <h3\n              class=\"text-2xl font-bold text-white font-headline transition-colors group-hover:text-primary\"\n            >\n              Social Tracking Framework\n            <\/h3>\n            <p class=\"text-on-surface-variant text-sm leading-relaxed\">\n              Every piece of content is connected to the data ecosystem.\n            <\/p>\n            <ul class=\"space-y-3\">\n              <li class=\"flex items-start gap-3\">\n                <span\n                  class=\"material-symbols-outlined text-primary text-[14px] mt-1\"\n                  style=\"font-variation-settings: &quot;FILL&quot; 1\"\n                  >circle<\/span\n><span class=\"text-xs text-on-surface-variant\/80 font-medium\"\n                  >Standardized UTM structure<\/span\n>\n              <\/li>\n              <li class=\"flex items-start gap-3\">\n                <span\n                  class=\"material-symbols-outlined text-primary text-[14px] mt-1\"\n                  style=\"font-variation-settings: &quot;FILL&quot; 1\"\n                  >circle<\/span\n><span class=\"text-xs text-on-surface-variant\/80 font-medium\"\n                  >Tracking across editorial pillars, formats and\n                  audiences<\/span\n>\n              <\/li>\n              <li class=\"flex items-start gap-3\">\n                <span\n                  class=\"material-symbols-outlined text-primary text-[14px] mt-1\"\n                  style=\"font-variation-settings: &quot;FILL&quot; 1\"\n                  >circle<\/span\n><span class=\"text-xs text-on-surface-variant\/80 font-medium\"\n                  >Integration with GA4 events and campaigns<\/span\n>\n              <\/li>\n            <\/ul>\n          <\/article>\n        <\/div>\n      <\/div>\n    <\/section>\n\n    <!-- ============================================================ -->\n    <!-- SECTION 6 \u2014 CTA \/ CONTACT                                    -->\n    <!-- ============================================================ -->\n    <section id=\"contact\" class=\"section-6 relative\">\n      <!-- High-Impact Conversion -->\n      <div\n        class=\"relative w-full py-14 md:py-20 px-8 flex flex-col items-center text-center overflow-hidden bg-[#070808]\"\n      >\n        <div\n          class=\"absolute left-1\/2 -translate-x-1\/2 top-0 w-[1px] h-16 bg-gradient-to-b from-primary\/40 to-transparent\"\n        ><\/div>\n        <div class=\"absolute inset-0 s6-noise-overlay\"><\/div>\n        <div class=\"max-w-4xl relative z-10\">\n          <h2\n            class=\"font-headline text-4xl lg:text-6xl font-extrabold text-white tracking-tighter leading-tight mb-8\"\n          >\n            Let\u2019s build a different kind of Social Media for your business\n          <\/h2>\n          <div class=\"flex flex-col items-center gap-6\">\n            <button\n              class=\"group relative px-10 py-5 bg-gradient-to-r from-[#930001] to-[#9A0101] text-white rounded-lg font-label font-bold uppercase tracking-[0.15em] text-sm transition-all duration-300 transform hover:scale-[1.03] active:scale-95 s6-cta-glow\"\n            >\n              <span class=\"relative z-10 flex items-center gap-3\">\n                Start a conversation\n                <span\n                  class=\"material-symbols-outlined text-xl group-hover:translate-x-1 transition-transform\"\n                  >arrow_forward<\/span\n>\n              <\/span>\n            <\/button>\n            <p\n              class=\"font-label text-xs uppercase tracking-[0.2em] text-[#A9A6AF] font-medium opacity-80\"\n            >\n              We only send ideas worth reading.\n            <\/p>\n          <\/div>\n        <\/div>\n        <div\n          class=\"absolute bottom-0 left-1\/2 -translate-x-1\/2 w-full max-w-2xl h-64 bg-primary-container\/10 blur-[120px] rounded-full -z-10\"\n        ><\/div>\n      <\/div>\n      <!-- Asymmetric Block \u2014 ELIMINATED per feedback (not in sheet) -->\n    <\/section>\n  <\/main>\n\n  <script>\n    \/\/ Video Modal (Hero)\n    (function () {\n      var modal = document.getElementById(\"videoModal\");\n      var btn = document.getElementById(\"openVideo\");\n      var closeBtn = document.querySelector(\".close-modal\");\n      var placeholder = document.getElementById(\"player-placeholder\");\n      var ytEmbed =\n        '<video width=\"100%\" height=\"100%\" src=\"https:\/\/datarevolt.startweb.ro\/wp-content\/uploads\/2026\/04\/ALT-Social-Data-Revolt-Ad-02.mp4\" autoplay muted loop playsinline controls><\/video>';\n      if (btn && modal) {\n        btn.onclick = function () {\n          modal.style.display = \"flex\";\n          placeholder.innerHTML = ytEmbed;\n        };\n        closeBtn.onclick = function () {\n          modal.style.display = \"none\";\n          placeholder.innerHTML = \"\";\n        };\n        window.addEventListener(\"click\", function (event) {\n          if (event.target == modal) {\n            modal.style.display = \"none\";\n            placeholder.innerHTML = \"\";\n          }\n        });\n      }\n    })();\n\n    \/\/ Accordion (Methodology) \u2014 auto-cycle with progress bar\n    (function () {\n      var group = document.querySelector(\"[data-accordion-group]\");\n      if (!group) return;\n      var items = Array.prototype.slice.call(\n        group.querySelectorAll(\"[data-accordion]\"),\n      );\n      if (!items.length) return;\n\n      var DURATION = 6000; \/\/ 6s per card\n      var TICK = 50; \/\/ progress refresh interval\n      var current = 0;\n      var elapsed = 0;\n      var timer = null;\n      var manual = false; \/\/ stops auto-cycle once user clicks\n\n      function bar(item) {\n        return item.querySelector(\".accordion-progress-bar\");\n      }\n\n      function setActive(idx, resetProgress) {\n        items.forEach(function (it, i) {\n          if (i === idx) {\n            it.setAttribute(\"data-open\", \"\");\n          } else {\n            it.removeAttribute(\"data-open\");\n            var b = bar(it);\n            if (b) b.style.width = \"0%\";\n          }\n        });\n        current = idx;\n        if (resetProgress) {\n          elapsed = 0;\n          var b = bar(items[current]);\n          if (b) b.style.width = \"0%\";\n        }\n      }\n\n      function tick() {\n        elapsed += TICK;\n        var pct = Math.min(100, (elapsed \/ DURATION) * 100);\n        var b = bar(items[current]);\n        if (b) b.style.width = pct + \"%\";\n        if (elapsed >= DURATION) {\n          setActive((current + 1) % items.length, true);\n        }\n      }\n\n      function start() {\n        stop();\n        timer = setInterval(tick, TICK);\n      }\n\n      function stop() {\n        if (timer) {\n          clearInterval(timer);\n          timer = null;\n        }\n      }\n\n      \/\/ Manual click handlers \u2014 stop auto-cycle, just toggle\n      items.forEach(function (item, i) {\n        var header = item.querySelector(\"[data-accordion-header]\");\n        if (!header) return;\n        header.addEventListener(\"click\", function () {\n          if (!manual) {\n            manual = true;\n            stop();\n          }\n          var isOpen = item.hasAttribute(\"data-open\");\n          items.forEach(function (it) {\n            it.removeAttribute(\"data-open\");\n            var b = bar(it);\n            if (b) b.style.width = \"0%\";\n          });\n          if (!isOpen) item.setAttribute(\"data-open\", \"\");\n        });\n      });\n\n      \/\/ Init: open first, start cycle\n      setActive(0, true);\n      start();\n\n      \/\/ Pause when section is offscreen (saves CPU + keeps user from missing cards)\n      if (\"IntersectionObserver\" in window) {\n        var section = document.getElementById(\"methodology\");\n        if (section) {\n          new IntersectionObserver(\n            function (entries) {\n              entries.forEach(function (e) {\n                if (manual) return;\n                if (e.isIntersecting) start();\n                else stop();\n              });\n            },\n            { threshold: 0.2 },\n          ).observe(section);\n        }\n      }\n    })();\n\n    \/\/ Capabilities cards (Section 3) \u2014 click to expand\/collapse\n    document\n      .querySelectorAll(\".section-3 [data-expandable]\")\n      .forEach(function (card) {\n        card.addEventListener(\"click\", function (e) {\n          if (e.target.closest(\"a\")) return; \/\/ let inner links work\n          card.toggleAttribute(\"data-open\");\n        });\n      });\n\n    \/\/ Wall gallery \u2014 drag to scroll with momentum + prev\/next buttons\n    (function () {\n      var wall = document.getElementById(\"s5-wall\");\n      if (!wall) return;\n      var track = wall.querySelector(\"[data-wall-track]\");\n      var prev = wall.querySelector(\"[data-wall-prev]\");\n      var next = wall.querySelector(\"[data-wall-next]\");\n      var DRAG_MULT = 1.4; \/\/ snappier than 1:1\n      var isDown = false,\n        startX = 0,\n        startScroll = 0,\n        moved = 0;\n      var lastX = 0,\n        lastT = 0,\n        velocity = 0;\n      var rafPending = false,\n        pendingScroll = 0;\n      var momentumRaf = null;\n\n      function applyScroll() {\n        rafPending = false;\n        track.scrollLeft = pendingScroll;\n      }\n\n      function stopMomentum() {\n        if (momentumRaf) {\n          cancelAnimationFrame(momentumRaf);\n          momentumRaf = null;\n        }\n      }\n\n      track.addEventListener(\"mousedown\", function (e) {\n        stopMomentum();\n        isDown = true;\n        moved = 0;\n        startX = lastX = e.pageX;\n        startScroll = track.scrollLeft;\n        lastT = performance.now();\n        velocity = 0;\n        e.preventDefault();\n      });\n      track.addEventListener(\"dragstart\", function (e) {\n        e.preventDefault();\n      });\n\n      document.addEventListener(\"mousemove\", function (e) {\n        if (!isDown) return;\n        e.preventDefault();\n        var now = performance.now();\n        var dx = e.pageX - startX;\n        moved = Math.abs(dx);\n        pendingScroll = startScroll - dx * DRAG_MULT;\n        if (!rafPending) {\n          rafPending = true;\n          requestAnimationFrame(applyScroll);\n        }\n        \/\/ velocity in px\/ms (positive when moving left \u2192 scroll right)\n        var dt = Math.max(1, now - lastT);\n        velocity = (e.pageX - lastX) \/ dt;\n        lastX = e.pageX;\n        lastT = now;\n      });\n\n      document.addEventListener(\"mouseup\", function () {\n        if (!isDown) return;\n        isDown = false;\n        \/\/ momentum: glide for a bit using last velocity\n        var v = velocity * DRAG_MULT * 16; \/\/ per-frame px (~60fps)\n        if (Math.abs(v) < 0.5) return;\n        function step() {\n          track.scrollLeft -= v;\n          v *= 0.93; \/\/ friction\n          if (Math.abs(v) > 0.3) momentumRaf = requestAnimationFrame(step);\n          else momentumRaf = null;\n        }\n        momentumRaf = requestAnimationFrame(step);\n      });\n\n      \/\/ Touch support \u2014 let native scrolling handle it (already smooth on mobile)\n\n      \/\/ Prevent click-through after a drag\n      track.addEventListener(\n        \"click\",\n        function (e) {\n          if (moved > 5) {\n            e.preventDefault();\n            e.stopPropagation();\n          }\n        },\n        true,\n      );\n\n      function step(dir) {\n        stopMomentum();\n        track.scrollBy({\n          left: dir * Math.max(400, track.clientWidth * 0.7),\n          behavior: \"smooth\",\n        });\n      }\n      if (prev)\n        prev.addEventListener(\"click\", function () {\n          step(-1);\n        });\n      if (next)\n        next.addEventListener(\"click\", function () {\n          step(1);\n        });\n    })();\n\n    \/\/ Equal visual scroll speed: each wrapper translates -50%, so per cycle\n    \/\/ it travels scrollWidth \/ 2. duration = distance \/ target px\/s.\n    (function () {\n      var TARGET_PX_PER_SEC = 120;\n      var FAST_PX_PER_SEC = 260;\n      var selectors =\n        \".s1-animate-scroll, .s2-scrolling-wrapper, .s5-animate-scroll\";\n      function speedFor(el) {\n        return el.classList.contains(\"s2-scrolling-wrapper\")\n          ? FAST_PX_PER_SEC\n          : TARGET_PX_PER_SEC;\n      }\n      function sync() {\n        document.querySelectorAll(selectors).forEach(function (el) {\n          var distance = el.scrollWidth \/ 2;\n          if (!distance) return;\n          el.style.animationDuration =\n            (distance \/ speedFor(el)).toFixed(2) + \"s\";\n        });\n      }\n      if (document.readyState === \"complete\") sync();\n      else window.addEventListener(\"load\", sync);\n      window.addEventListener(\"resize\", sync);\n      \/\/ Re-sync once each image inside a band finishes loading,\n      \/\/ since scrollWidth depends on rendered image widths.\n      document.querySelectorAll(selectors).forEach(function (el) {\n        el.querySelectorAll(\"img\").forEach(function (img) {\n          if (img.complete) return;\n          img.addEventListener(\"load\", sync);\n          img.addEventListener(\"error\", sync);\n        });\n      });\n    })();\n  <\/script>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\"><\/p>","protected":false},"excerpt":{"rendered":"<p>&#9654; We&#8217;re We engineer Social Media for business growth. See how we work arrow_forward Or start a conversation \u2192 Content that performs. Data that proves. Growth that lasts. Content that performs. Data that proves. Growth that lasts. Content that performs. Data that proves. Growth that lasts. Content that performs. Data that proves. Growth that lasts. [&hellip;]<\/p>","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-7138","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/datarevolt.startweb.ro\/ro\/wp-json\/wp\/v2\/pages\/7138","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/datarevolt.startweb.ro\/ro\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/datarevolt.startweb.ro\/ro\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/datarevolt.startweb.ro\/ro\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/datarevolt.startweb.ro\/ro\/wp-json\/wp\/v2\/comments?post=7138"}],"version-history":[{"count":1,"href":"https:\/\/datarevolt.startweb.ro\/ro\/wp-json\/wp\/v2\/pages\/7138\/revisions"}],"predecessor-version":[{"id":7593,"href":"https:\/\/datarevolt.startweb.ro\/ro\/wp-json\/wp\/v2\/pages\/7138\/revisions\/7593"}],"wp:attachment":[{"href":"https:\/\/datarevolt.startweb.ro\/ro\/wp-json\/wp\/v2\/media?parent=7138"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}