.demo-hero{padding:49px 0 96px;background:#f7f9fc}
.demo-hero-grid{display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:7%}
.demo-hero-copy h1{max-width:570px;margin:16px 0 20px;font-size:clamp(45px,5.2vw,68px);line-height:1.04;letter-spacing:-.066em}
.demo-hero-copy p{max-width:510px;color:var(--body);font-size:17px;line-height:1.68}
.demo-hero-copy .button{margin-top:15px}
.demo-hero-photo{position:relative;min-height:490px;overflow:hidden;border-radius:22px;background:#eaf2fc}
.demo-hero-photo img{display:block;width:100%;height:490px;object-fit:cover;object-position:center 46%}
.demo-hero-caption{position:absolute;right:22px;bottom:22px;left:22px;display:grid;gap:5px;max-width:330px;padding:19px 22px;border:1px solid rgba(255,255,255,.72);border-radius:14px;background:rgba(255,255,255,.95);box-shadow:0 12px 28px rgba(20,39,66,.12)}
.demo-hero-caption span,.demo-hero-caption small{color:var(--muted);font-size:11px}.demo-hero-caption span{color:var(--blue);font-weight:850;letter-spacing:.08em}.demo-hero-caption strong{font-size:20px;line-height:1.22}
.demo-section{padding:105px 0;background:#fff}.demo-intro{max-width:770px;margin-bottom:38px}.demo-intro h2,.demo-more-head h2{margin:13px 0;font-size:clamp(39px,4.6vw,58px);line-height:1.08;letter-spacing:-.06em}.demo-intro p,.demo-more-head p{max-width:650px;color:var(--body);font-size:16px;line-height:1.7}
.demo-shell{display:grid;grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr);gap:20px;align-items:stretch}
.demo-steps{display:grid;align-content:start;gap:10px}.demo-step{display:grid;gap:9px;width:100%;padding:24px 25px;border:1px solid #dce6f1;border-radius:15px;background:#fff;color:var(--ink);text-align:left;cursor:pointer;transition:border-color .2s,background .2s,transform .2s}.demo-step:hover{transform:translateY(-2px)}.demo-step[aria-selected=true]{border-color:#a9c6ec;background:#edf4fd}.demo-step span{color:var(--blue);font-size:11px;font-weight:850;letter-spacing:.07em}.demo-step:nth-child(-n+2) span{color:#c92e73}.demo-step strong{font-size:22px;line-height:1.17}.demo-step small{max-width:300px;color:var(--body);font-size:13px;line-height:1.55}
.demo-stage{min-width:0;display:flex;flex-direction:column;padding:24px;border:1px solid #dce6f1;border-radius:20px;background:#f7f9fc}.demo-panel{flex:1;min-width:0}.demo-panel[hidden]{display:none}.demo-window{min-height:460px;overflow:hidden;border:1px solid #dce6f1;border-radius:15px;background:#fff;box-shadow:0 13px 30px rgba(22,43,73,.06)}.demo-window-head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:61px;padding:13px 21px;border-bottom:1px solid #dce6f1}.demo-window-head strong{font-size:15px}.demo-window-head span{color:var(--muted);font-size:11px}.public-window .demo-window-head strong,.public-window small{color:#c92e73}.workspace-window .demo-window-head strong,.workspace-window small{color:var(--blue)}
.demo-service{display:grid;grid-template-columns:45% 1fr;min-height:398px}.demo-service>img{width:100%;height:398px;object-fit:cover;object-position:56% center}.demo-service-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:30px}.demo-service-copy small,.demo-booking>small,.demo-record>small{font-size:10px;font-weight:850;letter-spacing:.08em}.demo-service h3,.demo-booking h3,.demo-record h3{margin:11px 0;font-size:32px;line-height:1.1;letter-spacing:-.055em}.demo-service p{color:var(--body);font-size:14px;line-height:1.65}.demo-facts{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 24px}.demo-facts span{padding:9px 11px;border-radius:7px;background:#fff0f6;color:#ad2867;font-size:12px;font-weight:750}.demo-ui-button{display:inline-flex;gap:15px;align-items:center;padding:12px 16px;border-radius:7px;background:#c92e73;color:#fff;font-size:13px;font-weight:750}
.demo-booking,.demo-record{max-width:640px;margin:auto;padding:30px 38px}.demo-booking h3{margin-bottom:20px}.demo-person,.demo-record-title{display:flex;align-items:center;gap:13px;margin-bottom:22px}.demo-person img,.demo-record-title img{width:62px;height:62px;flex:none;object-fit:cover;border-radius:50%}.demo-person strong,.demo-person span{display:block}.demo-person strong{font-size:18px}.demo-person span{margin-top:4px;color:var(--muted);font-size:12px}.demo-line{display:flex;justify-content:space-between;gap:18px;padding:17px 0;border-top:1px solid #e2e9f2;font-size:13px}.demo-line span{color:var(--muted)}.demo-line strong{text-align:right}.demo-confirmed{display:inline-flex;gap:9px;align-items:center;margin-top:17px;padding:10px 12px;border-radius:7px;background:#fff0f6;color:#bc2c70;font-size:13px;font-weight:800}.demo-record-title h3{margin:0 0 5px;font-size:25px}.demo-record-title span{color:#27806e;font-size:12px;font-weight:750}.demo-linked{display:flex;justify-content:space-between;gap:15px;margin-top:15px;padding:15px;border-radius:8px;background:#eef4fd;color:var(--body);font-size:13px}.demo-linked strong{color:var(--blue)}
.demo-result{margin:18px 1px 0;color:var(--body);font-size:14px;line-height:1.6}.demo-result strong{color:var(--ink)}.demo-controls{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:22px;padding-top:18px;border-top:1px solid #dce6f1}.demo-control{min-height:42px;padding:8px 13px;border:1px solid #cddbeb;border-radius:8px;background:#fff;color:var(--blue);font-size:12px;font-weight:800;cursor:pointer}.demo-control.next{border-color:var(--blue);background:var(--blue);color:#fff}.demo-control:disabled{opacity:.4;cursor:default}.demo-progress{color:var(--muted);font-size:12px;font-weight:750}
.demo-more{padding:88px 0 110px;background:#f7f9fc}.demo-more-head{margin-bottom:30px}.demo-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.demo-links a{display:grid;grid-template-columns:1fr auto;align-content:space-between;gap:13px;min-height:165px;padding:23px;border:1px solid #dce6f1;border-radius:15px;background:#fff}.demo-links a:hover{border-color:#a9c6ec}.demo-links a span{grid-column:1/-1;color:var(--blue);font-size:11px;font-weight:850;letter-spacing:.06em;text-transform:uppercase}.demo-links a strong{font-size:21px;line-height:1.18}.demo-links a b{align-self:end;color:var(--blue);font-size:22px}
.demo-step:focus-visible,.demo-control:focus-visible{outline:3px solid #c92e73;outline-offset:3px}
@media(max-width:900px){.demo-hero-grid,.demo-shell{grid-template-columns:1fr}.demo-hero-photo,.demo-hero-photo img{height:410px;min-height:410px}.demo-steps{grid-template-columns:repeat(3,minmax(0,1fr))}.demo-step{padding:17px}.demo-step strong{font-size:17px}.demo-step small{font-size:11px}}
@media(max-width:620px){.demo-hero{padding:35px 0 68px}.demo-hero-grid{gap:36px}.demo-hero-copy h1{font-size:clamp(40px,9.5vw,55px)}.demo-hero-copy p{font-size:15px}.demo-hero-photo,.demo-hero-photo img{height:300px;min-height:300px}.demo-hero-caption{right:12px;bottom:12px;left:12px;padding:14px}.demo-hero-caption strong{font-size:16px}.demo-section{padding:72px 0}.demo-intro h2,.demo-more-head h2{font-size:36px}.demo-intro p,.demo-more-head p{font-size:14px}.demo-steps{grid-template-columns:1fr;gap:8px}.demo-step{gap:5px;padding:14px 17px}.demo-step strong{font-size:18px}.demo-step small{font-size:12px}.demo-stage{padding:12px}.demo-window{min-height:0}.demo-window-head{min-height:54px;padding:12px}.demo-window-head strong{font-size:12px}.demo-window-head span{font-size:9px}.demo-service{grid-template-columns:1fr}.demo-service>img{height:205px;object-position:center 40%}.demo-service-copy{padding:20px}.demo-service h3,.demo-booking h3{font-size:25px}.demo-service p{font-size:13px}.demo-booking,.demo-record{padding:22px 19px;min-height:340px}.demo-line{font-size:12px}.demo-result{font-size:12px}.demo-more{padding:72px 0}.demo-links{grid-template-columns:1fr}.demo-links a{min-height:110px}}
@media(max-width:360px){.demo-window-head span{max-width:92px;text-align:right}.demo-controls{flex-wrap:wrap}.demo-control{font-size:11px;padding:8px}.demo-progress{order:-1;width:100%;text-align:center}}
@media(prefers-reduced-motion:reduce){.demo-step{transition:none}}