ava-engine 0.0.0-stage → 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.env.example +63 -0
- package/CLA.md +43 -0
- package/COMMERCIAL-LICENSE.md +43 -0
- package/LICENSE +73 -0
- package/README.md +238 -2
- package/THIRD_PARTY_NOTICES.md +38 -0
- package/TRADEMARKS.md +31 -0
- package/bin/ava-engine.mjs +12 -0
- package/lib/asr.mjs +143 -0
- package/lib/cli/config.mjs +95 -0
- package/lib/cli/main.mjs +152 -0
- package/lib/cli/setup.mjs +219 -0
- package/lib/fetch-models.mjs +104 -0
- package/lib/guard.mjs +92 -0
- package/lib/models.mjs +47 -0
- package/lib/openrouter.mjs +153 -0
- package/lib/ours.mjs +766 -0
- package/lib/platforms.mjs +201 -0
- package/lib/state.mjs +150 -0
- package/lib/stt.mjs +22 -0
- package/lib/tts.mjs +178 -0
- package/lib/workflow.mjs +18 -0
- package/package.json +72 -4
- package/public/app.js +1708 -0
- package/public/demo.js +420 -0
- package/public/favicon.svg +1 -0
- package/public/fonts/OFL.txt +96 -0
- package/public/fonts/inter-tight-var.woff2 +0 -0
- package/public/fonts/inter-var.woff2 +0 -0
- package/public/fonts/plex-mono-400.woff2 +0 -0
- package/public/fonts/plex-mono-500.woff2 +0 -0
- package/public/img/cta-1600.avif +0 -0
- package/public/img/cta-1600.webp +0 -0
- package/public/img/cta-2400.avif +0 -0
- package/public/img/cta-2400.webp +0 -0
- package/public/img/cta-960.avif +0 -0
- package/public/img/cta-960.webp +0 -0
- package/public/img/flows-1600.avif +0 -0
- package/public/img/flows-1600.webp +0 -0
- package/public/img/flows-2400.avif +0 -0
- package/public/img/flows-2400.webp +0 -0
- package/public/img/flows-960.avif +0 -0
- package/public/img/flows-960.webp +0 -0
- package/public/img/hero-1600.avif +0 -0
- package/public/img/hero-1600.webp +0 -0
- package/public/img/hero-2400.avif +0 -0
- package/public/img/hero-2400.webp +0 -0
- package/public/img/hero-960.avif +0 -0
- package/public/img/hero-960.webp +0 -0
- package/public/img/p-csm-480.avif +0 -0
- package/public/img/p-csm-480.webp +0 -0
- package/public/img/p-csm-800.avif +0 -0
- package/public/img/p-csm-800.webp +0 -0
- package/public/img/p-docs-480.avif +0 -0
- package/public/img/p-docs-480.webp +0 -0
- package/public/img/p-docs-800.avif +0 -0
- package/public/img/p-docs-800.webp +0 -0
- package/public/img/p-quiet-480.avif +0 -0
- package/public/img/p-quiet-480.webp +0 -0
- package/public/img/p-quiet-800.avif +0 -0
- package/public/img/p-quiet-800.webp +0 -0
- package/public/img/p-tickets-480.avif +0 -0
- package/public/img/p-tickets-480.webp +0 -0
- package/public/img/p-tickets-800.avif +0 -0
- package/public/img/p-tickets-800.webp +0 -0
- package/public/img/p-trial-480.avif +0 -0
- package/public/img/p-trial-480.webp +0 -0
- package/public/img/p-trial-800.avif +0 -0
- package/public/img/p-trial-800.webp +0 -0
- package/public/img/sees-1600.avif +0 -0
- package/public/img/sees-1600.webp +0 -0
- package/public/img/sees-2400.avif +0 -0
- package/public/img/sees-2400.webp +0 -0
- package/public/img/sees-960.avif +0 -0
- package/public/img/sees-960.webp +0 -0
- package/public/img/speaks-1600.avif +0 -0
- package/public/img/speaks-1600.webp +0 -0
- package/public/img/speaks-2400.avif +0 -0
- package/public/img/speaks-2400.webp +0 -0
- package/public/img/speaks-960.avif +0 -0
- package/public/img/speaks-960.webp +0 -0
- package/public/img/voice-1600.avif +0 -0
- package/public/img/voice-1600.webp +0 -0
- package/public/img/voice-2400.avif +0 -0
- package/public/img/voice-2400.webp +0 -0
- package/public/img/voice-960.avif +0 -0
- package/public/img/voice-960.webp +0 -0
- package/public/index.html +440 -0
- package/public/landing.html +975 -0
- package/public/pcm-worklet.js +11 -0
- package/public/perceptionWorker.js +103 -0
- package/public/rtc.js +60 -0
- package/public/specialist.html +92 -0
- package/public/specialist.js +132 -0
- package/public/style.css +836 -0
- package/public/vendor/lenis.min.js +3 -0
- package/scripts/fetch-models.sh +15 -0
- package/server.mjs +502 -0
|
@@ -0,0 +1,975 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en" class="no-js">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
|
6
|
+
<title>Ava · A live guide on every customer's screen</title>
|
|
7
|
+
<meta name="description" content="Ava joins your customers on a live voice call, sees their screen, and helps with whatever they're doing — onboarding, support, setup and everything in between.">
|
|
8
|
+
<script>
|
|
9
|
+
document.documentElement.classList.replace('no-js', 'js');
|
|
10
|
+
if (matchMedia('(prefers-reduced-motion: reduce)').matches) document.documentElement.classList.add('rm');
|
|
11
|
+
</script>
|
|
12
|
+
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
|
|
13
|
+
<link rel="preload" href="/fonts/inter-tight-var.woff2" as="font" type="font/woff2" crossorigin>
|
|
14
|
+
<link rel="preload" href="/fonts/inter-var.woff2" as="font" type="font/woff2" crossorigin>
|
|
15
|
+
<link rel="preload" as="image" type="image/avif" imagesrcset="/img/hero-960.avif?v=2 960w, /img/hero-1600.avif?v=2 1600w, /img/hero-2400.avif?v=2 2400w" imagesizes="100vw" fetchpriority="high">
|
|
16
|
+
<style>
|
|
17
|
+
@font-face{font-family:'Inter Tight';src:url(/fonts/inter-tight-var.woff2) format('woff2');font-weight:300 600;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD}
|
|
18
|
+
@font-face{font-family:'Inter';src:url(/fonts/inter-var.woff2) format('woff2');font-weight:400 600;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD}
|
|
19
|
+
@font-face{font-family:'IBM Plex Mono';src:url(/fonts/plex-mono-400.woff2) format('woff2');font-weight:400;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD}
|
|
20
|
+
@font-face{font-family:'IBM Plex Mono';src:url(/fonts/plex-mono-500.woff2) format('woff2');font-weight:500;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD}
|
|
21
|
+
:root{
|
|
22
|
+
--bg:#FFFFFF; --soft:#F5F5F7; --soft2:#EDEDF1; --ink:#0A0A0C; --ink2:#5E5F6B; --ink3:#686975;
|
|
23
|
+
--hair:#ECECEF; --hair2:#DEDEE4;
|
|
24
|
+
--acc:#4F46E5; --acc2:#6366F1; --acc-soft:#EEF0FF; --acc-soft2:#DFE2FF;
|
|
25
|
+
--sky:#3E8BE8; --vio:#8B5CF6; --amber:#C97508; --amber-soft:#FFF3DF; --green:#119355; --green-soft:#E3F6EC;
|
|
26
|
+
--disp:'Inter Tight','Inter',ui-sans-serif,system-ui,sans-serif;
|
|
27
|
+
--sans:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
|
|
28
|
+
--mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
|
|
29
|
+
--ease:cubic-bezier(.16,1,.3,1); --cam:cubic-bezier(.7,0,.2,1);
|
|
30
|
+
--r:28px;
|
|
31
|
+
}
|
|
32
|
+
*{box-sizing:border-box}
|
|
33
|
+
html{-webkit-text-size-adjust:100%}
|
|
34
|
+
html.lenis,html.lenis body{height:auto}
|
|
35
|
+
.lenis.lenis-smooth{scroll-behavior:auto!important}
|
|
36
|
+
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
|
|
37
|
+
a{color:inherit;text-decoration:none}
|
|
38
|
+
img{display:block;max-width:100%;height:auto}
|
|
39
|
+
picture{display:contents}
|
|
40
|
+
.js img.fade{opacity:0;transition:opacity .7s var(--ease)}
|
|
41
|
+
.js img.fade.ld{opacity:1}
|
|
42
|
+
::selection{background:var(--acc-soft2)}
|
|
43
|
+
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:8px}
|
|
44
|
+
.wrap{max-width:1240px;margin:0 auto;padding:0 32px}
|
|
45
|
+
@media (max-width:640px){.wrap{padding:0 18px}}
|
|
46
|
+
|
|
47
|
+
/* buttons */
|
|
48
|
+
.btn{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 22px;border-radius:999px;font:500 15px/1 var(--sans);letter-spacing:-.005em;transition:transform .5s var(--ease),background .25s,color .25s,box-shadow .5s var(--ease)}
|
|
49
|
+
.btn .ar{display:inline-block;transition:transform .5s var(--ease)}
|
|
50
|
+
.btn:hover .ar{transform:translateX(4px)}
|
|
51
|
+
.btn:hover{transform:translateY(-1px)}
|
|
52
|
+
.btn-white{background:#fff;color:var(--ink);box-shadow:0 10px 30px -12px rgba(0,0,0,.45)}
|
|
53
|
+
.btn-acc{background:var(--acc);color:#fff;box-shadow:0 10px 24px -12px rgba(79,70,229,.8)}
|
|
54
|
+
.btn-acc:hover{background:#4338CA}
|
|
55
|
+
.btn-dark{background:var(--ink);color:#fff}
|
|
56
|
+
.btn-ghost{color:#fff;padding:0 6px}
|
|
57
|
+
.btn-sm{height:38px;padding:0 16px;font-size:14px}
|
|
58
|
+
|
|
59
|
+
/* announcement */
|
|
60
|
+
.ann{height:40px;display:flex;align-items:center;justify-content:center;gap:10px;font-size:13.5px;color:var(--ink2)}
|
|
61
|
+
.ann b{font-weight:500;color:var(--ink)}
|
|
62
|
+
.ann a{display:inline-flex;align-items:center;gap:4px;color:var(--ink)}
|
|
63
|
+
.ann a span{transition:transform .4s var(--ease)}.ann a:hover span{transform:translateX(3px)}
|
|
64
|
+
.ann i{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(17,147,85,.18)}
|
|
65
|
+
|
|
66
|
+
/* brand */
|
|
67
|
+
.brand{display:inline-flex;align-items:center;color:inherit}
|
|
68
|
+
.wm{display:block;height:17px;width:40.4px;flex:none}
|
|
69
|
+
.nav-in .brand{color:#fff}
|
|
70
|
+
footer .wm{height:22px;width:52.2px}
|
|
71
|
+
|
|
72
|
+
/* navs */
|
|
73
|
+
.nav-in{position:absolute;left:0;right:0;top:0;z-index:5;height:78px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 28px;color:#fff}
|
|
74
|
+
.nav-links{display:flex;gap:28px;font-size:14px;color:rgba(255,255,255,.78)}
|
|
75
|
+
.nav-links a{transition:color .2s}.nav-links a:hover{color:#fff}
|
|
76
|
+
.nav-in .right{justify-self:end}
|
|
77
|
+
.nav-fix{position:fixed;left:50%;top:10px;z-index:80;width:min(1200px,calc(100% - 20px));transform:translate(-50%,-140%);transition:transform .7s var(--ease);height:60px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 10px 0 22px;border-radius:999px;background:rgba(255,255,255,.72);backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%);box-shadow:0 0 0 1px rgba(10,10,12,.06),0 12px 32px -16px rgba(10,10,12,.25)}
|
|
78
|
+
.nav-fix.show{transform:translate(-50%,0)}
|
|
79
|
+
.nav-fix .nav-links{color:var(--ink2)}.nav-fix .nav-links a:hover{color:var(--ink)}
|
|
80
|
+
.nav-fix .right{justify-self:end}
|
|
81
|
+
@media (max-width:900px){.nav-links{display:none}.nav-in,.nav-fix{grid-template-columns:1fr auto}.nav-in .brand,.nav-fix .brand{justify-self:start}}
|
|
82
|
+
|
|
83
|
+
/* ═══════════ HERO ═══════════ */
|
|
84
|
+
.hero{padding:0 8px}
|
|
85
|
+
.hcard{position:relative;height:clamp(700px,calc(100svh - 48px),1000px);border-radius:var(--r);overflow:hidden;background:#111;isolation:isolate;transition:clip-path 1.6s var(--cam)}
|
|
86
|
+
.js .hero:not(.ready) .hcard{clip-path:inset(3% 4% round 40px)}
|
|
87
|
+
.hero.ready .hcard{clip-path:inset(0 round 28px)}
|
|
88
|
+
.ph{position:absolute;inset:-6% 0 -6% 0;z-index:-2;will-change:transform}
|
|
89
|
+
.ph img{width:100%;height:100%;object-fit:cover;object-position:30% 40%;transform:scale(1.16);transition:transform 3.2s var(--cam)}
|
|
90
|
+
.hero.ready .ph img{transform:scale(1.02)}
|
|
91
|
+
.hcard::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(8,8,12,.72) 0%,rgba(8,8,12,.38) 38%,rgba(8,8,12,0) 64%),linear-gradient(0deg,rgba(8,8,12,.7) 0%,rgba(8,8,12,0) 32%),radial-gradient(60% 60% at 80% 30%,rgba(79,70,229,.18),transparent 70%)}
|
|
92
|
+
.hcopy{position:absolute;left:clamp(24px,4vw,56px);bottom:clamp(150px,17vh,190px);width:min(42%,600px);color:#fff}
|
|
93
|
+
.h1{margin:0;font:400 clamp(40px,4.5vw,76px)/.98 var(--disp);letter-spacing:-.05em}
|
|
94
|
+
.h1 .ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
|
|
95
|
+
.h1 .ln>span{display:inline-block;transition:transform 1.4s var(--ease)}
|
|
96
|
+
.h1 .ln:nth-child(2)>span{transition-delay:.08s}.h1 .ln:nth-child(3)>span{transition-delay:.16s}
|
|
97
|
+
.js .hero:not(.ready) .h1 .ln>span{transform:translateY(110%)}
|
|
98
|
+
.h1 .soft{color:rgba(255,255,255,.55)}
|
|
99
|
+
.hsub{margin:22px 0 0;max-width:40ch;font-size:clamp(15.5px,1.2vw,17.5px);color:rgba(255,255,255,.78)}
|
|
100
|
+
.hcta{margin-top:28px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
|
|
101
|
+
.hmeta{font-size:13px;color:rgba(255,255,255,.6)}
|
|
102
|
+
.hsub,.hcta{transition:opacity 1.2s var(--ease) .5s,transform 1.2s var(--ease) .5s}
|
|
103
|
+
.hcta{transition-delay:.62s}
|
|
104
|
+
.js .hero:not(.ready) :is(.hsub,.hcta){opacity:0;transform:translateY(14px)}
|
|
105
|
+
/* bottom chapter captions */
|
|
106
|
+
.caps{position:absolute;left:clamp(24px,4vw,56px);right:clamp(24px,4vw,56px);bottom:26px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;color:#fff;transition:opacity 1.2s var(--ease) .9s}
|
|
107
|
+
.js .hero:not(.ready) .caps{opacity:0}
|
|
108
|
+
.cap .tr{height:1px;background:rgba(255,255,255,.22);margin-bottom:14px;overflow:hidden}
|
|
109
|
+
.cap .tr i{display:block;height:100%;width:0;background:#fff}
|
|
110
|
+
.cap b{display:block;font:500 14.5px/1.3 var(--sans);color:rgba(255,255,255,.62);transition:color .5s}
|
|
111
|
+
.cap span{font-size:13px;color:rgba(255,255,255,.45);transition:color .5s}
|
|
112
|
+
.cap.on b{color:#fff}.cap.on span{color:rgba(255,255,255,.72)}
|
|
113
|
+
|
|
114
|
+
/* floating product panel (the film) */
|
|
115
|
+
.panel{position:absolute;right:clamp(20px,3vw,44px);top:13%;width:min(51%,760px);padding:8px;border-radius:24px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.4);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 50px 100px -40px rgba(0,0,0,.6);transition:opacity 1.4s var(--ease) 1.35s,transform 1.8s var(--ease) 1.35s,filter 1.4s var(--ease) 1.35s;will-change:transform}
|
|
116
|
+
.js .hero:not(.ready) .panel{opacity:0;transform:translateY(60px) scale(.96);filter:blur(10px)}
|
|
117
|
+
.set{--k:1.2;position:relative;container-type:inline-size;aspect-ratio:16/10.6;border-radius:17px;overflow:hidden;perspective:1800px;background:radial-gradient(60% 70% at 15% 15%,rgba(99,102,241,.18),transparent 70%),radial-gradient(50% 60% at 90% 90%,rgba(62,139,232,.16),transparent 70%),linear-gradient(180deg,#F4F5FB,#E6E8F3)}
|
|
118
|
+
.rig{position:absolute;inset:0;transform-style:preserve-3d;transition:transform 1.6s var(--cam)}
|
|
119
|
+
.cam{position:absolute;inset:0;transform-origin:0 0;transition:transform 1.6s var(--cam);will-change:transform;transform-style:preserve-3d}
|
|
120
|
+
.win{position:absolute;left:6%;top:14%;width:88%;container-type:inline-size;border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(10,10,12,.07),0 24px 48px -20px rgba(10,10,12,.35);transform-origin:50% 100%;transition:opacity 1.2s var(--ease),transform 1.6s var(--ease),filter 1.2s var(--ease)}
|
|
121
|
+
.win.off{opacity:0;transform:translateY(8%) rotateX(22deg) scale(.92);filter:blur(12px)}
|
|
122
|
+
.win.dim{filter:saturate(.5) brightness(.98) blur(3px);transform:scale(.965)}
|
|
123
|
+
.chrome{display:flex;align-items:center;gap:1.1cqw;height:5.2cqw;padding:0 1.8cqw;background:#F3F4F8;border-bottom:1px solid #E6E8EF}
|
|
124
|
+
.chrome i{width:1.1cqw;height:1.1cqw;border-radius:50%}
|
|
125
|
+
.chrome i:nth-child(1){background:#F0766A}.chrome i:nth-child(2){background:#F4C355}.chrome i:nth-child(3){background:#5BCB8A}
|
|
126
|
+
.url{margin-left:1.6cqw;width:40cqw;height:3.1cqw;border-radius:1.6cqw;background:#fff;border:1px solid #E2E4EB;display:flex;align-items:center;padding:0 1.3cqw;font:500 1.35cqw/1 var(--mono);color:#737A90}
|
|
127
|
+
.app{position:relative;display:grid;grid-template-columns:14cqw 1fr;aspect-ratio:16/8.6;font-family:var(--sans)}
|
|
128
|
+
.side{background:#FAFAFC;border-right:1px solid #EEF0F4;padding:2.2cqw 1.6cqw;display:flex;flex-direction:column;gap:1.2cqw}
|
|
129
|
+
.logo-n{display:flex;align-items:center;gap:.8cqw;font:600 1.7cqw/1 var(--disp);margin-bottom:1.2cqw}
|
|
130
|
+
.logo-n b{width:2.3cqw;height:2.3cqw;border-radius:.6cqw;background:#12141C}
|
|
131
|
+
.side span{font-size:1.4cqw;color:#7A8095;padding:.7cqw .9cqw;border-radius:.7cqw}
|
|
132
|
+
.side span.on{background:#EEF0FB;color:#3B3FD6;font-weight:600}
|
|
133
|
+
.main{position:relative;padding:2.6cqw 3cqw}
|
|
134
|
+
.main h4{margin:0;font:600 2.4cqw/1.1 var(--disp);letter-spacing:-.02em}
|
|
135
|
+
.main .muted,.modal .muted{font-size:1.4cqw;color:#7A8095;margin:.6cqw 0 2.4cqw}
|
|
136
|
+
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8cqw}
|
|
137
|
+
.plan{border:1px solid #E4E6EE;border-radius:1.3cqw;padding:1.8cqw;display:flex;flex-direction:column;gap:.7cqw;background:#fff}
|
|
138
|
+
.plan .nm{font:600 1.6cqw/1 var(--sans)}
|
|
139
|
+
.plan .pr{font:600 3.1cqw/1 var(--disp);letter-spacing:-.03em}
|
|
140
|
+
.plan .pr small{font:500 1.3cqw var(--sans);color:#7A8095;margin-left:.3cqw}
|
|
141
|
+
.plan .cr{font-size:1.35cqw;color:#5C6276}
|
|
142
|
+
.plan .bt{margin-top:1.2cqw;height:3.6cqw;border-radius:.9cqw;display:grid;place-items:center;font:600 1.4cqw/1 var(--sans);background:#EEF0F6;color:#454A5E;transition:background .3s,color .3s}
|
|
143
|
+
.plan .bt.go{background:#4F46E5;color:#fff}
|
|
144
|
+
.plan.cur .bt{background:transparent;border:1px solid #E1E3EA;color:#9AA0B3}
|
|
145
|
+
.tag-cur{font:600 1.05cqw/1 var(--mono);letter-spacing:.06em;color:#3B3FD6;background:#EEF0FB;padding:.5cqw .8cqw;border-radius:.6cqw;align-self:flex-start}
|
|
146
|
+
.mbg{position:absolute;inset:0;display:grid;place-items:center;background:rgba(18,20,34,.26);opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility 0s .5s}
|
|
147
|
+
.mbg.open{opacity:1;visibility:visible;transition:opacity .5s var(--ease)}
|
|
148
|
+
.modal{position:relative;width:44cqw;transform:translateY(2cqw) scale(.96);opacity:0;background:#fff;border-radius:1.6cqw;padding:2.6cqw;box-shadow:0 3cqw 6cqw -2cqw rgba(0,0,0,.3);transition:opacity .5s var(--ease),transform .7s var(--ease)}
|
|
149
|
+
.mbg.open .modal{opacity:1;transform:none}
|
|
150
|
+
.modal h5{margin:0 0 .4cqw;font:600 2.3cqw/1.1 var(--disp)}
|
|
151
|
+
.modal .muted{margin:0 0 1.8cqw}
|
|
152
|
+
.mrow{display:flex;align-items:center;justify-content:space-between;padding:1.2cqw 0;border-top:1px solid #EEF0F4;font-size:1.6cqw;color:#4A5064}
|
|
153
|
+
.seat{min-width:6cqw;height:3.6cqw;border:1px solid #D9DCE6;border-radius:.8cqw;display:grid;place-items:center;font:600 1.7cqw var(--mono);transition:border-color .3s,box-shadow .3s}
|
|
154
|
+
.seat.focus{border-color:#6366F1;box-shadow:0 0 0 .5cqw rgba(99,102,241,.18)}
|
|
155
|
+
.total{font:600 2.8cqw/1 var(--disp);letter-spacing:-.03em;font-variant-numeric:tabular-nums;transition:color .4s}
|
|
156
|
+
.total.flag{color:#C4520F}.total.good{color:#119355}
|
|
157
|
+
.mbtn{margin-top:1.8cqw;height:4.4cqw;border-radius:1cqw;background:#4F46E5;color:#fff;display:grid;place-items:center;font:600 1.6cqw var(--sans)}
|
|
158
|
+
.trk{position:absolute;left:0;top:0;border-radius:1.6cqw;border:.25cqw solid var(--acc2);opacity:0;pointer-events:none;box-shadow:0 0 0 .7cqw rgba(99,102,241,.14),0 0 4cqw rgba(99,102,241,.35);transition:left 1s var(--cam),top 1s var(--cam),width 1s var(--cam),height 1s var(--cam),opacity .5s var(--ease),border-color .4s,box-shadow .4s}
|
|
159
|
+
.trk.on{opacity:1}
|
|
160
|
+
.trk.ok{border-color:#1DB26C;box-shadow:0 0 0 .7cqw rgba(29,178,108,.16),0 0 4cqw rgba(29,178,108,.35)}
|
|
161
|
+
.trk.warn{border-color:#E08A12;box-shadow:0 0 0 .7cqw rgba(224,138,18,.18),0 0 4cqw rgba(224,138,18,.4);animation:hlp 1.2s ease-in-out infinite}
|
|
162
|
+
@keyframes hlp{50%{box-shadow:0 0 0 1.2cqw rgba(224,138,18,.08),0 0 5cqw rgba(224,138,18,.45)}}
|
|
163
|
+
.trk b{position:absolute;left:-.25cqw;bottom:calc(100% + .6cqw);white-space:nowrap;font:600 1.4cqw/1 var(--sans);color:#fff;background:var(--acc2);padding:.8cqw 1.1cqw;border-radius:.8cqw .8cqw .8cqw 0;transition:background .4s}
|
|
164
|
+
.trk.ok b{background:#119355}.trk.warn b{background:#C97508}
|
|
165
|
+
.cursor{position:absolute;left:0;top:0;width:2.4cqw;height:2.4cqw;min-width:12px;min-height:12px;transition:transform 1s var(--cam);z-index:5;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}
|
|
166
|
+
.rip{position:absolute;width:4cqw;height:4cqw;margin:-2cqw 0 0 -2cqw;border-radius:50%;border:2px solid #6366F1;animation:rip .6s var(--ease) forwards;pointer-events:none;z-index:4}
|
|
167
|
+
@keyframes rip{from{transform:scale(.3);opacity:1}to{transform:scale(1.7);opacity:0}}
|
|
168
|
+
.ribbon{position:absolute;left:0;right:0;bottom:0;width:100%;height:26%;z-index:5;pointer-events:none}
|
|
169
|
+
.glint{position:absolute;inset:0;z-index:9;pointer-events:none;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.6) 48%,rgba(255,255,255,.1) 54%,transparent 62%);transform:translateX(-110%)}
|
|
170
|
+
.glint.go{animation:glint 1.6s var(--cam)}
|
|
171
|
+
@keyframes glint{to{transform:translateX(110%)}}
|
|
172
|
+
.glass{position:absolute;z-index:6;background:rgba(255,255,255,.84);backdrop-filter:blur(14px) saturate(170%);-webkit-backdrop-filter:blur(14px) saturate(170%);border:1px solid rgba(255,255,255,.95);box-shadow:0 1px 0 #fff inset,0 1.6cqw 4cqw -1.6cqw rgba(10,10,12,.3);border-radius:calc(var(--k)*2cqw);transition:opacity .7s var(--ease),transform .9s var(--ease)}
|
|
173
|
+
.glass.off{opacity:0;transform:translateY(1.6cqw) scale(.95)}
|
|
174
|
+
.g-share{left:3cqw;top:2.6cqw;display:flex;align-items:center;gap:1.1cqw;padding:calc(var(--k)*1.2cqw) calc(var(--k)*1.8cqw);font:500 calc(var(--k)*1.75cqw)/1 var(--sans);color:var(--ink2)}
|
|
175
|
+
.g-share i{width:calc(var(--k)*1cqw);height:calc(var(--k)*1cqw);border-radius:50%;background:#E5484D;animation:blink 1.5s infinite}
|
|
176
|
+
@keyframes blink{50%{opacity:.25}}
|
|
177
|
+
.g-call{right:3cqw;top:2cqw;display:flex;align-items:center;gap:calc(var(--k)*1.4cqw);padding:calc(var(--k)*1cqw) calc(var(--k)*2cqw) calc(var(--k)*1cqw) calc(var(--k)*1cqw)}
|
|
178
|
+
.orb{position:relative;width:34px;height:34px;flex:none}
|
|
179
|
+
.g-call .orb{width:calc(var(--k)*5cqw);height:calc(var(--k)*5cqw)}
|
|
180
|
+
.orb .c{position:absolute;inset:12%;border-radius:50%;background:radial-gradient(circle at 34% 30%,#D4D6FF,#6366F1 55%,#3730A3);box-shadow:0 0 14px rgba(99,102,241,.55)}
|
|
181
|
+
.orb .r{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(99,102,241,.5);opacity:0}
|
|
182
|
+
.orb.on .r{animation:rr 1.6s var(--ease) infinite}.orb.on .r+.r{animation-delay:.55s}
|
|
183
|
+
.orb.on .c{animation:br .5s ease-in-out infinite alternate}
|
|
184
|
+
@keyframes rr{from{transform:scale(.75);opacity:.9}to{transform:scale(1.55);opacity:0}}
|
|
185
|
+
@keyframes br{to{transform:scale(1.08)}}
|
|
186
|
+
.g-call .t b{display:block;font:600 calc(var(--k)*1.9cqw)/1.2 var(--disp)}
|
|
187
|
+
.g-call .t span{font:400 calc(var(--k)*1.55cqw)/1.3 var(--mono);color:var(--ink3)}
|
|
188
|
+
.g-sub{left:50%;bottom:3.2cqw;transform:translateX(-50%);width:max-content;max-width:84%;padding:calc(var(--k)*1.5cqw) calc(var(--k)*2.2cqw);display:flex;gap:calc(var(--k)*1.4cqw);align-items:baseline}
|
|
189
|
+
.g-sub.off{transform:translate(-50%,1.6cqw) scale(.97)}
|
|
190
|
+
.g-sub .who{flex:none;font:500 calc(var(--k)*1.35cqw)/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--sky)}
|
|
191
|
+
.g-sub.ava .who{color:var(--acc)}
|
|
192
|
+
.g-sub .tx{font:500 calc(var(--k)*2.05cqw)/1.35 var(--sans);color:var(--ink)}
|
|
193
|
+
.g-recap{left:50%;top:50%;width:58%;transform:translate(-50%,-50%);padding:calc(var(--k)*2.6cqw) calc(var(--k)*3cqw);background:rgba(255,255,255,.95)}
|
|
194
|
+
.g-recap.off{transform:translate(-50%,-42%) scale(.94)}
|
|
195
|
+
.g-recap .top{display:flex;justify-content:space-between;align-items:center;font:500 calc(var(--k)*1.35cqw)/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
|
|
196
|
+
.g-recap .top span{color:var(--green)}
|
|
197
|
+
.g-recap h6{margin:calc(var(--k)*1.4cqw) 0 calc(var(--k)*1.8cqw);font:500 calc(var(--k)*2.6cqw)/1.2 var(--disp);letter-spacing:-.025em}
|
|
198
|
+
.g-recap .ks{display:grid;grid-template-columns:repeat(3,1fr);gap:1cqw}
|
|
199
|
+
.g-recap .ks div{border-radius:1.4cqw;background:var(--soft);padding:calc(var(--k)*1.3cqw)}
|
|
200
|
+
.g-recap .ks b{display:block;font:500 calc(var(--k)*3.2cqw)/1 var(--disp);letter-spacing:-.04em}
|
|
201
|
+
.g-recap .ks span{font-size:calc(var(--k)*1.4cqw);color:var(--ink3)}
|
|
202
|
+
|
|
203
|
+
@media (max-width:1000px){
|
|
204
|
+
.hcard{height:auto;min-height:calc(100svh - 48px);display:flex;flex-direction:column}
|
|
205
|
+
.hcard::before{background:linear-gradient(0deg,rgba(8,8,12,.88) 0%,rgba(8,8,12,.62) 50%,rgba(8,8,12,.25) 100%)}
|
|
206
|
+
.panel{order:2;position:relative;right:auto;top:auto;width:auto;margin:0 16px 128px;transition-delay:.9s}
|
|
207
|
+
.hcopy{order:1;position:relative;left:auto;bottom:auto;width:auto;padding:112px 22px 32px}
|
|
208
|
+
.set{--k:1.45}
|
|
209
|
+
.caps{grid-template-columns:1fr;gap:10px;bottom:20px}
|
|
210
|
+
.cap:not(.on){display:none}
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
/* ═══════════ calm sections ═══════════ */
|
|
214
|
+
.sec{padding:140px 0}
|
|
215
|
+
.eyebrow{display:inline-flex;align-items:center;gap:8px;font:500 13px/1 var(--sans);color:var(--acc)}
|
|
216
|
+
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--acc)}
|
|
217
|
+
.h2{margin:16px 0 0;font:400 clamp(36px,4.6vw,64px)/1.02 var(--disp);letter-spacing:-.05em;text-wrap:balance}
|
|
218
|
+
.h2 .soft{color:var(--ink3)}
|
|
219
|
+
.lede{color:var(--ink2);font-size:17px;max-width:46ch;margin:0}
|
|
220
|
+
.head2{display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:end}
|
|
221
|
+
@media (max-width:900px){.head2{grid-template-columns:1fr;gap:20px}}
|
|
222
|
+
.center{text-align:center}.center .lede{margin:20px auto 0}
|
|
223
|
+
.rv{transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
|
|
224
|
+
.js .rv:not(.in){opacity:0;transform:translateY(24px)}
|
|
225
|
+
|
|
226
|
+
/* works-with line */
|
|
227
|
+
.works{padding:88px 0 0;text-align:center}
|
|
228
|
+
.works p{margin:0 auto;max-width:34ch;font:400 clamp(22px,2.2vw,30px)/1.3 var(--disp);letter-spacing:-.03em}
|
|
229
|
+
.works p .soft{color:var(--ink3)}
|
|
230
|
+
.works .row{margin-top:30px;display:flex;justify-content:center;flex-wrap:wrap;gap:10px}
|
|
231
|
+
.pill{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border-radius:999px;background:var(--soft);font-size:14px;color:var(--ink2)}
|
|
232
|
+
.pill svg{color:var(--acc)}
|
|
233
|
+
|
|
234
|
+
/* problem cards */
|
|
235
|
+
.rail-wrap{margin-top:64px;position:relative}
|
|
236
|
+
.rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 max(32px,calc((100vw - 1240px)/2 + 32px));scroll-padding:0 max(32px,calc((100vw - 1240px)/2 + 32px))}
|
|
237
|
+
.rail::-webkit-scrollbar{display:none}
|
|
238
|
+
.pc{flex:none;width:min(380px,78vw);scroll-snap-align:start}
|
|
239
|
+
.pc .img{position:relative;aspect-ratio:4/3.4;border-radius:22px;overflow:hidden;background:#111}
|
|
240
|
+
.pc .img img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease);filter:saturate(.85)}
|
|
241
|
+
.pc:hover .img img{transform:scale(1.05)}
|
|
242
|
+
.pc .img::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.35),rgba(0,0,0,.05) 50%)}
|
|
243
|
+
.pc h3{margin:20px 0 6px;font:500 20px/1.25 var(--disp);letter-spacing:-.03em}
|
|
244
|
+
.pc p{margin:0;color:var(--ink2);font-size:15px;max-width:36ch}
|
|
245
|
+
.ov{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);min-width:62%;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);color:#fff;box-shadow:0 20px 40px -20px rgba(0,0,0,.5)}
|
|
246
|
+
.ov .k{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;color:rgba(255,255,255,.72)}
|
|
247
|
+
.ov .v{margin-top:6px;font:500 19px/1.2 var(--disp);letter-spacing:-.02em}
|
|
248
|
+
.ov .bar{margin-top:10px;height:4px;border-radius:2px;background:rgba(255,255,255,.2);overflow:hidden}
|
|
249
|
+
.ov .bar i{display:block;height:100%;background:#fff;border-radius:2px}
|
|
250
|
+
.ov .dot{width:7px;height:7px;border-radius:50%;background:#FF6B5E;box-shadow:0 0 0 3px rgba(255,107,94,.25)}
|
|
251
|
+
.ov .srch{display:flex;align-items:center;gap:8px;font-size:14px}
|
|
252
|
+
.ov .srch svg{opacity:.8}
|
|
253
|
+
.rail-nav{display:flex;gap:10px;justify-content:flex-end;margin-top:28px}
|
|
254
|
+
.rail-nav button{width:44px;height:44px;border-radius:50%;border:1px solid var(--hair2);background:#fff;color:var(--ink);cursor:pointer;display:grid;place-items:center;transition:background .2s,border-color .2s}
|
|
255
|
+
.rail-nav button:hover{background:var(--soft);border-color:#CFCFD7}
|
|
256
|
+
|
|
257
|
+
/* pinned feature stage */
|
|
258
|
+
.feat{position:relative;height:430vh;margin-top:40px}
|
|
259
|
+
.stage{position:sticky;top:8px;height:calc(100svh - 16px);margin:0 8px;border-radius:var(--r);overflow:hidden;background:#111;color:#fff}
|
|
260
|
+
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1s var(--ease)}
|
|
261
|
+
.slide.on{opacity:1}
|
|
262
|
+
.slide img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 2.2s var(--ease)}
|
|
263
|
+
.slide.on img.bg{transform:scale(1)}
|
|
264
|
+
.slide::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,8,12,.78) 0%,rgba(8,8,12,.1) 48%,rgba(8,8,12,.05) 100%),linear-gradient(90deg,rgba(8,8,12,.4),rgba(8,8,12,0) 55%)}
|
|
265
|
+
.slide .cp{position:absolute;z-index:2;left:clamp(24px,4vw,56px);bottom:clamp(32px,6vh,64px);width:min(560px,56%)}
|
|
266
|
+
.slide h3{margin:0;font:400 clamp(40px,5.4vw,84px)/.98 var(--disp);letter-spacing:-.05em}
|
|
267
|
+
.slide h3 .ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
|
|
268
|
+
.slide h3 .ln>span{display:inline-block;transform:translateY(105%);transition:transform 1.1s var(--ease) .1s}
|
|
269
|
+
.slide h3 .ln+.ln>span{transition-delay:.18s}
|
|
270
|
+
.slide.on h3 .ln>span{transform:none}
|
|
271
|
+
.slide .cp p{margin:18px 0 0;max-width:44ch;color:rgba(255,255,255,.75);font-size:16px;opacity:0;transform:translateY(10px);transition:opacity .9s var(--ease) .3s,transform .9s var(--ease) .3s}
|
|
272
|
+
.slide.on .cp p{opacity:1;transform:none}
|
|
273
|
+
.slide .ui{position:absolute;z-index:2;right:clamp(20px,5vw,72px);top:clamp(90px,14vh,140px);width:min(340px,40%);opacity:0;transform:translateY(24px) scale(.97);transition:opacity 1s var(--ease) .25s,transform 1.2s var(--ease) .25s}
|
|
274
|
+
.slide.on .ui{opacity:1;transform:none}
|
|
275
|
+
.gcard{border-radius:20px;padding:16px;background:rgba(255,255,255,.86);backdrop-filter:blur(18px) saturate(170%);-webkit-backdrop-filter:blur(18px) saturate(170%);border:1px solid rgba(255,255,255,.9);color:var(--ink);box-shadow:0 30px 60px -24px rgba(0,0,0,.55)}
|
|
276
|
+
.gcard+.gcard{margin-top:10px}
|
|
277
|
+
.gcard .lb{font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);display:flex;justify-content:space-between;align-items:center}
|
|
278
|
+
.callrow{display:flex;align-items:center;gap:12px}
|
|
279
|
+
.callrow b{display:block;font:600 15px/1.2 var(--disp)}
|
|
280
|
+
.callrow span{font:400 12px/1.3 var(--mono);color:var(--ink3)}
|
|
281
|
+
.callrow .orb{width:40px;height:40px}
|
|
282
|
+
.bars{margin-left:auto;display:flex;gap:3px;align-items:center;height:20px}
|
|
283
|
+
.bars i{width:3px;border-radius:2px;background:var(--acc2);height:30%;animation:eq .5s ease-in-out infinite alternate}
|
|
284
|
+
.bars i:nth-child(2){animation-delay:.12s}.bars i:nth-child(3){animation-delay:.24s}.bars i:nth-child(4){animation-delay:.06s}.bars i:nth-child(5){animation-delay:.18s}
|
|
285
|
+
@keyframes eq{to{height:100%}}
|
|
286
|
+
.bub{font-size:14px;line-height:1.45;padding:11px 13px;border-radius:14px 14px 14px 4px;background:var(--soft)}
|
|
287
|
+
.bub.me{border-radius:14px 14px 4px 14px;background:var(--acc);color:#fff;margin-left:18%}
|
|
288
|
+
.bub+.bub{margin-top:8px}
|
|
289
|
+
.bub small{display:block;font:500 10px/1 var(--mono);letter-spacing:.12em;margin-bottom:5px;opacity:.6}
|
|
290
|
+
.mini-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:12px}
|
|
291
|
+
.mini-plans div{border:1px solid var(--hair);border-radius:10px;padding:9px;font-size:11px;color:var(--ink3)}
|
|
292
|
+
.mini-plans b{display:block;font:600 15px var(--disp);color:var(--ink);letter-spacing:-.02em}
|
|
293
|
+
.mini-plans .x{border-color:var(--acc2);box-shadow:0 0 0 3px rgba(99,102,241,.16);position:relative}
|
|
294
|
+
.mini-plans .x em{position:absolute;top:-9px;left:6px;font:600 9.5px/1 var(--sans);font-style:normal;color:#fff;background:var(--acc2);padding:3px 6px;border-radius:5px}
|
|
295
|
+
.chk{list-style:none;margin:10px 0 0;padding:0}
|
|
296
|
+
.chk li{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--hair);font-size:14px;color:var(--ink3)}
|
|
297
|
+
.chk li:first-child{border-top:0}
|
|
298
|
+
.chk i{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--hair2);display:grid;place-items:center;flex:none}
|
|
299
|
+
.chk .d{color:var(--ink)}.chk .d i{background:var(--green);border-color:var(--green)}
|
|
300
|
+
.chk .d i::after{content:"";width:7px;height:4px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
|
|
301
|
+
.chk .a{color:var(--ink)}.chk .a i{border-color:var(--acc2);box-shadow:0 0 0 4px rgba(99,102,241,.15)}
|
|
302
|
+
.tot{display:flex;justify-content:space-between;align-items:center;padding:8px 0;font-size:14px;color:var(--ink2);border-top:1px solid var(--hair)}
|
|
303
|
+
.tot:first-of-type{border-top:0}
|
|
304
|
+
.tot .big{font:600 24px/1 var(--disp);letter-spacing:-.03em;color:#C4520F;padding:3px 8px;border-radius:8px;box-shadow:0 0 0 2px rgba(224,138,18,.45)}
|
|
305
|
+
.warnb{margin-top:10px;font-size:14px;padding:11px 13px;border-radius:14px 14px 14px 4px;background:var(--amber-soft);color:#5E3604}
|
|
306
|
+
.warnb small{display:block;font:500 10px/1 var(--mono);letter-spacing:.12em;color:var(--amber);margin-bottom:5px}
|
|
307
|
+
.tabs{position:absolute;z-index:3;right:clamp(20px,3vw,40px);bottom:clamp(24px,5vh,48px);width:220px;padding:8px;border-radius:18px;background:rgba(20,20,26,.35);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.14)}
|
|
308
|
+
.tabs button{all:unset;display:block;width:100%;box-sizing:border-box;cursor:pointer;padding:11px 12px;border-radius:11px;font-size:14px;color:rgba(255,255,255,.5);transition:background .3s,color .3s;position:relative;overflow:hidden}
|
|
309
|
+
.tabs button:hover{color:rgba(255,255,255,.8)}
|
|
310
|
+
.tabs button.on{background:rgba(255,255,255,.14);color:#fff;font-weight:500}
|
|
311
|
+
.tabs button i{position:absolute;left:12px;right:12px;bottom:5px;height:1.5px;border-radius:1px;background:rgba(255,255,255,.85);transform-origin:0 50%;transform:scaleX(0)}
|
|
312
|
+
@media (max-width:900px){.slide .ui{left:18px;right:18px;width:auto;top:84px}.slide .cp{width:auto;right:18px;bottom:140px}.tabs{left:18px;right:18px;width:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.tabs button{text-align:center;font-size:12px;padding:10px 4px}}
|
|
313
|
+
|
|
314
|
+
/* range */
|
|
315
|
+
.uses{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
|
|
316
|
+
.use{border-radius:22px;padding:26px 26px 28px;background:var(--soft);display:flex;flex-direction:column;min-height:220px;transition:background .4s,transform .6s var(--ease)}
|
|
317
|
+
.use:hover{background:var(--soft2);transform:translateY(-3px)}
|
|
318
|
+
.use .k{align-self:flex-start;font:500 12.5px/1 var(--sans);color:var(--acc);background:#fff;padding:7px 11px;border-radius:999px;box-shadow:0 0 0 1px var(--hair)}
|
|
319
|
+
.use .q{margin:26px 0 0;font:400 clamp(22px,2vw,27px)/1.18 var(--disp);letter-spacing:-.035em}
|
|
320
|
+
.use .a{margin:auto 0 0;padding-top:18px;color:var(--ink2);font-size:15px}
|
|
321
|
+
@media (max-width:900px){.uses{grid-template-columns:1fr 1fr}}
|
|
322
|
+
@media (max-width:560px){.uses{grid-template-columns:1fr}.use{min-height:0}}
|
|
323
|
+
|
|
324
|
+
/* bento */
|
|
325
|
+
.bento{margin-top:64px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
|
|
326
|
+
.bx{background:var(--soft);border-radius:24px;padding:28px;display:flex;flex-direction:column;overflow:hidden;min-height:340px}
|
|
327
|
+
.bx.w2{grid-column:span 2}
|
|
328
|
+
.bx h3{margin:0;font:500 22px/1.2 var(--disp);letter-spacing:-.03em}
|
|
329
|
+
.bx p{margin:8px 0 0;color:var(--ink2);font-size:15px;max-width:40ch}
|
|
330
|
+
.bx .vis{margin-top:auto;padding-top:28px}
|
|
331
|
+
@media (max-width:900px){.bento{grid-template-columns:1fr}.bx.w2{grid-column:auto}}
|
|
332
|
+
.ask{display:flex;align-items:center;gap:10px;height:54px;padding:0 8px 0 18px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px var(--hair),0 16px 30px -18px rgba(10,10,12,.3);font-size:15px;color:var(--ink2)}
|
|
333
|
+
.ask .mic{margin-left:auto;width:38px;height:38px;border-radius:50%;background:var(--acc);display:grid;place-items:center;color:#fff}
|
|
334
|
+
.ans{margin-top:12px;display:flex;gap:10px;align-items:flex-start}
|
|
335
|
+
.ans .orb{width:34px;height:34px;margin-top:2px}
|
|
336
|
+
.ans .bub{background:#fff;box-shadow:0 0 0 1px var(--hair);max-width:520px}
|
|
337
|
+
.tone{display:flex;gap:8px;flex-wrap:wrap}
|
|
338
|
+
.tone span{height:34px;padding:0 14px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px var(--hair);display:inline-flex;align-items:center;font-size:13.5px;color:var(--ink2)}
|
|
339
|
+
.tone span.on{background:var(--ink);color:#fff;box-shadow:none}
|
|
340
|
+
.hand{background:#fff;border-radius:16px;padding:14px;box-shadow:0 0 0 1px var(--hair),0 16px 30px -20px rgba(10,10,12,.3)}
|
|
341
|
+
.hand .row{display:flex;align-items:center;gap:10px}
|
|
342
|
+
.av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font:600 13px var(--disp);color:#fff;background:#2F3140;flex:none}
|
|
343
|
+
.hand .row b{font-size:14px;font-weight:500}.hand .row span{display:block;font-size:12.5px;color:var(--ink3)}
|
|
344
|
+
.hand .tags{margin-top:12px;display:flex;gap:6px;flex-wrap:wrap}
|
|
345
|
+
.hand .tags span{font-size:12px;padding:5px 9px;border-radius:999px;background:var(--soft);color:var(--ink2)}
|
|
346
|
+
.rec{background:#fff;border-radius:16px;padding:16px 18px;box-shadow:0 0 0 1px var(--hair),0 16px 30px -20px rgba(10,10,12,.3);display:grid;grid-template-columns:1fr 1.3fr;gap:20px;align-items:center}
|
|
347
|
+
.rec .lb{font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
|
|
348
|
+
.rec h4{margin:10px 0 12px;font:500 18px/1.25 var(--disp);letter-spacing:-.02em}
|
|
349
|
+
.rec .ks{display:flex;gap:8px}
|
|
350
|
+
.rec .ks div{flex:1;background:var(--soft);border-radius:10px;padding:9px}
|
|
351
|
+
.rec .ks b{display:block;font:500 20px/1 var(--disp);letter-spacing:-.03em}
|
|
352
|
+
.rec .ks span{font-size:11px;color:var(--ink3)}
|
|
353
|
+
.tl{list-style:none;margin:0;padding:0}
|
|
354
|
+
.tl li{display:grid;grid-template-columns:40px 10px 1fr;gap:10px;padding:5px 0;font-size:13px;color:var(--ink2)}
|
|
355
|
+
.tl time{font:400 11px/1.6 var(--mono);color:var(--ink3)}
|
|
356
|
+
.tl i{width:8px;height:8px;border-radius:50%;margin-top:6px;background:var(--c)}
|
|
357
|
+
.tl b{color:var(--ink);font-weight:500}
|
|
358
|
+
@media (max-width:640px){.rec{grid-template-columns:1fr}}
|
|
359
|
+
|
|
360
|
+
/* stats */
|
|
361
|
+
.stats{margin-top:72px;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--hair)}
|
|
362
|
+
.st{padding:34px 28px 0 0}
|
|
363
|
+
.st+.st{padding-left:28px;border-left:1px solid var(--hair)}
|
|
364
|
+
.st .dir{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px 0 6px;border-radius:999px;font:500 13px/1 var(--sans)}
|
|
365
|
+
.st .dir i{width:20px;height:20px;border-radius:50%;display:grid;place-items:center}
|
|
366
|
+
.st .dir.up{background:var(--green-soft);color:#0B6E3F}.st .dir.up i{background:var(--green)}
|
|
367
|
+
.st .dir.down{background:var(--acc-soft);color:var(--acc)}.st .dir.down i{background:var(--acc)}
|
|
368
|
+
.st .n{margin-top:26px;font:400 clamp(30px,3vw,44px)/1.02 var(--disp);letter-spacing:-.045em;overflow:hidden;padding-bottom:.08em}
|
|
369
|
+
.st .n span{display:inline-block;transition:transform 1.2s var(--ease)}
|
|
370
|
+
.js .st:not(.in) .n span{transform:translateY(105%)}
|
|
371
|
+
.st:nth-child(2) .n span{transition-delay:.08s}.st:nth-child(3) .n span{transition-delay:.16s}.st:nth-child(4) .n span{transition-delay:.24s}
|
|
372
|
+
.st p{margin:14px 0 0;color:var(--ink2);font-size:15px;max-width:26ch}
|
|
373
|
+
@media (max-width:900px){.stats{grid-template-columns:1fr 1fr}.st:nth-child(3){padding-left:0;border-left:0}.st{padding-bottom:30px}}
|
|
374
|
+
@media (max-width:520px){.stats{grid-template-columns:1fr}.st+.st{padding-left:0;border-left:0;border-top:1px solid var(--hair)}}
|
|
375
|
+
|
|
376
|
+
/* compare */
|
|
377
|
+
.cmp{margin-top:64px;overflow-x:auto}
|
|
378
|
+
.cmp table{width:100%;min-width:760px;border-collapse:separate;border-spacing:0}
|
|
379
|
+
.cmp th,.cmp td{padding:20px 22px;text-align:left;vertical-align:top;font-size:15px;border-bottom:1px solid var(--hair)}
|
|
380
|
+
.cmp thead th{border-bottom:0;vertical-align:bottom}
|
|
381
|
+
.cmp th:first-child,.cmp td:first-child{width:28%;color:var(--ink2);padding-left:0}
|
|
382
|
+
.cmp thead .nm{font:500 20px/1.2 var(--disp);letter-spacing:-.03em;color:var(--ink)}
|
|
383
|
+
.cmp thead .ds{display:block;margin-top:6px;font-size:13.5px;font-weight:400;color:var(--ink3);max-width:26ch}
|
|
384
|
+
.cmp .me{background:var(--acc-soft)}
|
|
385
|
+
.cmp thead .me{border-radius:20px 20px 0 0;padding-top:26px}
|
|
386
|
+
.cmp tbody tr:last-child .me{border-radius:0 0 20px 20px}
|
|
387
|
+
.cmp .me .nm{display:flex;align-items:center;gap:8px}
|
|
388
|
+
.cmp td.me{color:var(--ink);font-weight:500;border-bottom-color:var(--acc-soft2)}
|
|
389
|
+
.yes{display:inline-flex;align-items:center;gap:8px}
|
|
390
|
+
.yes::before{content:"";width:18px;height:18px;border-radius:50%;background:var(--green) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 12.5 4 4 8-9'/></svg>") center/12px no-repeat;flex:none}
|
|
391
|
+
.no{color:var(--ink3)}
|
|
392
|
+
.cmp .cta-row td{border-bottom:0;padding-top:24px}
|
|
393
|
+
|
|
394
|
+
/* privacy */
|
|
395
|
+
.priv{margin-top:64px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
|
|
396
|
+
.pv{border-radius:22px;padding:26px;border:1px solid var(--hair);background:#fff;transition:border-color .3s,transform .6s var(--ease)}
|
|
397
|
+
.pv:hover{border-color:var(--hair2);transform:translateY(-3px)}
|
|
398
|
+
.pv .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--soft);color:var(--acc);margin-bottom:22px}
|
|
399
|
+
.pv h3{margin:0 0 6px;font:500 18px/1.25 var(--disp);letter-spacing:-.025em}
|
|
400
|
+
.pv p{margin:0;color:var(--ink2);font-size:15px}
|
|
401
|
+
@media (max-width:900px){.priv{grid-template-columns:1fr}}
|
|
402
|
+
|
|
403
|
+
/* faq */
|
|
404
|
+
.faqg{display:grid;grid-template-columns:1fr 1.5fr;gap:64px}
|
|
405
|
+
@media (max-width:900px){.faqg{grid-template-columns:1fr;gap:24px}}
|
|
406
|
+
.faq details{border-bottom:1px solid var(--hair)}
|
|
407
|
+
.faq details:first-child{border-top:1px solid var(--hair)}
|
|
408
|
+
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 0;font:500 18px/1.35 var(--disp);letter-spacing:-.02em}
|
|
409
|
+
.faq summary::-webkit-details-marker{display:none}
|
|
410
|
+
.faq summary i{flex:none;width:28px;height:28px;border-radius:50%;background:var(--soft);position:relative;transition:background .3s}
|
|
411
|
+
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;background:var(--ink);transform:translate(-50%,-50%)}
|
|
412
|
+
.faq summary i::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .4s var(--ease)}
|
|
413
|
+
.faq details[open] summary i::after{transform:translate(-50%,-50%) rotate(0)}
|
|
414
|
+
.faq .a{padding:0 0 24px;color:var(--ink2);max-width:60ch}
|
|
415
|
+
|
|
416
|
+
/* final cta */
|
|
417
|
+
.fin{padding:0 8px}
|
|
418
|
+
.fcard{position:relative;border-radius:var(--r);overflow:hidden;min-height:min(86svh,820px);display:flex;align-items:flex-end;color:#fff;isolation:isolate}
|
|
419
|
+
.fcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 40%;z-index:-2;transform:scale(1.06);transition:transform 2.4s var(--ease)}
|
|
420
|
+
.fcard.in img{transform:scale(1)}
|
|
421
|
+
.fcard::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(8,8,12,.8) 0%,rgba(8,8,12,.2) 55%,rgba(8,8,12,.1)),linear-gradient(90deg,rgba(8,8,12,.45),transparent 60%)}
|
|
422
|
+
.fcard .in2{padding:clamp(28px,5vw,64px);max-width:760px}
|
|
423
|
+
.fcard h2{margin:0;font:400 clamp(40px,5.6vw,88px)/.98 var(--disp);letter-spacing:-.05em}
|
|
424
|
+
.fcard p{margin:20px 0 30px;max-width:48ch;color:rgba(255,255,255,.78);font-size:17px}
|
|
425
|
+
.fcard small{display:block;margin-top:16px;font-size:13px;color:rgba(255,255,255,.6)}
|
|
426
|
+
|
|
427
|
+
footer{padding:80px 0 0;overflow:hidden}
|
|
428
|
+
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid var(--hair)}
|
|
429
|
+
.fgrid p{margin:14px 0 0;color:var(--ink2);font-size:15px;max-width:36ch}
|
|
430
|
+
.fgrid h5{margin:0 0 14px;font:500 13px/1 var(--sans);color:var(--ink3)}
|
|
431
|
+
.fgrid a{display:block;padding:5px 0;font-size:15px;color:var(--ink2);transition:color .2s}
|
|
432
|
+
.fgrid a:hover{color:var(--ink)}
|
|
433
|
+
.fgrid a.brand{display:inline-flex;padding:4px 0 0;color:var(--ink)}
|
|
434
|
+
.fbot{display:flex;justify-content:space-between;padding:22px 0;font-size:13px;color:var(--ink3)}
|
|
435
|
+
.giant{display:block;width:min(88vw,1080px);height:auto;margin:48px auto 0;padding-bottom:40px;box-sizing:content-box;color:#E6E6EC;-webkit-mask-image:linear-gradient(180deg,#000 30%,rgba(0,0,0,.25) 100%);mask-image:linear-gradient(180deg,#000 30%,rgba(0,0,0,.25) 100%)}
|
|
436
|
+
@media (max-width:700px){.fgrid{grid-template-columns:1fr 1fr}.fgrid>div:first-child{grid-column:1/-1}}
|
|
437
|
+
|
|
438
|
+
/* phones: comparison rows become cards; roomier ask bar; tighter announcement */
|
|
439
|
+
@media (max-width:700px){
|
|
440
|
+
.ann{font-size:12.5px;gap:8px}
|
|
441
|
+
.bx{min-height:0}
|
|
442
|
+
.bx .vis{padding-top:22px}
|
|
443
|
+
.ask{height:auto;min-height:54px;padding:10px 8px 10px 16px;font-size:14px;line-height:1.4}
|
|
444
|
+
.cmp{margin-top:40px;overflow:visible}
|
|
445
|
+
.cmp table,.cmp tbody,.cmp tr,.cmp td{display:block;width:auto;min-width:0}
|
|
446
|
+
.cmp thead{display:none}
|
|
447
|
+
.cmp tbody tr{background:#fff;border-radius:18px;padding:16px 18px 12px;margin-bottom:12px;box-shadow:0 0 0 1px var(--hair)}
|
|
448
|
+
.cmp td,.cmp th:first-child,.cmp td:first-child{border:0;padding:7px 0;display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:14.5px}
|
|
449
|
+
.cmp td:first-child{width:auto;padding:0 0 8px;font:500 16px/1.3 var(--disp);letter-spacing:-.02em;color:var(--ink)}
|
|
450
|
+
.cmp td[data-label]::before{content:attr(data-label);color:var(--ink3);font-weight:400}
|
|
451
|
+
.cmp td.me{background:var(--acc-soft);margin:2px -10px;padding:7px 10px;border-radius:10px}
|
|
452
|
+
.cmp tbody tr:last-child .me{border-radius:10px}
|
|
453
|
+
.cmp .cta-row{background:none!important;box-shadow:none!important;padding:0!important}
|
|
454
|
+
.cmp .cta-row td:not(.me){display:none}
|
|
455
|
+
.cmp .cta-row td.me{background:none;margin:0;padding:4px 0 0}
|
|
456
|
+
.cmp .cta-row td.me::before{display:none}
|
|
457
|
+
.cmp .cta-row .btn{width:100%;justify-content:center;height:48px}
|
|
458
|
+
}
|
|
459
|
+
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-duration:.001ms!important}}
|
|
460
|
+
</style>
|
|
461
|
+
</head>
|
|
462
|
+
<body>
|
|
463
|
+
<svg width="0" height="0" style="position:absolute" aria-hidden="true"><symbol id="ava-wm" viewBox="-1.9 -1.9 66 27.8"><path d="M0 24L9.5 0L19 24M21.6 0L31.1 24L40.6 0M43.2 24L52.7 0L62.2 24" stroke="currentColor" fill="none" stroke-width="3.8" stroke-linecap="round" stroke-linejoin="round"/></symbol></svg>
|
|
464
|
+
|
|
465
|
+
<div class="ann"><i></i><span><b>Live demo</b> — watch Ava guide a real session</span><a href="/app">Try it <span>›</span></a></div>
|
|
466
|
+
|
|
467
|
+
<nav class="nav-fix" id="navFix" aria-label="Primary">
|
|
468
|
+
<div class="nav-links"><a href="#product">Product</a><a href="#why">Why Ava</a><a href="#range">Use cases</a><a href="#compare">Compare</a><a href="#faq">FAQ</a></div>
|
|
469
|
+
<a class="brand" href="/"><svg class="wm" viewBox="0 0 66 27.8" role="img" aria-label="Ava"><use href="#ava-wm"/></svg></a>
|
|
470
|
+
<div class="right"><a class="btn btn-acc btn-sm" href="/app">Try the live demo <span class="ar">→</span></a></div>
|
|
471
|
+
</nav>
|
|
472
|
+
|
|
473
|
+
<main>
|
|
474
|
+
<!-- ═══════════ HERO ═══════════ -->
|
|
475
|
+
<section class="hero" id="hero">
|
|
476
|
+
<div class="hcard">
|
|
477
|
+
<div class="ph" id="ph" style="background:#111 url(data:image/webp;base64,UklGRowAAABXRUJQVlA4IIAAAAAQBACdASoYABAAPxFwsFAsJiSisAgBgCIJaQAASrcHqWQOwiN/Ke0KAAD+1vuBlTEA/MJlQkc/pwr/rMQGgKDZJZdxS/YN52dwK8B7dkU/+ZA9Qs0M7e98jS9lX69/+7YrvMe780d5p1xvuCnfqE/suQOkb5bEUYHw2149ijgAAA==) center/cover"><picture><source type="image/avif" srcset="/img/hero-960.avif?v=2 960w, /img/hero-1600.avif?v=2 1600w, /img/hero-2400.avif?v=2 2400w" sizes="100vw"><img src="/img/hero-1600.webp?v=2" srcset="/img/hero-960.webp?v=2 960w, /img/hero-1600.webp?v=2 1600w, /img/hero-2400.webp?v=2 2400w" sizes="100vw" width="2400" height="1602" alt="" decoding="async" fetchpriority="high"></picture></div>
|
|
478
|
+
<div class="nav-in">
|
|
479
|
+
<div class="nav-links"><a href="#product">Product</a><a href="#why">Why Ava</a><a href="#range">Use cases</a><a href="#compare">Compare</a><a href="#faq">FAQ</a></div>
|
|
480
|
+
<a class="brand" href="/"><svg class="wm" viewBox="0 0 66 27.8" role="img" aria-label="Ava"><use href="#ava-wm"/></svg></a>
|
|
481
|
+
<div class="right"><a class="btn btn-white btn-sm" href="/app">Try the live demo</a></div>
|
|
482
|
+
</div>
|
|
483
|
+
|
|
484
|
+
<div class="panel" id="panel">
|
|
485
|
+
<div class="set" id="set" role="img" aria-label="A guided session: the customer asks which plan has the most credits, Ava points to the right plan, catches a $9,900 checkout mistake and helps fix it to $990, and the session completes.">
|
|
486
|
+
<div class="rig" id="rig"><div class="cam" id="cam">
|
|
487
|
+
<div class="win off" id="win">
|
|
488
|
+
<div class="chrome"><i></i><i></i><i></i><div class="url">northwind.app/billing/plans</div></div>
|
|
489
|
+
<div class="app">
|
|
490
|
+
<div class="side"><div class="logo-n"><b></b>Northwind</div><span>Projects</span><span>Team</span><span class="on">Billing</span><span>Settings</span></div>
|
|
491
|
+
<div class="main">
|
|
492
|
+
<h4>Plans & billing</h4>
|
|
493
|
+
<p class="muted">Credits reset monthly. Change or cancel anytime.</p>
|
|
494
|
+
<div class="plans" id="plans">
|
|
495
|
+
<div class="plan"><span class="nm">Starter</span><span class="pr">$12<small>/mo</small></span><span class="cr">50k credits / month</span><span class="bt">Choose</span></div>
|
|
496
|
+
<div class="plan cur"><span class="tag-cur">CURRENT</span><span class="nm">Pro</span><span class="pr">$49<small>/mo</small></span><span class="cr">400k credits / month</span><span class="bt">Current plan</span></div>
|
|
497
|
+
<div class="plan" id="pScale"><span class="nm">Scale</span><span class="pr">$99<small>/seat</small></span><span class="cr">1.8M credits / month</span><span class="bt" id="bScale">Upgrade</span></div>
|
|
498
|
+
</div>
|
|
499
|
+
</div>
|
|
500
|
+
<div class="mbg" id="mbg"><div class="modal">
|
|
501
|
+
<h5>Upgrade to Scale</h5><p class="muted">Billed monthly per seat.</p>
|
|
502
|
+
<div class="mrow"><span>Seats</span><span class="seat" id="seat">100</span></div>
|
|
503
|
+
<div class="mrow"><span>Total</span><span class="total" id="total">$9,900 / mo</span></div>
|
|
504
|
+
<div class="mbtn">Confirm upgrade</div>
|
|
505
|
+
</div></div>
|
|
506
|
+
</div>
|
|
507
|
+
<div class="trk" id="trk"><b id="trkL"></b></div>
|
|
508
|
+
<svg class="cursor" id="cursor" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 2.5 19.5 12l-6.8 1.6 3.9 7.1-2.6 1.4-3.9-7.2L5 19.9z" fill="#111" stroke="#fff" stroke-width="1.4" stroke-linejoin="round"/></svg>
|
|
509
|
+
</div>
|
|
510
|
+
</div></div>
|
|
511
|
+
<canvas class="ribbon" id="ribbon" aria-hidden="true"></canvas>
|
|
512
|
+
<div class="glass g-share off" id="gShare"><i></i>Sharing · northwind.app</div>
|
|
513
|
+
<div class="glass g-call off" id="gCall"><div class="orb" id="orb"><span class="r"></span><span class="r"></span><span class="c"></span></div><div class="t"><b>Ava</b><span id="callSt">joining…</span></div></div>
|
|
514
|
+
<div class="glass g-sub off" id="gSub"><span class="who" id="subWho">Customer</span><span class="tx" id="subTx"></span></div>
|
|
515
|
+
<div class="glass g-recap off" id="gRecap">
|
|
516
|
+
<div class="top">Session recap <span>● Completed</span></div>
|
|
517
|
+
<h6>Upgraded to Scale — a $9,900 mistake avoided</h6>
|
|
518
|
+
<div class="ks"><div><b>48s</b><span>to done</span></div><div><b>1</b><span>error caught</span></div><div><b>0</b><span>tickets</span></div></div>
|
|
519
|
+
</div>
|
|
520
|
+
<div class="glint" id="glint"></div>
|
|
521
|
+
</div>
|
|
522
|
+
</div>
|
|
523
|
+
|
|
524
|
+
<div class="hcopy">
|
|
525
|
+
<h1 class="h1"><span class="ln"><span>Help every</span></span><span class="ln"><span>customer like</span></span><span class="ln"><span class="soft">they're the only one.</span></span></h1>
|
|
526
|
+
<p class="hsub">Ava joins your customers on a live voice call, sees their screen, and helps with whatever they're doing — getting set up, finding a feature, fixing a mistake. Every account gets a real guide, not just your biggest ones.</p>
|
|
527
|
+
<div class="hcta"><a class="btn btn-white" href="/app">Try the live demo <span class="ar">→</span></a><span class="hmeta">No install · share a tab and talk</span></div>
|
|
528
|
+
</div>
|
|
529
|
+
|
|
530
|
+
<div class="caps" id="caps" aria-hidden="true">
|
|
531
|
+
<div class="cap"><div class="tr"><i></i></div><b>Sees the screen</b><span>Grounds every answer in the page</span></div>
|
|
532
|
+
<div class="cap"><div class="tr"><i></i></div><b>Speaks up</b><span>Catches costly mistakes, live</span></div>
|
|
533
|
+
<div class="cap"><div class="tr"><i></i></div><b>Knows when it's done</b><span>Then steps back, quietly</span></div>
|
|
534
|
+
</div>
|
|
535
|
+
</div>
|
|
536
|
+
</section>
|
|
537
|
+
|
|
538
|
+
<!-- works with -->
|
|
539
|
+
<section class="works">
|
|
540
|
+
<div class="wrap">
|
|
541
|
+
<p class="rv">Works inside any web product. <span class="soft">No SDK, no install — customers just share a tab.</span></p>
|
|
542
|
+
<div class="row rv">
|
|
543
|
+
<span class="pill"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="13" rx="2"/><path d="M8 21h8M12 17v4"/></svg>Any web app</span>
|
|
544
|
+
<span class="pill"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v18M8 7v10M4 10v4M16 7v10M20 10v4"/></svg>Natural voice</span>
|
|
545
|
+
<span class="pill"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg>Only the shared tab</span>
|
|
546
|
+
<span class="pill"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="8" r="3.5"/><path d="M2.5 20a6.5 6.5 0 0 1 13 0M17 8h5M19.5 5.5 22 8l-2.5 2.5"/></svg>Hands off to your team</span>
|
|
547
|
+
</div>
|
|
548
|
+
</div>
|
|
549
|
+
</section>
|
|
550
|
+
|
|
551
|
+
<!-- problems -->
|
|
552
|
+
<section class="sec" id="why">
|
|
553
|
+
<div class="wrap head2">
|
|
554
|
+
<h2 class="h2 rv">Why great help doesn't scale.</h2>
|
|
555
|
+
<p class="lede rv">The best help comes from someone who can see what the customer sees. That doesn't scale — so most accounts get docs, chatbots and a queue instead.</p>
|
|
556
|
+
</div>
|
|
557
|
+
<div class="rail-wrap">
|
|
558
|
+
<div class="rail" id="rail" tabindex="0" role="region" aria-label="Example questions">
|
|
559
|
+
<article class="pc rv"><div class="img" style="background:#111 url(data:image/webp;base64,UklGRp4AAABXRUJQVlA4IJIAAAAwBACdASoYABAAPxFysFAsJqSisAgBgCIJZQAAW+yeam898DK6672yWTAA/u561Csk7QZqCOEuZDbKo8GiDi0ktHqVh4mQTjpBl5VJzzjR2zl/7GMvvm61/dObQWfVeym6qLgcxofxePAnWO6H5hkA8dKn+NHJiMopQ9vK5/IF4+9TPWmGmFmT3i+bxvtk7xAAAA==) center/cover"><picture><source type="image/avif" srcset="/img/p-trial-480.avif?v=2 480w, /img/p-trial-800.avif?v=2 800w" sizes="(max-width: 640px) 78vw, 380px"><img class="fade" src="/img/p-trial-800.webp?v=2" srcset="/img/p-trial-480.webp?v=2 480w, /img/p-trial-800.webp?v=2 800w" sizes="(max-width: 640px) 78vw, 380px" width="800" height="533" alt="" loading="lazy" decoding="async"></picture><div class="ov"><div class="k"><span>Trial ends in 2 days</span><span>Setup</span></div><div class="v">1 of 5 steps done</div><div class="bar"><i style="width:20%"></i></div></div></div><h3>Trials stall at setup.</h3><p>New users hit one confusing step, and the trial clock quietly runs out.</p></article>
|
|
560
|
+
<article class="pc rv"><div class="img" style="background:#111 url(data:image/webp;base64,UklGRswAAABXRUJQVlA4IMAAAAAQBQCdASoYABIAPxF8slQsJ6QjKAqpgCIJZQDLpAvj9a4cX10UqXb2Q9RJc/7dVKaYAP7UxSp3/2lx3DxO0WGc5+yVKW7FURNofHVuHBgx+okNEKPqbTjZlj57lhB8CBl47Tnl0bYH2xuDgK8WLmdkDni1m3f6cGxwpBsz+i5iQf7Rn/nGPhUxCJPAC/47DaIx8aDPzq9uyL3jqmKlNoTNUPqvbI3cnb+rbMUdtJJxg9G4fm/yqLy7WJsaCJgAAAA=) center/cover"><picture><source type="image/avif" srcset="/img/p-csm-480.avif?v=2 480w, /img/p-csm-800.avif?v=2 800w" sizes="(max-width: 640px) 78vw, 380px"><img class="fade" src="/img/p-csm-800.webp?v=2" srcset="/img/p-csm-480.webp?v=2 480w, /img/p-csm-800.webp?v=2 800w" sizes="(max-width: 640px) 78vw, 380px" width="800" height="585" alt="" loading="lazy" decoding="async"></picture><div class="ov"><div class="k"><span>Book a call with your CSM</span><span>CSM</span></div><div class="v">Next slot in 9 days</div></div></div><h3>Your team can't join every call.</h3><p>White-glove sessions go to your top tier. Everyone else waits, or gives up.</p></article>
|
|
561
|
+
<article class="pc rv"><div class="img" style="background:#111 url(data:image/webp;base64,UklGRpQAAABXRUJQVlA4IIgAAAAwBACdASoYABAAPxFysFAsJqSisAgBgCIJaQAD5emPNWlR6AEOmRLvCHgA/q2i6CIs0lhUhzBNaP5Gk4YrP0cJrRtrMmO+QWQAQvOo7VOOf1VMCM0uWao8w46nxuqvglLbwms0S86YIvXiL20zFC0514FK0e+ml41qC07WL8E5kdzCkhS0S8AA) center/cover"><picture><source type="image/avif" srcset="/img/p-docs-480.avif?v=2 480w, /img/p-docs-800.avif?v=2 800w" sizes="(max-width: 640px) 78vw, 380px"><img class="fade" src="/img/p-docs-800.webp?v=2" srcset="/img/p-docs-480.webp?v=2 480w, /img/p-docs-800.webp?v=2 800w" sizes="(max-width: 640px) 78vw, 380px" width="800" height="533" alt="" loading="lazy" decoding="async"></picture><div class="ov"><div class="srch"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>how do I connect billing?</div><div class="k" style="margin-top:8px"><span>0 results match this page</span></div></div></div><h3>Docs can't see where they're stuck.</h3><p>Help centres answer general questions — not the screen in front of the customer.</p></article>
|
|
562
|
+
<article class="pc rv"><div class="img" style="background:#111 url(data:image/webp;base64,UklGRoIAAABXRUJQVlA4IHYAAADwAwCdASoYAA4APxFysFAsJqSisAgBgCIJZwAAYbPk9t1GS/3ybOLgAP5Vo6YEfAqKUpXIh18vWBvhE2d8ZPEqSBOyiNELT1L2shKn09OfgNFlfXqJswH1WW8DUjkiz4NPdoG5WmlkGcx2Hx9FGlYK/gD7igAA) center/cover"><picture><source type="image/avif" srcset="/img/p-tickets-480.avif?v=2 480w, /img/p-tickets-800.avif?v=2 800w" sizes="(max-width: 640px) 78vw, 380px"><img class="fade" src="/img/p-tickets-800.webp?v=2" srcset="/img/p-tickets-480.webp?v=2 480w, /img/p-tickets-800.webp?v=2 800w" sizes="(max-width: 640px) 78vw, 380px" width="800" height="469" alt="" loading="lazy" decoding="async"></picture><div class="ov"><div class="k"><span>Support queue</span><span class="dot"></span></div><div class="v">142 open tickets</div></div></div><h3>Small mistakes become tickets.</h3><p>A wrong setting or seat count turns into a refund, a ticket, or a churned account.</p></article>
|
|
563
|
+
<article class="pc rv"><div class="img" style="background:#111 url(data:image/webp;base64,UklGRo4AAABXRUJQVlA4IIIAAADwAwCdASoYABAAPxFysFAsJqSisAgBgCIJZQAAYXZnX1VP4ndc/d8wAN5lhPgMppqFEVPsmGONngDBkSbxag518YGFnnJnb9+yu0if65bobJrvS53QSVS11njaeqbG9AzgZsPAVCS14LrSW6ogV2AC9GNQ3H2Dh1p5gSazdzlFAAAA) center/cover"><picture><source type="image/avif" srcset="/img/p-quiet-480.avif?v=2 480w, /img/p-quiet-800.avif?v=2 800w" sizes="(max-width: 640px) 78vw, 380px"><img class="fade" src="/img/p-quiet-800.webp?v=2" srcset="/img/p-quiet-480.webp?v=2 480w, /img/p-quiet-800.webp?v=2 800w" sizes="(max-width: 640px) 78vw, 380px" width="800" height="533" alt="" loading="lazy" decoding="async"></picture><div class="ov"><div class="k"><span>Workspace activity</span><span>Acme Inc.</span></div><div class="v">Last active 12 days ago</div></div></div><h3>Quiet accounts drift away.</h3><p>If the first session doesn't land, customers rarely come back to try again.</p></article>
|
|
564
|
+
</div>
|
|
565
|
+
<div class="wrap"><div class="rail-nav"><button id="railPrev" aria-label="Previous"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M15 6l-6 6 6 6"/></svg></button><button id="railNext" aria-label="Next"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M9 6l6 6-6 6"/></svg></button></div></div>
|
|
566
|
+
</div>
|
|
567
|
+
</section>
|
|
568
|
+
|
|
569
|
+
<!-- pinned features -->
|
|
570
|
+
<section class="feat" id="product" aria-label="Product">
|
|
571
|
+
<div class="stage" id="stage">
|
|
572
|
+
<div class="slide on" style="background:#111 url(data:image/webp;base64,UklGRqIAAABXRUJQVlA4IJYAAAAQBACdASoYABAAPxFwsFAsJiSisAgBgCIJZwDLLCHHhhZPEJlqQ69SyAD+xKzIyUDSrzvrZyKLDdSmAWhNFSSeykjKXOKIARy/ltuHy6Jh4r9iBwXg+BW4L2lgd2yE7s31Q0KHJTYtIfknNV/6JvE4UKQUvI4w17bahGpeFiuc2iYqmN+ESX7NG8Rnelme8QumYXEAAAA=) center/cover">
|
|
573
|
+
<picture><source type="image/avif" srcset="/img/voice-960.avif?v=2 960w, /img/voice-1600.avif?v=2 1600w, /img/voice-2400.avif?v=2 2400w" sizes="100vw"><img class="bg fade" src="/img/voice-1600.webp?v=2" srcset="/img/voice-960.webp?v=2 960w, /img/voice-1600.webp?v=2 1600w, /img/voice-2400.webp?v=2 2400w" sizes="100vw" width="2400" height="1602" alt="" loading="lazy" decoding="async"></picture>
|
|
574
|
+
<div class="ui">
|
|
575
|
+
<div class="gcard"><div class="callrow"><div class="orb on"><span class="r"></span><span class="r"></span><span class="c"></span></div><div><b>Ava</b><span>on the call · speaking</span></div><div class="bars"><i></i><i></i><i></i><i></i><i></i></div></div></div>
|
|
576
|
+
<div class="gcard"><div class="bub me"><small>CUSTOMER</small>Where do I add my team?</div><div class="bub"><small>AVA</small>Top right — click Invite, then paste their emails.</div></div>
|
|
577
|
+
</div>
|
|
578
|
+
<div class="cp"><h3><span class="ln"><span>Talk it through,</span></span><span class="ln"><span>out loud.</span></span></h3><p>Customers just speak. Ava answers in a natural voice in under a second, handles interruptions, and keeps the session moving.</p></div>
|
|
579
|
+
</div>
|
|
580
|
+
<div class="slide" style="background:#111 url(data:image/webp;base64,UklGRo4AAABXRUJQVlA4IIIAAADQAwCdASoYABAAPxFysFAsJqSisAgBgCIJaQAASojGNN1t8B5fYjgA/tOD/Gnuw8tLM4E8zB/eaARjWKR0Ii5qSoTEoBu9/kNF+M+MMYXkTSzwEfyx+Lsot6jCFOfmnb/sGSi7s2P51Xi8rSnCTmE7znD98eUH3nwM0oueOgPK2AAA) center/cover">
|
|
581
|
+
<picture><source type="image/avif" srcset="/img/sees-960.avif?v=2 960w, /img/sees-1600.avif?v=2 1600w, /img/sees-2400.avif?v=2 2400w" sizes="100vw"><img class="bg fade" src="/img/sees-1600.webp?v=2" srcset="/img/sees-960.webp?v=2 960w, /img/sees-1600.webp?v=2 1600w, /img/sees-2400.webp?v=2 2400w" sizes="100vw" width="2400" height="1602" alt="" loading="lazy" decoding="async"></picture>
|
|
582
|
+
<div class="ui"><div class="gcard"><div class="lb"><span>On screen</span><span>Plans & billing</span></div><div class="mini-plans"><div><b>$12</b>50k credits</div><div><b>$49</b>400k credits</div><div class="x"><em>Most credits</em><b>$99</b>1.8M credits</div></div></div><div class="gcard"><div class="bub"><small>AVA</small>Scale has the most — 1.8M a month. It's the one on the right.</div></div></div>
|
|
583
|
+
<div class="cp"><h3><span class="ln"><span>It sees what</span></span><span class="ln"><span>they see.</span></span></h3><p>Ava follows the customer's shared tab — the page, the selection, the numbers in front of them — and grounds every answer in it.</p></div>
|
|
584
|
+
</div>
|
|
585
|
+
<div class="slide" style="background:#111 url(data:image/webp;base64,UklGRoQAAABXRUJQVlA4IHgAAADQAwCdASoYAA4APxFysFAsJqSisAgBgCIJaQAOcAOU+BJVx1G0xAAA/ty5IPTSXQOvKyG/WWPHRnFhjanSs2r5sE4duwUaiyZkbzUOrjxQApnYTRLMRLpSvEo0vPSMZ5Y6P1IS25sPNNcim/5n2J+34eupe2OkcAA=) center/cover">
|
|
586
|
+
<picture><source type="image/avif" srcset="/img/flows-960.avif?v=2 960w, /img/flows-1600.avif?v=2 1600w, /img/flows-2400.avif?v=2 2400w" sizes="100vw"><img class="bg fade" src="/img/flows-1600.webp?v=2" srcset="/img/flows-960.webp?v=2 960w, /img/flows-1600.webp?v=2 1600w, /img/flows-2400.webp?v=2 2400w" sizes="100vw" width="2400" height="1350" alt="" loading="lazy" decoding="async"></picture>
|
|
587
|
+
<div class="ui"><div class="gcard"><div class="lb"><span>Getting set up</span><span>2 / 4</span></div><ul class="chk"><li class="d"><i></i>Create your workspace</li><li class="d"><i></i>Invite your team</li><li class="a"><i></i>Connect your data</li><li><i></i>Build your first report</li></ul></div><div class="gcard"><div class="bub"><small>AVA</small>Nice — your team's in. Let's connect your data next.</div></div></div>
|
|
588
|
+
<div class="cp"><h3><span class="ln"><span>Every step,</span></span><span class="ln"><span>on track.</span></span></h3><p>Onboarding journey or one-off task, Ava breaks it into steps, confirms each one actually worked, adapts when customers wander — and knows when they're done.</p></div>
|
|
589
|
+
</div>
|
|
590
|
+
<div class="slide" style="background:#111 url(data:image/webp;base64,UklGRqAAAABXRUJQVlA4IJQAAADwAwCdASoYABAAPxFysFAsJqSisAgBgCIJZwDG9BPnh1Y5Jei0FUMgAP7cXsXSaCUi+xKvr/QtnaJ8tAMRSmNNWnG+43n4XECPwK9NqN0qz7/bXpjIGcSiRhIgi2z/v4Ga/RZ8tP0Xs2jfjVC9q3Wg8qWiqIHqxJXvhGt4YEvd9T7/D/azfGPCgDa0yd17r3tjRwAA) center/cover">
|
|
591
|
+
<picture><source type="image/avif" srcset="/img/speaks-960.avif?v=2 960w, /img/speaks-1600.avif?v=2 1600w, /img/speaks-2400.avif?v=2 2400w" sizes="100vw"><img class="bg fade" src="/img/speaks-1600.webp?v=2" srcset="/img/speaks-960.webp?v=2 960w, /img/speaks-1600.webp?v=2 1600w, /img/speaks-2400.webp?v=2 2400w" sizes="100vw" width="2400" height="1600" alt="" loading="lazy" decoding="async"></picture>
|
|
592
|
+
<div class="ui"><div class="gcard"><div class="lb"><span>Checkout</span><span>Scale</span></div><div style="margin-top:8px"><div class="tot"><span>Seats</span><span>100</span></div><div class="tot"><span>Total</span><span class="big">$9,900</span></div></div><div class="warnb"><small>AVA</small>Hold on — did you mean 10 seats?</div></div></div>
|
|
593
|
+
<div class="cp"><h3><span class="ln"><span>Speaks up before</span></span><span class="ln"><span>it's costly.</span></span></h3><p>A wrong seat count, a risky setting, an expensive typo — Ava flags it before the customer commits. Fewer refunds, fewer tickets.</p></div>
|
|
594
|
+
</div>
|
|
595
|
+
<div class="tabs" id="tabs">
|
|
596
|
+
<button type="button">Live voice<i></i></button>
|
|
597
|
+
<button type="button">Sees the screen<i></i></button>
|
|
598
|
+
<button type="button">Guided flows<i></i></button>
|
|
599
|
+
<button type="button">Speaks up<i></i></button>
|
|
600
|
+
</div>
|
|
601
|
+
</div>
|
|
602
|
+
</section>
|
|
603
|
+
|
|
604
|
+
<!-- range -->
|
|
605
|
+
<section class="sec" id="range" style="padding-bottom:0">
|
|
606
|
+
<div class="wrap">
|
|
607
|
+
<div class="head2">
|
|
608
|
+
<h2 class="h2 rv">Onboarding is where it starts.<br><span class="soft">It helps with anything.</span></h2>
|
|
609
|
+
<p class="lede rv">Ava isn't a scripted tour. It understands whatever is on the customer's screen and helps with that — from day one to day one thousand.</p>
|
|
610
|
+
</div>
|
|
611
|
+
<div class="uses">
|
|
612
|
+
<div class="use rv"><span class="k">Onboarding</span><p class="q">“How do I invite my team?”</p><p class="a">Walks them through setup, step by step, until it's done.</p></div>
|
|
613
|
+
<div class="use rv"><span class="k">Support</span><p class="q">“Why is my import failing?”</p><p class="a">Reads the error on screen and points to the exact fix.</p></div>
|
|
614
|
+
<div class="use rv"><span class="k">Feature discovery</span><p class="q">“Can this export to Sheets?”</p><p class="a">Finds the feature and shows them where it lives.</p></div>
|
|
615
|
+
<div class="use rv"><span class="k">Billing & plans</span><p class="q">“Which plan fits a team of ten?”</p><p class="a">Compares options — and catches costly mistakes.</p></div>
|
|
616
|
+
<div class="use rv"><span class="k">Setup & integrations</span><p class="q">“Where do I paste my API key?”</p><p class="a">Guides configuration without a screen-share call.</p></div>
|
|
617
|
+
<div class="use rv"><span class="k">Anything on the page</span><p class="q">“What does this chart mean?”</p><p class="a">If it's on their screen, Ava can help with it.</p></div>
|
|
618
|
+
</div>
|
|
619
|
+
</div>
|
|
620
|
+
</section>
|
|
621
|
+
|
|
622
|
+
<!-- bento -->
|
|
623
|
+
<section class="sec">
|
|
624
|
+
<div class="wrap">
|
|
625
|
+
<div class="head2">
|
|
626
|
+
<h2 class="h2 rv">One guide,<br><span class="soft">built for every account.</span></h2>
|
|
627
|
+
<p class="lede rv">Capture your best help once, then give it to every customer — on any page, for any task, at any hour, in your voice.</p>
|
|
628
|
+
</div>
|
|
629
|
+
<div class="bento">
|
|
630
|
+
<div class="bx w2 rv">
|
|
631
|
+
<h3>Ask anything, on any page</h3><p>Customers ask the way they'd ask a colleague. Ava answers from what's on their screen and your product knowledge.</p>
|
|
632
|
+
<div class="vis">
|
|
633
|
+
<div class="ask">How do I connect Stripe to my workspace?<span class="mic"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5 11a7 7 0 0 0 14 0M12 18v3"/></svg></span></div>
|
|
634
|
+
<div class="ans"><div class="orb on"><span class="r"></span><span class="r"></span><span class="c"></span></div><div class="bub"><small>AVA</small>You're on Settings — open Integrations in the left menu, then click Connect next to Stripe. I'll wait here.</div></div>
|
|
635
|
+
</div>
|
|
636
|
+
</div>
|
|
637
|
+
<div class="bx rv">
|
|
638
|
+
<h3>Your journey, your voice</h3><p>Define the steps to value and how Ava sounds. Every session stays on-brand.</p>
|
|
639
|
+
<div class="vis"><div class="tone"><span class="on">Friendly</span><span>Concise</span><span>Formal</span><span>Playful</span></div></div>
|
|
640
|
+
</div>
|
|
641
|
+
<div class="bx rv">
|
|
642
|
+
<h3>A person when it matters</h3><p>Ava brings your team in with the goal, the screen and the progress already handed over.</p>
|
|
643
|
+
<div class="vis"><div class="hand"><div class="row"><span class="av">SK</span><div><b>Sam from Support joined</b><span>Handed over by Ava · just now</span></div></div><div class="tags"><span>Goal: connect billing</span><span>Step 3 of 4</span><span>Screen shared</span></div></div></div>
|
|
644
|
+
</div>
|
|
645
|
+
<div class="bx w2 rv">
|
|
646
|
+
<h3>Every session, reviewable</h3><p>Recaps show what customers asked, where they got stuck, and how each session ended.</p>
|
|
647
|
+
<div class="vis"><div class="rec">
|
|
648
|
+
<div><div class="lb">Session recap · <span style="color:var(--green)">Completed</span></div><h4>Upgraded to Scale — billing mistake prevented</h4><div class="ks"><div><b>48s</b><span>to done</span></div><div><b>1</b><span>error caught</span></div><div><b>0</b><span>tickets</span></div></div></div>
|
|
649
|
+
<ol class="tl"><li style="--c:#3E8BE8"><time>00:04</time><i></i><span>Asked <b>which plan has the most credits</b></span></li><li style="--c:#6366F1"><time>00:07</time><i></i><span>Ava pointed to <b>Scale</b></span></li><li style="--c:#E08A12"><time>00:21</time><i></i><span>Checkout showed <b>$9,900/mo</b> — flagged</span></li><li style="--c:#1DB26C"><time>00:48</time><i></i><span>Set to 10 seats — <b>done</b></span></li></ol>
|
|
650
|
+
</div></div>
|
|
651
|
+
</div>
|
|
652
|
+
</div>
|
|
653
|
+
</div>
|
|
654
|
+
</section>
|
|
655
|
+
|
|
656
|
+
<!-- stats -->
|
|
657
|
+
<section class="sec" style="padding-top:40px">
|
|
658
|
+
<div class="wrap">
|
|
659
|
+
<div class="head2">
|
|
660
|
+
<h2 class="h2 rv">Moves the numbers<br><span class="soft">your CS and support teams own.</span></h2>
|
|
661
|
+
<p class="lede rv">Ava is built around the metrics customer teams are judged on — so the impact shows up where you already look.</p>
|
|
662
|
+
</div>
|
|
663
|
+
<div class="stats">
|
|
664
|
+
<div class="st rv"><span class="dir down"><i><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M6 13l6 6 6-6"/></svg></i>Shorter</span><div class="n"><span>Time to value</span></div><p>Customers reach their first win in one live session, not a week of emails.</p></div>
|
|
665
|
+
<div class="st rv"><span class="dir up"><i><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5M6 11l6-6 6 6"/></svg></i>Higher</span><div class="n"><span>Activation</span></div><p>Every account gets the hands-on start that used to be reserved for your top tier.</p></div>
|
|
666
|
+
<div class="st rv"><span class="dir down"><i><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M6 13l6 6 6-6"/></svg></i>Fewer</span><div class="n"><span>Support tickets</span></div><p>"How do I…" and "why won't this…" get answered on the page, in the moment.</p></div>
|
|
667
|
+
<div class="st rv"><span class="dir up"><i><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5M6 11l6-6 6 6"/></svg></i>More</span><div class="n"><span>Team capacity</span></div><p>Your CS and support teams spend their time on conversations that truly need a person.</p></div>
|
|
668
|
+
</div>
|
|
669
|
+
</div>
|
|
670
|
+
</section>
|
|
671
|
+
|
|
672
|
+
<!-- compare -->
|
|
673
|
+
<section class="sec" id="compare" style="background:var(--soft)">
|
|
674
|
+
<div class="wrap">
|
|
675
|
+
<div class="head2">
|
|
676
|
+
<h2 class="h2 rv">Great help without<br><span class="soft">the bottleneck.</span></h2>
|
|
677
|
+
<p class="lede rv">The personal touch of a live call with your team, with the reach of self-serve.</p>
|
|
678
|
+
</div>
|
|
679
|
+
<div class="cmp rv">
|
|
680
|
+
<table>
|
|
681
|
+
<thead><tr><th></th><th class="me"><span class="nm"><svg class="wm" style="height:16px;width:38px" viewBox="0 0 66 27.8" role="img" aria-label="Ava"><use href="#ava-wm"/></svg></span><span class="ds">A live guide on every customer's screen.</span></th><th><span class="nm">Calls with your team</span><span class="ds">Personal, but booked and limited.</span></th><th><span class="nm">Docs & chatbots</span><span class="ds">Always there, but can't see the screen.</span></th></tr></thead>
|
|
682
|
+
<tbody>
|
|
683
|
+
<tr><td>Available to every account</td><td class="me"><span class="yes">Yes</span></td><td>Top tier only</td><td><span class="yes">Yes</span></td></tr>
|
|
684
|
+
<tr><td>Sees the customer's screen</td><td class="me"><span class="yes">Yes</span></td><td><span class="yes">Yes</span></td><td class="no">No</td></tr>
|
|
685
|
+
<tr><td>Time to first answer</td><td class="me">Under a second</td><td>Days to book</td><td>Search and hope</td></tr>
|
|
686
|
+
<tr><td>Catches mistakes before they cost</td><td class="me"><span class="yes">Live</span></td><td>Sometimes</td><td class="no">No</td></tr>
|
|
687
|
+
<tr><td>Scales without hiring</td><td class="me"><span class="yes">Yes</span></td><td class="no">No</td><td><span class="yes">Yes</span></td></tr>
|
|
688
|
+
<tr><td>Cost per session</td><td class="me">Low</td><td>High</td><td>Low</td></tr>
|
|
689
|
+
<tr class="cta-row"><td></td><td class="me"><a class="btn btn-acc btn-sm" href="/app">Try the live demo <span class="ar">→</span></a></td><td></td><td></td></tr>
|
|
690
|
+
</tbody>
|
|
691
|
+
</table>
|
|
692
|
+
</div>
|
|
693
|
+
</div>
|
|
694
|
+
</section>
|
|
695
|
+
|
|
696
|
+
<!-- privacy -->
|
|
697
|
+
<section class="sec">
|
|
698
|
+
<div class="wrap">
|
|
699
|
+
<div class="head2">
|
|
700
|
+
<h2 class="h2 rv">Private by design.<br><span class="soft">In your control.</span></h2>
|
|
701
|
+
<p class="lede rv">Ava is built to be trusted by your customers and your security team alike.</p>
|
|
702
|
+
</div>
|
|
703
|
+
<div class="priv">
|
|
704
|
+
<div class="pv rv"><div class="ic"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="13" rx="2"/><path d="M8 21h8M12 17v4"/></svg></div><h3>Only the tab they share</h3><p>Customers choose a single tab. Ava never sees the rest of their screen.</p></div>
|
|
705
|
+
<div class="pv rv"><div class="ic"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg></div><h3>Screens are never stored</h3><p>Ava reads the shared page in the moment to help, then lets it go. No recordings, no screenshots kept.</p></div>
|
|
706
|
+
<div class="pv rv"><div class="ic"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l7 3v6c0 4.5-3 8-7 9-4-1-7-4.5-7-9V6z"/><path d="m9 12 2 2 4-4"/></svg></div><h3>Honest when unsure</h3><p>If Ava isn't certain, it takes another look or asks — it doesn't guess or invent buttons.</p></div>
|
|
707
|
+
<div class="pv rv"><div class="ic"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6h16M4 12h10M4 18h7"/></svg></div><h3>Your journey, your rules</h3><p>You decide the flows, the product knowledge and the tone Ava works from.</p></div>
|
|
708
|
+
<div class="pv rv"><div class="ic"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="8" r="3.5"/><path d="M2.5 20a6.5 6.5 0 0 1 13 0M17 8h5M19.5 5.5 22 8l-2.5 2.5"/></svg></div><h3>A person, one tap away</h3><p>Customers can ask for a human anytime, and your team joins with full context.</p></div>
|
|
709
|
+
<div class="pv rv"><div class="ic"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M10 8.5v7l6-3.5-6-3.5Z"/></svg></div><h3>Every session reviewable</h3><p>Recaps give your team full visibility into what happened and why.</p></div>
|
|
710
|
+
</div>
|
|
711
|
+
</div>
|
|
712
|
+
</section>
|
|
713
|
+
|
|
714
|
+
<!-- faq -->
|
|
715
|
+
<section class="sec" id="faq" style="padding-top:40px">
|
|
716
|
+
<div class="wrap faqg">
|
|
717
|
+
<div><h2 class="h2 rv">Frequently<br><span class="soft">asked questions.</span></h2></div>
|
|
718
|
+
<div class="faq rv">
|
|
719
|
+
<details><summary>Is Ava only for onboarding?<i></i></summary><div class="a">No. Onboarding is where most teams start, but Ava helps with whatever the customer is doing on screen — finding a feature, fixing a setting, understanding billing, troubleshooting an error. If it's on the page, Ava can help.</div></details>
|
|
720
|
+
<details><summary>What does a customer need to start a session?<i></i></summary><div class="a">A desktop browser (Chrome works best), a microphone, and a tab they're happy to share. Nothing to install.</div></details>
|
|
721
|
+
<details><summary>Do we need to add code to our product?<i></i></summary><div class="a">No. Ava works on top of your existing web product through the tab the customer shares — no SDK or engineering sprint required.</div></details>
|
|
722
|
+
<details><summary>Does Ava record the customer's screen?<i></i></summary><div class="a">No. Ava only sees the single tab the customer chooses to share. It reads the page in the moment to help, and doesn't keep recordings or screenshots.</div></details>
|
|
723
|
+
<details><summary>What happens when Ava can't help?<i></i></summary><div class="a">It says so honestly — and can bring a person from your team into the call, with the goal, the screen and the progress so far already handed over.</div></details>
|
|
724
|
+
<details><summary>Can Ava follow our own flows?<i></i></summary><div class="a">Yes. You can define journeys — like onboarding or a plan upgrade — and the product knowledge Ava works from. It guides customers through them, adapts when they go off-path, and recognises when they're done. Outside a journey, it simply helps with whatever is on screen.</div></details>
|
|
725
|
+
</div>
|
|
726
|
+
</div>
|
|
727
|
+
</section>
|
|
728
|
+
|
|
729
|
+
<!-- final cta -->
|
|
730
|
+
<section class="fin">
|
|
731
|
+
<div class="fcard rv" id="fcard" style="background:#111 url(data:image/webp;base64,UklGRowAAABXRUJQVlA4IIAAAAAQBACdASoYABAAPxFwsFAsJiSisAgBgCIJaQAASqvyEpd8YRqwoGr/gAD+1yshv1JxvqtsKjlEcGI9ppWZNFt4vmds4GJSeojZlnd2VRsYm9dfim5hHgTRdrdDAJK//Ex/+2MKn7RNamDajOk1CA3V82t6IWvHvayUaF+Ka8AAAA==) center/cover">
|
|
732
|
+
<picture><source type="image/avif" srcset="/img/cta-960.avif?v=2 960w, /img/cta-1600.avif?v=2 1600w, /img/cta-2400.avif?v=2 2400w" sizes="100vw"><img class="fade" src="/img/cta-1600.webp?v=2" srcset="/img/cta-960.webp?v=2 960w, /img/cta-1600.webp?v=2 1600w, /img/cta-2400.webp?v=2 2400w" sizes="100vw" width="2400" height="1602" alt="" loading="lazy" decoding="async"></picture>
|
|
733
|
+
<div class="in2">
|
|
734
|
+
<h2>Give every customer a guide who sees what they see.</h2>
|
|
735
|
+
<p>See Ava guide a real session — share a tab, and just start talking.</p>
|
|
736
|
+
<a class="btn btn-white" href="/app">Try the live demo <span class="ar">→</span></a>
|
|
737
|
+
<small>No install · Chrome on desktop · microphone & screen-share access</small>
|
|
738
|
+
</div>
|
|
739
|
+
</div>
|
|
740
|
+
</section>
|
|
741
|
+
</main>
|
|
742
|
+
|
|
743
|
+
<footer>
|
|
744
|
+
<div class="wrap">
|
|
745
|
+
<div class="fgrid">
|
|
746
|
+
<div><a class="brand" href="/" style="padding:0;color:var(--ink)"><svg class="wm" viewBox="0 0 66 27.8" role="img" aria-label="Ava"><use href="#ava-wm"/></svg></a><p>A live guide on every customer's screen — for onboarding, support and everything in between.</p></div>
|
|
747
|
+
<div><h5>Product</h5><a href="#product">Features</a><a href="#compare">Compare</a><a href="/app">Live demo</a></div>
|
|
748
|
+
<div><h5>Learn</h5><a href="#why">Why Ava</a><a href="#range">Use cases</a><a href="#faq">FAQ</a></div>
|
|
749
|
+
</div>
|
|
750
|
+
<div class="fbot"><span>© 2026 Ava</span><span>A live guide for every customer</span></div>
|
|
751
|
+
</div>
|
|
752
|
+
<svg class="giant" viewBox="0 0 66 27.8" aria-hidden="true"><use href="#ava-wm"/></svg>
|
|
753
|
+
</footer>
|
|
754
|
+
|
|
755
|
+
<script src="/vendor/lenis.min.js" defer></script>
|
|
756
|
+
<script>
|
|
757
|
+
(() => {
|
|
758
|
+
const RM = document.documentElement.classList.contains('rm');
|
|
759
|
+
const $ = (s) => document.querySelector(s);
|
|
760
|
+
const clamp = (v, a, b) => Math.max(a, Math.min(b, v));
|
|
761
|
+
|
|
762
|
+
/* ── hero entrance ── */
|
|
763
|
+
const hero = $('#hero');
|
|
764
|
+
const ready = () => hero.classList.add('ready');
|
|
765
|
+
// start as soon as the (preloaded) fonts are in — never wait on the photo; its blur placeholder covers it
|
|
766
|
+
Promise.race([document.fonts ? document.fonts.ready : 0, new Promise((r) => setTimeout(r, 400))]).then(() => requestAnimationFrame(ready));
|
|
767
|
+
// photos fade in over their placeholder once decoded
|
|
768
|
+
document.querySelectorAll('img.fade').forEach((i) => { const on = () => i.classList.add('ld'); i.complete && i.naturalWidth ? on() : i.addEventListener('load', on, { once: true }); });
|
|
769
|
+
|
|
770
|
+
/* ── smooth scroll ── */
|
|
771
|
+
let lenis = null;
|
|
772
|
+
addEventListener('load', () => {
|
|
773
|
+
if (RM || !window.Lenis) return;
|
|
774
|
+
try {
|
|
775
|
+
lenis = new Lenis({ duration: 1.15, smoothWheel: true });
|
|
776
|
+
window.__lenis = lenis;
|
|
777
|
+
const raf = (t) => { lenis.raf(t); requestAnimationFrame(raf); }; requestAnimationFrame(raf);
|
|
778
|
+
} catch {}
|
|
779
|
+
});
|
|
780
|
+
document.querySelectorAll('a[href^="#"]').forEach((a) => a.addEventListener('click', (e) => {
|
|
781
|
+
const t = document.querySelector(a.getAttribute('href')); if (!t) return;
|
|
782
|
+
e.preventDefault(); lenis ? lenis.scrollTo(t, { offset: -20 }) : t.scrollIntoView({ behavior: 'smooth' });
|
|
783
|
+
}));
|
|
784
|
+
|
|
785
|
+
/* ── scroll: nav, hero depth, pinned features ── */
|
|
786
|
+
const navFix = $('#navFix'), ph = $('#ph'), panel = $('#panel');
|
|
787
|
+
const feat = $('#product'), slides = [...document.querySelectorAll('.slide')], tabBtns = [...document.querySelectorAll('#tabs button')];
|
|
788
|
+
let cur = 0;
|
|
789
|
+
function onScroll() {
|
|
790
|
+
const y = scrollY, hh = hero.offsetHeight;
|
|
791
|
+
navFix.classList.toggle('show', y > hh - 60);
|
|
792
|
+
if (!RM && y < hh) {
|
|
793
|
+
ph.style.transform = `translate3d(0,${y * 0.22}px,0)`;
|
|
794
|
+
if (innerWidth > 1000) panel.style.translate = `0 ${-y * 0.12}px`;
|
|
795
|
+
}
|
|
796
|
+
const r = feat.getBoundingClientRect(), span = feat.offsetHeight - innerHeight;
|
|
797
|
+
const p = clamp(-r.top / span, 0, 0.9999), f = p * slides.length, i = Math.floor(f);
|
|
798
|
+
if (i !== cur) { slides[cur].classList.remove('on'); tabBtns[cur].classList.remove('on'); cur = i; }
|
|
799
|
+
slides[i].classList.add('on'); tabBtns[i].classList.add('on');
|
|
800
|
+
tabBtns.forEach((b, j) => { b.querySelector('i').style.transform = `scaleX(${j < i ? 0 : j === i ? f - i : 0})`; });
|
|
801
|
+
}
|
|
802
|
+
addEventListener('scroll', onScroll, { passive: true }); addEventListener('resize', onScroll); onScroll();
|
|
803
|
+
tabBtns.forEach((b, j) => b.addEventListener('click', () => {
|
|
804
|
+
const top = feat.offsetTop + (feat.offsetHeight - innerHeight) * ((j + 0.15) / slides.length);
|
|
805
|
+
lenis ? lenis.scrollTo(top) : scrollTo({ top, behavior: 'smooth' });
|
|
806
|
+
}));
|
|
807
|
+
|
|
808
|
+
/* ── calm reveals ── */
|
|
809
|
+
const io = new IntersectionObserver((es) => es.forEach((e) => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } }), { threshold: .12, rootMargin: '0px 0px -6% 0px' });
|
|
810
|
+
document.querySelectorAll('.rv').forEach((el) => {
|
|
811
|
+
const sibs = [...el.parentElement.children].filter((c) => c.classList.contains('rv'));
|
|
812
|
+
el.style.transitionDelay = (Math.max(0, sibs.indexOf(el)) * 0.08) + 's'; io.observe(el);
|
|
813
|
+
});
|
|
814
|
+
|
|
815
|
+
/* ── comparison: label cells with their column (used by the phone card layout) ── */
|
|
816
|
+
const heads = [...document.querySelectorAll('.cmp thead th')].map((th) => { const n = th.querySelector('.nm'); return n ? (n.textContent.trim() || 'Ava') : ''; });
|
|
817
|
+
document.querySelectorAll('.cmp tbody tr').forEach((tr) => [...tr.children].forEach((td, i) => { if (i && heads[i]) td.dataset.label = heads[i]; }));
|
|
818
|
+
|
|
819
|
+
/* ── problem rail ── */
|
|
820
|
+
const rail = $('#rail');
|
|
821
|
+
const step = () => (rail.querySelector('.pc').offsetWidth + 16);
|
|
822
|
+
$('#railPrev').addEventListener('click', () => rail.scrollBy({ left: -step(), behavior: 'smooth' }));
|
|
823
|
+
$('#railNext').addEventListener('click', () => rail.scrollBy({ left: step(), behavior: 'smooth' }));
|
|
824
|
+
|
|
825
|
+
/* ═══════════ the hero film ═══════════ */
|
|
826
|
+
const set = $('#set'), rig = $('#rig'), cam = $('#cam'), win = $('#win'), cursor = $('#cursor');
|
|
827
|
+
const gShare = $('#gShare'), gCall = $('#gCall'), gSub = $('#gSub'), gRecap = $('#gRecap'), glintEl = $('#glint');
|
|
828
|
+
const subWho = $('#subWho'), subTx = $('#subTx'), orb = $('#orb'), callSt = $('#callSt');
|
|
829
|
+
const pScale = $('#pScale'), bScale = $('#bScale'), plans = $('#plans'), mbg = $('#mbg');
|
|
830
|
+
const seat = $('#seat'), total = $('#total'), trk = $('#trk'), trkL = $('#trkL');
|
|
831
|
+
const caps = [...document.querySelectorAll('#caps .cap')];
|
|
832
|
+
|
|
833
|
+
let visible = true, filmT = 0;
|
|
834
|
+
const wait = (ms) => new Promise((res) => {
|
|
835
|
+
// real-time clock that pauses while the film is off-screen or the tab is hidden
|
|
836
|
+
let left = ms, last = performance.now();
|
|
837
|
+
const tick = () => { const now = performance.now(), dt = Math.min(1500, now - last); last = now; if (visible && !document.hidden) { left -= dt; filmT += dt; } left <= 0 ? res() : setTimeout(tick, Math.min(40, left)); };
|
|
838
|
+
setTimeout(tick, Math.min(40, ms));
|
|
839
|
+
});
|
|
840
|
+
new IntersectionObserver((es) => { visible = es[0].isIntersecting; }, { threshold: .1 }).observe(set);
|
|
841
|
+
|
|
842
|
+
const off = (el, v) => el.classList.toggle('off', v);
|
|
843
|
+
function box(el) { let x = 0, y = 0, n = el; while (n && n !== win) { x += n.offsetLeft; y += n.offsetTop; n = n.offsetParent; } return { x, y, w: el.offsetWidth, h: el.offsetHeight }; }
|
|
844
|
+
function camTo(el, s = 1, ry = 0, rx = 0) {
|
|
845
|
+
if (!el) { cam.style.transform = 'translate(0px,0px) scale(1)'; rig.style.transform = 'none'; return; }
|
|
846
|
+
const W = cam.offsetWidth, H = cam.offsetHeight, o = box(el), cx = win.offsetLeft + o.x + o.w / 2, cy = win.offsetTop + o.y + o.h / 2;
|
|
847
|
+
const tx = clamp(W / 2 - cx * s, W - W * s, 0), ty = clamp(H / 2 - cy * s, H - H * s, 0);
|
|
848
|
+
cam.style.transform = `translate(${tx}px,${ty}px) scale(${s})`;
|
|
849
|
+
rig.style.transform = `rotateX(${rx}deg) rotateY(${ry}deg)`;
|
|
850
|
+
}
|
|
851
|
+
let trkEl = null;
|
|
852
|
+
function place() { if (!trkEl) return; const o = box(trkEl), p = 5; Object.assign(trk.style, { left: o.x - p + 'px', top: o.y - p + 'px', width: o.w + p * 2 + 'px', height: o.h + p * 2 + 'px' }); }
|
|
853
|
+
function track(el, cls, label) {
|
|
854
|
+
const fresh = !trk.classList.contains('on'); trkEl = el;
|
|
855
|
+
if (fresh) trk.style.transition = 'none';
|
|
856
|
+
place();
|
|
857
|
+
if (fresh) { trk.offsetWidth; trk.style.transition = ''; }
|
|
858
|
+
trk.className = 'trk on ' + cls; trkL.textContent = label;
|
|
859
|
+
}
|
|
860
|
+
const untrack = () => { trk.classList.remove('on', 'warn'); trkEl = null; };
|
|
861
|
+
function cursorTo(el) { const o = box(el); cursor.style.transform = `translate(${o.x + o.w * .55}px,${o.y + o.h * .55}px)`; }
|
|
862
|
+
function click(el) { const o = box(el), r = document.createElement('div'); r.className = 'rip'; r.style.left = o.x + o.w * .55 + 'px'; r.style.top = o.y + o.h * .55 + 'px'; win.appendChild(r); setTimeout(() => r.remove(), 650); }
|
|
863
|
+
function glint() { glintEl.classList.remove('go'); glintEl.offsetWidth; glintEl.classList.add('go'); }
|
|
864
|
+
async function say(who, text, ava) {
|
|
865
|
+
off(gSub, true); await wait(260);
|
|
866
|
+
subWho.textContent = who; gSub.classList.toggle('ava', !!ava); gSub.classList.toggle('you', !ava); subTx.textContent = '';
|
|
867
|
+
off(gSub, false);
|
|
868
|
+
const parts = ava ? [...text] : text.split(' '), per = ava ? 26 : 115; let t = 0, shown = 0;
|
|
869
|
+
while (shown < parts.length) { const b = performance.now(); await wait(16); t += performance.now() - b; const k = Math.min(parts.length, Math.floor(t / per) + 1); if (k !== shown) { shown = k; subTx.textContent = ava ? parts.slice(0, k).join('') : parts.slice(0, k).join(' '); } }
|
|
870
|
+
}
|
|
871
|
+
async function countTo(from, to, D = 700) {
|
|
872
|
+
let e = 0;
|
|
873
|
+
while (e < D) { const b = performance.now(); await wait(30); e += performance.now() - b; const k = 1 - Math.pow(1 - Math.min(1, e / D), 3); total.textContent = '$' + Math.round(from + (to - from) * k).toLocaleString('en-US') + ' / mo'; }
|
|
874
|
+
}
|
|
875
|
+
let mode = 'idle';
|
|
876
|
+
const speak = (on, st) => { orb.classList.toggle('on', on); if (st) callSt.textContent = st; mode = on ? 'ava' : 'idle'; };
|
|
877
|
+
|
|
878
|
+
// chapter captions under the hero
|
|
879
|
+
const EST = [11500, 10500, 6200]; let chI = -1, chStart = 0;
|
|
880
|
+
const mark = (i) => { chI = i; chStart = filmT; };
|
|
881
|
+
(function chapters() {
|
|
882
|
+
caps.forEach((c, j) => {
|
|
883
|
+
const k = j < chI ? 1 : j > chI ? 0 : Math.min(.97, (filmT - chStart) / EST[j]);
|
|
884
|
+
c.querySelector('i').style.width = (k * 100) + '%'; c.classList.toggle('on', j === chI);
|
|
885
|
+
});
|
|
886
|
+
requestAnimationFrame(chapters);
|
|
887
|
+
})();
|
|
888
|
+
|
|
889
|
+
function reset() {
|
|
890
|
+
filmT = 0; chI = -1; camTo(null); off(win, true); win.classList.remove('dim');
|
|
891
|
+
[gShare, gCall, gSub, gRecap].forEach((g) => off(g, true));
|
|
892
|
+
untrack(); trk.classList.remove('ok');
|
|
893
|
+
mbg.classList.remove('open'); bScale.classList.remove('go'); seat.textContent = '100'; seat.classList.remove('focus');
|
|
894
|
+
total.textContent = '$9,900 / mo'; total.classList.remove('flag', 'good');
|
|
895
|
+
orb.classList.remove('on'); callSt.textContent = 'joining…'; mode = 'idle';
|
|
896
|
+
cursor.style.transform = `translate(${win.offsetWidth * .78}px,${win.offsetHeight * .8}px)`;
|
|
897
|
+
}
|
|
898
|
+
|
|
899
|
+
async function film() {
|
|
900
|
+
reset(); await wait(450);
|
|
901
|
+
mark(0); // SEES
|
|
902
|
+
off(win, false); await wait(700); glint(); await wait(400);
|
|
903
|
+
off(gShare, false); await wait(400); off(gCall, false); callSt.textContent = 'joined'; await wait(600);
|
|
904
|
+
callSt.textContent = 'listening'; mode = 'you';
|
|
905
|
+
await say('Customer', '“Which plan gives me the most credits?”', false);
|
|
906
|
+
mode = 'idle'; await wait(300);
|
|
907
|
+
camTo(plans, 1.36, -5, 2); await wait(1100);
|
|
908
|
+
track(pScale, 'ok', 'Scale · 1.8M credits');
|
|
909
|
+
speak(true, 'speaking');
|
|
910
|
+
await say('Ava', "Scale — 1.8 million a month. It's the one on the right.", true);
|
|
911
|
+
speak(false, 'watching'); await wait(600);
|
|
912
|
+
camTo(null); untrack(); await wait(1000);
|
|
913
|
+
cursorTo(bScale); await wait(1000); bScale.classList.add('go'); click(bScale); await wait(260);
|
|
914
|
+
mbg.classList.add('open'); await wait(800);
|
|
915
|
+
mark(1); // SPEAKS UP
|
|
916
|
+
camTo(total, 1.7, 3, 1.2); await wait(1100);
|
|
917
|
+
total.classList.add('flag'); track(total, 'warn', 'Check this');
|
|
918
|
+
speak(true, 'speaking');
|
|
919
|
+
await say('Ava', 'Hold on — 100 seats makes it $9,900 a month. Did you mean 10?', true);
|
|
920
|
+
speak(false, 'listening'); mode = 'you'; await wait(250);
|
|
921
|
+
await say('Customer', '“Oh — yes, ten.”', false);
|
|
922
|
+
mode = 'idle';
|
|
923
|
+
camTo(seat, 1.6, 3, 1); await wait(750); seat.classList.add('focus'); seat.textContent = '10'; await wait(350);
|
|
924
|
+
camTo(total, 1.7, 3, 1.2); await wait(550);
|
|
925
|
+
await countTo(9900, 990); total.classList.remove('flag'); total.classList.add('good'); seat.classList.remove('focus');
|
|
926
|
+
track(total, 'ok', 'Looks right');
|
|
927
|
+
speak(true, 'speaking');
|
|
928
|
+
await say('Ava', "There it is — $990 a month. You're all set.", true);
|
|
929
|
+
speak(false, 'done'); await wait(700);
|
|
930
|
+
mark(2); // DONE
|
|
931
|
+
camTo(null); off(gSub, true); untrack(); await wait(900);
|
|
932
|
+
win.classList.add('dim'); off(gRecap, false); await wait(4400);
|
|
933
|
+
chI = 3;
|
|
934
|
+
[gRecap, gShare, gCall].forEach((g) => off(g, true)); off(win, true); await wait(1000);
|
|
935
|
+
}
|
|
936
|
+
|
|
937
|
+
/* voice ribbon */
|
|
938
|
+
const cv = $('#ribbon'), g2 = cv.getContext('2d');
|
|
939
|
+
let rw = 0, rh = 0, amp = 2;
|
|
940
|
+
function sizeRibbon() { const r = cv.getBoundingClientRect(), d = Math.min(2, devicePixelRatio || 1); rw = r.width; rh = r.height; cv.width = rw * d; cv.height = rh * d; g2.setTransform(d, 0, 0, d, 0, 0); }
|
|
941
|
+
addEventListener('resize', () => { sizeRibbon(); place(); });
|
|
942
|
+
const PAL = { ava: ['#6366F1', '#8B5CF6', '#3E8BE8'], you: ['#3E8BE8', '#60A5FA', '#6366F1'], idle: ['#8B8FE8', '#A5B4FC', '#93C5FD'] };
|
|
943
|
+
function ribbon(t) {
|
|
944
|
+
requestAnimationFrame(ribbon);
|
|
945
|
+
if (!visible || document.hidden) return;
|
|
946
|
+
if (!rw) sizeRibbon(); if (!rw) return;
|
|
947
|
+
const target = mode === 'ava' ? 12 + 9 * Math.abs(Math.sin(t * .0085) * Math.sin(t * .0041 + 1)) : mode === 'you' ? 6 + 5 * Math.abs(Math.sin(t * .011)) : 2;
|
|
948
|
+
amp += (target - amp) * .07;
|
|
949
|
+
g2.clearRect(0, 0, rw, rh);
|
|
950
|
+
const pal = PAL[mode] || PAL.idle, gr = g2.createLinearGradient(0, 0, rw, 0);
|
|
951
|
+
gr.addColorStop(0, pal[0] + '00'); gr.addColorStop(.25, pal[0]); gr.addColorStop(.55, pal[1]); gr.addColorStop(.8, pal[2]); gr.addColorStop(1, pal[2] + '00');
|
|
952
|
+
g2.strokeStyle = gr; g2.shadowColor = pal[0] + '88'; g2.shadowBlur = 12; g2.lineCap = 'round';
|
|
953
|
+
for (let i = 0; i < 4; i++) {
|
|
954
|
+
g2.beginPath(); g2.globalAlpha = .9 - i * .2; g2.lineWidth = 2 - i * .35;
|
|
955
|
+
for (let x = 0; x <= rw; x += 4) {
|
|
956
|
+
const n = x / rw, env = Math.pow(Math.sin(Math.PI * n), 2);
|
|
957
|
+
const y = rh * .55 + env * amp * (1 - i * .16) * (Math.sin(n * (7 + i * 1.8) + t * (.0017 + i * .0004) + i * 1.3) * .7 + Math.sin(n * (15 + i) - t * .0023 + i) * .3);
|
|
958
|
+
x ? g2.lineTo(x, y) : g2.moveTo(x, y);
|
|
959
|
+
}
|
|
960
|
+
g2.stroke();
|
|
961
|
+
}
|
|
962
|
+
g2.globalAlpha = 1;
|
|
963
|
+
}
|
|
964
|
+
|
|
965
|
+
function still() {
|
|
966
|
+
off(win, false); [gShare, gCall].forEach((g) => off(g, false)); mark(0);
|
|
967
|
+
camTo(plans, 1.25); track(pScale, 'ok', 'Scale · 1.8M credits');
|
|
968
|
+
subWho.textContent = 'Ava'; gSub.classList.add('ava'); subTx.textContent = "Scale — 1.8 million a month. It's the one on the right."; off(gSub, false); callSt.textContent = 'speaking';
|
|
969
|
+
}
|
|
970
|
+
const start = () => { if (RM) { reset(); still(); } else { requestAnimationFrame(ribbon); (async () => { for (;;) await film(); })(); } };
|
|
971
|
+
(document.fonts ? document.fonts.ready : Promise.resolve()).then(() => setTimeout(start, 2600));
|
|
972
|
+
})();
|
|
973
|
+
</script>
|
|
974
|
+
</body>
|
|
975
|
+
</html>
|