.demo-body{min-height:100vh;background:radial-gradient(circle at 20% 0,rgba(223,189,104,.12),transparent 30%),#050608;color:#f5f5f4;font-family:'Nunito Sans',sans-serif}
.demo-header{max-width:1480px;margin:auto;min-height:92px;display:flex;align-items:center;justify-content:space-between;gap:22px;padding:18px clamp(20px,4vw,60px);border-bottom:1px solid rgba(255,255,255,.09)}
.demo-brand img{display:block;width:min(300px,55vw);height:60px;object-fit:contain;object-position:left center}.demo-header-actions{display:flex;gap:10px}
.demo-main{width:min(1420px,100%);margin:auto;padding:clamp(30px,5vw,70px)}.demo-intro{max-width:850px;margin:0 auto 30px;text-align:center}.demo-intro h1{font-size:clamp(2.4rem,6vw,5rem);line-height:1;margin:12px 0}.demo-intro p,.demo-disclosure{color:#9ca2ab;line-height:1.7}
.demo-player{overflow:hidden;border:1px solid rgba(223,189,104,.34);border-radius:28px;background:linear-gradient(145deg,#14181e,#080a0d);box-shadow:0 40px 120px rgba(0,0,0,.5)}
.demo-player-top{height:54px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;border-bottom:1px solid rgba(255,255,255,.09);color:#b8bec7;font-size:.72rem;font-weight:900;letter-spacing:.12em}.demo-player-top i{display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:#70c58c;box-shadow:0 0 18px #70c58c}
.demo-stage{min-height:610px;display:grid;grid-template-columns:250px minmax(0,1fr)}.demo-role-nav{padding:24px;border-right:1px solid rgba(255,255,255,.08);background:#090b0e}.demo-role-nav button{width:100%;display:grid;gap:4px;margin-bottom:10px;padding:16px;border:1px solid transparent;border-radius:14px;background:transparent;color:#858c96;text-align:left}.demo-role-nav button.active{border-color:rgba(223,189,104,.42);background:rgba(223,189,104,.08);color:#fff}.demo-role-nav span{font-size:.62rem;letter-spacing:.13em}.demo-role-nav strong{font-size:.95rem}
.demo-scene{display:grid;grid-template-columns:minmax(0,.9fr) minmax(360px,1.1fr);gap:clamp(28px,5vw,70px);align-items:center;padding:clamp(35px,6vw,86px)}.demo-scene.scene-enter{animation:demo-enter .42s ease both}@keyframes demo-enter{from{opacity:.25;transform:translateY(8px)}to{opacity:1;transform:none}}
.demo-scene-copy h2{margin:10px 0 18px;font-size:clamp(2rem,4vw,4rem);line-height:1.02;letter-spacing:-.045em}.demo-scene-copy p{margin:0;color:#a6adb7;font-size:1.05rem;line-height:1.7}
.demo-ui{min-height:330px;display:grid;place-items:center;padding:22px;border:1px solid rgba(255,255,255,.1);border-radius:24px;background:radial-gradient(circle at 70% 0,rgba(223,189,104,.16),transparent 45%),#090c10}.demo-ui>*{width:100%}.demo-ui small{color:#e7c76f;font-size:.65rem;font-weight:900;letter-spacing:.14em}.demo-ui button{border:0;border-radius:999px;padding:13px 18px;background:#e3be62;color:#111;font-weight:900}.demo-booking-link,.demo-request-card,.demo-next-card,.demo-ready,.demo-complete{display:grid;gap:14px;padding:26px;border:1px solid #343a43;border-radius:19px;background:#10141a}.demo-booking-link strong{word-break:break-all;font-size:1.1rem}.demo-booking-link span{color:#76d597}.demo-request-card h3,.demo-next-card h3{margin:0;font-size:1.5rem}.demo-request-card p,.demo-next-card p,.demo-complete p{margin:0;color:#9ea5af}.demo-request-card button,.demo-next-card button{justify-self:start}.demo-next-card.client{border-color:rgba(223,189,104,.5)}
.demo-split{display:grid;grid-template-columns:1fr 1fr;gap:12px}.demo-split>div{display:grid;gap:8px;padding:24px;border:1px solid #343a43;border-radius:18px;background:#10141a}.demo-split strong{font-size:1.45rem}.demo-split span{color:#9ea5af}.demo-planning{display:grid;grid-template-columns:1fr auto;gap:12px;padding:25px;border:1px solid #343a43;border-radius:18px;background:#10141a}.demo-planning span{color:#949ba5}.demo-planning em{grid-column:1/-1;color:#76d597;text-align:right}.demo-ready span{padding:11px;border-radius:10px;background:#0a0d10;color:#b9c0c9}.demo-ready strong{font-size:1.6rem}.demo-complete{grid-template-columns:auto 1fr;align-items:center}.demo-complete>span{width:68px;height:68px;display:grid;place-items:center;border-radius:50%;background:#70c58c;color:#061008;font-size:2rem;font-weight:900}.demo-complete strong{font-size:1.35rem}
.demo-progress{height:5px;background:#20242a}.demo-progress span{display:block;height:100%;width:12.5%;background:linear-gradient(90deg,#b88a26,#f0cf78);transition:width .4s ease}.demo-controls{display:flex;align-items:center;justify-content:center;gap:10px;padding:18px}.demo-icon-button{width:46px;height:46px;border:1px solid rgba(255,255,255,.14);border-radius:50%;background:#10141a;color:#fff;font-size:1.2rem}.demo-disclosure{text-align:center;font-size:.82rem}.is-embedded .demo-header,.is-embedded .demo-intro,.is-embedded .demo-disclosure{display:none}.is-embedded .demo-main{padding:0;width:100%}.is-embedded .demo-player{border-radius:0;border:0;box-shadow:none}.is-embedded .demo-stage{min-height:520px}
@media(max-width:900px){.demo-stage{grid-template-columns:1fr}.demo-role-nav{display:flex;gap:8px;padding:12px;border-right:0;border-bottom:1px solid rgba(255,255,255,.08)}.demo-role-nav button{margin:0}.demo-scene{grid-template-columns:1fr}.demo-ui{min-height:270px}.demo-header-actions .button-quiet{display:none}}
@media(max-width:600px){.demo-main{padding:18px}.demo-player{border-radius:20px}.demo-player-top{padding:0 14px}.demo-stage{min-height:640px}.demo-role-nav{overflow-x:auto}.demo-role-nav button{min-width:155px}.demo-scene{padding:24px 18px;gap:24px}.demo-scene-copy h2{font-size:2.15rem}.demo-ui{padding:12px}.demo-split{grid-template-columns:1fr}.demo-controls{flex-wrap:wrap}.demo-controls .button{flex:1 1 160px}.demo-planning{grid-template-columns:1fr}.demo-planning em{grid-column:auto}.demo-header{min-height:72px;padding:10px 18px}.demo-brand img{height:46px}}