/* Approved FusionWeb phone showroom: dark canvas, restrained orbit, real device viewport. */
.demo-toolbar{height:70px;padding:0 2.4%;position:sticky;top:0;display:grid;grid-template-columns:1fr auto 1fr;gap:22px;background:#05080cf5;border-bottom:1px solid #c3d4e533;color:#f7f8fa;z-index:30;font-family:'Manrope',Arial,sans-serif}
.preview-brand,.preview-toolbar-actions{display:flex;align-items:center;gap:34px;min-width:0}.preview-toolbar-actions{justify-content:flex-end;gap:16px}.demo-toolbar .preview-logo{font-size:30px;letter-spacing:-1.6px;font-weight:750;white-space:nowrap}.demo-toolbar .preview-all{display:flex;align-items:center;gap:18px;font-size:13px;white-space:nowrap}.preview-all>span:first-child{font-size:22px}.sample-tag{background:#dc0c24;color:#fff;padding:9px 25px;border-radius:100px;font-size:12px;font-weight:650;white-space:nowrap;box-shadow:inset 0 1px #ff768433}
.demo-toolbar .mobile-view-toggle,.demo-toolbar .preview-project{min-height:44px;padding:10px 18px;border-radius:12px;font-size:13px;display:flex;align-items:center;justify-content:center;gap:12px;white-space:nowrap;max-width:none;line-height:1.3}.demo-toolbar .mobile-view-toggle{border:1px solid #dce7f7b3;background:transparent;color:#fff}.demo-toolbar .mobile-view-toggle:hover,.demo-toolbar .mobile-view-toggle.is-active{background:#ffffff0c;border-color:#fff}.demo-toolbar .preview-project{background:#f4f5f8;color:#070a0e;border:1px solid #fff;font-weight:750}.preview-project>span{font-size:22px}.mobile-view-toggle svg,.device-switch svg,.exit-mobile-view svg{width:22px;height:22px;flex:none}
.phone-preview-mode{background:#03070b}.phone-showroom{position:relative;min-height:calc(100svh - 70px);display:grid;grid-template-columns:44% 56%;align-items:center;padding:29px 5.2% 54px;isolation:isolate;background:#03070b;color:#fafafa;overflow:hidden}.phone-showroom[hidden]{display:none}.phone-showroom:before{content:'';position:absolute;inset:-70px 0 0;z-index:-1;background:url('assets/mobile-space.png') center center/100% 100% no-repeat;pointer-events:none}.phone-showroom-copy{align-self:center;padding-bottom:28px;z-index:1}.phone-eyebrow{font-size:12px;letter-spacing:.15em;margin:0 0 23px;font-weight:650}.phone-showroom h1{font-size:clamp(32px,3.65vw,58px);font-weight:550;line-height:1.15;letter-spacing:-.055em;white-space:nowrap;margin:0 0 26px;outline:none}.phone-description{font-size:clamp(19px,2vw,30px);line-height:1.4;letter-spacing:-.03em;color:#b5bac5;margin:0}.phone-copy-line{display:block;width:38px;height:1px;background:#abb9cd5c;margin:58px 0 27px}.phone-hint{font-size:14px;color:#dee3ed;margin:0;line-height:1.5}
.phone-presentation{display:flex;flex-direction:column;align-items:center;justify-self:start;margin-left:9%;gap:0;position:relative;z-index:2}.device-switch{display:flex;align-items:center;border:1px solid #abbdd84f;border-radius:16px;padding:3px;background:#050b1099;box-shadow:0 1px 0 #fff1;width:288px}.device-switch button{display:flex;gap:10px;align-items:center;justify-content:center;padding:10px 17px;flex:1;min-height:42px;white-space:nowrap;background:transparent;border-radius:13px;font-size:13px;color:#f5f7fb;transition:background .2s,color .2s}.device-switch button[aria-pressed=true]{background:#f4f5f7;color:#080d12;box-shadow:0 0 0 1px #fff6}.device-switch svg{width:20px;height:20px}.device-caption{font-size:12px;color:#abb4c4;margin:10px 0 14px;line-height:1.4}.phone-size{position:relative;flex:none}.phone-frame{--frame-width:414px;--frame-height:900px;position:absolute;left:0;top:0;width:var(--frame-width);height:var(--frame-height);border:2px solid #d6d6ce;border-radius:68px;transform:scale(var(--phone-scale,.78));transform-origin:top left;background:linear-gradient(110deg,#aaa99f 0%,#343737 8%,#020607 18%,#6a6c67 49%,#222623 70%,#e0e0d5 98%);padding:9px;box-shadow:0 0 0 2px #363b3e,0 0 0 4px #ffffff25,0 22px 50px #000c,inset 0 0 0 2px #151a1e;transition:border-radius .3s,width .3s,height .3s}.phone-screen{position:relative;width:100%;height:100%;border-radius:57px;overflow:hidden;isolation:isolate;background:#f4f4ee;color:#0b171a;box-shadow:0 0 0 2px #020404}.phone-status{height:40px;display:flex;align-items:center;justify-content:space-between;padding:8px 27px 0 28px;font:bold 14px Arial;color:#081013;background:#f4f4ee}.phone-status-icons{display:flex;gap:5px;align-items:center}.phone-status-icons svg{height:13px;width:40px}.phone-battery{display:inline-block;width:23px;height:11px;background:#071218;border-radius:3px;position:relative;border:1px solid #f4f4ee;outline:1px solid #071218}.phone-battery:after{content:'';position:absolute;width:2px;height:5px;right:-4px;top:2px;background:#071218;border-radius:0 1px 1px 0}.phone-camera{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:113px;height:32px;border-radius:25px;background:#020405;z-index:5;box-shadow:inset 0 0 1px #72849355}.phone-camera:after{content:'';position:absolute;right:13px;top:11px;width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 40% 40%,#153956,#020508 75%);box-shadow:0 0 0 3px #05090e}.mobile-demo-frame{border:0;width:100%;height:calc(100% - 60px);display:block;background:#fff;color-scheme:light}.phone-home{height:20px;display:flex;align-items:center;justify-content:center;background:#f4f4ee}.phone-home>i{height:5px;width:128px;border-radius:8px;background:#060a0c}.phone-side-key{position:absolute;width:4px;left:-5px;background:linear-gradient(90deg,#c7c9c4,#353b3e);border-radius:2px;top:140px;height:34px}.side-key-two{top:201px;height:70px}.phone-frame:after{content:'';position:absolute;right:-5px;top:197px;width:4px;height:92px;border-radius:3px;background:linear-gradient(90deg,#404646,#babdb4)}.phone-loading{position:absolute;inset:42px 0 20px;display:grid;place-content:center;padding:30px;text-align:center;background:#f5f4ed;font:16px/1.6 Arial;z-index:8}.phone-loading[hidden]{display:none}.phone-loading button{background:#142a37;color:#fff;border-radius:8px;padding:12px;margin-top:20px}.exit-mobile-view{display:flex;align-items:center;justify-content:center;gap:13px;padding:12px 26px;min-height:49px;border:1px solid #cedcef7a;border-radius:13px;background:linear-gradient(#14202b88,#070d16bb);color:#fafbff;font-size:13px;margin-top:30px;box-shadow:0 1px 0 #d4e9ff14 inset}.exit-mobile-view:hover{background:#192734;border-color:#e2eeff}
.phone-presentation[data-device=android] .phone-frame{--frame-width:430px;--frame-height:916px;border-radius:29px;border-color:#9da5a7;background:linear-gradient(100deg,#b5bebd,#303638 8%,#0a0c0e 50%,#737c7b 98%)}.phone-presentation[data-device=android] .phone-screen{border-radius:18px}.phone-presentation[data-device=android] .phone-camera{width:18px;height:18px;top:12px;border-radius:50%}.phone-presentation[data-device=android] .phone-camera:after{width:7px;height:7px;top:5px;right:5px}.phone-presentation[data-device=android] .phone-description{text-align:center}
@media(min-width:1500px){.phone-presentation{margin-left:11%}}
@media(max-width:1050px){.preview-brand{gap:20px}.demo-toolbar .preview-logo{font-size:24px}.preview-toolbar-actions{gap:10px}.sample-tag{padding:8px 15px}.demo-toolbar .mobile-view-toggle,.demo-toolbar .preview-project{font-size:11px;padding:9px 13px}.phone-showroom{grid-template-columns:46% 54%;padding-left:5%;padding-right:4%}.phone-presentation{margin-left:3%}.phone-showroom h1{font-size:36px;white-space:normal}.phone-description{font-size:23px}.phone-hint{max-width:220px}}
@media(max-width:759px){.demo-toolbar{height:auto;min-height:100px;grid-template-columns:1fr auto;padding:12px 16px;gap:10px}.preview-brand{gap:16px}.demo-toolbar .preview-logo{font-size:22px}.demo-toolbar .preview-all{font-size:11px;gap:7px}.sample-tag{justify-self:end;font-size:10px;padding:7px 13px}.preview-toolbar-actions{grid-column:1/-1;justify-content:space-between}.demo-toolbar .mobile-view-toggle,.demo-toolbar .preview-project{min-height:36px;font-size:11px;padding:8px 12px}.mobile-view-toggle svg{width:17px;height:17px}.phone-showroom{min-height:calc(100svh - 112px);display:flex;flex-direction:column;align-items:center;padding:24px 15px 35px;gap:20px}.phone-showroom:before{inset:0;background-size:auto 100%;background-position:62% center}.phone-showroom-copy{align-self:center;padding:0;text-align:center}.phone-eyebrow{font-size:9px;margin:0 0 9px}.phone-showroom h1{font-size:29px;margin:0}.phone-description,.phone-copy-line,.phone-hint{display:none}.phone-presentation{margin:0}.device-switch{width:250px}.device-switch button{min-height:38px;padding:8px 12px;font-size:12px}.device-caption{font-size:10px;margin:9px 0 13px}.exit-mobile-view{margin-top:20px;padding:10px 20px;font-size:12px;min-height:44px}}
@media(prefers-reduced-motion:reduce){.phone-showroom *{transition:none!important;animation:none!important}}
.motion-off .phone-showroom *{transition:none!important;animation:none!important}
@media(min-width:1051px){.phone-showroom h1{font-size:clamp(44px,3.9vw,60px)}.phone-presentation{margin-left:9%}.device-caption{margin-bottom:10px}.phone-copy-line{margin-top:52px}}
@media(max-width:380px){.demo-toolbar{padding-left:12px;padding-right:12px;gap:9px}.preview-brand{gap:9px}.demo-toolbar .preview-logo{font-size:20px;letter-spacing:-1.2px}.demo-toolbar .preview-all{font-size:10px;gap:5px}.sample-tag{font-size:9px;padding:7px 10px}.demo-toolbar .mobile-view-toggle,.demo-toolbar .preview-project{padding:8px 9px;gap:8px}.phone-showroom h1{font-size:26px}}
@media(min-width:1051px){.phone-showroom-copy{transform:translateY(-13px)}.phone-showroom h1{margin-bottom:20px}.phone-copy-line{margin-top:32px}.phone-presentation[data-device=android]{margin-left:18%}.phone-presentation[data-device=android] .device-switch{width:308px}}
