/* Interactive app / shared foundation / website showcase. */
.ma-systems { --mf-accent:#73d4ff; --mf-rgb:115,212,255; position:relative; scroll-margin-top:100px; background:radial-gradient(ellipse at 50% 70%,#102e493d,transparent 60%),#07121d; }
.ma-systems[data-connection="commerce"] { --mf-accent:#f0c98b; --mf-rgb:240,201,139; }
.ma-systems[data-connection="bookings"] { --mf-accent:#82e1c6; --mf-rgb:130,225,198; }
.ma-systems[data-connection="team"] { --mf-accent:#a7baff; --mf-rgb:167,186,255; }
.ma-systems[data-connection="messages"] { --mf-accent:#80dfec; --mf-rgb:128,223,236; }
.ma-systems[data-connection="integrations"] { --mf-accent:#ffb699; --mf-rgb:255,182,153; }
.ma-systems .ma-section-heading { margin-bottom:42px; }
.mf-invitation { display:inline-block; color:#e0effa; margin-top:12px; font-size:14px; }
.mf-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:24px; }
.mf-option { position:relative; display:flex; align-items:center; gap:16px; min-width:0; min-height:102px; padding:20px; border:1px solid #8ebde425; border-radius:12px; background:linear-gradient(115deg,#20354c38,#0c1c2c33); color:#c6d6e4; text-align:left; cursor:pointer; transition:border-color .25s,background .25s,transform .25s,box-shadow .25s; }
.mf-option > svg { flex:none; width:38px; height:38px; padding:8px; border:1px solid #9bc8e72b; border-radius:10px; color:#8db7d5; background:#9bc8e708; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.mf-option > span { min-width:0; }
.mf-option strong { display:block; font-size:15px; line-height:1.35; font-weight:600; letter-spacing:-.2px; }
.mf-option small { display:block; margin-top:5px; color:#91a9bc; font-size:12px; line-height:1.4; }
.mf-option > i { flex:none; margin-left:auto; font:normal 19px/1 sans-serif; color:#7598b2; transition:transform .25s; }
.mf-option:hover { transform:translateY(-3px); background:#16334c80; border-color:#8ebde47a; }
.mf-option:hover > i { transform:translateX(3px); }
.mf-option[aria-selected="true"] { border-color:rgba(var(--mf-rgb),.65); color:#f4faff; background:linear-gradient(110deg,rgba(var(--mf-rgb),.14),rgba(var(--mf-rgb),.025)); box-shadow:inset 0 1px 0 rgba(var(--mf-rgb),.14),0 5px 30px rgba(var(--mf-rgb),.045); }
.mf-option[aria-selected="true"] > svg { color:var(--mf-accent); border-color:rgba(var(--mf-rgb),.35); background:rgba(var(--mf-rgb),.1); }
.mf-option[aria-selected="true"] > i { color:var(--mf-accent); }
.ma-systems :is(button,[tabindex]):focus-visible { outline:2px solid var(--mf-accent); outline-offset:5px; }
.mf-showcase { position:relative; overflow:hidden; isolation:isolate; border:1px solid rgba(var(--mf-rgb),.27); border-radius:20px; background:radial-gradient(ellipse at 50% 64%,rgba(var(--mf-rgb),.09),transparent 58%),linear-gradient(130deg,#101f30,#070f1c 60%,#0d1b2b); transition:border-color .4s; }
.mf-showcase::before { content:""; position:absolute; inset:0 12% auto; height:1px; background:linear-gradient(90deg,transparent,var(--mf-accent),transparent); opacity:.7; }
.mf-story { display:flex; align-items:center; justify-content:space-between; gap:30px; padding:32px 38px 0; position:relative; z-index:2; }
.mf-story h3 { color:#f5f9fc; margin:0 0 10px; font-weight:550; font-size:clamp(23px,2.2vw,32px); letter-spacing:-1px; line-height:1.2; }
.mf-story p { color:#a1b7c9; max-width:620px; margin:0; font-size:14px; line-height:1.65; }
.mf-trigger { display:flex; flex:none; align-items:center; gap:18px; min-height:48px; padding:12px 17px; border:1px solid rgba(var(--mf-rgb),.5); border-radius:8px; color:var(--mf-accent); background:rgba(var(--mf-rgb),.075); font-size:13px; font-weight:600; cursor:pointer; transition:background .2s,box-shadow .2s; }
.mf-trigger:hover { background:rgba(var(--mf-rgb),.17); box-shadow:0 0 24px rgba(var(--mf-rgb),.12); }
.mf-trigger svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.mf-scene { position:relative; min-height:402px; display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; padding:26px 30px 16px; perspective:1000px; }
.mf-grid { position:absolute; z-index:-1; left:-20%; right:-20%; height:280px; bottom:-85px; transform:rotateX(65deg); background-image:linear-gradient(rgba(var(--mf-rgb),.1) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--mf-rgb),.1) 1px,transparent 1px); background-size:44px 44px; mask-image:radial-gradient(ellipse,#0008,transparent 68%); }
.mf-connections { position:absolute; z-index:-1; inset:0; width:100%; height:100%; color:var(--mf-accent); fill:none; stroke-width:1.1; overflow:visible; }
.mf-tracks { stroke:url(#mf-line); }
.mf-streams { stroke:currentColor; stroke-dasharray:3 18 30 480; stroke-linecap:round; filter:drop-shadow(0 0 5px currentColor); animation:mf-flow 5s linear infinite; opacity:.7; }
.mf-endpoint { display:flex; flex-direction:column; align-items:center; position:relative; gap:14px; z-index:1; }
.mf-node-heading { text-align:center; }
.mf-node-heading strong { display:block; color:#eff7fe; font-size:21px; letter-spacing:-.6px; font-weight:550; line-height:1.15; }
.mf-node-heading > span { display:block; margin-top:7px; color:#8faabe; font-size:10px; line-height:1.5; }
.mf-phone { position:relative; width:158px; height:239px; padding:0 10px; border:1px solid #9daebf88; border-radius:24px; background:linear-gradient(140deg,#172a3c,#0a1725 60%); box-shadow:inset 0 0 0 3px #020913,0 22px 45px #0007,4px 2px 0 #3b506366; transform:rotateY(10deg) rotateZ(-4deg); animation:mf-float-phone 7s ease-in-out infinite; }
.mf-phone-top { height:29px; display:flex; align-items:center; justify-content:space-between; color:#8fa9bd; font:8px/1 sans-serif; padding:0 3px; }
.mf-phone-top i { width:43px; height:11px; background:#020710; border-radius:9px; }
.mf-phone-content { color:#e5f0fa; padding:5px 3px; }
.mf-mini-heading { display:block; font-size:12px; font-weight:600; margin-bottom:10px; letter-spacing:-.15px; }
.mf-mini-muted { color:#8fa9bd; font-size:8px; line-height:1.5; }
.mf-mini-card { border:1px solid rgba(var(--mf-rgb),.23); border-radius:9px; padding:11px; background:linear-gradient(125deg,rgba(var(--mf-rgb),.1),rgba(var(--mf-rgb),.02)); }
.mf-mini-card strong { display:block; margin-top:5px; font-size:12px; font-weight:550; }
.mf-avatar { width:29px; height:29px; display:grid; place-items:center; border-radius:50%; background:rgba(var(--mf-rgb),.2); color:var(--mf-accent); font-size:10px; }
.mf-mini-row { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:8px; color:#9fb5c7; padding:8px 0; border-bottom:1px solid #ffffff0b; }
.mf-mini-row b { color:#dceaf7; font-weight:500; }
.mf-mini-pill { display:inline-flex; align-items:center; gap:4px; margin-top:9px; font-size:8px; color:var(--mf-accent); }
.mf-mini-pill::before { content:""; width:4px; height:4px; border-radius:50%; background:currentColor; }
.mf-mini-big { color:var(--mf-accent); font-size:25px!important; line-height:1.2; letter-spacing:-1px; }
.mf-phone-nav { display:flex; justify-content:space-around; position:absolute; inset:auto 18px 18px; border-top:1px solid #8caac31a; padding-top:9px; }
.mf-phone-nav i { width:9px; height:9px; border:1px solid #577289; border-radius:3px; }
.mf-phone-nav i:first-child { background:rgba(var(--mf-rgb),.5); border-color:var(--mf-accent); }
.mf-phone-home { position:absolute; width:47px; height:2px; bottom:7px; left:calc(50% - 23.5px); background:#afc5d8; border-radius:4px; }
.mf-node-status { display:flex; align-items:center; gap:6px; color:#94afc3; font-size:10px; line-height:1.4; min-height:15px; text-align:center; }
.mf-node-status::before { content:""; flex:none; width:4px; height:4px; border-radius:50%; background:var(--mf-accent); box-shadow:0 0 8px rgba(var(--mf-rgb),.6); }
.mf-hub { position:relative; align-self:center; margin-top:22px; }
.mf-engine { position:relative; width:230px; height:230px; margin:auto; }
.mf-aura { position:absolute; inset:13%; border-radius:50%; background:radial-gradient(circle,rgba(var(--mf-rgb),.3),rgba(var(--mf-rgb),.06) 50%,transparent 70%); animation:mf-breathe 5s ease-in-out infinite; }
.mf-chip { position:absolute; inset:34%; display:grid; place-items:center; border:1px solid rgba(var(--mf-rgb),.7); border-radius:19px; background:linear-gradient(140deg,rgba(var(--mf-rgb),.24),#0c1e31 85%); transform:rotate(-12deg); box-shadow:0 0 32px rgba(var(--mf-rgb),.22),inset 0 1px 0 rgba(var(--mf-rgb),.6); }
.mf-chip svg { width:43px; height:43px; fill:rgba(var(--mf-rgb),.07); stroke:var(--mf-accent); stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; transform:rotate(12deg); }
.mf-orbit { position:absolute; inset:8%; border:1px solid rgba(var(--mf-rgb),.36); border-radius:50%; transform:rotateX(63deg) rotate(-25deg); }
.mf-orbit::before { content:""; position:absolute; inset:4px; border:1px dashed rgba(var(--mf-rgb),.12); border-radius:50%; }
.mf-orbit i { position:absolute; inset:-1px; border:1px solid transparent; border-top-color:var(--mf-accent); border-radius:50%; animation:mf-spin 8s linear infinite; }
.mf-orbit i::after { content:""; position:absolute; left:14%; top:14%; width:7px; height:7px; border-radius:50%; background:#e4faff; box-shadow:0 0 12px 4px rgba(var(--mf-rgb),.6); }
.mf-orbit-two { transform:rotate(-57deg) rotateX(60deg); inset:5%; }
.mf-orbit-two i { animation-duration:11s; animation-direction:reverse; }
.mf-orbit-three { transform:rotate(54deg) rotateX(60deg); inset:5%; }
.mf-orbit-three i { animation-duration:13s; }
.mf-satellite { position:absolute; z-index:2; padding:6px 10px; border:1px solid rgba(var(--mf-rgb),.23); border-radius:6px; background:#0b1b2aed; font-size:9px; color:#b5cdde; }
.mf-satellite-one { top:16px; left:7px; }
.mf-satellite-two { top:75px; right:-2px; }
.mf-satellite-three { bottom:24px; left:2px; }
.mf-hub .mf-node-heading { margin-top:-7px; }
.mf-hub .mf-node-heading strong { font-size:25px; }
.mf-hub .mf-node-heading > span { min-height:30px; max-width:210px; margin-inline:auto; color:var(--mf-accent); }
.mf-window { position:relative; width:min(100%,295px); min-height:206px; border:1px solid #8eabc363; border-radius:10px; background:linear-gradient(140deg,#142739,#0b1725); box-shadow:0 20px 45px #0006,3px 3px 0 #1c3246; overflow:hidden; transform:rotateY(-8deg) rotateZ(3deg); animation:mf-float-web 8s ease-in-out infinite; }
.mf-window-top { display:flex; justify-content:space-between; align-items:center; height:25px; padding:0 10px; background:#ffffff03; border-bottom:1px solid #91bbdd20; }
.mf-window-top > span { display:flex; gap:3px; }
.mf-window-top i { width:4px; height:4px; background:#668197; border-radius:50%; }
.mf-window-top small { font-size:7px; color:#7d9bb2; }
.mf-window-top svg { width:10px; height:10px; fill:none; stroke:#8baec8; stroke-width:1.5; }
.mf-web-content { padding:16px; }
.mf-web-content .mf-mini-heading { font-size:14px; margin-bottom:12px; }
.mf-web-content .mf-mini-row { font-size:9px; padding:8px 0; }
.mf-web-content .mf-mini-card { padding:12px; }
.mf-web-content .mf-mini-card strong { font-size:13px; }
.mf-web-profile { display:flex; align-items:center; gap:10px; }
.mf-web-profile .mf-avatar { flex:none; width:32px; height:32px; }
.mf-mini-bars { display:flex; align-items:end; height:49px; gap:6px; margin-top:9px; }
.mf-mini-bars i { flex:1; background:linear-gradient(var(--mf-accent),rgba(var(--mf-rgb),.2)); border-radius:2px 2px 0 0; height:var(--bar); opacity:.75; }
.mf-mini-calendar { display:grid; grid-template-columns:repeat(5,1fr); gap:5px; margin-top:10px; }
.mf-mini-calendar i { display:grid; place-items:center; height:19px; background:#ffffff05; color:#a1b5c6; font:normal 8px/1 sans-serif; border-radius:3px; }
.mf-mini-calendar .is-picked { background:rgba(var(--mf-rgb),.22); color:var(--mf-accent); outline:1px solid rgba(var(--mf-rgb),.5); }
.mf-result-bar { display:flex; align-items:center; justify-content:space-between; gap:22px; min-height:65px; padding:10px 30px; border-top:1px solid rgba(var(--mf-rgb),.14); background:#040c1680; }
.mf-result { color:#b4cbdc; margin:0; font-size:12px; line-height:1.55; }
.mf-result::before { content:""; display:inline-block; width:6px; height:6px; margin-right:9px; border-radius:50%; background:var(--mf-accent); box-shadow:0 0 10px rgba(var(--mf-rgb),.5); }
.mf-motion { display:flex; align-items:center; gap:7px; flex:none; min-height:44px; padding:7px 0 7px 9px; color:#91aabd; background:none; border:0; font-size:11px; cursor:pointer; }
.mf-motion:hover { color:#fff; }
.mf-motion svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.5; }
.mf-demo-note { color:#7f98ad; margin:16px 0 0; font-size:11px; text-align:center; line-height:1.6; }
.mf-showcase.is-running .mf-streams { stroke-dasharray:12 7 44 270; opacity:1; animation-duration:1.2s; }
.mf-showcase.is-running .mf-chip { box-shadow:0 0 55px rgba(var(--mf-rgb),.5),inset 0 1px rgba(var(--mf-rgb),.8); }
.mf-showcase.is-complete .mf-web-status,.mf-showcase.is-complete [data-mf-web-status] { color:var(--mf-accent); }
.mf-content-enter { animation:mf-content-in .4s ease-out both; }
.ma-systems.is-offscreen *,.ma-systems.is-offscreen *::before,.ma-systems.is-offscreen *::after,.ma-systems.mf-paused *,.ma-systems.mf-paused *::before,.ma-systems.mf-paused *::after { animation-play-state:paused!important; }
@keyframes mf-flow { to { stroke-dashoffset:-1062; } }
@keyframes mf-spin { to { transform:rotate(360deg); } }
@keyframes mf-breathe { 50% { opacity:.55; transform:scale(.85); } }
@keyframes mf-float-phone { 50% { transform:translateY(-8px) rotateY(10deg) rotateZ(-2deg); } }
@keyframes mf-float-web { 50% { transform:translateY(7px) rotateY(-8deg) rotateZ(2deg); } }
@keyframes mf-content-in { from { opacity:.3; transform:translateY(5px); } to { opacity:1; transform:none; } }
@media(min-width:1600px) { .mf-scene { min-height:440px; } .mf-phone { width:175px; height:251px; } .mf-window { width:330px; min-height:224px; } .mf-engine { width:258px; height:258px; } }
@media(max-width:1100px) { .mf-option { padding:16px 13px; gap:10px; } .mf-option strong { font-size:13px; } .mf-option small { font-size:10px; } .mf-option > i { display:none; } .mf-story { padding:27px 26px 0; } .mf-story p { font-size:12px; } .mf-trigger { font-size:11px; gap:10px; } .mf-scene { padding-inline:15px; } .mf-engine { width:195px; height:220px; } .mf-window { width:235px; } .mf-hub .mf-node-heading strong { font-size:22px; } .mf-node-heading strong { font-size:19px; } }
@media(max-width:760px) { .mf-options { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; } .mf-option { min-height:84px; } .mf-option > svg { width:31px; height:31px; padding:6px; } .mf-story { align-items:flex-start; flex-direction:column; gap:15px; padding:24px 23px 0; } .mf-story h3 { font-size:26px; } .mf-story p { font-size:13px; } .mf-trigger { min-height:44px; font-size:12px; } .mf-scene { grid-template-columns:1fr 1fr; grid-template-rows:auto auto; row-gap:0; padding:28px 22px 20px; min-height:0; } .mf-app { grid-column:1; grid-row:1; } .mf-web { grid-column:2; grid-row:1; } .mf-hub { grid-column:1 / -1; grid-row:2; margin-top:0; } .mf-engine { width:220px; height:220px; } .mf-hub .mf-node-heading { margin-top:-15px; } .mf-hub .mf-node-heading strong br { display:none; } .mf-hub .mf-node-heading strong { font-size:25px; } .mf-hub .mf-node-heading > span { max-width:none; min-height:18px; font-size:10px; } .mf-phone { width:146px; height:231px; } .mf-window { width:235px; min-height:205px; } .mf-node-heading > span { max-width:160px; min-height:30px; } .mf-endpoint { gap:12px; align-self:start; } .mf-web { padding-top:15px; } .mf-node-status { max-width:160px; min-height:28px; justify-content:center; font-size:9px; } .mf-connections { height:100%; stroke-width:1.4; } .mf-result-bar { padding:12px 20px; align-items:flex-start; flex-direction:column; gap:0; } .mf-result { font-size:11px; } .mf-motion { font-size:10px; padding:8px 0; } }
@media(max-width:480px) { .ma-systems .ma-section-heading { margin-bottom:28px; } .mf-invitation { font-size:12px; } .mf-options { margin-bottom:16px; } .mf-option { padding:13px 10px; gap:8px; min-height:84px; align-items:flex-start; } .mf-option > svg { width:26px; height:26px; padding:4px; border-radius:7px; } .mf-option strong { font-size:11px; letter-spacing:0; } .mf-option small { font-size:9px; line-height:1.45; } .mf-showcase { border-radius:14px; } .mf-story { padding:23px 18px 0; } .mf-story h3 { font-size:24px; letter-spacing:-.7px; } .mf-story p { font-size:12px; } .mf-scene { padding:26px 12px 20px; column-gap:13px; } .mf-node-heading strong { font-size:17px; } .mf-node-heading > span { font-size:8px; max-width:125px; } .mf-phone { width:124px; height:216px; padding-inline:7px; border-radius:21px; } .mf-phone-top { font-size:7px; } .mf-phone-top i { width:35px; } .mf-phone-content { padding-inline:3px; } .mf-mini-heading { font-size:10px; } .mf-mini-card { padding:8px; } .mf-mini-card strong { font-size:10px; } .mf-mini-muted { font-size:7px; } .mf-mini-row { font-size:7px; padding:7px 0; gap:4px; } .mf-mini-pill { font-size:7px; } .mf-window { width:100%; min-height:181px; } .mf-web-content { padding:10px 8px; } .mf-web-content .mf-mini-heading { font-size:10px; } .mf-web-content .mf-mini-card { padding:8px; } .mf-web-content .mf-mini-card strong { font-size:10px; } .mf-web-content .mf-mini-row { font-size:7px; gap:4px; } .mf-web-profile { gap:5px; } .mf-web-profile .mf-avatar { width:23px; height:23px; font-size:8px; } .mf-node-status { font-size:8px; min-height:25px; } .mf-engine { width:200px; height:200px; } .mf-hub .mf-node-heading strong { font-size:22px; } .mf-hub .mf-node-heading > span { font-size:8px; } .mf-demo-note { font-size:10px; } }
@media(prefers-reduced-motion:reduce) { .ma-systems *,.ma-systems *::before,.ma-systems *::after { animation:none!important; transition:none!important; } .mf-streams { stroke-dasharray:none; opacity:.4; } }

.mf-reverse .mf-streams { animation-direction:reverse; }
.mf-trigger:disabled { cursor:progress; }
.mf-grid,.mf-connections,.mf-showcase::before { pointer-events:none; }
.mf-result-bar { position:relative; z-index:2; }
.mf-phone-nav { display:none; }
.mf-scene { grid-template-columns:repeat(3,minmax(0,1fr)); }
.mf-endpoint { min-width:0; }
.mf-phone { height:263px; }
.mf-engine { width:252px; height:252px; }
.mf-aura { background:radial-gradient(circle,rgba(var(--mf-rgb),.4),rgba(var(--mf-rgb),.08) 50%,transparent 70%); }
@media(max-width:1100px) { .mf-engine { width:195px; height:220px; } }
@media(max-width:760px) { .mf-scene { grid-template-columns:repeat(2,minmax(0,1fr)); } .mf-engine { width:220px; height:220px; } .mf-phone { height:250px; } }
@media(max-width:480px) { .mf-phone { height:237px; width:120px; } .mf-window { width:calc(100% - 7px); } .mf-engine { width:200px; height:200px; } }