.demo-site{min-height:100vh;background:#0d0f16;color:#f7f7fb}.demo-site a{color:inherit}.demo-site-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px clamp(20px,5vw,72px);background:rgba(13,15,22,.9);border-bottom:1px solid rgba(255,255,255,.08);backdrop-filter:blur(14px)}.demo-site-brand{display:flex;align-items:center;gap:12px;text-decoration:none}.demo-site-brand strong,.demo-site-brand span{display:block}.demo-site-brand span{font-size:11px;color:#aeb4c0;margin-top:2px}.demo-site-nav{display:flex;align-items:center;gap:22px}.demo-site-nav a{text-decoration:none;color:#c5cad4;font-size:13px}.demo-site-nav a:hover{color:#fff}.demo-site-cta{display:inline-flex!important;align-items:center;justify-content:center;min-height:42px;padding:0 16px;border-radius:12px;background:#7855e8;color:#fff!important;font-weight:700}.demo-site-main{overflow:hidden}.demo-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:44px;align-items:center;padding:clamp(70px,10vw,128px) clamp(20px,7vw,96px) 72px;background:radial-gradient(circle at 82% 18%,rgba(120,85,232,.25),transparent 34%),radial-gradient(circle at 8% 18%,rgba(52,187,255,.12),transparent 30%)}.demo-hero-copy{max-width:760px}.demo-hero h1{font-size:clamp(46px,7vw,86px);line-height:.98;letter-spacing:-.055em;margin:12px 0 24px}.demo-hero p{font-size:clamp(17px,2vw,21px);line-height:1.65;color:#c6cad3;max-width:690px}.demo-kicker{font-size:12px!important;color:#aa94ff!important;text-transform:uppercase;letter-spacing:.12em;font-weight:800}.demo-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}.demo-button-primary,.demo-button-secondary{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border-radius:13px;text-decoration:none;font-weight:800}.demo-button-primary{background:#7855e8;color:#fff!important}.demo-button-secondary{border:1px solid rgba(255,255,255,.16);color:#fff!important}.demo-hero-proof{display:flex;flex-wrap:wrap;gap:9px;margin-top:28px}.demo-hero-proof span{padding:8px 11px;border:1px solid rgba(255,255,255,.11);border-radius:999px;color:#bcc2cd;font-size:12px}.demo-preview-panel{border:1px solid rgba(255,255,255,.1);border-radius:28px;padding:24px;background:linear-gradient(155deg,rgba(255,255,255,.08),rgba(255,255,255,.025));box-shadow:0 30px 80px rgba(0,0,0,.32)}.demo-preview-panel>span{font-size:11px;color:#aeb4c0;text-transform:uppercase;letter-spacing:.1em}.demo-preview-panel h2{font-size:27px;margin:8px 0 20px}.demo-preview-step{display:grid;grid-template-columns:34px 1fr;gap:12px;padding:13px 0;border-top:1px solid rgba(255,255,255,.08)}.demo-preview-step b{display:grid;place-items:center;width:30px;height:30px;border-radius:999px;background:#2b2540;color:#aa94ff;font-size:12px}.demo-preview-step strong,.demo-preview-step span{display:block}.demo-preview-step span{color:#9fa6b3;font-size:12px;margin-top:4px}.demo-section{padding:76px clamp(20px,7vw,96px)}.demo-section.alt{background:#12151e}.demo-section-heading{max-width:760px;margin-bottom:30px}.demo-section-heading span{font-size:12px;color:#aa94ff;text-transform:uppercase;letter-spacing:.1em;font-weight:800}.demo-section-heading h2{font-size:clamp(32px,4.2vw,52px);letter-spacing:-.035em;margin:8px 0 12px}.demo-section-heading p{color:#aeb4c0;line-height:1.65}.demo-feature-grid,.demo-role-overview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.demo-feature-card,.demo-role-summary{border:1px solid rgba(255,255,255,.09);border-radius:20px;padding:22px;background:rgba(255,255,255,.035)}.demo-feature-card strong,.demo-role-summary strong{font-size:18px;display:block}.demo-feature-card p,.demo-role-summary p{color:#aeb4c0;line-height:1.55;font-size:14px;margin-bottom:0}.demo-role-summary small{display:block;color:#8e96a5;margin-top:14px}.demo-access{display:grid;grid-template-columns:minmax(0,.85fr) minmax(360px,1.15fr);gap:32px;align-items:start}.demo-access-copy h2{font-size:clamp(32px,4vw,50px);margin:8px 0 14px;letter-spacing:-.035em}.demo-access-copy p{color:#aeb4c0;line-height:1.65}.demo-security-note{margin-top:20px;padding:14px 16px;border:1px solid rgba(255,255,255,.1);border-radius:14px;color:#aeb4c0;font-size:12px;line-height:1.55}.demo-login-panel{background:#f8f9fc;color:#171923;border-radius:24px;padding:26px;box-shadow:0 24px 70px rgba(0,0,0,.28)}.demo-login-panel h3{font-size:25px;margin:0 0 7px}.demo-login-panel>p{color:#687080;margin:0 0 20px;line-height:1.5}.demo-login-role-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:18px}.demo-login-role-tabs button{border:1px solid #d9dce5;background:#fff;color:#4f5665;border-radius:11px;padding:10px 8px;cursor:pointer;font-weight:700}.demo-login-role-tabs button.active{border-color:#7855e8;background:#eee9ff;color:#5f3fc8}.demo-login-form{display:grid;gap:14px}.demo-login-form label span{display:block;font-size:12px;color:#555d6b;font-weight:700;margin-bottom:6px}.demo-login-form input{width:100%;min-height:46px;border:1px solid #d4d8e2;border-radius:11px;padding:0 12px;background:#fff;color:#171923;font:inherit;box-sizing:border-box}.demo-login-form input:focus{outline:3px solid rgba(120,85,232,.2);border-color:#7855e8}.demo-login-submit{min-height:48px;border:0;border-radius:12px;background:#6f48df;color:#fff;font-weight:800;cursor:pointer;font:inherit}.demo-login-error{min-height:20px;color:#ae2432;font-size:12px;margin:0}.demo-credential-box{margin-top:20px;padding-top:18px;border-top:1px solid #e3e5eb}.demo-credential-box>strong{display:block;font-size:13px;margin-bottom:9px}.demo-credential-list{display:grid;gap:8px}.demo-credential{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:10px 11px;border-radius:11px;background:#fff;border:1px solid #e1e3ea}.demo-credential span,.demo-credential small{display:block}.demo-credential span{font-size:12px;font-weight:800}.demo-credential small{font-size:10px;color:#747b88;margin-top:3px;overflow-wrap:anywhere}.demo-credential button{border:1px solid #d5d8e1;background:#fff;border-radius:9px;padding:8px 10px;cursor:pointer;color:#5f3fc8;font-weight:800;font-size:11px}.demo-site-footer{display:flex;justify-content:space-between;gap:20px;padding:24px clamp(20px,7vw,96px);border-top:1px solid rgba(255,255,255,.08);color:#818895;font-size:12px}.auth-account{display:block;color:#aeb4c0;font-size:10px;line-height:1.35}.app-shell[data-auth-role="staff"] #role-switcher-wrap,.app-shell[data-auth-role="customer"] #role-switcher-wrap{display:none}.app-shell[data-auth-role="staff"] .role-tabs,.app-shell[data-auth-role="customer"] .role-tabs{display:none}@media(max-width:980px){.demo-hero,.demo-access{grid-template-columns:1fr}.demo-preview-panel{max-width:620px}.demo-feature-grid,.demo-role-overview{grid-template-columns:1fr}.demo-site-nav a:not(.demo-site-cta){display:none}}@media(max-width:640px){.demo-site-header{padding:14px 16px}.demo-hero,.demo-section{padding-left:16px;padding-right:16px}.demo-hero{padding-top:58px;gap:28px}.demo-hero h1{font-size:46px}.demo-login-panel{padding:20px 16px}.demo-login-role-tabs{grid-template-columns:1fr}.demo-credential{grid-template-columns:1fr}.demo-credential button{justify-self:start}.demo-site-footer{padding:20px 16px;flex-direction:column}.demo-site-cta{min-height:40px;padding:0 12px}.demo-site-brand span{display:none}}