PageSourceSearch

https://www.plavio.ai/

html plavio.ai collected 2026-10-05 16:48:59 UTC 27,795 bytes, 505 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0">
6<title>Plavio — Turn training content into games people complete</title>
7<meta name="description" content="Turn your existing training content into games people actually complete. Plavio reads the policies, manuals, and content you already have and turns them into real, playable games — no course rebuild.">
8<meta property="og:title" content="Turn your existing training content into games people actually complete.">
9<meta property="og:description" content="Plavio reads the training content you already have and turns it into real, playable games. Starting with escape rooms.">
10<meta property="og:type" content="website">
11<meta name="twitter:card" content="summary_large_image">
12<meta name="twitter:title" content="Turn your existing training content into games people actually complete.">
13<meta name="twitter:description" content="Plavio reads the training content you already have and turns it into real, playable games. Starting with escape rooms.">
14<link rel="preconnect" href="https://fonts.googleapis.com">
15<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
16<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,[email protected],500;12..96,700;12..96,800&family=Familjen+Grotesk:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet">
17<style>
18  :root{
19    --navy:#0F172A;
20    --navy-2:#131d33;
21    --surface:#1a2440;
22    --surface-2:#22305a;
23    --line:rgba(255,255,255,.09);
24    --line-2:rgba(255,255,255,.16);
25    --paper:#F7F8FF;
26    --muted:#ffffff;
27    --muted-2:#727A93;
28    --purple:#3F41C9;
29    --purple-bright:#8B8DF5;
30    --purple-soft:#B9BAFA;
31    --cyan:#50C6DC;
32    --cyan-soft:#8BDDEC;
33    --yellow:#EAB308;
34    --yellow-soft:#F6CF4E;
35    --lilac:#F7F8FF;
36    --sand:#ECEBE7;
37    --ink:#0F172A;
38    --maxw:1180px;
39  }
40  *{box-sizing:border-box;margin:0;padding:0}
41  html{scroll-behavior:smooth}
42  body{
43    background:var(--navy);
44    color:var(--paper);
45    font-family:'Familjen Grotesk',sans-serif;
46    font-size:17px;
47    line-height:1.6;
48    -webkit-font-smoothing:antialiased;
49    overflow-x:hidden;
50    position:relative;
51  }
52  body::after{
53    content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.035;
54    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
55  }
56  a{color:inherit;text-decoration:none}
57  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
58  .serif{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400}
59  .display{font-family:'Bricolage Grotesque',sans-serif;line-height:1.02;letter-spacing:-.02em}
60
61  /* ---------- nav ---------- */
62  nav{
63    position:fixed;top:0;left:0;right:0;z-index:100;
64    backdrop-filter:blur(14px);
65    background:rgba(15,23,42,.62);
66    border-bottom:1px solid var(--line);
67  }
68  .nav-in{display:flex;align-items:center;justify-content:space-between;height:68px}
69  .brand{display:flex;align-items:center}
70  .brand img{height:28px;width:auto;display:block}
71  .nav-links{display:flex;gap:32px;align-items:center}
72  .nav-links a{color:var(--muted);font-size:15px;transition:color .2s}
73  .nav-links a:hover{color:var(--paper)}
74  .btn{
75    font-family:'Familjen Grotesk',sans-serif;font-weight:600;font-size:15px;
76    padding:11px 20px;border-radius:9px;cursor:pointer;border:none;transition:transform .15s, box-shadow .25s, border-color .2s, color .2s;
77    display:inline-block;
78  }
79  .btn-primary{background:var(--yellow);color:#2c2000;box-shadow:0 0 0 rgba(234,179,8,0)}
80  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 32px rgba(234,179,8,.32)}
81  .btn-ghost{background:transparent;color:var(--paper);border:1px solid var(--line-2)}
82  .btn-ghost:hover{border-color:var(--cyan);color:var(--cyan-soft)}
83  @media(max-width:860px){.nav-links a:not(.nav-cta){display:none}}
84
85  /* ---------- hero ---------- */
86  header{position:relative;padding:170px 0 110px;overflow:hidden}
87  .glow{
88    position:absolute;top:-140px;left:50%;transform:translateX(-50%);
89    width:980px;height:780px;pointer-events:none;z-index:0;
90    background:radial-gradient(ellipse at center top, rgba(63,65,201,.34), rgba(80,198,220,.12) 42%, transparent 68%);
91    filter:blur(10px);
92    animation:breathe 9s ease-in-out infinite;
93  }
94  @keyframes breathe{0%,100%{opacity:.7}50%{opacity:1}}
95  .gridlines{
96    position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
97    background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
98    background-size:64px 64px;
99    -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 20%,transparent 75%);
100    mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 20%,transparent 75%);
101  }
102  .hero{position:relative;z-index:2;max-width:900px}
103  .eyebrow{
104    display:inline-flex;align-items:center;gap:10px;
105    font-size:20px;color:var(--purple-soft);margin-bottom:26px;
106    opacity:0;animation:rise .7s .05s forwards;
107  }
108  .eyebrow::before{content:"";width:30px;height:1px;background:var(--purple)}
109  h1{font-size:clamp(42px,7vw,82px);font-weight:800;margin-bottom:28px}
110  h1 .em{color:var(--purple-bright);position:relative;white-space:nowrap}
111  .h-line{opacity:0;animation:rise .8s forwards}
112  .h-line:nth-child(2){animation-delay:.12s}
113  .h-line:nth-child(3){animation-delay:.2s}
114  .sub{font-size:clamp(18px,2.2vw,21px);color:var(--muted);max-width:620px;margin-bottom:40px;opacity:0;animation:rise .8s .34s forwards}
115  .sub b{color:var(--paper);font-weight:600}
116  .cta-row{display:flex;gap:14px;flex-wrap:wrap;opacity:0;animation:rise .8s .46s forwards}
117  .micro{font-size:14px;color:var(--muted-2);margin-top:18px;opacity:0;animation:rise .8s .58s forwards}
118  @keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
119
120  /* ---------- section scaffold ---------- */
121  section{position:relative;padding:108px 0}
122  .kicker{font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);font-weight:600;margin-bottom:18px}
123  .sec-title{font-size:clamp(30px,4.4vw,50px);font-weight:700;max-width:760px;margin-bottom:22px}
124  .sec-title .serif{color:var(--cyan-soft)}
125  .sec-lead{font-size:19px;color:var(--muted);max-width:600px}
126  .divider{height:1px;background:linear-gradient(90deg,transparent,var(--line-2),transparent)}
127
128  /* ---------- light section ---------- */
129  .light{background:var(--lilac);color:var(--ink)}
130  .light .kicker{color:var(--purple)}
131  .light .sec-title{color:var(--ink)}
132  .light .sec-title .serif{color:var(--purple)}
133  .light .sec-lead{color:#525a73}
134
135  /* ---------- try it: demo + game ---------- */
136  .demo-embed{margin-top:48px}
137  .demo-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid rgba(15,23,42,.12);box-shadow:0 30px 80px rgba(15,23,42,.13);background:#fff}
138  .demo-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
139  .play-panel{margin-top:30px;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
140    background:linear-gradient(120deg,var(--purple),#5658d8);color:#fff;border-radius:18px;padding:34px 40px;overflow:hidden;position:relative}
141  .play-panel::after{content:"";position:absolute;right:-60px;top:-60px;width:240px;height:240px;border-radius:50%;
142    background:radial-gradient(circle,rgba(80,198,220,.4),transparent 70%);pointer-events:none}
143  .play-copy{position:relative;z-index:1}
144  .play-copy h3{font-family:'Bricolage Grotesque';font-weight:700;font-size:25px;color:#fff;margin-bottom:8px;letter-spacing:-.01em}
145  .play-copy p{color:rgba(255,255,255,.86);font-size:16px;max-width:540px}
146  .btn-lg{padding:15px 28px;font-size:16px;position:relative;z-index:1;white-space:nowrap}
147
148  /* ---------- transformation ---------- */
149  .pipe{display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:center;margin-top:62px}
150  @media(max-width:880px){.pipe{grid-template-columns:1fr;gap:30px}.pipe .arrow{transform:rotate(90deg);justify-self:center}}
151  .card{background:linear-gradient(160deg,var(--surface),var(--navy-2));border:1px solid var(--line);border-radius:18px;padding:26px;position:relative;overflow:hidden}
152  .card.doc{transform:rotate(-1.4deg)}
153  .card.room{transform:rotate(1.4deg)}
154  .card-tag{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);margin-bottom:16px;display:flex;align-items:center;gap:8px}
155  .card-tag .tdot{width:7px;height:7px;border-radius:50%;background:var(--muted-2)}
156  .card.room .card-tag .tdot{background:var(--yellow);box-shadow:0 0 10px var(--yellow)}
157  .doc-title{height:13px;width:62%;background:var(--line-2);border-radius:4px;margin-bottom:18px}
158  .doc-row{height:8px;background:var(--line);border-radius:4px;margin-bottom:11px}
159  .doc-row.w1{width:100%}.doc-row.w2{width:92%}.doc-row.w3{width:97%}.doc-row.w4{width:74%}
160  .doc-rule{height:8px;width:88%;background:rgba(80,198,220,.5);border-radius:4px;margin-bottom:11px}
161  .doc-foot{font-size:12px;color:var(--muted-2);margin-top:14px;font-style:italic}
162  .room-scene{height:178px;border-radius:12px;position:relative;overflow:hidden;
163    background:radial-gradient(circle at 50% 120%,rgba(234,179,8,.24),transparent 60%),linear-gradient(180deg,#101a30,#0a1020);
164    border:1px solid var(--line)}
165  .room-door{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:74px;height:118px;border-radius:8px 8px 0 0;
166    background:linear-gradient(180deg,rgba(234,179,8,.95),rgba(234,179,8,.28));box-shadow:0 0 50px rgba(234,179,8,.55)}
167  .room-door::after{content:"";position:absolute;right:11px;top:54%;width:7px;height:7px;border-radius:50%;background:#2c2000}
168  .room-obj{position:absolute;border:1px solid var(--line-2);border-radius:6px;background:rgba(255,255,255,.04)}
169  .room-obj.a{width:34px;height:34px;left:24px;bottom:26px;transform:rotate(8deg)}
170  .room-obj.b{width:26px;height:40px;right:30px;bottom:30px;transform:rotate(-6deg)}
171  .room-obj.c{width:30px;height:22px;right:64px;top:30px;transform:rotate(4deg)}
172  .room-badge{position:absolute;top:10px;left:10px;z-index:2;font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--yellow);background:rgba(234,179,8,.12);border:1px solid rgba(234,179,8,.4);padding:4px 8px;border-radius:6px}
173  .room-foot{font-size:12px;color:var(--yellow-soft);margin-top:14px}
174  .engine{display:flex;flex-direction:column;align-items:center;padding:0 30px}
175  @media(max-width:880px){.engine{padding:0}}
176  .engine-core{width:96px;height:96px;border-radius:50%;display:grid;place-items:center;position:relative;
177    background:radial-gradient(circle,var(--surface-2),var(--navy));border:1px solid var(--line-2)}
178  .engine-core::before{content:"";position:absolute;inset:-8px;border-radius:50%;border:1px dashed rgba(139,141,245,.5);animation:spin 14s linear infinite}
179  @keyframes spin{to{transform:rotate(360deg)}}
180  .engine-core span{font-family:'Bricolage Grotesque';font-weight:800;font-size:13px;color:var(--purple-bright);letter-spacing:.04em;text-align:center;line-height:1.15}
181  .engine-label{font-size:13px;color:var(--muted);margin-top:16px;text-align:center;max-width:140px}
182  .arrow{display:flex;align-items:center;justify-content:center}
183  .arrow svg{width:46px;height:46px}
184
185  /* ---------- steps ---------- */
186  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:60px}
187  @media(max-width:820px){.steps{grid-template-columns:1fr}}
188  .step{padding:30px;border:1px solid var(--line);border-radius:16px;background:var(--navy-2);transition:border-color .3s,transform .3s}
189  .step:hover{border-color:var(--line-2);transform:translateY(-4px)}
190  .step .n{font-family:'Bricolage Grotesque';font-weight:800;font-size:15px;color:var(--purple-bright);margin-bottom:16px}
191  .step h3{font-family:'Bricolage Grotesque';font-weight:700;font-size:21px;margin-bottom:10px;letter-spacing:-.01em}
192  .step p{color:var(--muted);font-size:16px}
193
194  /* ---------- why grid ---------- */
195  .why{background:var(--navy-2)}
196  .why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:56px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden}
197  @media(max-width:760px){.why-grid{grid-template-columns:1fr}}
198  .feat{background:var(--navy-2);padding:40px;transition:background .3s}
199  .feat:hover{background:var(--surface)}
200  .feat .ic{font-family:'Bricolage Grotesque';font-weight:800;color:var(--cyan);font-size:22px;margin-bottom:18px;display:block}
201  .feat h3{font-family:'Bricolage Grotesque';font-weight:700;font-size:23px;margin-bottom:12px;letter-spacing:-.01em}
202  .feat p{color:var(--muted);font-size:16.5px}
203
204  /* ---------- value arc ---------- */
205  .arc{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:58px}
206  @media(max-width:820px){.arc{grid-template-columns:1fr}}
207  .arc-card{border:1px solid var(--line);border-radius:18px;padding:38px;position:relative;background:var(--navy-2)}
208  .arc-card.now{background:linear-gradient(165deg,rgba(63,65,201,.16),var(--navy-2))}
209  .arc-stamp{font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;padding:5px 12px;border-radius:999px;display:inline-block;margin-bottom:22px}
210  .arc-card.now .arc-stamp{background:var(--yellow);color:#2c2000}
211  .arc-card.next .arc-stamp{background:transparent;color:var(--muted);border:1px solid var(--line-2)}
212  .arc-card h3{font-family:'Bricolage Grotesque';font-weight:700;font-size:27px;margin-bottom:14px;letter-spacing:-.01em}
213  .arc-card p{color:var(--muted);font-size:17px}
214  .arc-card .em{color:var(--purple-bright)}
215
216  /* ---------- final cta ---------- */
217  .final{text-align:center;position:relative;overflow:hidden;padding:130px 0}
218  .final .glow{top:auto;bottom:-300px;background:radial-gradient(ellipse at center bottom, rgba(63,65,201,.34), rgba(80,198,220,.12) 42%, transparent 68%)}
219  .final h2{font-family:'Bricolage Grotesque';font-weight:800;font-size:clamp(34px,5.5vw,62px);letter-spacing:-.02em;max-width:760px;margin:0 auto 22px;position:relative;z-index:2;line-height:1.05}
220  .final p{color:var(--muted);font-size:19px;max-width:540px;margin:0 auto 36px;position:relative;z-index:2}
221  .final .cta-row{justify-content:center;position:relative;z-index:2;animation:none;opacity:1}
222
223  /* ---------- request access form ---------- */
224  .access-form{max-width:480px;margin:0 auto;text-align:left;position:relative;z-index:2}
225  .field-row{display:flex;gap:12px}
226  @media(max-width:520px){.field-row{flex-direction:column;gap:0}}
227  .field{
228    width:100%;margin-bottom:12px;padding:13px 15px;border-radius:10px;
229    background:rgba(255,255,255,.05);border:1px solid var(--line-2);color:var(--paper);
230    font-family:'Familjen Grotesk',sans-serif;font-size:15px;transition:border-color .2s,background .2s;
231  }
232  .field::placeholder{color:var(--muted-2)}
233  .field:focus{outline:none;border-color:var(--cyan);background:rgba(255,255,255,.08)}
234  textarea.field{resize:vertical;min-height:84px}
235  .btn-submit{width:100%;margin-top:4px;font-size:16px;padding:14px;border:none;cursor:pointer}
236  .form-status{margin-top:14px;font-size:15px;min-height:1.2em;text-align:center}
237  .form-status.ok{color:var(--cyan-soft)}
238  .form-status.err{color:#ff9b9b}
239
240  /* ---------- footer ---------- */
241  footer{border-top:1px solid var(--line);padding:48px 0 60px}
242  .foot-in{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;flex-wrap:wrap}
243  .foot-links{display:flex;gap:28px;flex-wrap:wrap}
244  .foot-links a{color:var(--muted);font-size:15px;transition:color .2s}
245  .foot-links a:hover{color:var(--cyan-soft)}
246  .foot-copy{font-size:14px;color:var(--muted-2);margin-top:16px}
247</style>
248</head>
249<body>
250
251<nav>
252  <div class="wrap nav-in">
253    <a class="brand" href="#"><img src="logo.png" alt="Plavio"></a>
254    <div class="nav-links">
255      <a href="https://demo.plavio.ai/demo/acme-corp" target="_blank" rel="noopener">Play a demo</a>
256      <a href="#how">How it works</a>
257      <a href="#why">Why Plavio</a>
258      <a class="btn btn-primary nav-cta" href="#start">Request early access</a>
259    </div>
260  </div>
261</nav>
262
263<header>
264  <div class="glow"></div>
265  <div class="gridlines"></div>
266  <div class="wrap">
267    <div class="hero">
268      <span class="eyebrow serif">The content-to-game platform</span>
269      <h1 class="display">
270        <span class="h-line">Turn your existing training</span><br>
271        <span class="h-line">content into games people</span><br>
272        <span class="h-line"><span class="em">actually complete.</span></span>
273      </h1>
274      <p class="sub">Plavio reads the policies, manuals, and compliance docs you <b>already have</b> — and turns them into real, playable games. No course rebuild. No live sessions. <b>Starting with escape rooms — more game types on the way.</b></p>
275      <div class="cta-row">
276        <a class="btn btn-primary" href="#start">Request early access</a>
277        <a class="btn btn-ghost" href="https://demo.plavio.ai/demo/acme-corp" target="_blank" rel="noopener">▶ Play a live game</a>
278      </div>
279      <p class="micro">Invite-only while we're in early access · Built for compliance, conduct, onboarding &amp; safety training.</p>
280    </div>
281  </div>
282</header>
283
284<!-- TRY IT: SUPADEMO + PUBLIC GAME -->
285<section id="try" class="light">
286  <div class="wrap">
287    <p class="kicker">See it, then play it</p>
288    <h2 class="sec-title display">Don't take our word for it — <span class="serif">play one.</span></h2>
289    <p class="sec-lead">Go through a short walkthrough of how a document becomes a game, then step into a live one built from a real policy.</p>
290
291    <div style="position: relative; box-sizing: content-box; max-height: 80vh; max-height: 80svh; width: 100%; aspect-ratio: 2.21; padding: 40px 0 40px 0;">
292  <iframe src="https://app.supademo.com/embed/cmq9annje2oc2qml6ikbinav0?embed_v=2&utm_source=embed" loading="lazy" title="Build an Interactive Facility Security Training Game" allow="clipboard-write" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
293    </div>
294
295    <div class="play-panel">
296      <div class="play-copy">
297        <h3>Play a real game now</h3>
298        <p>A live escape room built from an actual compliance policy. No signup, about four minutes — this is exactly what your team would play.</p>
299      </div>
300      <a class="btn btn-primary btn-lg" href="https://demo.plavio.ai/demo/acme-corp" target="_blank" rel="noopener">▶ Play a live game</a>
301    </div>
302  </div>
303</section>
304
305<div class="wrap"><div class="divider"></div></div>
306
307<!-- HOW IT WORKS -->
308<section id="how">
309  <div class="wrap">
310    <p class="kicker">How it works</p>
311    <h2 class="sec-title display">From a PDF nobody reads <span class="serif">to a game they can't put down</span> until they get it.</h2>
312    <p class="sec-lead">No rewriting. No instructional designers. You bring the document you already have — the engine does the rest.</p>
313
314    <div class="pipe">
315      <div class="card doc">
316        <div class="card-tag"><span class="tdot"></span>What you have today</div>
317        <div class="doc-title"></div>
318        <div class="doc-row w1"></div>
319        <div class="doc-row w2"></div>
320        <div class="doc-rule"></div>
321        <div class="doc-row w3"></div>
322        <div class="doc-rule"></div>
323        <div class="doc-row w4"></div>
324        <div class="doc-foot">Anti-bribery_policy_v3.pdf — 41 pages</div>
325      </div>
326
327      <div class="engine">
328        <div class="arrow" style="margin-bottom:18px">
329          <svg viewBox="0 0 24 24" fill="none" stroke="#8B8DF5" stroke-width="1.4"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
330        </div>
331        <div class="engine-core"><span>PLAVIO<br>ENGINE</span></div>
332        <p class="engine-label">Extracts the real rules. Builds them into the room.</p>
333        <div class="arrow" style="margin-top:18px">
334          <svg viewBox="0 0 24 24" fill="none" stroke="#8B8DF5" stroke-width="1.4"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
335        </div>
336      </div>
337
338      <div class="card room">
339        <div class="card-tag"><span class="tdot"></span>What your team plays</div>
340        <div class="room-scene">
341          <span class="room-badge">Game type 01</span>
342          <div class="room-obj a"></div>
343          <div class="room-obj b"></div>
344          <div class="room-obj c"></div>
345          <div class="room-door"></div>
346        </div>
347        <p class="room-foot">Escape room — our first game type. The only way out is applying the policy.</p>
348      </div>
349    </div>
350
351    <div class="steps">
352      <div class="step">
353        <div class="n">01</div>
354        <h3>Upload what you already have</h3>
355        <p>Drop in a policy, onboarding pack, or compliance manual. Plavio works with your existing content — nothing to rewrite, no course to build.</p>
356      </div>
357      <div class="step">
358        <div class="n">02</div>
359        <h3>The engine extracts the rules</h3>
360        <p>An agentic backend pulls the real obligations out of the document and structures them into something playable — text and 3D objects in a room.</p>
361      </div>
362      <div class="step">
363        <div class="n">03</div>
364        <h3>They play their way out</h3>
365        <p>Finishing the game means actually applying the policy — not clicking through slides to a quiz. Completion that means comprehension.</p>
366      </div>
367    </div>
368  </div>
369</section>
370
371<div class="wrap"><div class="divider"></div></div>
372
373<!-- WHY -->
374<section id="why" class="why">
375  <div class="wrap">
376    <p class="kicker">Why Plavio</p>
377    <h2 class="sec-title display">Not a quiz with points bolted on. <span class="serif">A real game, built from your content.</span></h2>
378    <div class="why-grid">
379      <div class="feat">
380        <span class="ic">◆</span>
381        <h3>AAA game templates</h3>
382        <p>Each game is a hand-crafted, production-grade world — never a multiple-choice slideshow with points bolted on. Escape rooms are live today, with new game types on the way.</p>
383      </div>
384      <div class="feat">
385        <span class="ic">↻</span>
386        <h3>Built on what you already run</h3>
387        <p>Plavio sits on top of your training stack. It doesn't replace your LMS or ask you to rebuild a single course you already own.</p>
388      </div>
389      <div class="feat">
390        <span class="ic">⬡</span>
391        <h3>One engine. Every game gets deeper</h3>
392        <p>Improve the engine once and every game inherits it — the ones you've already made and the ones you haven't built yet.</p>
393      </div>
394      <div class="feat">
395        <span class="ic">⌖</span>
396        <h3>Made for sensitive training</h3>
397        <p>Compliance, conduct, safety, onboarding — done privately, at each person's own pace, and done by everyone. No scheduling, no live sessions.</p>
398      </div>
399    </div>
400  </div>
401</section>
402
403<div class="wrap"><div class="divider"></div></div>
404
405<!-- VALUE ARC -->
406<section id="arc">
407  <div class="wrap">
408    <p class="kicker">Where it's going</p>
409    <h2 class="sec-title display">Engagement is where it starts. <span class="serif">Not where it ends.</span></h2>
410    <p class="sec-lead">The game gets people through the training. What they do inside it tells you something a completion checkbox never could.</p>
411
412    <div class="arc">
413      <div class="arc-card now">
414        <span class="arc-stamp">Live today</span>
415        <h3>People finish.</h3>
416        <p>Mandatory training built so that completion means comprehension. They can't reach the exit without <span class="em">applying the rule</span> — so finishing is the proof, not the quiz at the end.</p>
417      </div>
418      <div class="arc-card next">
419        <span class="arc-stamp">On the roadmap</span>
420        <h3>You see where you're weak.</h3>
421        <p>Because people <span class="em">play</span>, Plavio can see where they hesitate and where they fail — turning training from a box-ticking exercise into a read on where your organisation actually needs attention.</p>
422      </div>
423    </div>
424  </div>
425</section>
426
427<!-- FINAL CTA -->
428<section id="start" class="final">
429  <div class="glow"></div>
430  <div class="wrap">
431    <h2 class="display">See your own policy<br>become a game.</h2>
432    <p>We're onboarding a small group of teams in early access. Tell us a little about you and we'll turn your first policy into a game — on us.</p>
433    <form id="accessForm" class="access-form">
434      <!-- Get a free access key at https://web3forms.com (enter your email, no account needed) and paste it below. Submissions are emailed to that address. -->
435      <input type="hidden" name="access_key" value="1fc719c0-5015-4063-8222-52b87c204d9a">
436      <input type="hidden" name="subject" value="New early-access request — Plavio">
437      <input type="hidden" name="from_name" value="Plavio landing page">
438      <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off">
439      <div class="field-row">
440        <input class="field" type="text" name="name" placeholder="Full name" required>
441        <input class="field" type="email" name="email" placeholder="Work email" required>
442      </div>
443      <input class="field" type="text" name="company" placeholder="Company" required>
444      <textarea class="field" name="message" placeholder="What training would you like to turn into a game? (optional)"></textarea>
445      <button class="btn btn-primary btn-submit" type="submit">Request early access</button>
446      <p class="form-status" id="formStatus"></p>
447    </form>
448  </div>
449</section>
450
451<footer>
452  <div class="wrap foot-in">
453    <div>
454      <a class="brand" href="#"><img src="logo.png" alt="Plavio"></a>
455      <p class="foot-copy">© 2026 Plavio by Teem Camp LTD</p>
456    </div>
457    <div class="foot-links">
458      <a href="https://demo.plavio.ai/demo/acme-corp" target="_blank" rel="noopener">Play a demo</a>
459      <a href="#how">How it works</a>
460      <a href="#why">Why Plavio</a>
461      <a href="#start">Get started</a>
462    </div>
463  </div>
464</footer>
465
466<script>
467  (function () {
468    const form = document.getElementById('accessForm');
469    const status = document.getElementById('formStatus');
470    if (!form) return;
471    form.addEventListener('submit', async function (e) {
472      e.preventDefault();
473      const btn = form.querySelector('button[type="submit"]');
474      btn.disabled = true;
475      btn.textContent = 'Sending…';
476      status.className = 'form-status';
477      status.textContent = '';
478      const data = Object.fromEntries(new FormData(form).entries());
479      try {
480        const res = await fetch('https://api.web3forms.com/submit', {
481          method: 'POST',
482          headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
483          body: JSON.stringify(data)
484        });
485        const json = await res.json();
486        if (json.success) {
487          form.reset();
488          status.className = 'form-status ok';
489          status.textContent = "Thanks — we've got your request and we'll be in touch shortly.";
490          btn.textContent = 'Request sent ✓';
491        } else {
492          throw new Error(json.message || 'error');
493        }
494      } catch (err) {
495        status.className = 'form-status err';
496        status.textContent = "Something went wrong — please try again in a moment.";
497        btn.disabled = false;
498        btn.textContent = 'Request early access';
499      }
500    });
501  })();
502</script>
502
503
504</body>
505</html>

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