:root{--bg:#080808;--paper:#f1efe9;--ink:#111;--text:#f4f1eb;--muted:#858585;--line:rgba(255,255,255,.15);--red:#ff3b30;--blue:#6da8ff;--green:#a5ffbe;--sans:Inter,Arial,Helvetica,sans-serif;--mono:"SFMono-Regular",Consolas,monospace;--serif:Georgia,"Times New Roman",serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:#070707}body{margin:0;background:#070707;color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}button{cursor:pointer}.topbar{position:fixed;z-index:200;left:0;right:0;top:0;height:66px;padding:0 26px 0 92px;display:grid;grid-template-columns:1fr minmax(160px,30vw) auto;align-items:center;gap:25px;background:rgba(7,7,7,.78);backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.1)}.brand{display:flex;align-items:center;gap:12px}.brand b{font-size:14px;letter-spacing:-.04em}.brand span,.back{font:8px var(--mono);letter-spacing:.08em}.top-progress{height:1px;background:#333}.top-progress i{display:block;width:0;height:100%;background:var(--red)}.back{border:1px solid #555;padding:9px 11px;transition:.2s}.back:hover{background:#fff;color:#000}.rail{position:fixed;z-index:150;left:18px;top:92px;bottom:30px;width:46px;display:flex;flex-direction:column;align-items:center}.rail-title{font:7px var(--mono);writing-mode:vertical-rl;color:#777;margin-bottom:14px}.rail-line{position:absolute;left:4px;top:67px;bottom:0;width:1px;background:#282828}.rail-line i{display:block;width:100%;height:10%;background:var(--red);transition:.35s}.rail a{position:relative;width:100%;height:42px;display:flex;align-items:center;gap:4px;font:8px var(--mono);color:#777}.rail a b{font-weight:400}.rail a small{font-size:6px;color:#444}.rail a:before{content:"";width:9px;height:1px;background:#333}.rail a.active{color:#fff}.rail a.active:before{background:var(--red);width:16px}.rail a.active small{color:var(--red)}.design-lab{position:fixed;z-index:160;right:18px;top:102px;width:132px;background:rgba(10,10,10,.84);backdrop-filter:blur(16px);border:1px solid #333}.lab-head{padding:12px;border-bottom:1px solid #2d2d2d;position:relative}.lab-head small{font:7px var(--mono);color:var(--red)}.lab-head strong{display:block;font-size:16px;line-height:.88;margin-top:8px}.lab-head>span{position:absolute;right:10px;top:10px;font:8px var(--mono);color:#666}.design-lab button{width:100%;border:0;border-bottom:1px solid #222;background:transparent;color:#fff;padding:11px;display:flex;justify-content:space-between;font:7px var(--mono)}.design-lab button:hover{background:#151515}.design-lab button b{color:var(--red)}.lab-hint{display:block;padding:10px;font:6px/1.4 var(--mono);color:#555}.mobile-lab{display:none}.intro,.example,.divider,.outro{position:relative;min-height:100vh;overflow:hidden}.intro{padding:15vh 10vw 10vh;background:#090909;display:flex;align-items:center}.intro-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);background-size:70px 70px;mask-image:linear-gradient(90deg,#000,transparent 85%)}.intro:after{content:"";position:absolute;width:45vw;height:45vw;border:1px solid rgba(255,59,48,.38);border-radius:50%;right:-15vw;top:8vh;box-shadow:0 0 100px rgba(255,59,48,.08)}.intro-copy{position:relative;z-index:2;max-width:1100px}.intro-copy>p,.section-label,.copy small,.phone-copy small,.portal-copy small,.event-ui-copy small,.system-copy small,.ux-copy small{font:8px var(--mono);letter-spacing:.08em}.intro-copy>p{color:var(--red)}.intro h1{font-size:clamp(68px,10vw,165px);line-height:.75;letter-spacing:-.085em;margin:34px 0}.intro h1 em{font-family:var(--serif);font-weight:400;color:#888}.intro-bottom{display:flex;gap:80px;align-items:flex-end;font:10px/1.5 var(--mono);color:#888}.intro-bottom b{color:#fff}.intro-bottom a{border-bottom:1px solid #fff;padding-bottom:5px}.intro-switch{position:absolute;right:12vw;bottom:12vh;display:flex;align-items:center;gap:10px;font:10px var(--mono)}.intro-switch i{width:80px;height:1px;background:linear-gradient(90deg,var(--red),var(--blue))}.section-label{position:absolute;z-index:15;left:8vw;right:8vw;top:92px;display:flex;justify-content:space-between;color:#777}.section-label b{color:var(--section-accent,var(--red));font-weight:400}.example{--section-accent:var(--red);padding:100px 8vw 70px;transition:background .35s,color .35s}.example[data-density="1"]{--density:.82}.example[data-density="2"]{--density:1.18}.example[data-contrast="1"]{filter:saturate(.75) contrast(.9)}.example[data-contrast="2"]{filter:saturate(1.3) contrast(1.15)}.example[data-motion="0"] *{animation:none!important;transition:none!important}.example[data-flow="1"] .ui-stage,.example[data-flow="1"] .phones,.example[data-flow="1"] .portal-stage,.example[data-flow="1"] .control-room,.example[data-flow="1"] .system-stage,.example[data-flow="1"] .flow-stage,.example[data-flow="1"] .booking-stage,.example[data-flow="1"] .checkout-stage,.example[data-flow="1"] .form-stage,.example[data-flow="1"] .workflow-stage{transform:translateX(4vw) scale(.95)}.example[data-flow="2"] .ui-stage,.example[data-flow="2"] .phones,.example[data-flow="2"] .portal-stage,.example[data-flow="2"] .control-room,.example[data-flow="2"] .system-stage,.example[data-flow="2"] .flow-stage,.example[data-flow="2"] .booking-stage,.example[data-flow="2"] .checkout-stage,.example[data-flow="2"] .form-stage,.example[data-flow="2"] .workflow-stage{transform:translateX(-4vw) scale(1.04)}.copy,.phone-copy,.portal-copy,.event-ui-copy,.system-copy,.ux-copy{position:absolute;z-index:8;left:8vw;top:25vh;max-width:480px}.copy small,.phone-copy small,.portal-copy small,.event-ui-copy small,.system-copy small,.ux-copy small{color:var(--section-accent)}.copy h2,.phone-copy h2,.portal-copy h2,.event-ui-copy h2,.system-copy h2,.ux-copy h2{font-size:clamp(56px,7vw,108px);line-height:.78;letter-spacing:-.075em;margin:24px 0}.copy p,.phone-copy p,.portal-copy p,.event-ui-copy p,.system-copy p,.ux-copy p{max-width:390px;color:#999;line-height:1.5}.ex01{background:#080808}.ui-stage{position:absolute;left:40vw;right:8vw;top:18vh;bottom:8vh;transition:.4s}.browser{height:100%;background:#111;border:1px solid #333;box-shadow:0 30px 90px rgba(0,0,0,.45)}.browserbar{height:38px;border-bottom:1px solid #2f2f2f;display:flex;align-items:center;padding:0 12px;gap:7px;font:7px var(--mono);color:#777}.browserbar i{width:7px;height:7px;border-radius:50%;background:#404040}.browserbar span{margin-left:10px}.browserbar b{margin-left:auto;color:#8effb0}.dash-shell{height:calc(100% - 38px);display:grid;grid-template-columns:125px 1fr}.dash-shell aside{border-right:1px solid #282828;padding:20px 13px;display:flex;flex-direction:column;gap:7px}.dash-shell aside strong{font:10px var(--mono);margin-bottom:25px}.dash-shell aside a{font:8px var(--mono);color:#666;padding:9px}.dash-shell aside a.active{background:#fff;color:#000}.dash-main{padding:22px;overflow:hidden}.dash-top{display:flex;justify-content:space-between;align-items:flex-start}.dash-top small,.metric-row small,.dash-grid small{font:7px var(--mono);color:#666}.dash-top h3{font-size:28px;margin:4px 0}.dash-top button{background:var(--red);color:#fff;border:0;padding:9px 11px;font:7px var(--mono)}.metric-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0}.metric-row article{border:1px solid #2d2d2d;padding:13px}.metric-row b{display:block;font-size:30px;margin:9px 0}.metric-row i{display:block;height:2px;background:linear-gradient(90deg,var(--red) var(--w),#333 var(--w))}.dash-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:10px}.dash-grid article{border:1px solid #2d2d2d;padding:13px;min-height:150px}.bars{height:100px;display:flex;align-items:flex-end;gap:5px}.bars i{flex:1;background:#ddd;height:40%;animation:bars 2.4s ease-in-out infinite alternate}.bars i:nth-child(3n){height:85%;background:var(--red)}.bars i:nth-child(4n){height:60%}.bars i:nth-child(5n){height:25%}@keyframes bars{to{transform:scaleY(.55)}}.feed p{font:8px var(--mono);border-bottom:1px solid #222;padding:10px 0;margin:0;color:#999}.feed b{color:#fff;margin-right:8px}.ex02{background:#ece9e1;color:#111;--section-accent:#ff4a3f}.ex02 .section-label{color:#777}.phone-copy{top:27vh}.phone-copy p{color:#555}.phones{position:absolute;right:8vw;top:13vh;bottom:7vh;width:52vw;display:flex;align-items:center;justify-content:center;gap:2vw;transition:.4s}.phone{width:min(17vw,260px);aspect-ratio:9/19;background:#101010;color:#fff;border:7px solid #0a0a0a;border-radius:34px;box-shadow:0 30px 70px rgba(0,0,0,.25);position:relative;padding:28px 14px 18px;overflow:hidden;transition:.35s}.phone.p1{transform:translateY(5vh) rotate(-4deg)}.phone.p2{transform:scale(1.08);z-index:2}.phone.p3{transform:translateY(-4vh) rotate(4deg)}.phone .notch{position:absolute;top:6px;left:50%;transform:translateX(-50%);width:38%;height:13px;border-radius:20px;background:#000}.phone header{display:grid;grid-template-columns:1fr auto;font-size:10px;align-items:end}.phone header small{grid-column:1;font:6px var(--mono);color:#777}.phone header b{grid-column:1;font-size:16px}.phone header span{grid-column:2;grid-row:1/3}.balance{margin-top:25px;padding:18px;background:linear-gradient(135deg,#ff4a3f,#a92620);border-radius:18px}.balance small,.hero-card small{font:6px var(--mono)}.balance strong{display:block;font-size:38px}.balance i{font:6px var(--mono);font-style:normal}.mini-cards{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:9px}.mini-cards article{border:1px solid #2c2c2c;padding:12px;border-radius:13px}.mini-cards b{font-size:10px}.mini-cards span{display:block;font:6px var(--mono);color:#777;margin-top:8px}.phone nav{position:absolute;left:12px;right:12px;bottom:10px;height:38px;border-radius:15px;background:#1d1d1d;display:flex;justify-content:space-around;align-items:center}.hero-card{height:175px;border-radius:18px;margin-top:25px;padding:18px;background:radial-gradient(circle at 70% 20%,rgba(255,74,63,.8),transparent 30%),linear-gradient(145deg,#302c2c,#121212);position:relative}.hero-card i{position:absolute;inset:30px;border:1px solid rgba(255,255,255,.18);border-radius:50%}.hero-card strong{font-size:38px;display:block;margin-top:70px}.task-list p{display:flex;gap:8px;align-items:center;border-bottom:1px solid #252525;padding:10px 0;margin:0}.task-list p>i{width:9px;height:9px;border:1px solid #777;border-radius:50%}.task-list b{font-size:9px}.task-list small{display:block;font:6px var(--mono);color:#777}.task-list .done{opacity:.4}.file-grid{margin-top:25px;display:grid;grid-template-columns:1fr 1fr;gap:5px}.file-grid i{aspect-ratio:1;background:linear-gradient(135deg,#303030,#191919);border-radius:9px}.file-grid i:nth-child(2),.file-grid i:nth-child(5){background:linear-gradient(135deg,#8a342f,#211)}.p3>button{position:absolute;bottom:20px;left:14px;right:14px;border:0;background:#fff;color:#000;padding:11px;font:7px var(--mono)}.ex03{background:#0b0c0f;--section-accent:#95b5ff}.portal-stage{position:absolute;left:42vw;right:8vw;top:16vh;bottom:8vh;transition:.4s}.portal-card{border:1px solid #333;background:rgba(18,20,25,.94);box-shadow:0 30px 80px rgba(0,0,0,.35)}.portal-card.main{position:absolute;inset:4% 7% 8% 0;padding:25px}.portal-card.main header{display:flex;justify-content:space-between}.portal-card.main header small,.portal-card small{font:7px var(--mono);color:#667}.portal-card.main header b{display:block;font-size:32px;margin-top:6px}.portal-card.main header span{font:7px var(--mono);border:1px solid #95b5ff;color:#95b5ff;padding:7px}.portal-progress{height:4px;background:#24272d;margin:35px 0}.portal-progress i{display:block;width:72%;height:100%;background:#95b5ff}.portal-columns{display:grid;grid-template-columns:2fr 1fr;gap:12px}.portal-columns article{border:1px solid #2b2f36;padding:18px;min-height:190px}.portal-columns h3{font-size:35px;max-width:300px;margin:20px 0}.portal-columns button{background:#95b5ff;border:0;padding:10px 12px;font:7px var(--mono)}.portal-columns article:nth-child(2) b{font-size:55px}.portal-columns p{font:8px/1.8 var(--mono);color:#778}.portal-card.side{position:absolute;right:0;width:29%;padding:16px;z-index:2}.portal-card.side.one{top:0}.portal-card.side.two{bottom:0;background:#95b5ff;color:#07101d}.portal-card.side p{font:7px var(--mono);border-bottom:1px solid #2a2a2a;padding:10px 0;margin:0}.portal-card.side p b{margin-right:7px}.portal-card.side strong{display:block;font-size:35px;margin-top:15px}.ex04{background:#11100d;--section-accent:#ffb020}.control-room{position:absolute;left:40vw;right:7vw;top:17vh;bottom:8vh;background:#0a0a09;border:1px solid #3a3426;transition:.4s}.control-head{height:44px;border-bottom:1px solid #332d20;display:flex;align-items:center;padding:0 14px;font:7px var(--mono)}.control-head span{margin-left:auto;margin-right:20px;color:#9aa}.control-head span i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#83ff9d;margin-right:6px}.control-head small{color:#777}.control-grid{height:calc(100% - 44px);display:grid;grid-template-columns:1.5fr 1fr .65fr;gap:1px;background:#2b281f}.control-grid>article{background:#0d0d0c;padding:16px;position:relative}.control-grid small{font:7px var(--mono);color:#807767}.map{background-image:linear-gradient(#242018 1px,transparent 1px),linear-gradient(90deg,#242018 1px,transparent 1px)!important;background-size:35px 35px!important}.zone{position:absolute;border:1px solid #6a5b38;background:rgba(255,176,32,.08);padding:10px;font:7px var(--mono)}.zone b{display:block;font-size:20px;color:#ffb020}.z1{left:18%;top:25%}.z2{right:18%;top:19%}.z3{left:34%;bottom:20%}.z4{right:11%;bottom:31%}.alerts p{display:grid;grid-template-columns:25px 1fr auto;gap:8px;align-items:center;padding:13px 0;border-bottom:1px solid #24221d;margin:0;font:7px var(--mono)}.alerts .hot{color:#ffb020}.alerts p b{font-size:15px}.alerts p em{font-style:normal;color:#666}.stats strong{display:block;font-size:32px;margin:16px 0 4px}.stats i{display:block;height:2px;background:linear-gradient(90deg,#ffb020 82%,#333 82%);margin-bottom:30px}.ex05{background:#f1efe9;color:#111;--section-accent:#ff3b30}.system-copy p{color:#555}.system-stage{position:absolute;left:40vw;right:7vw;top:17vh;bottom:7vh;transition:.4s}.system-panel{height:100%;border:1px solid #111;padding:22px;background:#f5f3ed}.system-panel header{display:flex;justify-content:space-between;border-bottom:1px solid #111;padding-bottom:12px;font:8px var(--mono)}.type-row{display:grid;grid-template-columns:150px 1fr;align-items:center;border-bottom:1px solid #bbb;padding:22px 0}.type-row>span{font-size:95px;font-weight:800;line-height:.8}.type-row b{font-size:23px}.type-row small{display:block;font:8px var(--mono);margin-top:8px;color:#666}.color-row{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;padding:16px 0}.color-row i{height:75px;background:#111}.color-row i:nth-child(2){background:#f1efe9;border:1px solid #bbb}.color-row i:nth-child(3){background:#ff3b30}.color-row i:nth-child(4){background:#6da8ff}.color-row i:nth-child(5){background:#a5ffbe}.component-row{display:flex;gap:8px;align-items:center;padding:18px 0;border-top:1px solid #bbb;border-bottom:1px solid #bbb}.component-row button{padding:10px 13px;background:#111;color:#fff;border:1px solid #111;font:7px var(--mono)}.component-row .secondary{background:transparent;color:#111}.pill{border:1px solid #111;border-radius:30px;padding:9px 12px;font:7px var(--mono)}.component-row input{margin-left:auto;border:1px solid #aaa;background:#fff;padding:10px;font:8px var(--mono)}.card-row{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;padding-top:16px}.card-row article{border:1px solid #aaa;padding:15px;min-height:90px}.card-row small{font:7px var(--mono);color:#777}.card-row b{display:block;margin-top:17px}.divider{min-height:70vh;background:#ff3b30;color:#0b0b0b;padding:12vh 9vw;display:flex;align-items:center;justify-content:space-between}.divider small{font:8px var(--mono)}.divider h2{font-size:clamp(65px,9vw,135px);line-height:.76;letter-spacing:-.08em;margin:22px 0}.divider h2 em{font-family:var(--serif);font-weight:400}.divider>span{font:9px var(--mono);writing-mode:vertical-rl}.ux-example{--section-accent:#a5ffbe}.ux-copy{top:24vh}.ex06{background:#080a08}.flow-stage,.booking-stage,.checkout-stage,.form-stage,.workflow-stage{position:absolute;left:41vw;right:8vw;top:17vh;bottom:7vh;transition:.4s}.flow-stage{display:grid;grid-template-columns:1fr 210px;grid-template-rows:35px 1fr;gap:12px}.flow-progress{grid-column:1/3;display:flex;gap:7px;align-items:center}.flow-progress i{width:40px;height:2px;background:#333}.flow-progress i.active{background:#a5ffbe}.flow-progress span{font:7px var(--mono);color:#777;margin-left:auto}.flow-card{background:#f1efe9;color:#111;padding:34px;display:flex;flex-direction:column}.flow-card>small{font:7px var(--mono);color:#777}.flow-card h3{font-size:35px;margin:12px 0 25px}.choices{display:grid;gap:7px}.choices button{background:#fff;border:1px solid #bbb;padding:15px;display:flex;gap:12px;text-align:left}.choices button>i{width:13px;height:13px;border-radius:50%;border:1px solid #777}.choices button.selected{border-color:#111}.choices button.selected>i{background:#111;box-shadow:inset 0 0 0 3px #fff}.choices b{font-size:13px}.choices small{display:block;font:7px var(--mono);color:#777;margin-top:4px}.flow-card footer{display:flex;justify-content:space-between;margin-top:auto}.flow-card footer button{border:0;background:#111;color:#fff;padding:11px 14px;font:7px var(--mono)}.flow-card footer .ghost{background:transparent;color:#777}.ux-note{border:1px solid #29402e;padding:18px;align-self:end;margin-bottom:25px}.ux-note b{font:7px var(--mono);color:#a5ffbe}.ux-note span{display:block;margin-top:12px;color:#88918a;font-size:13px;line-height:1.4}.ex07{background:#e9e7df;color:#111;--section-accent:#2457ff}.ex07 .ux-copy p{color:#555}.booking-stage{display:flex;flex-direction:column}.booking-steps{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid #aaa}.booking-steps span{padding:11px;font:7px var(--mono);color:#999;border-right:1px solid #aaa}.booking-steps span b{display:block;margin-top:6px;color:#666}.booking-steps .done,.booking-steps .active{color:#2457ff}.booking-main{flex:1;display:grid;grid-template-columns:1fr 230px;gap:1px;background:#aaa}.booking-main>*{background:#f3f1eb}.calendar{padding:25px}.calendar header{display:flex;justify-content:space-between;align-items:center;font:8px var(--mono)}.calendar header button{border:1px solid #aaa;background:transparent}.week{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:25px}.week small{text-align:center;font:7px var(--mono);color:#888}.week button{aspect-ratio:1;border:0;background:#e4e1d8;color:#aaa}.week button.free{background:#fff;color:#111;border:1px solid #2457ff}.booking-main aside{padding:25px}.booking-main aside small{font:7px var(--mono);color:#777}.booking-main aside h3{font-size:27px}.booking-main aside p{line-height:1.6;color:#666}.booking-main aside strong{display:block;font-size:30px;margin:35px 0}.booking-main aside button{width:100%;background:#2457ff;color:#fff;border:0;padding:11px;font:7px var(--mono)}.ex08{background:#0c0b0b;--section-accent:#ff836d}.checkout-card{height:100%;background:#f4f1eb;color:#111;display:flex;flex-direction:column}.checkout-card header{height:48px;border-bottom:1px solid #c8c4bd;display:flex;align-items:center;gap:30px;padding:0 24px;font:7px var(--mono);color:#999}.checkout-card header .active{color:#111}.checkout-body{flex:1;display:grid;grid-template-columns:1fr 270px}.checkout-body>div{padding:30px}.checkout-body>div>small,.checkout-body aside>small{font:7px var(--mono);color:#777}.checkout-body h3{font-size:30px}.option{display:grid;grid-template-columns:15px 1fr auto;gap:12px;align-items:center;border:1px solid #ccc;padding:15px;margin:8px 0}.option>i{width:13px;height:13px;border:1px solid #777;border-radius:50%}.option.selected{border-color:#111}.option.selected>i{background:#111;box-shadow:inset 0 0 0 3px #fff}.option b{font-size:12px}.option small{display:block;font:7px var(--mono);color:#777}.option em{font:10px var(--mono);font-style:normal}.checkout-body aside{background:#e6e2da;padding:30px}.checkout-body aside p{display:flex;justify-content:space-between;font-size:12px}.checkout-body aside .total{font-size:18px}.checkout-body aside button{width:100%;margin-top:30px;background:#111;color:#fff;border:0;padding:12px;font:7px var(--mono)}.checkout-body aside>em{display:block;font:7px var(--mono);font-style:normal;color:#777;margin-top:12px;text-align:center}.ex09{background:#0b0d10;--section-accent:#8fd3ff}.form-stage{display:grid;grid-template-columns:150px 1fr 190px;background:#111720;border:1px solid #24303c}.form-sidebar{border-right:1px solid #24303c;padding:20px;display:flex;flex-direction:column;gap:10px}.form-sidebar b{font:8px var(--mono);margin-bottom:20px}.form-sidebar span{font:7px var(--mono);color:#586575;padding:9px}.form-sidebar .done{color:#82909e}.form-sidebar .active{background:#8fd3ff;color:#071018}.form-sidebar small{margin-top:auto;font:6px var(--mono);color:#40505f}.smart-form{padding:30px;background:#edf1f4;color:#111}.smart-form>small,.form-context small{font:7px var(--mono);color:#6b7885}.smart-form h3{font-size:33px;margin:10px 0}.smart-form p{color:#6d7379}.chip-grid{display:flex;flex-wrap:wrap;gap:7px;margin:25px 0}.chip-grid button{border:1px solid #b7c0c7;background:#fff;padding:10px 13px}.chip-grid .on{background:#111720;color:#fff}.smart-form label span{display:block;font:8px var(--mono);margin-bottom:7px}.smart-form textarea{width:100%;height:90px;border:1px solid #bbc3ca;padding:12px;resize:none}.smart-form footer{display:flex;justify-content:space-between;align-items:center;margin-top:18px}.smart-form footer span{font:7px var(--mono);color:#777}.smart-form footer button{background:#111720;color:#fff;border:0;padding:11px;font:7px var(--mono)}.form-context{padding:20px}.form-context p{font:8px/1.9 var(--mono);color:#6d8194;margin-top:20px}.ex10{background:#090909;--section-accent:#ff3b30}.workflow-stage{overflow:hidden}.workflow-line{position:absolute;left:6%;right:6%;top:20%;height:1px;background:#333}.node{position:absolute;top:15%;width:90px;text-align:center}.node:before{content:"";display:block;margin:auto;width:15px;height:15px;border-radius:50%;background:#171717;border:1px solid #555;position:relative;z-index:2}.node small{display:block;font:6px var(--mono);color:#666;margin-top:12px}.node b{font-size:10px;display:block;margin:4px}.node span{font:6px var(--mono);color:#555}.node.done:before{background:#888}.node.active:before{background:#ff3b30;box-shadow:0 0 0 7px rgba(255,59,48,.12)}.n1{left:2%}.n2{left:23%}.n3{left:44%}.n4{left:65%}.n5{left:86%}.workflow-panel{position:absolute;left:28%;right:12%;bottom:3%;top:40%;background:#f1efe9;color:#111;padding:25px}.workflow-panel>small{font:7px var(--mono);color:#777}.workflow-panel h3{font-size:32px;margin:9px 0 20px}.people{display:grid;grid-template-columns:1fr 1fr;gap:8px}.people button{background:#fff;border:1px solid #bbb;padding:12px;display:flex;gap:10px;text-align:left}.people button.selected{border-color:#111}.people button>i{width:34px;height:34px;border-radius:50%;background:#111;color:#fff;display:grid;place-items:center;font:8px var(--mono);font-style:normal}.people b{font-size:11px}.people small{display:block;font:6px var(--mono);color:#777;margin-top:4px}.workflow-panel footer{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #ccc;margin-top:18px;padding-top:14px}.workflow-panel footer span{font:7px var(--mono);color:#777}.workflow-panel footer button{background:#111;color:#fff;border:0;padding:10px 12px;font:7px var(--mono)}.outro{background:#070707;padding:15vh 9vw;display:flex;flex-direction:column;justify-content:center}.outro small{font:8px var(--mono);color:var(--red)}.outro h2{font-size:clamp(58px,8vw,130px);line-height:.78;letter-spacing:-.08em;margin:28px 0}.outro h2 span{color:#555}.outro p{max-width:580px;color:#888;line-height:1.5}.outro>a{align-self:flex-start;margin-top:30px;border:1px solid #fff;padding:13px 16px;font:8px var(--mono)}.outro-label{position:absolute;right:6vw;bottom:5vh;font:8px var(--mono);color:#555}
@media(max-width:1050px){.copy,.phone-copy,.portal-copy,.event-ui-copy,.system-copy,.ux-copy{max-width:380px}.ui-stage,.portal-stage,.control-room,.system-stage,.flow-stage,.booking-stage,.checkout-stage,.form-stage,.workflow-stage{left:43vw}.phones{width:54vw}.design-lab{width:118px}}
@media(max-width:820px){.topbar{grid-template-columns:1fr auto;height:56px;padding:0 12px}.brand span,.top-progress{display:none}.back{font-size:7px;padding:8px}.rail,.design-lab{display:none}.mobile-lab{position:fixed;z-index:180;display:grid;grid-template-columns:auto repeat(4,1fr);left:8px;right:8px;bottom:8px;border:1px solid #333;background:#090909}.mobile-lab b,.mobile-lab button{border:0;border-right:1px solid #222;background:#090909;color:#fff;padding:10px 6px;font:7px var(--mono)}.mobile-lab b{color:var(--red)}.intro{padding:95px 20px 95px}.intro h1{font-size:17vw}.intro-bottom{flex-direction:column;align-items:flex-start;gap:25px}.intro-switch{right:20px;bottom:85px}.example{min-height:110svh;padding:80px 18px}.section-label{top:72px;left:20px;right:20px}.copy,.phone-copy,.portal-copy,.event-ui-copy,.system-copy,.ux-copy{position:relative;left:auto;top:auto;margin-top:55px;max-width:none}.copy h2,.phone-copy h2,.portal-copy h2,.event-ui-copy h2,.system-copy h2,.ux-copy h2{font-size:15vw}.ui-stage,.portal-stage,.control-room,.system-stage,.flow-stage,.booking-stage,.checkout-stage,.form-stage,.workflow-stage{position:relative;left:auto;right:auto;top:auto;bottom:auto;margin-top:35px;height:55svh}.dash-shell{grid-template-columns:82px 1fr}.dash-shell aside{padding:12px 7px}.dash-main{padding:12px}.metric-row{gap:4px}.metric-row article{padding:8px}.metric-row b{font-size:20px}.dash-grid{grid-template-columns:1fr}.dash-grid .feed{display:none}.phones{position:relative;right:auto;top:auto;bottom:auto;width:100%;height:58svh;margin-top:25px;gap:0}.phone{width:39vw}.phone.p1{transform:translate(12px,30px) rotate(-5deg)}.phone.p2{transform:scale(1.04);z-index:3}.phone.p3{transform:translate(-12px,-25px) rotate(5deg)}.portal-card.main{inset:3% 0 20% 0;padding:15px}.portal-columns{grid-template-columns:1fr}.portal-columns article:nth-child(2){display:none}.portal-card.side{width:45%}.portal-card.side.one{right:0;top:auto;bottom:3%}.portal-card.side.two{right:auto;left:0;bottom:3%}.control-grid{grid-template-columns:1fr 1fr}.control-grid .stats{display:none}.system-stage{height:65svh}.type-row{grid-template-columns:90px 1fr}.type-row>span{font-size:60px}.component-row{flex-wrap:wrap}.component-row input{margin-left:0;width:100%}.card-row article{padding:10px}.divider{min-height:70svh;padding:90px 20px}.divider h2{font-size:15vw}.flow-stage{height:65svh;grid-template-columns:1fr;grid-template-rows:30px 1fr}.flow-progress{grid-column:1}.ux-note{display:none}.booking-stage,.checkout-stage,.form-stage,.workflow-stage{height:65svh}.booking-main{grid-template-columns:1fr}.booking-main aside{display:none}.calendar{padding:15px}.checkout-body{grid-template-columns:1fr}.checkout-body aside{display:none}.form-stage{grid-template-columns:90px 1fr}.form-context{display:none}.workflow-panel{left:5%;right:5%}.node{width:55px}.n1{left:0}.n2{left:20%}.n3{left:40%}.n4{left:60%}.n5{left:80%}.outro{padding:100px 20px}.outro h2{font-size:14vw}}