PageSourceSearch

https://www.loudecho.ai/publisher.html

html loudecho.ai collected 2026-10-04 13:25:25 UTC 65,539 bytes, 1,599 lines download raw bytes

1<!DOCTYPE html>
2<html data-wf-page="685993b84dfb0c8223ab8730" data-wf-site="685993b84dfb0c8223ab8731" lang="en">
3<head>
4  <!-- TEMPORARILY DISABLED: Termly CMP resource-blocker (revert by removing this comment line and the matching END marker below) -->
5  <!--
6  
6<script src="https://app.termly.io/resource-blocker/86fda7d3-620c-4f15-ae52-783a81f6278c"></script>
6
7  -->
8  <!-- END TEMPORARILY DISABLED -->
9
10  <!-- Google Tag Manager -->
11  
11<script>
vendor: 335 bytes, lines 11-15
11(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
12  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
13  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
14  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
15  })(window,document,'script','dataLayer','
15GTM-5HPGQ6BV
vendor: 3 bytes, line 15
15');
15</script>
15
16  <!-- End Google Tag Manager -->
17
18  <!-- Loud Echo Tracing -->
19  
19<script type="text/javascript" src="https://cs.loudecho.ai/tracing/0135257900050009?traffic=web&gdpr_consent={gdpr_consent}&coppa={coppa}" async></script>
19
20  
21  <meta charset="utf-8">
22  <title>LoudEcho - Publishers</title>
23  <meta name="viewport" content="width=device-width, initial-scale=1">
24  <link href="css/normalize.css" rel="stylesheet" type="text/css">
25  <link href="css/webflow.css" rel="stylesheet" type="text/css">
26  <link href="css/teza-site-7c043be9c4a9ef118dd2e4c06aee9.webflow.css" rel="stylesheet" type="text/css">
27  <link href="https://fonts.googleapis.com" rel="preconnect">
28  <link href="https://fonts.gstatic.com" rel="preconnect" crossorigin="anonymous">
29  
29<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script>
29
30  
30<script type="text/javascript">WebFont.load({  google: {    families: ["Montserrat:100,100italic,200,200italic,300,300italic,400,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic","Droid Serif:400,400italic,700,700italic","Taviraj:100,100italic,200,200italic,300,300italic,regular,italic,500,500italic,600,600italic","EB Garamond:regular,500,600,700,800,italic,500italic,600italic,700italic,800italic","Pixelify Sans:regular,500,600,700","Space Grotesk:300,regular,500,600,700","Space Mono:regular,italic,700,700italic","Instrument Sans:regular,500,600,700,italic,500italic,600italic,700italic","Instrument Serif:regular,italic","DM Sans:100,200,300,regular,500,600,700,800,900"]  }});</script>
30
31  
31<script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script>
31
32  <link href="images/favicon.png" rel="shortcut icon" type="image/x-icon">
33  <link href="images/webclip.png" rel="apple-touch-icon">
34  <style>
35    .section.page {
36      font-family: 'Instrument Serif', serif !important;
37      min-height: calc(100vh - 120px); /* Account for navbar height */
38      margin-bottom: 0;
39    }
40    .section.page p, .section.page li, .section.page td, .section.page th {
41      font-family: 'Instrument Serif', serif !important;
42      line-height: 1.6;
43    }
44    .section.page h1, .section.page h2, .section.page h3 {
45      font-family: 'Instrument Serif', serif !important;
46    }
47    
48    /* Responsive design */
49    @media screen and (max-width: 768px) {
50      .section.page {
51        max-width: 95%;
52        margin: 40px auto 20px auto;
53        padding: 20px 16px;
54        min-height: calc(100vh - 100px);
55      }
56      .section.page h1 {
57        font-size: 2.5em !important;
58        line-height: 1.2 !important;
59      }
60      .section.page h2 {
61        font-size: 1.5em;
62      }
63      .section.page h3 {
64        font-size: 1.2em;
65      }
66      .section.page p {
67        font-size: 1.2em !important;
68        line-height: 1.5 !important;
69      }
70    }
71    
72    @media screen and (max-width: 480px) {
73      .section.page {
74        max-width: 98%;
75        margin: 30px auto 15px auto;
76        padding: 15px 12px;
77        min-height: calc(100vh - 80px);
78      }
79      .section.page h1 {
80        font-size: 1.8em !important;
81        line-height: 1.2 !important;
82      }
83      .section.page h2 {
84        font-size: 1.3em;
85      }
86      .section.page h3 {
87        font-size: 1.1em;
88      }
89      .section.page p {
90        font-size: 1.1em !important;
91        line-height: 1.4 !important;
92      }
93    }
94    
95    /* Ensure page ends where content ends */
96    body {
97      margin: 0;
98      padding: 0;
99      min-height: 100vh;
100    }
101    
102    /* Remove any default margins/padding */
103    .section.page {
104      margin-bottom: 0;
105      padding-bottom: 40px;
106    }
107    
108    /* Stepper circles: white fill, darkest purple text */
109    .feature-navigation-serial {
110      background-color: #fff !important;
111      border: 1px solid #ffffff1a !important;
112      color: #7c3aed !important;
113    }
114    
115    /* Default desktop hero text display */
116    .desktop-hero {
117      display: block !important;
118    }
119
120    .mobile-hero {
121      display: none !important;
122    }
123    
124    /* Mobile hero text display */
125    @media screen and (max-width: 480px) {
126      .desktop-hero {
127        display: none !important;
128      }
129      
130      .mobile-hero {
131        display: block !important;
132      }
133      
134      /* Mobile hero subtitle smaller */
135      .body.dm {
136        font-size: 1rem !important;
137        line-height: 1.5 !important;
138      }
139    }
140    
141    /* Loading spinner animation */
142    @keyframes spin {
143      0% { transform: rotate(0deg); }
144      100% { transform: rotate(360deg); }
145    }
146    
147    /* Pop out animation */
148    @keyframes popOut {
149      0% {
150        transform: scale(1) translateY(0);
151        box-shadow: 0 4px 20px rgba(0,0,0,0.1);
152      }
153      100% {
154        transform: scale(1.15) translateY(-20px);
155        box-shadow: 0 30px 60px rgba(0,0,0,0.4);
156      }
157    }
158    
159    /* Pop back in animation */
160    @keyframes popIn {
161      0% {
162        transform: scale(1.15) translateY(-20px);
163        box-shadow: 0 30px 60px rgba(0,0,0,0.4);
164      }
165      100% {
166        transform: scale(1) translateY(0);
167        box-shadow: 0 4px 20px rgba(0,0,0,0.1);
168      }
169    }
170    
171    /* Confetti animation */
172    @keyframes confettiFall {
173      0% {
174        transform: translateY(0) translateX(0) rotate(0deg) scale(1);
175        opacity: 1;
176      }
177      100% {
178        transform: translateY(150px) translateX(var(--drift, 0px)) rotate(720deg) scale(0.5);
179        opacity: 0;
180      }
181    }
182    
183    .confetti-piece {
184      position: absolute;
185      pointer-events: none;
186    }
187    
188    #ad-container {
189      transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.6s ease;
190    }
191    
192    #ad-container.popped-out {
193      transform: scale(1.15) translateY(-20px);
194      box-shadow: 0 30px 60px rgba(0,0,0,0.4);
195      z-index: 100;
196    }
197    
198    #ad-container.popped-in {
199      transform: scale(1) translateY(0);
200      box-shadow: 0 4px 20px rgba(0,0,0,0.1);
201    }
202    
203    /* Mobile menu styles */
204    .mobile-nav {
205      display: none;
206    }
207    
208    #mobile-menu-toggle {
209      display: none;
210    }
211    
212    @media screen and (max-width: 1100px) {
213      .desktop-nav {
214        display: none !important;
215      }
216      
217      .mobile-nav {
218        display: flex !important;
219        align-items: center;
220      }
221      
222      #mobile-menu-toggle {
223        display: flex !important;
224        visibility: visible !important;
225        opacity: 1 !important;
226      }
227    }
228    
229    @media screen and (min-width: 1101px) {
230      .desktop-nav {
231        display: flex !important;
232      }
233      
234      .mobile-nav {
235        display: none !important;
236      }
237      
238      #mobile-menu-toggle {
239        display: none !important;
240      }
241      
242      #mobile-menu {
243        display: none !important;
244      }
245    }
246    
247    /* Mobile menu positioning */
248    #mobile-menu {
249      display: none;
250      position: fixed;
251      top: 60px;
252      left: 0;
253      right: 0;
254      background: #fff;
255      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
256      z-index: 1000;
257      padding: 20px;
258      transform: translateY(-100%);
259      opacity: 0;
260      transition: transform 0.3s ease, opacity 0.3s ease;
261      max-height: calc(100vh - 60px);
262      overflow-y: auto;
263    }
264    
265    /* Mobile menu open state */
266    #mobile-menu.menu-open {
267      display: block !important;
268      transform: translateY(0) !important;
269      opacity: 1 !important;
270    }
271    
272    /* Hamburger icon animation */
273    #mobile-menu-toggle.menu-open .menu-line:nth-child(1) {
274      transform: rotate(45deg) translate(6px, 6px);
275    }
276    
277    #mobile-menu-toggle.menu-open .menu-line:nth-child(2) {
278      opacity: 0;
279    }
280    
281    #mobile-menu-toggle.menu-open .menu-line:nth-child(3) {
282      transform: rotate(-45deg) translate(6px, -6px);
283    }
284    
285    /* Article content - mobile news page responsive styles */
286    #article-content,
287    .article-content-grid {
288      transition: all 0.3s ease;
289    }
290    
291    /* Tablet breakpoint - stack vertically */
292    @media screen and (max-width: 991px) {
293      #article-content,
294      .article-content-grid {
295        display: flex !important;
296        flex-direction: column !important;
297        grid-template-columns: none !important;
298        gap: 24px !important;
299      }
300      
301      .article-headline {
302        font-size: 36px !important;
303        line-height: 1.15 !important;
304      }
305      
306      .article-ad-sidebar {
307        width: 100% !important;
308        max-width: 320px !important;
309        margin: 0 auto !important;
310      }
311    }
312    
313    /* Mobile breakpoint - true mobile news layout */
314    @media screen and (max-width: 768px) {
315      /* Website mockup container */
316      .website-mockup {
317        margin: 40px 16px !important;
318        max-width: calc(100% - 32px) !important;
319      }
320      
321      /* Browser chrome - smaller padding */
322      .browser-chrome {
323        padding: 10px 12px !important;
324      }
325      
326      /* Content area - tighter padding */
327      .browser-content {
328        padding: 20px 16px !important;
329        min-height: 400px !important;
330      }
331      
332      /* News header - mobile style */
333      .news-header {
334        margin-bottom: 16px !important;
335        padding-bottom: 12px !important;
336        flex-wrap: wrap !important;
337      }
338      
339      .news-title {
340        font-size: 20px !important;
341      }
342      
343      #article-content,
344      .article-content-grid {
345        display: flex !important;
346        flex-direction: column-reverse !important;
347        grid-template-columns: none !important;
348        gap: 20px !important;
349      }
350      
351      /* Ad goes above article on mobile (using column-reverse makes ad appear first visually) */
352      .article-ad-sidebar {
353        width: 100% !important;
354        max-width: 100% !important;
355        margin-bottom: 8px !important;
356        display: flex !important;
357        flex-direction: column !important;
358        align-items: center !important;
359      }
360      
361      /* Ad images - mobile centered format */
362      .article-ad-sidebar img {
363        max-width: 300px !important;
364        width: 100% !important;
365        margin: 0 auto !important;
366        display: block !important;
367      }
368      
369      /* Loader component on mobile */
370      #loader-component {
371        justify-content: center !important;
372        width: 100% !important;
373      }
374      
375      /* Article title - mobile news headline style */
376      .article-headline {
377        font-size: 28px !important;
378        line-height: 1.2 !important;
379        margin-bottom: 16px !important;
380        font-weight: 400 !important;
381      }
382      
383      /* Placeholder text lines - tighter spacing */
384      .article-placeholder-text {
385        margin-top: 16px !important;
386      }
387      
388      .placeholder-line {
389        height: 10px !important;
390        margin-bottom: 8px !important;
391      }
392      
393      .placeholder-line.paragraph-break {
394        margin-bottom: 16px !important;
395      }
396    }
397    
398    /* Extra small mobile - ultra compact mobile news app style */
399    @media screen and (max-width: 480px) {
400      /* Even tighter browser mockup */
401      .website-mockup {
402        margin: 20px 8px !important;
403        max-width: calc(100% - 16px) !important;
404      }
405      
406      .browser-chrome {
407        padding: 8px 10px !important;
408        border-radius: 8px 8px 0 0 !important;
409      }
410      
411      /* Browser dots - smaller */
412      .browser-dot {
413        width: 8px !important;
414        height: 8px !important;
415      }
416      
417      .browser-dot > div {
418        border-radius: 50% !important;
419      }
420      
421      /* URL bar - compact for small screens */
422      .url-bar {
423        padding: 2px 12px !important;
424        height: 26px !important;
425      }
426      
427      .url-text {
428        font-size: 11px !important;
429        white-space: nowrap;
430        overflow: hidden;
431        text-overflow: ellipsis;
432        max-width: 150px;
433        display: inline-block;
434      }
435      
436      .url-bar svg {
437        width: 12px !important;
438        height: 12px !important;
439      }
440      
441      /* Content area */
442      .browser-content {
443        padding: 16px 12px !important;
444        border-radius: 0 0 8px 8px !important;
445        min-height: 350px !important;
446      }
447      
448      /* News header - compact */
449      .news-title {
450        font-size: 16px !important;
451      }
452      
453      #article-content,
454      .article-content-grid {
455        gap: 16px !important;
456      }
457      
458      /* Mobile ad - responsive banner style like real mobile news */
459      .article-ad-sidebar img {
460        max-width: 100% !important;
461        border-radius: 6px !important;
462      }
463      
464      /* Headline - proper mobile news app size */
465      .article-headline {
466        font-size: 22px !important;
467        line-height: 1.25 !important;
468        letter-spacing: -0.01em !important;
469        margin-bottom: 12px !important;
470      }
471      
472      /* Placeholder lines - mobile article paragraph style */
473      .placeholder-line {
474        height: 8px !important;
475        margin-bottom: 6px !important;
476        border-radius: 4px !important;
477      }
478      
479      .placeholder-line.paragraph-break {
480        margin-bottom: 14px !important;
481      }
482    }
483    
484    /* Ultra small screens (iPhone SE, older devices) */
485    @media screen and (max-width: 375px) {
486      .website-mockup {
487        margin: 16px 4px !important;
488        max-width: calc(100% - 8px) !important;
489      }
490      
491      .browser-content {
492        padding: 12px 10px !important;
493      }
494      
495      .article-headline {
496        font-size: 20px !important;
497        line-height: 1.2 !important;
498      }
499      
500      .news-title {
501        font-size: 14px !important;
502      }
503    }
504    
505    /* Toggle button responsive - prevent logo cutoff on mobile */
506    @media screen and (max-width: 480px) {
507      #ad-toggle-container > div {
508        flex-wrap: wrap !important;
509        justify-content: center !important;
510        gap: 4px !important;
511      }
512      
513      #toggle-before,
514      #toggle-after {
515        padding: 8px 12px !important;
516        font-size: 12px !important;
517        gap: 4px !important;
518      }
519      
520      #toggle-before img,
521      #toggle-after img {
522        height: 12px !important;
523      }
524    }
525    
526    @media screen and (max-width: 360px) {
527      #toggle-before,
528      #toggle-after {
529        padding: 6px 10px !important;
530        font-size: 11px !important;
531      }
532      
533      #toggle-before img,
534      #toggle-after img {
535        height: 10px !important;
536      }
537    }
538    
539    /* Force body to allow full-width elements */
540    html, body {
541      overflow-x: clip !important;
542      max-width: 100vw !important;
543    }
544    
545    /* Footer styling */
546    .section-footer {
547      width: 100vw !important;
548      margin-left: calc(-50vw + 50%);
549      box-sizing: border-box;
550      overflow: hidden;
551      position: relative;
552      padding-top: 40px !important;
553    }
554
555    /* Ensure footer content is properly contained */
556    .footer-content {
557      max-width: 100%;
558      margin: 0 auto;
559      padding: 40px 20px 20px 20px;
560      display: flex;
561      flex-direction: column;
562      justify-content: flex-start !important;
563      position: relative;
564      min-height: 800px;
565      row-gap: clamp(18px, 3vw, 36px) !important;
566    }
567
568    /* Footer CTA + spacing */
569    .bottom, .bottom-2 {
570      position: relative;
571      z-index: 2;
572    }
573
574    .content-style-8 .heading-6 {
575      position: relative;
576      z-index: 1;
577    }
578
579    .content-style-8 .heading-6 img {
580      display: block;
581      position: relative;
582      z-index: 1;
583    }
584
585    .content-style-8 {
586      position: relative;
587      row-gap: clamp(14px, 2vw, 24px) !important;
588    }
589
590    .content-style-8 .heading-5 {
591      row-gap: clamp(10px, 1.5vw, 18px) !important;
592    }
593
594    .content-style-8 .form-block-2._3 {
595      margin: 0 !important;
596    }
597
598    .content-style-8 .form-block-2._3 .button-alternative.smalll.position.new {
599      float: none !important;
600      position: static !important;
601      top: auto !important;
602      right: auto !important;
603      margin: 0 !important;
604    }
605
606    .content-style-8 .bottom-2 {
607      margin-top: 0 !important;
608    }
609
610    @media screen and (min-width: 768px) {
611      .content-style-8 .form-block-2._3 {
612        margin: 16px 0 0;
613      }
614
615      .content-style-8 .form-block-2._3 .button-alternative.smalll.position.new {
616        float: none;
617        top: 0;
618        right: auto;
619      }
620
621      .footer-content > .bottom {
622        position: relative;
623        top: auto;
624        left: auto;
625        right: auto;
626        margin-top: 20px;
627        z-index: 3;
628      }
629    }
630
631    .button-alternative.new {
632      position: relative;
633      z-index: 2;
634    }
635
636    .footer-content>.bottom .text-23 {
637      color: #fff !important;
638      font-size: 16px !important;
639      font-weight: 700 !important;
640      line-height: 1.2 !important;
641    }
642
643    /* Footer background image only */
644    .footer-content {
645      background-image: url("images/footer-retro-cityscape.png") !important;
646      background-repeat: no-repeat !important;
647      background-position: center bottom !important;
648      background-size: cover !important;
649    }
650
651    /* Footer logo block */
652    .footer-logo-svg {
653      display: block !important;
654      width: 100%;
655      object-fit: contain;
656      object-position: center center;
657      margin-top: 0;
658      margin-bottom: 0;
659      padding-bottom: 0;
660    }
661
662    .footer-logo-desktop {
663      margin-top: auto !important;
664    }
665
666    /* Footer mobile stacked logo */
667    .footer-logo-mobile {
668      display: none !important;
669    }
670
671    @media screen and (max-width: 767px) {
672      .footer-logo-desktop {
673        display: none !important;
674      }
675      
676      .footer-logo-mobile {
677        display: block !important;
678        width: calc(100% - 40px) !important;
679        max-width: none !important;
680        max-height: none !important;
681        height: auto !important;
682        margin: 0 20px !important;
683        padding: 0 !important;
684        box-sizing: border-box !important;
685        transform: scale(2.8) !important;
686        transform-origin: center center !important;
687        margin-top: 120px !important;
688        margin-bottom: 100px !important;
689      }
690      
691      .footer-content {
692        overflow: hidden !important;
693        padding-bottom: 60px !important;
694      }
695    }
696    
697    @media screen and (max-width: 400px) {
698      .footer-logo-mobile {
699        transform: scale(2.2) !important;
700        margin-top: 90px !important;
701        margin-bottom: 80px !important;
702      }
703    }
704
705    .heading-8 {
706      position: absolute !important;
707      bottom: 20px;
708      left: 0;
709      right: 0;
710      display: flex !important;
711      justify-content: center;
712      align-items: flex-end;
713      width: 100%;
714      overflow: hidden;
715      margin: 0;
716      padding: 0;
717      z-index: 1;
718      font-size: 0 !important;
719      -webkit-text-fill-color: transparent !important;
720      background-image: none !important;
721      -webkit-background-clip: unset !important;
722      background-clip: unset !important;
723    }
724
725    /* Responsive sizing - scales continuously from desktop */
726    .footer-logo-svg {
727      max-height: min(26.8vw, 515px) !important;
728    }
729
730    .heading-8 {
731      height: calc(min(26.8vw, 515px) + 38px);
732    }
733
734    .footer-content {
735      min-height: calc(min(26.8vw, 515px) + 210px);
736    }
737
738    /* Mobile specific styles */
739    @media screen and (max-width: 767px) {
740      .footer-content {
741        padding: 30px 16px 36px 16px;
742        row-gap: 16px !important;
743      }
744
745      .content-style-8 {
746        position: static !important;
747        row-gap: 14px !important;
748      }
749
750      .content-style-8 .heading-5 {
751        row-gap: 10px !important;
752      }
753
754      .content-style-8 .bottom-2 .text-24 {
755        color: #fff !important;
756        font-size: 16px !important;
757        font-weight: 700 !important;
758        line-height: 1.2 !important;
759      }
760
761      .content-style-8 .bottom-2 {
762        position: absolute !important;
763        left: 16px;
764        right: 16px;
765        bottom: 16px;
766        width: auto !important;
767        margin-top: 0 !important;
768      }
769
770      .bottom, .bottom-2 {
771        margin-top: 1px !important;
772      }
773      
774      .button-alternative.new {
775        margin-top: 0px !important;
776      }
777      
778      .text-23[href*="youtube"] {
779        pointer-events: auto !important;
780        cursor: pointer !important;
781        -webkit-tap-highlight-color: rgba(0,0,0,0.1) !important;
782        touch-action: manipulation !important;
783      }
784    }
785    
786    /* Publisher hero styles - soft purple-white text on gradient */
787    #publisher-hero .heading-top,
788    #publisher-hero .body.dm {
789      color: #faf7ff !important;
790    }
791    
792    /* Publisher hero button - soft white bg, purple text */
793    #publisher-hero .button-alternative {
794      background: #faf7ff !important;
795      color: #7c3aed !important;
796      border-color: #faf7ff !important;
797    }
798    
799    #publisher-hero .button-alternative:hover {
800      background: #f0ebfa !important;
801    }
802    
803    /* Navbar hero mode - white text and logo */
804    .navbar.hero-mode {
805      background: transparent !important;
806      backdrop-filter: none !important;
807      -webkit-backdrop-filter: none !important;
808    }
809    
810    .navbar.hero-mode .block-navbar {
811      background: transparent !important;
812    }
813    
814    .navbar.hero-mode .navbar-glass-effect,
815    .navbar.hero-mode .navbar-glass-shine {
816      opacity: 0 !important;
817    }
818    
819    .navbar.hero-mode .link-2 {
820      color: #faf7ff !important;
821    }
822    
823    .navbar.hero-mode .nav-divider {
824      background: rgba(250,247,255,0.3) !important;
825    }
826    
827    .navbar.hero-mode .logo {
828      filter: brightness(0) invert(1) sepia(0.1) saturate(0.5);
829    }
830    
831    .navbar.hero-mode .button-alternative {
832      background: #faf7ff !important;
833      color: #7c3aed !important;
834      border-color: #faf7ff !important;
835    }
836    
837    .navbar.hero-mode .menu-line {
838      background: #faf7ff !important;
839    }
840    
841    /* Smooth transition for navbar color changes */
842    .navbar .link-2,
843    .navbar .logo,
844    .navbar .button-alternative,
845    .navbar .menu-line,
846    .navbar .nav-divider {
847      transition: all 0.3s ease;
848    }
849    
850    /* How it works section - dark text for light background */
851    #how-it-works .miniheading.light {
852      border-color: #141414;
853    }
854    #how-it-works .mini-header.light {
855      color: #141414;
856    }
857    #how-it-works .feature-navigation-serial {
858      color: #141414 !important;
859      background-color: #fff !important;
860      border: 1.5px solid #141414 !important;
861    }
862    #how-it-works .feature-navigation-title {
863      color: rgba(20, 20, 20, 0.5);
864    }
865    #how-it-works .feature-navigation-title.w--current {
866      color: #141414;
867    }
868    #how-it-works .core-feature-title {
869      color: #141414;
870    }
871    #how-it-works .core-feature-details {
872      color: #141414;
873    }
874    #how-it-works .core-feature-navigation-line {
875      background-color: rgba(20, 20, 20, 0.15);
876    }
877    #how-it-works .core-feature-inner-wrap.border {
878      border-bottom: none;
879    }
880    
881    /* Publisher hero subtitle wider */
882    #publisher-hero .block-top {
883      max-width: 1260px;
884    }
885    
886  </style>
887</head>
888<body class="body-5">
889  <!-- Google Tag Manager (noscript) -->
vendor: 70 bytes, lines 889-890
889
890  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=
890GTM-5HPGQ6BV
vendor: 87 bytes, lines 890-892
890"
891  height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
892  
892<!-- End Google Tag Manager (noscript) -->
893  <div data-w-id="729e5c8a-9ee6-25ff-6b5d-7f9e60f0e8f4" data-animation="default" data-collapse="all" data-duration="1000" data-easing="ease-in-out-quint" data-easing2="ease-in-out-quint" role="banner" class="navbar w-nav">
894    <div data-w-id="729e5c8a-9ee6-25ff-6b5d-7f9e60f0e8f5" class="block-navbar">
895      <div class="nav">
896        <a href="index.html" class="brand w-nav-brand"><div style="height: 16px;"></div><img src="images/loudecho-logo-1.png" loading="lazy"  alt="" class="logo"></a>
897      </div>
898      <div class="nav desktop-nav">
899        <div class="button-wrapper-3 _2">
900          <a href="index.html#what-we-do" class="link-2 nav-scroll-link">What we do</a>
901          <a href="index.html#how-it-works" class="link-2 nav-scroll-link">How it works</a>
902          <a href="index.html#safety" class="link-2 nav-scroll-link">Safety</a>
903          <a href="index.html#faq-section" class="link-2 nav-scroll-link">FAQ's</a>
904          <span class="nav-divider" style="width:1px;height:16px;background:rgba(0,0,0,0.2);margin:0 -10px;"></span>
905          <a href="publisher.html" class="link-2">I'm a publisher</a>
906          <span class="nav-divider" style="width:1px;height:16px;background:rgba(0,0,0,0.2);margin:0 -10px;"></span>
907          <a href="https://www.notion.so/sepana/LoudEcho-Careers-2cdbd939416a810b9665c26a95c89356" target="_blank" class="link-2">Careers</a>
908        </div>
909        <div class="button-wrapper-3">
910          <a href="#" class="button-alternative smalll w-button hs-cta-trigger-button hs-cta-trigger-button-204798812515">Get early access</a>
911        </div>
912      </div>
913      <!-- Mobile menu button -->
914      <div class="nav mobile-nav">
915        <button id="mobile-menu-toggle" class="mobile-menu-toggle" aria-label="Toggle menu" style="background:none;border:none;cursor:pointer;padding:8px;display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center;width:40px;height:40px;">
916          <span class="menu-line" style="width:24px;height:2.5px;background:#000;display:block;transition:all 0.3s ease;border-radius:2px;"></span>
917          <span class="menu-line" style="width:24px;height:2.5px;background:#000;display:block;transition:all 0.3s ease;border-radius:2px;"></span>
918          <span class="menu-line" style="width:24px;height:2.5px;background:#000;display:block;transition:all 0.3s ease;border-radius:2px;"></span>
919        </button>
920      </div>
921    </div>
922    <!-- Mobile dropdown menu -->
923    <div id="mobile-menu" class="mobile-menu">
924      <div style="display:flex;flex-direction:column;gap:16px;">
925        <a href="index.html" class="mobile-menu-link" style="font-family:'DM Sans',sans-serif;font-size:16px;font-weight:500;color:#222;text-decoration:none;padding:12px 0;border-bottom:1px solid #f1f2f9;">Home</a>
926        <a href="index.html#how-it-works" class="mobile-menu-link" style="font-family:'DM Sans',sans-serif;font-size:16px;font-weight:500;color:#222;text-decoration:none;padding:12px 0;border-bottom:1px solid #f1f2f9;">How it works</a>
927        <a href="index.html#safety" class="mobile-menu-link" style="font-family:'DM Sans',sans-serif;font-size:16px;font-weight:500;color:#222;text-decoration:none;padding:12px 0;border-bottom:1px solid #f1f2f9;">Safety</a>
928        <a href="index.html#faq-section" class="mobile-menu-link" style="font-family:'DM Sans',sans-serif;font-size:16px;font-weight:500;color:#222;text-decoration:none;padding:12px 0;border-bottom:1px solid #f1f2f9;">FAQ's</a>
929        <a href="publisher.html" class="mobile-menu-link" style="font-family:'DM Sans',sans-serif;font-size:16px;font-weight:500;color:#222;text-decoration:none;padding:12px 0;border-bottom:1px solid #f1f2f9;">I'm a publisher</a>
930        <a href="https://www.notion.so/sepana/LoudEcho-Careers-2cdbd939416a810b9665c26a95c89356" target="_blank" class="mobile-menu-link" style="font-family:'DM Sans',sans-serif;font-size:16px;font-weight:500;color:#222;text-decoration:none;padding:12px 0;border-bottom:1px solid #f1f2f9;">Careers</a>
931        <div style="margin-top:8px;width:fit-content;">
932          <a href="#" class="button-alternative smalll w-button mobile-menu-link hs-cta-trigger-button hs-cta-trigger-button-204798812515" style="width:auto;">Request Access</a>
933        </div>
934      </div>
935    </div>
936    <div class="navbar-glass-effect"></div>
937    <div class="navbar-glass-shine"></div>
938    <div class="navbar-glass-filter w-embed">
939      <svg style="display: none"  viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
940        <filter id="glass-distortion" x="0%" y="0%" width="100%" height="100%" filterunits="objectBoundingBox">
941          <feturbulence type="fractalNoise" basefrequency="0.015 0.015" numoctaves="1" seed="5" result="turbulence">
942          <!--  Seeds: 14, 17,   -->
943          <fecomponenttransfer in="turbulence" result="mapped">
944            <fefuncr type="gamma" amplitude="1" exponent="10" offset="0.5">
945            <fefuncg type="gamma" amplitude="0" exponent="1" offset="0">
946            <fefuncb type="gamma" amplitude="0" exponent="1" offset="0.5">
947          </fefuncb></fefuncg></fefuncr></fecomponenttransfer>
948          <fegaussianblur in="turbulence" stddeviation="3" result="softMap">
949          <fespecularlighting in="softMap" surfacescale="5" specularconstant="1" specularexponent="100" lighting-color="white" result="specLight">
950            <fepointlight x="-200" y="-200" z="300">
951          </fepointlight></fespecularlighting>
952          <fecomposite in="specLight" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litImage">
953          <fedisplacementmap in="SourceGraphic" in2="softMap" scale="60" xchannelselector="R" ychannelselector="G">
954        </fedisplacementmap></fecomposite></fegaussianblur></feturbulence></filter>
955      </svg></div>
956  </div>
957  <div class="section-top" id="publisher-hero" style="background:linear-gradient(180deg, rgba(124, 58, 237, 1) 0%, rgba(216, 180, 254, 1) 45%, rgba(213, 202, 227, 1) 90%, rgba(254, 252, 245, 1) 100%);">
958    <div class="block-top">
959      <h1 data-w-id="dca1dfe7-4c1e-71f2-bf06-4741814af925" style="opacity:0;-webkit-transform:translate3d(0, 20px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0, 20px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0, 20px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0, 20px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0)" class="heading-top">
960        <span class="desktop-hero">Fresh Ads. Higher CPMs. Real Results.</span>
961        <span class="mobile-hero">Fresh Ads. Higher CPMs. Real Results.</span>
962      </h1>
963      <h1 data-w-id="6df8f0bd-6335-b863-17a0-a2a5acf76203" style="opacity:0;-webkit-transform:translate3d(0, 20px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0, 20px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0, 20px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0, 20px, 0) scale3d(1, 1, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0)" class="body dm" style="max-width:1260px;width:100%;">Audiences are tired of seeing the same stale banners everywhere. LoudEcho fixes that. Every impression gets a fresh, brand-safe creative built in milliseconds—so your readers stay engaged and your CPMs climb.</h1>
964      <div class="form-block-2">
965        <div style="height: 60px;"></div>
966        <a href="#" class="button-alternative smalll position new w-button hs-cta-trigger-button hs-cta-trigger-button-204798812515">Get early access</a>
967      </div>
968    </div>
969
970    <!-- Website mockup section from Figma -->
971    <div class="website-mockup" style="margin:12px auto;max-width:1100px;box-shadow:0px 4px 10px 0px rgba(0, 0, 0, 0.15);border-radius:12px;">
972      <div class="browser-chrome" style="position:relative;background:#0c0c0c;border-radius:12px 12px 0 0;padding:16px 20px;display:flex;align-items:center;gap:12px;">
973        <div style="position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,0.1);border-radius:12px 12px 0 0;pointer-events:none;"></div>
974        <div class="browser-dots" style="position:relative;display:flex;gap:8px;">
975          <div class="browser-dot" style="position:relative;width:12px;height:12px;border-radius:50%;background:#0c0c0c;"><div style="position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,0.16);border-radius:50%;"></div></div>
976          <div class="browser-dot" style="position:relative;width:12px;height:12px;border-radius:50%;background:#0c0c0c;"><div style="position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,0.16);border-radius:50%;"></div></div>
977          <div class="browser-dot" style="position:relative;width:12px;height:12px;border-radius:50%;background:#0c0c0c;"><div style="position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,0.16);border-radius:50%;"></div></div>
978        </div>
979        <div class="url-bar-container" style="position:relative;flex:1;max-width:810px;margin:0 auto;">
980        </div>
981      </div>
982
983      <div class="browser-content" style="background-color:rgba(255, 255, 255, 1);border:1px solid #e5e5e5;border-top:none;border-radius:0 0 12px 12px;padding:40px;min-height:600px;">
984        <!-- News website header -->
985        <div class="news-header" style="display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;padding-bottom:20px;border-bottom:1px solid #202124;">
986          <div style="display:flex;align-items:center;gap:20px;">
987            <h2 class="news-title" style="font-family:'Playfair Display',serif;font-size:32px;font-weight:700;margin:0;color:#000;">The NEWS<span style="font-size:16px;vertical-align:super;">*</span></h2>
988            
989          </div>
990        </div>
991
992        <div id="article-content" class="article-content-grid" style="display:grid;grid-template-columns:1fr 320px;gap:40px;">
993          <!-- Article content -->
994          <div class="article-main">
995            <h1 class="article-headline" style="color:#141414;font-family:'Instrument Serif',serif;font-size:52.579px;font-style:normal;font-weight:400;line-height:normal;margin:0 0 20px 0;">NASA Prepares for 3I/Atlas 2026 Exit From Solar System</h1>
996
997            <!-- Placeholder text lines -->
998            <div class="article-placeholder-text" style="margin-top:30px;">
999              <div class="placeholder-line" style="height:12px;background:#e0e0e0;border-radius:6px;margin-bottom:10px;width:100%;"></div>
1000              <div class="placeholder-line" style="height:12px;background:#e0e0e0;border-radius:6px;margin-bottom:10px;width:95%;"></div>
1001              <div class="placeholder-line" style="height:12px;background:#e0e0e0;border-radius:6px;margin-bottom:10px;width:98%;"></div>
1002              <div class="placeholder-line paragraph-break" style="height:12px;background:#e0e0e0;border-radius:6px;margin-bottom:20px;width:60%;"></div>
1003
1004              <div class="placeholder-line" style="height:12px;background:#e0e0e0;border-radius:6px;margin-bottom:10px;width:90%;"></div>
1005              <div class="placeholder-line" style="height:12px;background:#e0e0e0;border-radius:6px;margin-bottom:10px;width:100%;"></div>
1006              <div class="placeholder-line" style="height:12px;background:#e0e0e0;border-radius:6px;margin-bottom:10px;width:92%;"></div>
1007              <div class="placeholder-line paragraph-break" style="height:12px;background:#e0e0e0;border-radius:6px;margin-bottom:20px;width:88%;"></div>
1008
1009              <div class="placeholder-line" style="height:12px;background:#e0e0e0;border-radius:6px;margin-bottom:10px;width:55%;"></div>
1010              <div class="placeholder-line" style="height:12px;background:#e0e0e0;border-radius:6px;margin-bottom:10px;width:50%;"></div>
1011
1012              <div class="placeholder-line" style="height:12px;background:#e0e0e0;border-radius:6px;margin-bottom:10px;width:100%;"></div>
1013              <div class="placeholder-line" style="height:12px;background:#e0e0e0;border-radius:6px;margin-bottom:10px;width:96%;"></div>
1014            </div>
1015          </div>
1016
1017          <!-- Ad sidebar -->
1018          <div class="article-ad-sidebar" style="position:relative;">
1019            <!-- Ad container with overlay -->
1020            <div id="ad-container" style="position:relative;border-radius:8px;overflow:visible;">
1021              <!-- Dog Blue Ad (before) -->
1022              <img id="dog-blue-ad" src="images/Dog Blue Ad.jpg" loading="lazy" alt="Dog Blue Ad" style="width:100%;height:auto;display:block;border-radius:8px;transition:opacity 0.6s ease-in-out;">
1023              <!-- Dog Space Ad (after - fades in) -->
1024              <img id="dog-space-ad" src="images/Dog Space Ad.png" loading="lazy" alt="Dog Space Ad" style="position:absolute;top:0;left:0;width:100%;height:auto;display:block;opacity:0;border-radius:8px;transition:opacity 0.6s ease-in-out;">
1025              
1026              <!-- Loading overlay (hidden initially) - darker for better contrast -->
1027              <div id="loading-overlay" style="position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.85);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;opacity:0;transition:opacity 0.5s ease-in-out;border-radius:8px;">
1028                <div id="spinner-container" style="position:relative;">
1029                  <div id="loading-spinner" class="loading-spinner" style="width:48px;height:48px;border:4px solid rgba(255,255,255,0.2);border-top:4px solid #fff;border-radius:50%;animation:spin 0.8s linear infinite;transition:opacity 0.4s ease-in-out, transform 0.4s ease-in-out;"></div>
1030                </div>
1031              </div>
1032              
1033              <!-- Confetti container -->
1034              <div id="confetti-container" style="position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;overflow:visible;border-radius:8px;"></div>
1035            </div>
1036            
1037            <!-- Toggle button (hidden initially) - without/with LoudEcho -->
1038            <div id="ad-toggle-container" style="visibility:hidden;margin-top:12px;opacity:0;transition:opacity 0.5s ease-in-out;text-align:center;">
1039              <div style="display:inline-flex;background:#f1f2f9;border-radius:50px;padding:3px;gap:2px;">
1040                <button id="toggle-before" style="padding:10px 16px;border:none;border-radius:50px;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;cursor:pointer;transition:all 0.3s ease;background:transparent;color:#666;display:flex;align-items:center;gap:6px;">
1041                  <span>without</span>
1042                  <img src="images/loudecho-logo-1.png" alt="LoudEcho" style="height:16px;width:auto;opacity:0.6;transition:all 0.3s ease;">
1043                </button>
1044                <button id="toggle-after" style="padding:10px 16px;border:none;border-radius:50px;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;cursor:pointer;transition:all 0.3s ease;background:#7c3aed;color:#fff;display:flex;align-items:center;gap:6px;">
1045                  <span>with</span>
1046                  <img src="images/loudecho-logo-1.png" alt="LoudEcho" style="height:16px;width:auto;filter:brightness(0) invert(1);transition:all 0.3s ease;">
1047                </button>
1048              </div>
1049            </div>
1050          </div>
1051        </div>
1052      </div>
1053    </div>
1054
1055  </div>
1056
1057  <!-- How it works section copied from main site -->
1058  <section class="section-5 core-features-v2" id="how-it-works" style="background-color:rgba(254, 252, 245, 1);padding-bottom:40px;">
1059    <div class="miniheading light">
1060      <div class="mini-header light">Why partner with us</div>
1061    </div>
1062    <div class="container-8">
1063      <div class="core-features-v2-flex-wrap">
1064        <div class="core-features-v2-left-wrap">
1065          <div class="core-feature-navigations-wrap">
1066            <div class="core-feature-navigation-line"></div>
1067            <div class="single-core-feature-navigation">
1068              <div class="feature-navigation-serial">01</div>
1069              <a href="#Step1" class="feature-navigation-title">Exclusive New Budgets</a>
1070            </div>
1071            <div class="single-core-feature-navigation">
1072              <div class="feature-navigation-serial">02</div>
1073              <a href="#Step2" class="feature-navigation-title">Goodbye Ad Fatigue</a>
1074            </div>
1075            <div class="single-core-feature-navigation">
1076              <div class="feature-navigation-serial">03</div>
1077              <a href="#Step3" class="feature-navigation-title">Adaptive Brand Safety</a>
1078            </div>
1079            <div class="single-core-feature-navigation">
1080              <div class="feature-navigation-serial">04</div>
1081              <a href="#Step4" class="feature-navigation-title">Boost Direct Sales</a>
1082            </div>
1083            <div class="single-core-feature-navigation">
1084              <div class="feature-navigation-serial">05</div>
1085              <a href="#Step5" class="feature-navigation-title">Integrate Your Way</a>
1086            </div>
1087          </div>
1088        </div>
1089        <div class="core-features-v2-right-wrap">
1090          <div id="Step1" class="single-core-feature-wrap">
1091            <div class="core-feature-inner-wrap border">
1092              <div class="core-feature-content-wrap">
1093                <div class="core-feature-details-wrap">
1094                  <h3 class="core-feature-title">Exclusive New Budgets</h3>
1095                  <p class="core-feature-details">LoudEcho partners with next-gen buyers seeking smarter impressions. Delivering 100% new, proprietary ad budgets unavailable on other DSPs, exchanges, or monetization platforms.</p>
1096                </div>
1097                <div class="core-feature-img-wrap">
1098                  <img alt="Budget Chart" src="images/Budgets%20Chart.png" loading="lazy" class="core-feature-image-2" style="width:100%;height:auto;">
1099                </div>
1100              </div>
1101            </div>
1102          </div>
1103          <div id="Step2" class="single-core-feature-wrap">
1104            <div class="core-feature-inner-wrap border">
1105              <div class="core-feature-content-wrap">
1106                <div class="core-feature-details-wrap">
1107                  <h3 class="core-feature-title">Goodbye Ad Fatigue</h3>
1108                  <p class="core-feature-details">Dynamic, personalized and freshly created ads adapt to context and sentiment—slashing banner blindness and driving higher yields for your inventory.</p>
1109                </div>
1110              </div>
1111            </div>
1112          </div>
1113          <div id="Step3" class="single-core-feature-wrap">
1114            <div class="core-feature-inner-wrap border">
1115              <div class="core-feature-content-wrap">
1116                <div class="core-feature-details-wrap">
1117                  <h3 class="core-feature-title">Adaptive Brand Safety</h3>
1118                  <p class="core-feature-details">LoudEcho reads full-page meaning to eliminate brand safety false positives and unlock impressions others wrongly block—so you keep more supply and revenue.</p>
1119                </div>
1120                <div class="core-feature-img-wrap">
1121                  <img loading="lazy" src="images/allowlist.png" alt="Brand Safety Allowlist" class="ipad-shape">
1122                </div>
1123              </div>
1124            </div>
1125          </div>
1126          <div id="Step4" class="single-core-feature-wrap">
1127            <div class="core-feature-inner-wrap">
1128              <div class="core-feature-content-wrap _1">
1129                <div class="core-feature-details-wrap">
1130                  <h3 class="core-feature-title">Boost Direct Sales</h3>
1131                  <p class="core-feature-details">Apply LoudEcho's tech to your own direct campaigns—unlocking up to 3X performance gains and new premium packages for your sales team.</p>
1132                </div>
1133                <div class="core-feature-img-wrap _1">
1134                  <img loading="lazy" src="images/sales_graph.png" alt="" class="ipad-shape">
1135                </div>
1136              </div>
1137            </div>
1138          </div>
1139          <div id="Step5" class="single-core-feature-wrap">
1140            <div class="core-feature-inner-wrap">
1141              <div class="core-feature-content-wrap _1">
1142                <div class="core-feature-details-wrap">
1143                  <h3 class="core-feature-title">Integrate Your Way</h3>
1144                  <p class="core-feature-details">Seamless setup via Prebid adapter (JS or server-side, no Ads.txt required) or full OpenRTB connection—so you can plug in without reworking your stack.</p>
1145                </div>
1146                <div class="core-feature-img-wrap _1">
1147                  <img src="images/Prebid.png" loading="lazy" alt="Prebid Integration" class="ipad-shape" style="max-width:60%;height:auto;">
1148                </div>
1149              </div>
1150            </div>
1151          </div>
1152        </div>
1153      </div>
1154    </div>
1155  </section>
1156
1157  <!-- FAQ Section -->
1158  <div id="faq-section" style="padding:40px 40px 100px 40px;">
1159    <div style="max-width:1100px;margin:0 auto;">
1160      <!-- FAQ Badge and Title -->
1161      <div style="text-align:center;margin-bottom:60px;">
1162        <div class="miniheading" style="display:inline-block;margin-bottom:20px;">
1163          <div class="mini-header">FAQ</div>
1164        </div>
1165        <h2 style="font-family:'Instrument Serif',serif;font-size:64px;font-weight:400;color:#222;margin:0;line-height:1.2;">Any Questions?</h2>
1166      </div>
1167
1168      <!-- FAQ Items Single Column Container -->
1169      <div id="faq-container" style="display:flex;flex-direction:column;gap:16px;max-width:800px;margin:0 auto;"></div>
1170    </div>
1171  </div>
1172
1173  
1173<script>
1174  // FAQ Data
1175  const faqQuestions = [
1176    {
1177      question: 'Is LoudEcho a DSP, Ad Server, DCO, or a creative suite?',
1178      answer: 'LoudEcho is an all-in-one AI ad platform. It functions as a full blown DSP for programmatic buying, an AI-native dynamic creative engine that generates a unique ad per impression from scratch, and a creative intelligence suite that enforces brand guardrails. It also serves as an ad-serving layer, rendering and delivering final creatives while integrating with your existing verification stack.'
1179    },
1180    {
1181      question: 'How does LoudEcho prevent AI "hallucinations" and brand damage?',
1182      answer: 'LoudEcho prevents AI "hallucinations" by generating ads only within strict brand and compliance guardrails, and only on pages that pass contextual suitability checks. Every ad is re-validated before serving for tone, safety, sensitivity, and risky claims, then blocked or auto-revised if needed. Nothing serves unless all checks pass, and each impression is logged with an allow/block reason.'
1183    },
1184    {
1185      question: 'How does LoudEcho ensure brand safety?',
1186      answer: 'We use page-level context analysis and proprietary risk classifiers to filter for violence, hate speech, and sensitive topics. LoudEcho evaluates the specific context of every impression and applies multi-layer safety filters before a creative is ever generated.'
1187    },
1188    {
1189      question: 'Can LoudEcho operate as a fully managed service?',
1190      answer: 'Yes. We offer fully managed execution, handling everything from strategy and guardrail setup to trafficking and optimization. We also support hybrid models where our team manages day-to-day operations while you retain final approval control.'
1191    },
1192    {
1193      question: 'What creative formats are supported?',
1194      answer: 'LoudEcho currently focuses on IAB-standard display units and text ads for the open web. Support for additional channels and formats is scheduled for release in 2026.'
1195    },
1196    {
1197      question: 'Does LoudEcho support languages beyond English?',
1198      answer: 'Generation is currently English-only. Multilingual support for major European languages is in development and will include the same rigorous brand-voice and compliance validation per market.'
1199    }
1200  ];
1201
1202  let openIndex = null;
1203
1204  function renderFAQ() {
1205    const container = document.getElementById('faq-container');
1206
1207    container.innerHTML = faqQuestions.map((item, index) => `
1208      <div style="background:#fff;border-radius:12px;overflow:hidden;border:1px solid #e5e5e5;">
1209        <div class="faq-item" data-index="${index}" style="padding:20px 24px;cursor:pointer;">
1210          <div style="display:flex;justify-content:space-between;align-items:center;gap:12px;">
1211            <h3 style="font-family:'DM Sans',sans-serif;font-size:17px;font-weight:600;color:#222;margin:0;flex:1;">${item.question}</h3>
1212            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="transition:transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);transform:rotate(${index === openIndex ? '180deg' : '0deg'});flex-shrink:0;">
1213              <path d="M6 9L12 15L18 9" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
1214            </svg>
1215          </div>
1216          <div style="max-height:${index === openIndex ? '500px' : '0'};overflow:hidden;transition:max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), margin 0.4s cubic-bezier(0.4, 0, 0.2, 1);opacity:${index === openIndex ? '1' : '0'};margin-top:${index === openIndex ? '12px' : '0'};">
1217            <p style="font-family:'DM Sans',sans-serif;font-size:15px;line-height:1.6;color:#666;margin:0;">${item.answer}</p>
1218          </div>
1219        </div>
1220      </div>
1221    `).join('');
1222
1223    // Add click handlers
1224    container.querySelectorAll('.faq-item').forEach((item) => {
1225      item.addEventListener('click', (e) => {
1226        const index = parseInt(e.currentTarget.getAttribute('data-index'));
1227        openIndex = (openIndex === index) ? null : index;
1228        renderFAQ();
1229      });
1230    });
1231  }
1232
1233  // Initial render
1234  renderFAQ();
1235  </script>
1235
1236
1237  <div class="section-footer">
1238    <div class="footer-content">
1239      <div class="content-style-8">
1240        <div class="heading-5">
1241          <div class="heading-6">
1242            <div class="heading-7"></div>
1243            <!-- <img src="images/Heading.svg" loading="lazy" alt=""> -->
1244            <!-- <img src="images/footer-retro-cityscape.png" loading="lazy" alt="Retro futuristic footer art"> -->
1245          </div>
1246          <div class="form-block-2 _3">
1247            <a href="#" class="button-alternative smalll position new w-button hs-cta-trigger-button hs-cta-trigger-button-204798812515">Get early access</a>
1248          </div>
1249        </div>
1250        <div class="bottom-2">
1251          <div class="socials-4">
1252            <a href="/cdn-cgi/l/email-protection#432a2d252c032f2c362726202b2c6d222a" class="social-7"><img src="images/IconSolidmail_1.svg" loading="lazy" width="16.33333396911621" height="16.33333396911621" alt="Email" class="iconsolidmail-3"></a>
1253            <a href="https://www.linkedin.com/company/loudecho/" target="_blank" rel="noopener noreferrer" class="social-8"><img src="images/Path-2520_1.svg" loading="lazy" width="13.197080612182617" height="13.066666603088379" alt="LinkedIn" class="path-2523"></a>
1254            <a href="https://x.com/LoudEcho_ai" target="_blank" rel="noopener noreferrer" class="social-8"><img src="images/Vector_1.svg" loading="lazy" width="14.460444450378418" height="13.066666603088379" alt="X/Twitter" class="path-2523"></a>
1255          </div>
1256          <div class="frame-2147207715">
1257            <div class="text-24">© 2026 LoudEcho</div>
1258            <a href="privacy.html" class="text-24">Privacy Policy</a>
1259            <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" class="text-24">Media Kit</a>
1260          </div>
1261        </div>
1262      </div>
1263        <img src="images/LoudEcho FooterTxt.svg" alt="LoudEcho" class="footer-logo-svg footer-logo-desktop">
1264        <img src="images/loud echo footer STACK.svg" alt="LoudEcho" class="footer-logo-svg footer-logo-mobile">
1265        <div class="bottom">
1266          <div class="text-23">© 2026 LoudEcho</div>
1267          <a href="terms.html" target="_blank" rel="noopener noreferrer" class="text-23">Terms</a>
1268          <a href="privacy.html" target="_blank" rel="noopener noreferrer" class="text-23">Privacy Policy</a>
1269          <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank" rel="noopener noreferrer" class="text-23">Media Kit</a> 
1270          <div class="socials-3">
1271        <a href="/cdn-cgi/l/email-protection#6e070008012e02011b0a0b0d0601400f07" target="_blank" rel="noopener noreferrer" class="social-5">
1272          <img src="images/IconSolidmail.svg" loading="lazy" width="16.33333396911621" height="16.33333396911621" alt="Email Icon" class="iconsolidmail-2">
1273        </a>            
1274        <a class="social-6" href="https://www.linkedin.com/company/loudecho/" target="_blank" rel="noopener noreferrer"><img src="images/Path-2520.svg" loading="lazy" width="13.197080612182617" height="13.066666603088379" alt="" class="path-2522">
1275        </a>
1276            <a class="social-6" href="https://x.com/LoudEcho_ai" target="_blank" rel="noopener noreferrer"><img src="images/Vector.svg" loading="lazy" width="14.460444450378418" height="13.066666603088379" alt="" class="path-2522" ></a>
1277          </div>
1278          
1279        </div>
1280    </div>
1281  </div>
vendor: 111 bytes, lines 1281-1282
1281
1282  <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
1282<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=685993b84dfb0c8223ab8731" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
1282
1283  
1283<script src="js/webflow.js" type="text/javascript"></script>
1283
1284  
1284<script>
1285  // Navbar scroll animation - hide on scroll down, show on scroll up
1286  document.addEventListener('DOMContentLoaded', function() {
1287    // Wait a bit for Webflow to initialize
1288    setTimeout(function() {
1289      let lastScrollTop = 0;
1290      const navbar = document.querySelector('.navbar');
1291      let ticking = false;
1292      let isScrolling = false;
1293
1294      if (!navbar) return;
1295
1296      function updateNavbar() {
1297        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
1298        
1299        if (scrollTop > lastScrollTop && scrollTop > 100) {
1300          // Scrolling down - hide navbar
1301          if (!navbar.classList.contains('navbar-hidden')) {
1302            navbar.classList.add('navbar-hidden');
1303            navbar.style.transform = 'translateY(-100%)';
1304            navbar.style.transition = 'transform 0.4s cubic-bezier(0.4, 0, 0.2, 1)';
1305          }
1306        } else {
1307          // Scrolling up - show navbar
1308          if (navbar.classList.contains('navbar-hidden')) {
1309            navbar.classList.remove('navbar-hidden');
1310            navbar.style.transform = 'translateY(0)';
1311            navbar.style.transition = 'transform 0.4s cubic-bezier(0.4, 0, 0.2, 1)';
1312          }
1313        }
1314        
1315        lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
1316        ticking = false;
1317      }
1318
1319      function requestTick() {
1320        if (!ticking) {
1321          window.requestAnimationFrame(updateNavbar);
1322          ticking = true;
1323        }
1324      }
1325
1326      window.addEventListener('scroll', requestTick, { passive: true });
1327      
1328      // Ensure navbar has proper positioning
1329      if (window.getComputedStyle(navbar).position !== 'fixed') {
1330        navbar.style.position = 'fixed';
1331        navbar.style.top = '0';
1332        navbar.style.left = '0';
1333        navbar.style.right = '0';
1334        navbar.style.width = '100%';
1335        navbar.style.zIndex = '500';
1336      }
1337    }, 100);
1338  });
1339
1340  // Navbar hero mode - white text when hero is in view
1341  document.addEventListener('DOMContentLoaded', function() {
1342    const navbar = document.querySelector('.navbar');
1343    const heroSection = document.getElementById('publisher-hero');
1344    
1345    if (!navbar || !heroSection) return;
1346    
1347    // Add hero-mode class initially since we start at top
1348    navbar.classList.add('hero-mode');
1349    
1350    function checkHeroVisibility() {
1351      const heroRect = heroSection.getBoundingClientRect();
1352      const heroBottom = heroRect.bottom;
1353      
1354      // If hero bottom is above the navbar (roughly 80px height), remove hero-mode
1355      if (heroBottom <= 80) {
1356        navbar.classList.remove('hero-mode');
1357      } else {
1358        navbar.classList.add('hero-mode');
1359      }
1360    }
1361    
1362    window.addEventListener('scroll', checkHeroVisibility, { passive: true });
1363    checkHeroVisibility(); // Initial check
1364  });
1365
1366  // Mobile menu toggle
1367  document.addEventListener('DOMContentLoaded', function() {
1368    const menuToggle = document.getElementById('mobile-menu-toggle');
1369    const mobileMenu = document.getElementById('mobile-menu');
1370    
1371    if (menuToggle && mobileMenu) {
1372      menuToggle.addEventListener('click', function() {
1373        const isOpen = mobileMenu.classList.contains('menu-open');
1374        
1375        if (isOpen) {
1376          mobileMenu.classList.remove('menu-open');
1377          menuToggle.classList.remove('menu-open');
1378        } else {
1379          mobileMenu.classList.add('menu-open');
1380          menuToggle.classList.add('menu-open');
1381        }
1382      });
1383      
1384      // Close menu when clicking on a link
1385      const menuLinks = mobileMenu.querySelectorAll('.mobile-menu-link');
1386      menuLinks.forEach(function(link) {
1387        link.addEventListener('click', function() {
1388          mobileMenu.classList.remove('menu-open');
1389          menuToggle.classList.remove('menu-open');
1390        });
1391      });
1392      
1393      // Close menu when clicking outside
1394      document.addEventListener('click', function(event) {
1395        if (!menuToggle.contains(event.target) && !mobileMenu.contains(event.target)) {
1396          mobileMenu.classList.remove('menu-open');
1397          menuToggle.classList.remove('menu-open');
1398        }
1399      });
1400    }
1401  });
1402
1403  // Ad loading animation sequence - Cinematic version
1404  document.addEventListener('DOMContentLoaded', function() {
1405    const adContainer = document.getElementById('ad-container');
1406    const dogBlueAd = document.getElementById('dog-blue-ad');
1407    const dogSpaceAd = document.getElementById('dog-space-ad');
1408    const loadingOverlay = document.getElementById('loading-overlay');
1409    const loadingSpinner = document.getElementById('loading-spinner');
1410    const confettiContainer = document.getElementById('confetti-container');
1411    const toggleContainer = document.getElementById('ad-toggle-container');
1412    const toggleBefore = document.getElementById('toggle-before');
1413    const toggleAfter = document.getElementById('toggle-after');
1414    
1415    if (!dogBlueAd || !dogSpaceAd || !loadingOverlay || !loadingSpinner || !adContainer) return;
1416    
1417    let showingAfter = true;
1418    
1419    // Confetti burst function
1420    function createConfetti() {
1421      const colors = ['#7c3aed', '#a78bfa', '#c4b5fd', '#fbbf24', '#34d399', '#60a5fa', '#f472b6'];
1422      const shapes = ['square', 'circle'];
1423      
1424      for (let i = 0; i < 50; i++) {
1425        const confetti = document.createElement('div');
1426        confetti.className = 'confetti-piece';
1427        const color = colors[Math.floor(Math.random() * colors.length)];
1428        const shape = shapes[Math.floor(Math.random() * shapes.length)];
1429        const size = Math.random() * 8 + 6;
1430        const startX = Math.random() * 100;
1431        const startY = Math.random() * 100;
1432        const rotation = Math.random() * 360;
1433        const delay = Math.random() * 0.3;
1434        const duration = Math.random() * 1 + 1;
1435        const drift = (Math.random() - 0.5) * 100;
1436        
1437        confetti.style.cssText = `
1438          position: absolute;
1439          width: ${size}px;
1440          height: ${size}px;
1441          background: ${color};
1442          left: ${startX}%;
1443          top: ${startY}%;
1444          border-radius: ${shape === 'circle' ? '50%' : '2px'};
1445          transform: rotate(${rotation}deg);
1446          animation: confettiFall ${duration}s ease-out ${delay}s forwards;
1447          --drift: ${drift}px;
1448        `;
1449        
1450        confettiContainer.appendChild(confetti);
1451        
1452        // Clean up after animation
1453        setTimeout(() => confetti.remove(), (duration + delay) * 1000 + 100);
1454      }
1455    }
1456    
1457    // Step 1: Wait, then pop out the ad
1458    setTimeout(function() {
1459      adContainer.classList.add('popped-out');
1460      
1461      // Step 2: Show dark overlay with spinner
1462      setTimeout(function() {
1463        loadingOverlay.style.opacity = '1';
1464        
1465        // Step 3: After loading, hide spinner and show new ad with confetti
1466        setTimeout(function() {
1467          // Fade out spinner
1468          loadingSpinner.style.opacity = '0';
1469          loadingSpinner.style.transform = 'scale(0)';
1470          
1471          setTimeout(function() {
1472            // Switch to space ad
1473            dogBlueAd.style.opacity = '0';
1474            dogSpaceAd.style.opacity = '1';
1475            
1476            // Hide overlay
1477            loadingOverlay.style.opacity = '0';
1478            
1479            // Burst confetti!
1480            setTimeout(function() {
1481              createConfetti();
1482              
1483              // Step 4: Pop back in after confetti starts
1484              setTimeout(function() {
1485                adContainer.classList.remove('popped-out');
1486                adContainer.classList.add('popped-in');
1487                
1488                // Show toggle button
1489                setTimeout(function() {
1490                  toggleContainer.style.visibility = 'visible';
1491                  toggleContainer.style.opacity = '1';
1492                }, 400);
1493              }, 600);
1494            }, 200);
1495          }, 300);
1496        }, 2500);
1497      }, 400);
1498    }, 800);
1499    
1500    // Toggle button functionality - without/with LoudEcho
1501    if (toggleBefore && toggleAfter) {
1502      const beforeLogo = toggleBefore.querySelector('img');
1503      const afterLogo = toggleAfter.querySelector('img');
1504      
1505      toggleBefore.addEventListener('click', function() {
1506        if (showingAfter) {
1507          showingAfter = false;
1508          dogBlueAd.style.opacity = '1';
1509          dogSpaceAd.style.opacity = '0';
1510          // Active state for "without" button
1511          toggleBefore.style.background = '#7c3aed';
1512          toggleBefore.style.color = '#fff';
1513          if (beforeLogo) {
1514            beforeLogo.style.filter = 'brightness(0) invert(1)';
1515            beforeLogo.style.opacity = '1';
1516          }
1517          // Inactive state for "with" button
1518          toggleAfter.style.background = 'transparent';
1519          toggleAfter.style.color = '#666';
1520          if (afterLogo) {
1521            afterLogo.style.filter = 'none';
1522            afterLogo.style.opacity = '0.6';
1523          }
1524        }
1525      });
1526      
1527      toggleAfter.addEventListener('click', function() {
1528        if (!showingAfter) {
1529          showingAfter = true;
1530          dogBlueAd.style.opacity = '0';
1531          dogSpaceAd.style.opacity = '1';
1532          // Active state for "with" button
1533          toggleAfter.style.background = '#7c3aed';
1534          toggleAfter.style.color = '#fff';
1535          if (afterLogo) {
1536            afterLogo.style.filter = 'brightness(0) invert(1)';
1537            afterLogo.style.opacity = '1';
1538          }
1539          // Inactive state for "without" button
1540          toggleBefore.style.background = 'transparent';
1541          toggleBefore.style.color = '#666';
1542          if (beforeLogo) {
1543            beforeLogo.style.filter = 'none';
1544            beforeLogo.style.opacity = '0.6';
1545          }
1546        }
1547      });
1548    }
1549  });
1550  </script>
1550
1551
1552<!-- GTM Tracking Events -->
1553<script>
1554// Initialize dataLayer
1555window.dataLayer = window.dataLayer || [];
1556
1557// Form Submissions & CTA Tracking
1558document.addEventListener("DOMContentLoaded", function() {
1559  // Form Submissions
1560  document.querySelectorAll('.w-form form').forEach(form => {
1561    form.addEventListener('submit', function(e) {
1562      e.preventDefault();
1563      
1564      // Track submission
1565      window.dataLayer.push({
1566        'event': 'form_submit',
1567        'formLocation': this.closest('.section-top') ? 'hero' : 'footer'
1568      });
1569      
1570      // Submit to HubSpot
1571      fetch(this.action, {
1572        method: this.method,
1573        body: new FormData(this)
1574      }).then(response => {
1575        if (response.ok) {
1576          window.dataLayer.push({'event': 'generate_lead'});
1577          this.reset();
1578        }
1579      });
1580    });
1581  });
1582  
1583  // CTA Button Clicks - track HubSpot popup triggers
1584  document.querySelectorAll('.hs-cta-trigger-button').forEach(btn => {
1585    btn.addEventListener('click', function() {
1586      window.dataLayer.push({
1587        'event': 'cta_click',
1588        'ctaLocation': this.closest('.section-top') ? 'hero' : 'footer'
1589      });
1590    });
1591  });
1592});
1593</script>
1593
1594<!-- Start of HubSpot Embed Code -->
1595<script type="text/javascript" id="hs-script-loader" async defer src="//js.hs-scripts.com/49122828.js"></script>
1595
1596<!-- End of HubSpot Embed Code -->
1597<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"6874e980772a44d8aa23cb697400e655","r":1,"spa":2}' crossorigin="anonymous"></script>
1597
1598</body>
1599</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.