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 & 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.