@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#fff;background:#10151a;font-synthesis:none;--pad:clamp(24px,5vw,88px);--blue:#4e8dff}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}body{overscroll-behavior:none}button,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}a{color:inherit;text-decoration:none}button{color:inherit;border:0;background:none}button:focus-visible,a:focus-visible{outline:3px solid #87b2ff;outline-offset:5px}button:disabled{opacity:.4;cursor:default}.topbar{position:fixed;inset:0 0 auto;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:calc(25px + env(safe-area-inset-top)) var(--pad) 25px;background:linear-gradient(#10151a66,transparent)}.wordmark{font-family:Manrope,sans-serif;font-size:clamp(23px,2.15vw,34px);font-weight:800;letter-spacing:-1.6px}.brand-dot{color:var(--blue)}.topbar nav{display:flex;gap:30px;align-items:center;font-size:14px;font-weight:600}.topbar nav button{min-height:44px}.pill{display:inline-flex;align-items:center;gap:22px;padding:13px 23px;border:1px solid #ffffff60;border-radius:100px;background:#ffffff12;backdrop-filter:blur(12px)}#stage{position:fixed;inset:0;height:100%;height:100dvh;outline:none;touch-action:pan-x}.scene{position:absolute;inset:0;overflow:hidden;opacity:0;visibility:hidden;transition:opacity .7s,visibility .7s}.scene.active{opacity:1;visibility:visible}.backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}.backdrop.fashion{object-position:45% center}.backdrop.owner{object-position:65% center}.shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,12,18,.83),rgba(7,12,18,.35) 55%,rgba(7,12,18,.08)),linear-gradient(0deg,rgba(7,12,18,.76),transparent 55%)}.story{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(148px,18vh,220px);max-width:920px;opacity:0;transform:translateY(24px);transition:transform .7s .12s,opacity .7s .12s}.active .story{transform:none;opacity:1}.eyebrow{font-size:11px;letter-spacing:2.2px;font-weight:700;display:flex;align-items:center;gap:10px;margin:0 0 25px}.live-dot{width:7px;height:7px;border-radius:50%;background:#b6ffdc;box-shadow:0 0 16px #b6ffdc66}h1,h2,h3,p{margin-top:0}.story h1,.story h2{font-family:Manrope,sans-serif;font-size:clamp(40px,5.9vw,91px);line-height:1.07;letter-spacing:-.055em;font-weight:700;margin:0 0 24px;max-width:990px;text-wrap:balance}.story em{font-style:normal;font-weight:400;color:#f1f1f1}.description{font-size:clamp(16px,1.3vw,20px);line-height:1.6;color:#e3e6e9;max-width:500px;margin-bottom:29px}.actions{display:flex;align-items:center;gap:27px}.primary{background:#fff;color:#111a24;border-radius:100px;padding:18px 26px;font-weight:700;display:inline-flex;align-items:center;justify-content:space-between;gap:35px;transition:transform .2s,background .2s}.primary:hover{background:#e4edff;transform:translateY(-2px)}.text-action{font-size:14px;display:inline-flex;align-items:center;gap:12px;min-height:44px}.demo-hint{font-size:11px;letter-spacing:.25px;margin:16px 0 0;color:#c1c8ce}.stage-footer{position:fixed;z-index:5;inset:auto var(--pad) 0;display:flex;justify-content:space-between;align-items:center;padding:0 0 calc(30px + env(safe-area-inset-bottom));gap:30px}.scene-tabs{display:flex;gap:28px;flex:1;max-width:540px}.scene-tabs button{position:relative;padding:13px 0 17px;text-align:left;flex:1;min-height:54px;font-size:12px;color:#c2c5ca;white-space:nowrap}.scene-tabs span{font-size:10px;margin-right:10px;opacity:.7}.scene-tabs b{font-weight:500}.scene-tabs i{position:absolute;height:1px;bottom:0;left:0;right:0;background:#ffffff38}.scene-tabs .selected{color:#fff}.scene-tabs .selected i{height:2px;background:#fff}.controls{display:flex;gap:9px;align-items:center}.round{border:1px solid #ffffff45;border-radius:50%;width:42px;height:42px;display:grid;place-items:center;background:#0001;font-size:17px}.round:hover{background:#fff2}.swipe-hint{font-size:11px;color:#d0d4d9;margin-right:20px;display:flex;gap:20px}.information{font-family:Georgia,serif;font-style:italic;font-size:15px}.intro{position:fixed;inset:0;z-index:20;background:#10151a;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px;pointer-events:none;animation:introOut 1s 2s forwards}.intro-mark{font:800 clamp(35px,7vw,90px) Manrope,sans-serif;letter-spacing:-.055em;animation:introIn 1.4s both}.intro>span+span{font-size:13px;letter-spacing:3px;color:#a6b4c7}.intro button{position:absolute;bottom:40px;font-size:12px;pointer-events:auto}.intro.gone{display:none}@keyframes introOut{to{opacity:0;visibility:hidden}}@keyframes introIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
dialog{color:#192431;background:#f7f8fa;border:1px solid #fff8;border-radius:28px;padding:35px;width:min(1000px,calc(100% - 40px));max-height:calc(100dvh - 48px);overflow:auto;box-shadow:0 30px 120px #0008}dialog::backdrop{background:#07101bbb;backdrop-filter:blur(12px)}.dialog-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.dialog-header .eyebrow{margin:0;color:#77828f;letter-spacing:1.6px}.close{color:#445364;width:42px;height:42px;border-radius:50%;background:#e8ecf1;font-size:25px}.dialog-lead{color:#687585;font-size:15px;line-height:1.6}.dialog-header+h2{font:700 clamp(29px,4vw,42px) Manrope,sans-serif;letter-spacing:-1.6px;margin-bottom:12px}.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:25px}.demo-card{border-radius:20px;overflow:hidden;background:#fff;border:1px solid #e0e6ed}.demo-photo{height:140px;background-size:cover;background-position:center}.restaurant-photo{background-image:url('https://codexorden.online/assets/restaurant-poster.jpg')}.fashion-photo{background-image:url('https://codexorden.online/assets/fashion-live-poster.jpg')}.demo-details{padding:23px}.demo-details>span,.plan-grid article>span{font-size:10px;font-weight:700;letter-spacing:1.2px;color:#69788a}.demo-details h3{font-size:23px;letter-spacing:-.75px;margin:12px 0}.demo-details p{font-size:14px;color:#718096;line-height:1.6;min-height:45px}.dark-button{display:flex;align-items:center;justify-content:center;background:#172331;color:white;border-radius:100px;padding:15px 18px;font-size:14px;font-weight:600}.admin-link{display:block;text-align:center;color:#3563a3;font-size:12px;margin-top:15px;min-height:24px}.fine-print{font-size:11px;color:#788596;line-height:1.7;margin:23px 0 0}.fine-print a{text-decoration:underline}.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}.plan-grid article{padding:24px;border:1px solid #dfe5ed;border-radius:20px;background:#fff;display:flex;flex-direction:column}.plan-grid h3{font-size:24px;letter-spacing:-.8px;margin:16px 0}.capacity{font-size:32px;letter-spacing:-1px;margin-bottom:18px}.capacity small{display:block;font-size:11px;letter-spacing:0;color:#64748b;margin-top:5px}.plan-grid ul{font-size:12px;padding-left:17px;line-height:1.8;margin:0 0 25px;flex:1}.plan-grid a{font-size:13px;font-weight:700;border-top:1px solid #e2e8f0;padding-top:20px}.plan-grid .featured{background:#e8f0ff;border-color:#97b5ec}.socials{display:flex;gap:12px;flex-wrap:wrap;margin-top:25px}.socials a{border:1px solid #dbe1e9;padding:11px 15px;border-radius:100px;font-size:12px}.socials a[aria-disabled]{opacity:.5;cursor:default}#about{max-width:500px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.no-js{position:fixed;z-index:50;bottom:0;background:#fff;color:#111;padding:20px;width:100%}.no-js a{text-decoration:underline}
@media(max-width:800px){.swipe-hint{display:none}.scene-tabs{gap:16px}.stage-footer{gap:20px}.story h1,.story h2{font-size:clamp(43px,7vw,65px)}.story{bottom:160px}.plan-grid{gap:8px}.plan-grid article{padding:18px}}
@media(max-width:600px){:root{--pad:24px}.topbar{padding-top:calc(19px + env(safe-area-inset-top))}.wordmark{font-size:24px}.topbar nav{gap:16px;font-size:12px}.pill{padding:10px 15px;gap:12px}.story{bottom:calc(156px + env(safe-area-inset-bottom));left:24px;right:24px}.story h1,.story h2{font-size:clamp(38px,9.8vw,59px);line-height:1.12;letter-spacing:-.05em;margin-bottom:18px}.eyebrow{font-size:9px;letter-spacing:1.7px;margin-bottom:18px}.description{font-size:15px;line-height:1.5;max-width:350px;margin-bottom:23px}.shade{background:linear-gradient(0deg,#090f17f5 1%,#090f17bf 37%,#090f1733 70%,#090f1744)}.backdrop{object-position:60% center}.backdrop.fashion{object-position:40% center}.backdrop.owner{object-position:60% center}.actions{gap:12px;flex-wrap:wrap}.primary{padding:16px 21px;font-size:13px;gap:22px}.text-action{font-size:12px;gap:7px}.demo-hint{font-size:9px;margin-top:13px;line-height:1.7}.stage-footer{display:block;padding-bottom:calc(19px + env(safe-area-inset-bottom))}.scene-tabs{width:100%;gap:20px;max-width:none;margin-bottom:12px}.scene-tabs button{font-size:11px;min-height:36px;padding-top:0;padding-bottom:11px}.scene-tabs span{font-size:9px;margin-right:6px}.controls{justify-content:flex-end;gap:8px}.round{width:40px;height:40px;font-size:14px}.swipe-hint{display:flex;font-size:9px;margin-right:auto;gap:8px}.scene-tabs{margin-bottom:12px}.demo-grid{grid-template-columns:1fr}.demo-photo{height:120px}.demo-details{padding:20px}.demo-details p{min-height:0}.plan-grid{grid-template-columns:1fr}.plan-grid article{padding:20px}.plan-grid ul{margin-bottom:12px}.plan-grid h3{margin:10px 0}.capacity{font-size:28px}.capacity small{display:inline;margin-left:8px}.dialog-header+h2{font-size:30px}dialog{padding:23px;border-radius:22px;width:calc(100% - 24px);max-height:calc(100dvh - 24px)}.dialog-header .eyebrow{font-size:9px;letter-spacing:1px}.dialog-lead{font-size:13px}}
@media(max-height:650px){.story{bottom:126px}.story h1,.story h2{font-size:clamp(30px,5vw,55px);margin-bottom:12px}.eyebrow{margin-bottom:12px}.description{margin-bottom:16px;font-size:14px}.demo-hint{display:none}.topbar{padding-top:15px;padding-bottom:15px}.primary{padding:13px 20px}.stage-footer{padding-bottom:15px}}
@media(max-height:450px){.story{bottom:85px;max-width:65%}.story h1,.story h2{font-size:30px}.description{font-size:12px;margin-bottom:10px}.eyebrow{font-size:8px;margin-bottom:8px}.stage-footer{display:flex}.scene-tabs{margin:0;max-width:320px}.topbar{padding-top:10px}.swipe-hint{display:none}.primary{padding:10px 16px;font-size:12px}.text-action{font-size:11px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.intro{display:none}}

@media(max-width:600px){.plan-grid article{display:grid;grid-template-columns:1fr auto;gap:5px 12px;padding:16px}.plan-grid article>span{grid-column:1/-1}.plan-grid h3{font-size:21px;margin:5px 0}.plan-grid .capacity{margin:0;align-self:center;text-align:right;font-size:24px}.plan-grid .capacity small{display:block;font-size:9px;margin:0}.plan-grid ul{grid-column:1/-1;font-size:11px;margin:3px 0 7px;line-height:1.5}.plan-grid a{grid-column:1/-1;padding-top:10px;font-size:12px}}

/* Keep video fades smooth without showing two sets of copy at once. */
.scene:not(.active) .story{visibility:hidden;transition:none}

#demos{max-width:1180px}.demo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.beverages-photo{background:linear-gradient(0deg,#101b2a22,#101b2a00),url('https://codexorden.online/assets/events-bar-poster.jpg') center/cover}.demo-details h3{font-size:21px}.demo-details p{min-height:68px}@media(max-width:760px){.demo-grid{grid-template-columns:1fr}.demo-photo{height:160px}.demo-details p{min-height:0}}

/* Four independent business demos, balanced on desktop and stacked on phones. */
.salon-photo{background-image:url("https://codexorden.online/assets/salon-poster.jpg");background-position:center 42%}.demo-details{display:flex;flex-direction:column}.demo-details p{flex:1}.demo-photo{height:170px}@media(max-width:760px){.demo-photo{height:160px}}

.scene-tabs{grid-template-columns:repeat(4,minmax(0,1fr))}@media(max-width:600px){.scene-tabs{gap:6px;width:100%}.scene-tabs button{min-width:0;padding:10px 8px}.scene-tabs b{font-size:11px}.stage-footer{left:12px;right:12px}}
/* Four previews visible together on desktop; compact cards on smaller screens. */
#demos{width:min(1280px,calc(100% - 40px));max-width:none;padding:26px}.demo-details{padding:17px}.demo-details h3{font-size:19px;margin:10px 0}.demo-details p{min-height:0;font-size:13px;line-height:1.5;margin:10px 0 16px}.demo-card .dark-button{min-height:44px;padding:12px;font-size:12px}.demo-card .admin-link{margin-top:8px;min-height:32px;display:flex;justify-content:center;align-items:center}.demo-photo{height:130px}.demo-grid{gap:14px;margin-top:20px;grid-template-columns:repeat(4,minmax(0,1fr))}.demo-details{display:flex;flex-direction:column;flex:1}.demo-card{display:flex;flex-direction:column}.demo-details p{flex:1}.demo-photo{flex:none}#demos .fine-print{margin-top:16px}
@media(max-width:1000px){.demo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.demo-photo{height:110px}}
@media(max-width:600px){#demos{padding:18px;width:calc(100% - 20px)}.demo-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px}.demo-card{flex:0 0 92%;scroll-snap-align:start}.demo-photo{height:130px}.demo-details{padding:16px}#demos .dialog-lead{margin-bottom:10px}#demos .dialog-header{margin-bottom:12px}#demos .fine-print{font-size:10px}}