Audio Announcer

/* ———- scope + reset ———- */ #aa{font-size:16px;line-height:1.6;width:100%;–bg:#08080f;–bg-2:#0c0c18;–bg-3:#10101e; –surface:rgba(255,255,255,.035);–surface-2:rgba(255,255,255,.055); –line:rgba(255,255,255,.10);–line-2:rgba(255,255,255,.06); –ink:#f5f5fc;–muted:#9c9cb6;–muted-2:#73738c; –violet:#594ae1;–violet-2:#8b79ff;–violet-glow:rgba(89,74,225,.50); –orange:#ff8a22;–orange-2:#ffb14d;–orange-glow:rgba(255,138,34,.42); –f-display:’Archivo’,-apple-system,Segoe UI,sans-serif; –f-body:’Hanken Grotesk’,-apple-system,Segoe UI,sans-serif; –f-mono:’IBM Plex Mono’,ui-monospace,monospace; –r:18px; all:initial;display:block;position:relative;overflow-x:hidden; font-family:var(–f-body);color:var(–ink);background:var(–bg); line-height:1.62;font-size:17px;font-weight:400; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;} #aa *,#aa *::before,#aa *::after{margin:0;padding:0;box-sizing:border-box} #aa img{display:block;max-width:100%;height:auto;border:0} #aa a{color:inherit;text-decoration:none} #aa svg{display:block} #aa ::selection{background:var(–orange);color:#1a0f00} /* ———- layout ———- */ #aa .wrap{max-width:1180px;margin:0 auto;padding:0 26px;position:relative;z-index:2} #aa .sec{padding:clamp(76px,11vw,140px) 0;position:relative} #aa .sec.tight{padding:clamp(54px,7vw,86px) 0} #aa .bg2{background:var(–bg-2)} #aa .ctr{text-align:center} #aa .ctr .lead{margin-left:auto;margin-right:auto} /* ———- type ———- */ #aa .eyebrow{font-family:var(–f-mono);font-weight:500;font-size:11.52px; letter-spacing:.22em;text-transform:uppercase;color:var(–orange); display:inline-flex;align-items:center;gap:10px} #aa .eyebrow.v{color:var(–violet-2)} #aa .eyebrow::before{content:””;width:22px;height:1px;background:currentColor;opacity:.7} #aa h2{font-family:var(–f-display);font-weight:800;letter-spacing:-.025em; line-height:1.03;font-size:clamp(32.8px,4.6vw,56px);margin:18px 0 0} #aa h3{font-family:var(–f-display);font-weight:700;letter-spacing:-.02em; line-height:1.12;font-size:clamp(20.8px,2.2vw,27.2px)} #aa .lead{color:var(–muted);font-size:clamp(16.32px,1.4vw,18.88px);max-width:62ch;margin-top:20px} #aa h1,#aa h2,#aa h3,#aa h4,#aa h5,#aa h6{color:var(–ink) !important} #aa .grad{background:linear-gradient(100deg,var(–violet-2),var(–orange-2)); -webkit-background-clip:text;background-clip:text;color:transparent} #aa .mark{position:relative;white-space:nowrap} #aa .mark::after{content:””;position:absolute;left:-2px;right:-2px;bottom:.06em;height:.34em; background:linear-gradient(90deg,var(–orange),var(–orange-2));opacity:.85;z-index:-1;border-radius:3px} /* ———- buttons ———- */ #aa .btn{display:inline-flex;align-items:center;gap:10px;font-family:var(–f-body); font-weight:700;font-size:16px;border-radius:999px;padding:15px 28px;cursor:pointer; transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s,background .25s,border-color .25s; position:relative;overflow:hidden;border:1px solid transparent;white-space:nowrap} #aa .btn svg{width:18px;height:18px} #aa .btn-primary{background:linear-gradient(180deg,var(–orange-2),var(–orange));color:#1c0f00; box-shadow:0 14px 34px -10px var(–orange-glow),inset 0 1px 0 rgba(255,255,255,.4)} #aa .btn-primary::after{content:””;position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.55),transparent 70%); transform:translateX(-130%);transition:transform .7s} #aa .btn-primary:hover{transform:translateY(-2px);box-shadow:0 20px 44px -10px var(–orange-glow),inset 0 1px 0 rgba(255,255,255,.5)} #aa .btn-primary:hover::after{transform:translateX(130%)} #aa .btn-ghost{background:rgba(255,255,255,.04);color:var(–ink);border-color:var(–line);backdrop-filter:blur(6px)} #aa .btn-ghost:hover{transform:translateY(-2px);border-color:var(–violet-2);background:rgba(139,121,255,.10)} #aa .btn-lg{padding:18px 34px;font-size:16.96px} #aa .btns{display:flex;flex-wrap:wrap;gap:14px} /* ———- equalizer motif ———- */ #aa .eq{display:inline-flex;gap:3px;align-items:flex-end;height:16px} #aa .eq i{width:3px;height:100%;background:var(–orange);border-radius:2px;transform-origin:bottom; animation:eq 1.05s ease-in-out infinite} #aa .eq i:nth-child(1){animation-delay:-.9s} #aa .eq i:nth-child(2){animation-delay:-.5s} #aa .eq i:nth-child(3){animation-delay:-.2s} #aa .eq i:nth-child(4){animation-delay:-.7s} #aa .eq i:nth-child(5){animation-delay:-.35s} #aa .eq i:nth-child(6){animation-delay:-.1s} @keyframes eq{0%,100%{transform:scaleY(.28)}50%{transform:scaleY(1)}} /* ———- HERO ———- */ #aa .hero{position:relative;background:var(–bg);padding-top:clamp(64px,8vw,104px)} #aa .hero::before{content:””;position:absolute;inset:-25% -15% auto -15%;height:150%;pointer-events:none; background:radial-gradient(58% 50% at 16% 8%,var(–violet-glow),transparent 62%), radial-gradient(48% 46% at 90% 86%,var(–orange-glow),transparent 60%)} #aa .hero::after{content:””;position:absolute;inset:0;pointer-events:none;opacity:.5; background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size:62px 62px; -webkit-mask:radial-gradient(78% 64% at 50% 26%,#000,transparent 82%); mask:radial-gradient(78% 64% at 50% 26%,#000,transparent 82%)} #aa .hero .wrap{text-align:center;padding-top:24px;padding-bottom:clamp(56px,7vw,96px)} #aa .hero h1{font-family:var(–f-display);font-weight:900;letter-spacing:-.035em;line-height:.98; font-size:clamp(43.2px,7.2vw,86.4px);margin:22px auto 0;max-width:15ch} #aa .hero-sub{color:var(–muted);font-size:clamp(17.28px,1.7vw,21.12px);max-width:60ch;margin:26px auto 0} #aa .hero-cta{margin:34px auto 0;justify-content:center} #aa .hero-trust{margin:30px auto 0;display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center; font-family:var(–f-mono);font-size:11.84px;letter-spacing:.04em;color:var(–muted-2)} #aa .hero-trust span{display:inline-flex;align-items:center;gap:8px} #aa .hero-trust span::before{content:””;width:5px;height:5px;border-radius:50%;background:var(–violet-2);box-shadow:0 0 10px var(–violet-2)} #aa .hero-eyebrow{animation:fadeUp .8s .04s both} #aa .hero h1{animation:fadeUp .9s .14s both} #aa .hero-sub{animation:fadeUp .9s .27s both} #aa .hero-cta{animation:fadeUp .9s .4s both} #aa .hero-trust{animation:fadeUp .9s .52s both} #aa .hero-stage{animation:fadeUp 1.15s .5s both} @keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}} @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}} /* hero monitor */ #aa .hero-stage{margin-top:clamp(46px,6vw,74px);perspective:2000px} #aa .stage-inner{animation:floaty 7s ease-in-out infinite} #aa .hero-monitor{transform:rotateX(11deg) rotateY(-7deg) scale(1.0);transform-style:preserve-3d; transition:transform 1s cubic-bezier(.2,.7,.2,1)} #aa .hero-stage:hover .hero-monitor{transform:rotateX(0) rotateY(0)} /* ———- monitor (screenshot frame) ———- */ #aa .monitor-wrap{position:relative} #aa .monitor-wrap::before{content:””;position:absolute;inset:-12% -6%;z-index:0;pointer-events:none; background:radial-gradient(50% 60% at 30% 20%,var(–violet-glow),transparent 65%), radial-gradient(50% 60% at 80% 90%,var(–orange-glow),transparent 65%); filter:blur(20px);opacity:.7} #aa .monitor{position:relative;z-index:1;border-radius:14px;overflow:hidden; border:1px solid rgba(255,255,255,.14); box-shadow:0 50px 90px -34px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.04), inset 0 1px 0 rgba(255,255,255,.08); transition:transform .5s cubic-bezier(.2,.7,.2,1),border-color .5s} #aa .monitor img{width:100%} #aa .feat-shot:hover .monitor{transform:translateY(-6px);border-color:rgba(255,138,34,.5)} #aa .chip-live{position:absolute;z-index:3;top:14px;left:14px;display:inline-flex;align-items:center;gap:8px; font-family:var(–f-mono);font-size:10.88px;letter-spacing:.12em;text-transform:uppercase; background:rgba(8,8,15,.72);color:#fff;border:1px solid var(–line); padding:7px 12px;border-radius:999px;backdrop-filter:blur(8px)} #aa .chip-live b{color:var(–orange);font-weight:600} #aa .dot{width:7px;height:7px;border-radius:50%;background:var(–orange);box-shadow:0 0 0 0 var(–orange-glow); animation:pulse 1.8s infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,138,34,.6)}70%{box-shadow:0 0 0 9px rgba(255,138,34,0)}100%{box-shadow:0 0 0 0 rgba(255,138,34,0)}} /* ———- divider ———- */ #aa .rule{display:flex;align-items:center;gap:18px;color:var(–muted-2);font-family:var(–f-mono); font-size:11.52px;letter-spacing:.2em;text-transform:uppercase} #aa .rule::before,#aa .rule::after{content:””;flex:1;height:1px;background:linear-gradient(90deg,transparent,var(–line),transparent)} /* ———- trust badges ———- */ #aa .badges{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:center} #aa .badge{display:inline-flex;align-items:center;gap:10px;font-family:var(–f-mono);font-size:12.48px; letter-spacing:.06em;color:var(–muted);background:var(–surface);border:1px solid var(–line); padding:11px 18px;border-radius:999px} #aa .badge svg{width:16px;height:16px;color:var(–violet-2)} #aa .badge b{color:var(–ink);font-weight:600} /* ———- three pillars ———- */ #aa .pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:54px} #aa .pill{background:var(–surface);border:1px solid var(–line);border-radius:var(–r);padding:30px; transition:transform .4s cubic-bezier(.2,.7,.2,1),border-color .4s,background .4s;position:relative;overflow:hidden} #aa .pill::after{content:””;position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(–violet),var(–orange)); transform:scaleX(0);transform-origin:left;transition:transform .5s} #aa .pill:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.2);background:var(–surface-2)} #aa .pill:hover::after{transform:scaleX(1)} #aa .ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;margin-bottom:20px; background:linear-gradient(150deg,rgba(89,74,225,.28),rgba(255,138,34,.18)); border:1px solid var(–line);color:var(–orange-2)} #aa .ico svg{width:26px;height:26px} #aa .pill h3{margin-bottom:10px} #aa .pill p{color:var(–muted);font-size:15.68px} #aa .pill .tag{font-family:var(–f-mono);font-size:10.88px;letter-spacing:.14em;color:var(–muted-2);text-transform:uppercase} /* ———- feature rows ———- */ #aa .feature{display:grid;grid-template-columns:1.02fr 1.18fr;gap:clamp(36px,5vw,76px);align-items:center} #aa .feature.flip .feat-copy{order:2} #aa .feature.flip .feat-shot{order:1} #aa .feature + .feature{margin-top:clamp(76px,10vw,128px)} #aa .feat-copy h2{margin-top:16px} #aa .feat-copy .lead{margin-top:18px} #aa .flist{list-style:none;margin-top:26px;display:grid;gap:14px} #aa .flist li{display:flex;gap:14px;align-items:flex-start;font-size:16.32px} #aa .flist .ck{flex:none;width:24px;height:24px;border-radius:7px;display:grid;place-items:center;margin-top:2px; background:rgba(255,138,34,.14);border:1px solid rgba(255,138,34,.32);color:var(–orange-2)} #aa .flist .ck svg{width:14px;height:14px} #aa .flist b{color:var(–ink);font-weight:700} /* ———- capability cards ———- */ #aa .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px} #aa .card{background:var(–surface);border:1px solid var(–line);border-radius:var(–r);padding:26px; transition:transform .4s cubic-bezier(.2,.7,.2,1),border-color .4s,background .4s} #aa .card:hover{transform:translateY(-5px);border-color:rgba(139,121,255,.45);background:var(–surface-2)} #aa .card .ico{width:46px;height:46px;margin-bottom:16px} #aa .card .ico svg{width:22px;height:22px} #aa .card h3{font-size:17.92px;margin-bottom:8px} #aa .card p{color:var(–muted);font-size:15.2px} /* ———- showcase trio ———- */ #aa .trio{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:50px} #aa .trio figure{position:relative} #aa .trio figcaption{margin-top:16px;font-family:var(–f-mono);font-size:11.84px;letter-spacing:.1em; text-transform:uppercase;color:var(–muted)} #aa .trio figcaption b{color:var(–ink);font-weight:600;display:block;letter-spacing:0; font-family:var(–f-body);font-size:16.32px;text-transform:none;margin-top:4px} /* ———- problem ———- */ #aa .problem{position:relative} #aa .problem .quote{font-family:var(–f-display);font-weight:800;letter-spacing:-.025em;line-height:1.08; font-size:clamp(27.2px,3.8vw,46.4px);max-width:20ch} #aa .problem .quote .grad{display:inline} #aa .problem .body{color:var(–muted);font-size:clamp(16.32px,1.4vw,18.56px);max-width:54ch;margin-top:26px} #aa .problem-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(34px,5vw,64px);align-items:center} #aa .miss{display:grid;gap:12px} #aa .miss .row{display:flex;gap:14px;align-items:center;background:var(–surface);border:1px solid var(–line); border-radius:14px;padding:16px 18px} #aa .miss .x{flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center; background:rgba(255,90,90,.12);border:1px solid rgba(255,90,90,.3);color:#ff7a7a} #aa .miss .x svg{width:14px;height:14px} #aa .miss .row span{color:var(–muted);font-size:15.68px} /* ———- benefits ———- */ #aa .bens{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:48px} #aa .ben{background:var(–surface);border:1px solid var(–line);border-radius:16px;padding:24px; transition:transform .35s,border-color .35s} #aa .ben:hover{transform:translateY(-4px);border-color:rgba(255,138,34,.4)} #aa .ben .ico{width:42px;height:42px;margin-bottom:14px} #aa .ben .ico svg{width:20px;height:20px} #aa .ben h4{font-family:var(–f-display);font-weight:700;font-size:16.64px;letter-spacing:-.01em;margin-bottom:6px} #aa .ben p{color:var(–muted);font-size:14.4px;line-height:1.5} /* ———- use cases ———- */ #aa .chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px} #aa .chip{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:15.68px; background:var(–surface);border:1px solid var(–line);padding:12px 20px;border-radius:999px; transition:transform .3s,border-color .3s,background .3s,color .3s} #aa .chip svg{width:17px;height:17px;color:var(–violet-2);transition:color .3s} #aa .chip:hover{transform:translateY(-3px);border-color:var(–orange);background:rgba(255,138,34,.08)} #aa .chip:hover svg{color:var(–orange-2)} #aa .subhead{font-family:var(–f-mono);font-size:11.84px;letter-spacing:.16em;text-transform:uppercase; color:var(–muted-2);margin:44px 0 0} #aa .tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px} #aa .tag-s{font-family:var(–f-mono);font-size:12.48px;color:var(–muted); border:1px dashed var(–line);padding:8px 14px;border-radius:8px} /* ———- stats ———- */ #aa .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:8px} #aa .stat{text-align:center;padding:14px} #aa .stat .n{font-family:var(–f-display);font-weight:800;font-size:clamp(38.4px,5vw,57.6px);line-height:1; letter-spacing:-.03em;background:linear-gradient(160deg,#fff,var(–violet-2)); -webkit-background-clip:text;background-clip:text;color:transparent} #aa .stat .l{font-family:var(–f-mono);font-size:11.84px;letter-spacing:.12em;text-transform:uppercase; color:var(–muted);margin-top:12px} /* ———- requirements ———- */ #aa .reqcard{background:linear-gradient(160deg,var(–bg-3),var(–bg-2));border:1px solid var(–line); border-radius:22px;padding:clamp(28px,4vw,46px)} #aa .reqgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 36px;margin-top:8px} #aa .reqgrid li{list-style:none;display:flex;gap:13px;align-items:flex-start;color:var(–muted);font-size:16px} #aa .reqgrid .ck{flex:none;width:22px;height:22px;border-radius:6px;display:grid;place-items:center;margin-top:3px; background:rgba(89,74,225,.18);border:1px solid rgba(139,121,255,.4);color:var(–violet-2)} #aa .reqgrid .ck svg{width:13px;height:13px} #aa .reqgrid b{color:var(–ink);font-weight:600} #aa .note{margin-top:24px;display:flex;gap:12px;align-items:flex-start;color:var(–muted-2);font-size:14.4px; border-top:1px solid var(–line);padding-top:20px} #aa .note svg{flex:none;width:18px;height:18px;color:var(–orange-2);margin-top:1px} /* ———- faq ———- */ #aa .faq{max-width:840px;margin:44px auto 0} #aa .faq details{border-bottom:1px solid var(–line)} #aa .faq summary{list-style:none;cursor:pointer;padding:24px 50px 24px 4px;position:relative; font-family:var(–f-display);font-weight:600;font-size:clamp(16.64px,1.6vw,18.88px);letter-spacing:-.01em} #aa .faq summary::-webkit-details-marker{display:none} #aa .faq summary::after{content:””;position:absolute;right:6px;top:50%;width:14px;height:14px; margin-top:-7px;background: linear-gradient(var(–orange-2),var(–orange-2)) center/14px 2px no-repeat, linear-gradient(var(–orange-2),var(–orange-2)) center/2px 14px no-repeat; transition:transform .3s} #aa .faq details[open] summary::after{transform:rotate(135deg)} #aa .faq .ans{color:var(–muted);font-size:16px;padding:0 50px 26px 4px;max-width:70ch} /* ———- final cta ———- */ #aa .cta{position:relative;overflow:hidden;border-radius:30px;padding:clamp(48px,7vw,90px) clamp(28px,5vw,72px); text-align:center; background:linear-gradient(125deg,#1a1147 0%,var(–violet) 42%,#c2641a 100%)} #aa .cta::before{content:””;position:absolute;inset:0;opacity:.5;pointer-events:none; background:radial-gradient(40% 60% at 80% 20%,rgba(255,255,255,.25),transparent 60%)} #aa .cta::after{content:””;position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;opacity:.5; background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px); background-size:48px 48px;-webkit-mask:radial-gradient(70% 80% at 50% 50%,#000,transparent);mask:radial-gradient(70% 80% at 50% 50%,#000,transparent)} #aa .cta h2{font-size:clamp(33.6px,5vw,56px);position:relative;z-index:2} #aa .cta p{color:rgba(255,255,255,.86);font-size:clamp(16.8px,1.6vw,19.84px);max-width:54ch;margin:20px auto 0;position:relative;z-index:2} #aa .cta .btns{justify-content:center;margin-top:36px;position:relative;z-index:2} #aa .cta .btn-white{background:#fff;color:#15102e} #aa .cta .btn-white:hover{transform:translateY(-2px);box-shadow:0 18px 40px -12px rgba(0,0,0,.5)} #aa .cta .btn-clear{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4);color:#fff} #aa .cta .btn-clear:hover{transform:translateY(-2px);background:rgba(255,255,255,.2)} #aa .cta .contact{position:relative;z-index:2;margin-top:30px;display:flex;flex-wrap:wrap;gap:8px 26px; justify-content:center;font-family:var(–f-mono);font-size:12.8px;color:rgba(255,255,255,.82)} #aa .cta .contact a{border-bottom:1px solid rgba(255,255,255,.4)} /* ———- page footer line ———- */ #aa .pf{padding:38px 0;border-top:1px solid var(–line);text-align:center} #aa .pf .links{display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:center;font-family:var(–f-mono); font-size:12.48px;letter-spacing:.04em;color:var(–muted)} #aa .pf .links a:hover{color:var(–orange-2)} #aa .pf small{display:block;margin-top:18px;color:var(–muted-2);font-size:12.48px} /* ———- reveal ———- */ #aa.js .reveal{opacity:0;transform:translateY(22px)} #aa.js .reveal.in{opacity:1;transform:none;transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1)} #aa.js .stagger>*{opacity:0;transform:translateY(22px)} #aa.js .stagger.in>*{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)} #aa.js .stagger.in>*:nth-child(1){transition-delay:.02s} #aa.js .stagger.in>*:nth-child(2){transition-delay:.08s} #aa.js .stagger.in>*:nth-child(3){transition-delay:.14s} #aa.js .stagger.in>*:nth-child(4){transition-delay:.2s} #aa.js .stagger.in>*:nth-child(5){transition-delay:.26s} #aa.js .stagger.in>*:nth-child(6){transition-delay:.32s} #aa.js .stagger.in>*:nth-child(7){transition-delay:.38s} #aa.js .stagger.in>*:nth-child(8){transition-delay:.44s} /* ———- testimonial ———- */ #aa .quote-band{max-width:900px;margin:0 auto;text-align:center;position:relative} #aa .quote-band .qm{font-family:var(–f-display);font-weight:800;font-size:80px;line-height:.5;color:var(–orange);opacity:.55;height:40px} #aa .quote-band blockquote{font-family:var(–f-display);font-weight:700;letter-spacing:-.02em;line-height:1.22;font-size:clamp(22.4px,3vw,35.2px);margin:16px auto 0;max-width:25ch} #aa .quote-band cite{display:block;margin-top:26px;font-style:normal;font-family:var(–f-mono);font-size:13.12px;letter-spacing:.06em;color:var(–muted)} #aa .quote-band cite b{color:var(–ink);font-weight:600} #aa .ph{outline:1px dashed rgba(255,138,34,.5);outline-offset:8px;border-radius:6px} #aa .ph-tag{display:inline-block;margin-top:22px;font-family:var(–f-mono);font-size:10.56px;letter-spacing:.14em;text-transform:uppercase;color:var(–orange-2);background:rgba(255,138,34,.1);border:1px solid rgba(255,138,34,.32);padding:6px 12px;border-radius:999px} /* ———- done-for-you ———- */ #aa .dfy-card{background:linear-gradient(160deg,rgba(89,74,225,.13),var(–surface));border:1px solid var(–line);border-radius:var(–r);padding:28px;transition:transform .4s cubic-bezier(.2,.7,.2,1),border-color .4s} #aa .dfy-card:hover{transform:translateY(-5px);border-color:rgba(255,138,34,.4)} #aa .dfy-card .ico{width:48px;height:48px;margin-bottom:16px} #aa .dfy-card .ico svg{width:24px;height:24px} #aa .dfy-card h3{font-size:17.92px;margin-bottom:8px} #aa .dfy-card p{color:var(–muted);font-size:15.36px} /* ———- responsive ———- */ @media(max-width:900px){ #aa .pillars,#aa .grid3,#aa .trio,#aa .bens,#aa .stats,#aa .problem-grid,#aa .reqgrid{grid-template-columns:1fr} #aa .bens{grid-template-columns:1fr 1fr} #aa .stats{grid-template-columns:1fr 1fr;gap:30px} #aa .feature{grid-template-columns:1fr;gap:40px} #aa .feature.flip .feat-copy{order:1} #aa .feature.flip .feat-shot{order:2} #aa .hero-monitor{transform:none!important} } @media(max-width:560px){ #aa{font-size:16px} #aa .bens{grid-template-columns:1fr} #aa .btns{flex-direction:column;align-items:stretch} #aa .btn{justify-content:center} #aa .wrap{padding:0 20px} } @media(prefers-reduced-motion:reduce){ #aa *{animation:none!important;transition:none!important} #aa.js .reveal,#aa.js .stagger>*{opacity:1!important;transform:none!important} #aa .hero-monitor{transform:none!important} } #aa img{cursor:zoom-in;transition:filter .3s ease}#aa img:hover{filter:brightness(1.06)}#aa .monitor::after{content:’2922′;position:absolute;bottom:12px;right:12px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(8,8,16,.62);border:1px solid rgba(255,255,255,.20);color:#fff;font-size:17px;opacity:0;transform:scale(.9);transition:opacity .3s ease,transform .3s ease;pointer-events:none;backdrop-filter:blur(4px);z-index:3}#aa .monitor:hover::after{opacity:1;transform:scale(1)}#aa .lb{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:4vmin;background:rgba(4,4,10,.93);backdrop-filter:blur(7px);cursor:zoom-out;opacity:0;transition:opacity .25s ease}#aa .lb.open{display:flex;opacity:1}#aa .lb img{max-width:96vw;max-height:92vh;width:auto;height:auto;border-radius:12px;cursor:default;border:1px solid rgba(255,255,255,.16);box-shadow:0 40px 120px rgba(0,0,0,.65)}#aa .lb-x{position:absolute;top:18px;right:22px;width:46px;height:46px;border-radius:50%;cursor:pointer;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#fff;font-size:26px;line-height:1;display:flex;align-items:center;justify-content:center;transition:background .2s ease}#aa .lb-x:hover{background:rgba(255,255,255,.17)}#aa .lb-hint{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);font-family:var(–f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55)}@media(prefers-reduced-motion:reduce){#aa .lb{transition:none}#aa img{transition:none}} 3CX Add-on · by VoIPTools All your call audio. One console. Audio Announcer unifies three essential 3CX tools: Recording Beep, Agent Greetings, and Barge Messages. The right beep, greeting, and message play automatically, on exactly the calls you choose. Get Audio Announcer Schedule a live demo 3CX Platinum Partner 15+ years on 3CX 100+ countries 24/7 support LIVE · Recording Beep Purpose-built for 3CX 3CX Platinum Partner 3CX Advanced Certified Cloud or on-prem ready Browser-based portal 24/7 USA, India & Philippines support Three tools · one interface Three jobs your phone system should never get wrong. Audio Announcer brings them together with shared reporting, logs, role-based access, and custom branding. You manage all of it from a single browser-based console that connects to your 3CX. Module 01 Recording Beep An audible beep tells everyone the call is recorded. It’s automatic, configurable, and set per department. Module 02 Agent Greetings The instant an agent answers a queue call, a perfect greeting plays in their own voice. Module 03 Barge Messages Drop a disclaimer or notice into a live call with one click. It plays to everyone, then exits. The case for automation The messages that protect your business shouldn’t depend on memory. In a busy contact center, things slip. A notice gets forgotten. A greeting comes out differently every time, or doesn’t happen at all. A long compliance script gets rushed or skipped. Each gap is a risk; each inconsistency chips away at the experience you built. Audio Announcer removes the human variable entirely. “I forgot to say the call was being recorded.” Every agent greets callers a little differently. Long legal disclaimers get rushed or mangled. No record of what was actually played, or when. Module 01 · Recording Beep Recording transparency, on autopilot. An audible beep tells everyone on the line the call is being recorded, so you stay transparent and compliant without depending on agents to say a word. Per-department control: each department gets its own independent settings. Target the right calls: inbound, outbound, and queue calls, separately. Initial delay before the first beep, set in seconds. Play once, or repeat at a set interval for the whole call. Upload your own .wav beep tone. Module 02 · Agent Greetings A flawless intro on every single call. The moment an agent answers a queue call, a pre-recorded greeting plays in their own voice. Whether it’s a warm welcome or a required notice, it comes out perfectly every time. Plays automatically the instant an agent answers a queue call. The agent’s own voice: personal, never robotic. Per-queue, per-agent: different greetings for different queues. Record from your phone, or upload an audio file. Activate, play, or remove greetings in a click. Module 03 · Barge Messages Important announcements, mid-call, on demand. Need to deliver a disclaimer, a consent notice, or any standardized message during a live call? Click once and Audio Announcer joins the call, plays your message so everyone hears it, then exits on its own. One-click injection into any live call. A reusable prompt library, with versions and descriptions. Upload a .wav or type text for text-to-speech. A wide choice of text-to-speech engines: control voice, language, and speed. Plays to all parties, then exits the call automatically. More than audio Built for teams that take their calls seriously. Reporting, logging, access control, and custom branding come standard, so Audio Announcer is auditable, manageable, and on-brand. Reporting & exportsSee it in any time zone. Export to CSV, Excel, or PDF. Full activity logsA timestamped audit trail that makes troubleshooting fast. One control panelRoles, branding, and TTS, all in Settings. Reporting & exports Every barged-in message is logged with date, number, extension, file, and version. It’s all exportable for QA and audits. Activity logs A detailed, timestamped event log gives you a clear audit trail and painless troubleshooting. Role-based access Decide exactly which roles can view and manage each page. Assign or reset permissions in seconds. Custom Branding Add your own logo and adjust the portal’s colors to match your brand. Text-to-speech Turn text into natural audio with a wide range of text-to-speech engines. No recording studio required. Granular targeting Dial in behavior by department, queue, and call type. Precise control, no guesswork. Why teams add it to 3CX Less risk. More consistency. Zero busywork. Reduce compliance risk Required notices play automatically, every time. Protect your brand A consistent, professional experience on every call. Save agents time No repeating intros, no reading long disclaimers. One app, not three Manage all your call audio in a single place. Audit-ready Reporting and logs you can export on demand. Granular control By department, queue, and call type. On-brand Add your logo and adjust colors to match your brand. Easy to run Runs on its own server, managed from the browser. Made for high-stakes conversations Built for the calls that carry real consequences. Financial services & banking Healthcare & medical offices Legal & professional services Collections & debt recovery Contact centers & BPOs Insurance Anyone who records calls Message types it handles Recording notices Privacy & consent disclosures Legal disclaimers Regulatory notices Accessibility notices Backed by the 3CX add-on specialists VoIPTools builds for 3CX, and only 3CX. 15+Years on 3CX 100+Countries served 30+Tools for 3CX 24/7USA · India · Philippines What you’ll need Requirements 3CX Professional or Enterprise, on Windows or Linux, hosted or on-prem VoIPTools Relay installed on your 3CX server A separate Windows server to run Audio Announcer (it never runs on the 3CX box itself) Microsoft SQL Server (free Express edition supported) Microsoft .NET Static IP / FQDN recommended (HTTPS) Not sure if your setup is ready? Our team will check it with you, and our paid Installation Support can set everything up for you, end to end. Your install, your call Run it yourself, or let us run it for you. Audio Announcer runs on its own server alongside your 3CX. Don’t want to set one up? Our team can handle the whole thing. We install & configure Our engineers set it up end to end, and tune it to how your team actually takes calls. Managed hosting Prefer not to host it yourself? We can run your VoIPTools on AWS, with real-time monitoring around the clock. Updates handled We keep everything installed, configured, and updated, so you get new features without the maintenance. Questions, answered The fine print, up front. Will it work with my 3CX? Audio Announcer works with 3CX Professional and Enterprise editions, whether your 3CX is on Windows or Linux, hosted or on-prem. It runs on its own server and connects to 3CX through the VoIPTools Relay. Reach out and we’ll confirm compatibility with your exact version. Do agents have to install anything? No. Audio Announcer is browser-based, so there’s nothing to install on agent desktops. Everything is managed from a single web portal. Can the recording beep help us meet legal requirements? Yes. It’s designed to help you comply with call-recording disclosure laws, and you control the delay and frequency. It isn’t legal advice, so always confirm the specific rules for your jurisdiction and industry. Can we use our own audio? Absolutely. Upload your own .wav files, or generate audio from text using a wide choice of built-in text-to-speech engines. Can we control who has access? Yes. Role-based permissions let you decide which roles can view and manage each page, and you can assign or reset them in seconds. Can we make it match our brand? Yes. Custom Branding lets you add your own logo and adjust the portal’s colors to match your brand. “ Add a real customer quote here — even one line about staying compliant or saving agents time on every call lands well. Placeholder · swap in a real quote — Customer name, Title · Company Put your call audio on autopilot. Get Audio Announcer with the VoIPTools Universal Subscription, and unlock every VoIPTools app for 3CX in the bargain. Want to see it first? Book a live demo on your own system. Get Audio Announcer Schedule a live demo support@voiptools.com +1 801-642-4655 24/7 support Book a demo Subscribe Downloads & docs Contact Audio Announcer is a VoIPTools add-on for the 3CX phone system. ×Click anywhere to close