:root{
  --wapi-bg:#07111f;
  --wapi-panel:#121f33;
  --wapi-panel2:#0b1728;
  --wapi-line:#263752;
  --wapi-text:#f8fafc;
  --wapi-muted:#94a3b8;
  --wapi-blue:#4f7cff;
  --wapi-green:#22c55e;
  --wapi-gold:#f4c95d;
  --wapi-purple:#7c3aed;
}

.demo-page{min-height:100vh;overflow-x:hidden;background:#07111f}
.demo-main{position:relative;z-index:1}
.demo-site-header{z-index:50}
.demo-nav-active{color:#fff!important}
.demo-intro{padding-top:130px;padding-bottom:20px;text-align:center}
.demo-intro-copy{max-width:760px;margin:0 auto}
.demo-intro h1{font-size:clamp(42px,6vw,76px);line-height:.98;letter-spacing:-3px;margin:18px 0 20px}
.demo-intro h1 span{background:linear-gradient(120deg,#8fc1ff,#b08cff);-webkit-background-clip:text;background-clip:text;color:transparent}
.demo-intro p{max-width:660px;margin:0 auto;color:#aab8d0;font-size:18px;line-height:1.6}
.demo-intro .eyebrow{margin-inline:auto}

.demo-stage{min-height:780px;display:grid;grid-template-columns:minmax(300px,.85fr) minmax(420px,1.15fr);align-items:center;gap:clamp(36px,7vw,100px);padding-top:35px;padding-bottom:95px}
.demo-story{max-width:500px;padding:30px 0}
.demo-step-count{font-size:12px;font-weight:900;letter-spacing:.16em;color:#667896;margin-bottom:24px}
.demo-step-count span:first-child{font-size:18px;color:#d7e1f2}
.demo-story .kicker{margin-bottom:12px}
.demo-story h2{font-size:clamp(34px,4.2vw,58px);line-height:1.02;letter-spacing:-2.2px;margin:0 0 18px;color:#fff}
.demo-story>p:not(.kicker){font-size:17px;line-height:1.65;color:#9fadc5;margin:0;max-width:460px}
.demo-progress{display:flex;gap:7px;margin:32px 0 22px;flex-wrap:wrap}
.demo-progress button{width:28px;height:5px;border:0;border-radius:999px;background:#263752;cursor:pointer;padding:0;transition:.25s ease}
.demo-progress button.active{width:52px;background:linear-gradient(90deg,#4f7cff,#8b5cf6)}
.demo-controls{display:flex;gap:9px;align-items:center}
.demo-control{height:44px;min-width:44px;border:1px solid #2a3a56;border-radius:999px;background:#101c2e;color:#dce6f7;font-weight:800;cursor:pointer;transition:.2s}
.demo-control:hover{transform:translateY(-1px);border-color:#4f7cff}
.demo-control-main{min-width:94px;background:#eef4ff;color:#16243c;border-color:#eef4ff}
.demo-restart{border:0;background:transparent;color:#7f91ae;padding:13px 0;font-size:12px;cursor:pointer}
.demo-restart:hover{color:#c7d4ea}

.demo-device-zone{position:relative;display:grid;justify-items:center;isolation:isolate}
.demo-phone{position:relative;width:min(390px,88vw);aspect-ratio:390/844;border:9px solid #0a0d12;border-radius:54px;background:#05070a;box-shadow:0 40px 110px #000b,0 0 0 1px #34415a,0 0 80px #4f7cff18;overflow:hidden;z-index:4}
.demo-phone::before{content:"";position:absolute;inset:-1px;border-radius:45px;box-shadow:inset 0 0 0 1px #ffffff12;pointer-events:none;z-index:30}
.demo-phone-speaker{position:absolute;left:50%;top:12px;transform:translateX(-50%);width:105px;height:28px;border-radius:999px;background:#05070a;z-index:40}
.demo-phone-screen{position:absolute;inset:0;border-radius:44px;overflow:hidden;background:var(--wapi-bg);color:var(--wapi-text);font:14px/1.35 ui-rounded,"SF Pro Rounded",Nunito,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.demo-app{height:100%;position:relative;overflow:hidden;background:var(--wapi-bg)}
.demo-device-note{color:#6e809e;font-size:12px;margin:18px 0 0}
.demo-float-card{position:absolute;z-index:2;min-width:140px;padding:12px 14px;border-radius:18px;background:#ffffff0b;border:1px solid #ffffff13;backdrop-filter:blur(14px);box-shadow:0 18px 50px #0005;color:#eaf1ff}
.demo-float-card b,.demo-float-card span{display:block}.demo-float-card b{font-size:12px}.demo-float-card span{font-size:11px;color:#8698b8;margin-top:2px}
.demo-float-left{left:-25px;top:22%;transform:rotate(-6deg)}
.demo-float-right{right:-10px;bottom:22%;transform:rotate(5deg)}

/* Real Wapi-inspired shell */
.wapi-shell{height:100%;display:flex;flex-direction:column;background:var(--wapi-bg)}
.wapi-top{height:82px;flex:0 0 82px;background:linear-gradient(135deg,#2853cb,#7138b6);display:grid;grid-template-columns:1fr auto 1fr;align-items:end;padding:0 14px 12px;color:#fff;position:relative;z-index:8}
.wapi-top-logo{font-size:27px;letter-spacing:-1px;font-weight:950;justify-self:center;font-family:"Avenir Next Rounded","SF Pro Rounded",ui-rounded,sans-serif}
.wapi-top-plus{justify-self:start;width:34px;height:34px;border:1px solid #ffffff4d;background:#ffffff16;color:#fff;border-radius:999px;font-size:23px;line-height:28px;padding:0;cursor:pointer}
.wapi-profile-pill{justify-self:end;display:flex;align-items:center;gap:5px;border:1px solid #ffffff50;background:#ffffff16;border-radius:999px;padding:4px 7px 4px 4px;color:#fff;font-size:10px;cursor:pointer}
.wapi-avatar{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#60a5fa,#8b5cf6);font-size:10px;font-weight:900;color:#fff}
.wapi-content{position:relative;flex:1;overflow:hidden}
.wapi-scroll{height:100%;overflow:auto;padding:10px 12px 82px;scrollbar-width:none}.wapi-scroll::-webkit-scrollbar{display:none}
.wapi-nav{height:69px;position:absolute;left:0;right:0;bottom:0;background:#121f33f5;border-top:1px solid var(--wapi-line);display:grid;grid-template-columns:repeat(5,1fr);z-index:12;padding:6px 2px 8px;backdrop-filter:blur(15px)}
.wapi-nav button{border:0;background:transparent;color:#74869f;font-size:8.5px;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.wapi-nav button b{font-size:18px;line-height:1}.wapi-nav button.active{color:var(--wapi-blue)}
.wapi-page-title{font-size:12px;color:#a2b2ca;margin:0 2px 10px;font-weight:800;text-transform:uppercase;letter-spacing:.09em}
.wapi-card{background:var(--wapi-panel);border:1px solid var(--wapi-line);border-radius:20px;padding:13px;margin:0 0 10px;box-shadow:0 8px 24px #0003}
.wapi-card-head{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.wapi-group{display:inline-flex;border-radius:8px;padding:5px 8px;color:#fff;font-size:9px;font-weight:900}.wapi-group.blue{background:#2862d6}.wapi-group.purple{background:#7c3aed}.wapi-group.teal{background:#0f766e}
.wapi-date{text-align:right;color:#a6b2c5;font-size:9px}.wapi-date b{display:block;color:#e6edf7;font-size:10px}.wapi-card h3{font-size:16px;margin:8px 0 8px;color:#fff;letter-spacing:-.2px}
.wapi-host-row{display:flex;align-items:center;gap:6px;color:#d4deed;font-size:10px}.wapi-host-row small{color:#7f91a9;margin-right:2px}.wapi-host-row .wapi-avatar{width:22px;height:22px}
.wapi-place-row{display:flex;gap:7px;margin:10px 0}.wapi-place{flex:1;background:var(--wapi-panel2);color:#75c8ff;border:1px solid var(--wapi-line);border-radius:11px;padding:8px;font-size:10px}.wapi-add-list{width:76px;background:#2c2510;color:#fde68a;border:1px solid #6c5a1e;border-radius:11px;padding:7px;font-size:9px;text-align:center}
.wapi-rsvp-hint{font-size:8px;color:#71839f;text-align:center;margin:3px 0 5px}.wapi-rsvp{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.wapi-rsvp button{background:var(--wapi-panel2);color:#e7edf6;border:1px solid var(--wapi-line);border-radius:11px;padding:8px 4px;font-size:9px;cursor:pointer}.wapi-rsvp button b{margin-left:2px}.wapi-rsvp button.sel{background:#123d29;border-color:#22c55e;color:#dcfce7}

.wapi-quick-menu{position:absolute;left:12px;top:73px;width:160px;background:#142238;border:1px solid #33445f;border-radius:14px;padding:6px;box-shadow:0 18px 45px #0009;z-index:30;animation:popIn .24s ease both}.wapi-quick-menu button{width:100%;border:0;background:transparent;color:#eef4ff;text-align:left;padding:10px;border-radius:9px;font-size:11px;cursor:pointer}.wapi-quick-menu button:first-child{background:#22c55e1a;color:#86efac}.wapi-quick-menu button:hover{background:#ffffff0b}

.wapi-form-page{height:100%;overflow:auto;padding:10px 12px 82px;scrollbar-width:none}.wapi-form-page::-webkit-scrollbar{display:none}.wapi-back-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.wapi-back{border:1px solid #2c405e;background:#10213a;color:#fff;border-radius:999px;padding:7px 11px;font-size:9px}.wapi-form-title{font-size:18px;font-weight:900}.wapi-step{margin-bottom:12px}.wapi-step-label{display:flex;gap:7px;align-items:center;font-size:10px;font-weight:850;color:#f4f7fb;margin:0 0 6px}.wapi-step-num{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#1d2d46;color:#8fb6ff;font-size:9px}.wapi-field{width:100%;border:1px solid var(--wapi-line);background:var(--wapi-panel2);color:#f8fafc;border-radius:11px;padding:10px;font-size:10px}.wapi-audience{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}.wapi-choice{border:1px solid #2d405d;background:#111e31;color:#dce6f4;border-radius:11px;padding:9px 6px;font-size:9px;text-align:center}.wapi-choice.active{border-color:#4f7cff;background:#172b56;color:#dce8ff}.wapi-group-box{border:1px solid #2c405d;background:#0d192a;border-radius:14px;padding:9px}.wapi-picker{display:flex;justify-content:space-between;align-items:center;background:#142238;border:1px solid #32445f;border-radius:10px;padding:9px;font-size:10px;color:#dce6f4}.wapi-selected-hosts{display:flex;gap:6px;margin:8px 0}.wapi-host-chip{display:flex;align-items:center;gap:5px;background:#173c2a;border:1px solid #22c55e;border-radius:999px;padding:5px 8px 5px 5px;font-size:9px}.wapi-host-chip.purple{background:#281d4d;border-color:#7c3aed}.wapi-search{background:#0b1728;border:1px solid #2c3e58;border-radius:10px;padding:9px;font-size:9px;color:#8294af}.wapi-member-list{display:grid;gap:5px;margin-top:6px}.wapi-member{display:flex;align-items:center;gap:7px;background:#111f33;border-radius:10px;padding:7px}.wapi-member .grow{flex:1}.wapi-member b{font-size:9px;display:block}.wapi-member small{font-size:7px;color:#71839d}.wapi-check{width:16px;height:16px;border-radius:5px;border:1px solid #4b5d77;display:grid;place-items:center;font-size:9px}.wapi-check.on{background:#4f7cff;border-color:#4f7cff}.wapi-publish{width:100%;border:0;background:#22c55e;color:#052e16;border-radius:12px;padding:11px;font-size:10px;font-weight:900;margin-top:2px}

.wapi-toast{position:absolute;left:50%;top:92px;transform:translateX(-50%);z-index:25;background:#173c2a;border:1px solid #22c55e;color:#d8ffe5;border-radius:999px;padding:8px 12px;font-size:9px;font-weight:850;box-shadow:0 12px 40px #0008;white-space:nowrap;animation:toastIn .3s ease both}

.wapi-list-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}.wapi-list-head h2{font-size:17px;margin:0}.wapi-new-list{border:0;background:#22c55e;color:#052e16;border-radius:10px;padding:7px 9px;font-size:8px;font-weight:900}.wapi-list-card{position:relative;background:var(--wapi-panel);border:1px solid var(--wapi-line);border-radius:15px;padding:11px 66px 11px 12px;margin:0 0 8px;min-height:77px}.wapi-list-card h3{font-size:12px;margin:0 0 4px}.wapi-list-card p{font-size:8px;color:#8496b0;margin:0}.wapi-tag{display:inline-block;font-size:7px;border-radius:6px;padding:3px 6px;margin-top:6px}.wapi-tag.food{background:#5f1b24;color:#fecaca}.wapi-tag.culture{background:#3b245f;color:#e9d5ff}.wapi-tag.sports{background:#162d5d;color:#bfdbfe}.wapi-spot-count{position:absolute;right:9px;top:9px;background:#2c2510;border:1px solid #6c5a1e;color:#fde68a;border-radius:999px;padding:4px 6px;font-size:7px}.wapi-like-count{position:absolute;right:10px;bottom:11px;color:#fb7185;font-size:8px}
.wapi-list-detail-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.wapi-list-detail-head h2{font-size:16px;margin:0}.wapi-map-button{border:1px solid #29466f;background:#10274a;color:#8ec5ff;border-radius:10px;padding:7px 9px;font-size:8px}.wapi-spot-card{display:grid;grid-template-columns:26px 1fr auto;gap:8px;align-items:center;background:#111f33;border:1px solid #263752;border-radius:13px;padding:9px;margin-bottom:7px}.wapi-rank{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:#233654;color:#c7d7ee;font-size:9px;font-weight:900}.wapi-spot-card h3{font-size:10px;margin:0}.wapi-spot-card p{font-size:7px;color:#8294ad;margin:2px 0 0}.wapi-rating{font-size:9px;color:#f5cd68;font-weight:900}

.wapi-map{position:absolute;inset:0 0 69px;background:#171a1f;overflow:hidden}.map-road{position:absolute;height:2px;background:#38404b;border-radius:999px;transform-origin:left center}.map-road.r1{width:460px;left:-40px;top:145px;transform:rotate(-14deg)}.map-road.r2{width:430px;left:15px;top:270px;transform:rotate(20deg)}.map-road.r3{width:360px;left:25px;top:410px;transform:rotate(-32deg)}.map-road.r4{width:290px;left:105px;top:110px;transform:rotate(76deg)}.map-water{position:absolute;width:260px;height:190px;border-radius:50%;background:#101b27;left:-90px;bottom:70px;transform:rotate(12deg)}.map-block{position:absolute;border:1px solid #272d34;background:#1c2026;border-radius:8px;opacity:.9}.map-block.b1{width:72px;height:55px;left:60px;top:80px}.map-block.b2{width:92px;height:60px;right:42px;top:98px}.map-block.b3{width:112px;height:72px;right:25px;top:310px}.map-block.b4{width:86px;height:65px;left:125px;top:330px}.map-label-demo{position:absolute;font-size:7px;color:#5d6877}.map-label-demo.a{left:122px;top:123px}.map-label-demo.b{right:73px;top:220px}.map-label-demo.c{left:75px;top:368px}.wapi-map-pin{position:absolute;width:31px;height:31px;border-radius:50% 50% 50% 5px;background:#4f7cff;transform:rotate(-45deg);display:grid;place-items:center;box-shadow:0 8px 20px #0007}.wapi-map-pin b{transform:rotate(45deg);font-size:9px}.wapi-map-pin.p1{left:180px;top:175px}.wapi-map-pin.p2{left:105px;top:270px;background:#7c3aed}.wapi-map-pin.p3{right:70px;top:225px;background:#0f766e}.wapi-map-top{position:absolute;left:10px;right:10px;top:12px;display:flex;justify-content:space-between;z-index:4}.wapi-map-top button{border:1px solid #3d4652;background:#191e25d9;color:#dfe6ee;border-radius:999px;padding:7px 9px;font-size:8px;backdrop-filter:blur(10px)}.wapi-map-sheet{position:absolute;left:10px;right:10px;bottom:12px;background:#121f33ee;border:1px solid #30405a;border-radius:16px;padding:11px;z-index:5;backdrop-filter:blur(15px)}.wapi-map-sheet small{display:block;color:#7588a3;font-size:7px}.wapi-map-sheet b{display:block;font-size:12px;margin:3px 0}.wapi-map-sheet p{margin:0;color:#9eabc0;font-size:8px}.wapi-open-spot{margin-top:8px;width:100%;border:0;background:#4f7cff;color:#fff;border-radius:9px;padding:8px;font-size:8px;font-weight:850}

.wapi-profile-card{display:flex;gap:10px;align-items:center;background:#121f33;border:1px solid #263752;border-radius:18px;padding:12px;margin-bottom:10px}.wapi-big-avatar{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#38bdf8,#2563eb);font-size:17px;font-weight:900}.wapi-profile-card h2{font-size:14px;margin:0}.wapi-profile-card p{font-size:8px;color:#8496ae;margin:2px 0}.wapi-stat-row{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:0 0 10px}.wapi-stat{background:#121f33;border:1px solid #263752;border-radius:13px;padding:9px}.wapi-stat b{font-size:13px;display:block}.wapi-stat span{font-size:8px;color:#8ea0b8}.wapi-profile-action{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:10px}.wapi-profile-action button{border:0;border-radius:11px;padding:9px;font-size:8px;font-weight:900;background:#123d29;color:#c8f7d8}.wapi-profile-action button:last-child{background:#10274a;color:#bdd8ff}.wapi-group-card{display:flex;align-items:center;justify-content:space-between;background:#121f33;border:1px solid #263752;border-radius:14px;padding:10px;margin-bottom:7px}.wapi-group-card b{font-size:9px}.wapi-group-card small{display:block;color:#8294ad;font-size:7px;margin-top:2px}.wapi-members{display:flex}.wapi-members span{width:21px;height:21px;border-radius:50%;display:grid;place-items:center;background:#203650;border:2px solid #121f33;font-size:6px;font-weight:850;margin-left:-5px}.wapi-members span:first-child{margin-left:0}

.wapi-finale{height:100%;display:grid;place-items:center;text-align:center;padding:30px;background:radial-gradient(circle at 50% 35%,#335fd242 0,#111d33 35%,#07111f 72%)}.wapi-finale img{width:76px;height:76px;object-fit:contain;margin-bottom:12px;filter:drop-shadow(0 14px 24px #0006)}.wapi-finale h2{font-size:27px;letter-spacing:-1.2px;margin:0 0 8px}.wapi-finale p{font-size:11px;line-height:1.55;color:#9dafc9;max-width:260px;margin:0}.wapi-finale .wapi-mark{font-size:39px;font-weight:950;letter-spacing:-2px;margin-bottom:4px}.wapi-finale .wapi-mark span{background:linear-gradient(100deg,#73a8ff,#b07bff);-webkit-background-clip:text;background-clip:text;color:transparent}

.demo-tap{position:absolute;width:34px;height:34px;left:50%;top:50%;transform:translate(-50%,-50%);z-index:70;pointer-events:none;opacity:0;transition:left .45s cubic-bezier(.2,.8,.2,1),top .45s cubic-bezier(.2,.8,.2,1)}.demo-tap span{display:block;width:28px;height:28px;border-radius:50%;background:#fff3;border:2px solid #fff;box-shadow:0 0 0 0 #ffffff55}.demo-tap.fire{animation:tapFade .8s ease both}.demo-tap.fire span{animation:tapPulse .8s ease both}
.demo-screen-enter{animation:screenIn .35s cubic-bezier(.2,.8,.2,1) both}
.demo-highlight{animation:highlight 1.1s ease both}

.demo-after{padding-bottom:100px}.demo-after-card{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;background:linear-gradient(135deg,#101e34,#10192a);border:1px solid #243755;border-radius:28px;padding:28px 30px}.demo-after-card img{width:74px;height:74px;object-fit:contain}.demo-after-card h2{font-size:30px;margin:2px 0 5px}.demo-after-card p{color:#91a2bc;margin:0;max-width:600px}.demo-after-card .kicker{color:#8ea8ff;font-size:11px;font-weight:900;letter-spacing:.09em;text-transform:uppercase}.demo-footer{position:relative;z-index:2}

@keyframes popIn{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes screenIn{from{opacity:.2;transform:translateX(10px)}to{opacity:1;transform:none}}
@keyframes tapFade{0%{opacity:0}20%{opacity:1}80%{opacity:1}100%{opacity:0}}
@keyframes tapPulse{0%{transform:scale(.78);box-shadow:0 0 0 0 #ffffff55}45%{transform:scale(1);box-shadow:0 0 0 12px #ffffff00}100%{transform:scale(.9);box-shadow:0 0 0 18px #ffffff00}}
@keyframes highlight{0%,100%{box-shadow:none}50%{box-shadow:0 0 0 3px #4f7cff55,0 0 28px #4f7cff33}}

@media(max-width:900px){
  .demo-stage{grid-template-columns:1fr;gap:24px;padding-top:20px}.demo-story{max-width:650px;text-align:center;margin:auto;padding-bottom:4px}.demo-story>p:not(.kicker){margin-inline:auto}.demo-progress,.demo-controls{justify-content:center}.demo-float-left{left:4%}.demo-float-right{right:3%}.demo-device-zone{padding-bottom:15px}.demo-after-card{grid-template-columns:auto 1fr}.demo-after-card .secondary-button{grid-column:1/-1;justify-self:start}
}
@media(max-width:640px){
  .demo-intro{padding-top:105px}.demo-intro h1{font-size:44px;letter-spacing:-2px}.demo-intro p{font-size:15px}.demo-stage{padding-bottom:70px}.demo-story h2{font-size:35px;letter-spacing:-1.5px}.demo-story>p:not(.kicker){font-size:15px}.demo-float-card{display:none}.demo-phone{width:min(365px,94vw);border-width:7px;border-radius:49px}.demo-phone-screen{border-radius:41px}.demo-after-card{grid-template-columns:1fr;text-align:center;padding:25px 20px}.demo-after-card img{margin:auto}.demo-after-card .secondary-button{justify-self:center}.demo-nav-active{display:none}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.demo-tap,.demo-screen-enter,.wapi-quick-menu,.wapi-toast{animation:none!important;transition:none!important}}