/* Quiet Technology: a calm wordmark with a precise sky-blue dot and light domain. */
body .studio-logo.quiet-wordmark{align-items:baseline;gap:0;font-weight:680;letter-spacing:-3px}
.quiet-wordmark .logo-dot{color:#38bdf8}
body .studio-logo.quiet-wordmark .logo-domain{font-size:20px;letter-spacing:-1px;margin-left:0;font-weight:400;color:#527998}
.studio-footer .quiet-wordmark .logo-dot{color:#7dd3fc}
.studio-footer .studio-logo.quiet-wordmark .logo-domain{color:#9bc8e5}
.ai-flow{min-width:0;background:linear-gradient(145deg,#f7fcff,#e0f1fc);border:1px solid #c5dfef;border-radius:22px;padding:28px;box-shadow:0 20px 65px #165ab210;position:relative;overflow:hidden}
.flow-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px}
.flow-heading .eyebrow{margin:0;font-size:8px!important;letter-spacing:1.2px}
.flow-demo-label{font-size:7px;letter-spacing:1px;color:#5f7b93}
.flow-scenarios{display:flex;background:#dcebf5;border-radius:7px;padding:4px;gap:4px;margin-bottom:24px}
.flow-scenarios button{flex:1;border:0;background:transparent;color:#537189;font:500 11px Inter,Arial,sans-serif;padding:10px 8px;border-radius:5px;cursor:pointer}
.flow-scenarios button[aria-pressed=true]{background:white;color:#165ab2;box-shadow:0 2px 6px #143e6b12}
.flow-engine{display:flex;align-items:center;gap:10px;margin:0 auto 22px;max-width:330px;padding:18px;background:#123f80;border:1px solid #265697;border-radius:12px;color:#fff;box-shadow:0 10px 25px #13497c1c}
.flow-engine strong{font-size:25px;letter-spacing:-1px;line-height:1.1}
.integrated-wordmark{display:inline-flex;align-items:center;white-space:nowrap}
.flow-engine strong.quiet-wordmark{align-items:baseline;font-weight:650;letter-spacing:-1.2px}
.flow-engine strong.quiet-wordmark .logo-dot{font-size:25px;color:#7dd3fc;margin:0}
.flow-engine strong.quiet-wordmark .logo-domain{font-size:12px;letter-spacing:-.3px;color:#b6d3ed;margin-left:0;font-weight:400}
.flow-engine small{display:block;font-size:8px;letter-spacing:.5px;color:#b6d3ed;margin-top:5px}
.engine-status{margin-left:auto;font-size:6px;letter-spacing:1px;color:#bde5fa}
.engine-status::before{content:'';display:inline-block;width:5px;height:5px;background:#7dd3fc;border-radius:50%;margin-right:5px}
.flow-track{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:20px}
.flow-wire{position:absolute;top:28px;left:16%;right:16%;height:2px;background:#c3d9eb;overflow:hidden}
.flow-wire span{display:block;width:0;height:100%;background:#1684cd;transition:width .65s ease}
.flow-step{position:relative;border:0;background:none;padding:0;display:flex;align-items:center;flex-direction:column;cursor:pointer;font-family:inherit;color:#718ba0;min-width:0}
.flow-step-icon{display:grid;place-items:center;width:56px;height:56px;border-radius:14px;background:#f4faff;border:1px solid #c6dceb;font-size:25px;transition:background .3s,box-shadow .3s,transform .3s;color:#5e8aac;margin-bottom:12px}
.flow-step[aria-pressed=true] .flow-step-icon{background:#167dc1;color:white;border-color:#167dc1;box-shadow:0 0 0 5px #1684cd14;transform:translateY(-2px)}
.flow-step.is-complete .flow-step-icon{background:#d8effc;color:#1475b5;border-color:#9ccde9}
.flow-step small{font-size:6px;letter-spacing:.8px;white-space:nowrap}
.flow-step strong{font-size:12px;font-weight:500;margin-top:5px;color:#204b70}
.flow-result{padding:19px 20px;background:#ffffffd9;border:1px solid #d0e3f0;border-radius:9px;min-height:143px}
.flow-result-label{display:block;font-size:7px;letter-spacing:1.2px;color:#187ab4;margin-bottom:10px;font-weight:600}
.flow-result-copy{font-size:14px!important;line-height:1.6;color:#183e62;margin:0 0 9px!important}
.flow-result-note{font-size:10px;line-height:1.6;color:#6e8396}
.flow-controls{display:flex;align-items:center;gap:17px;margin-top:20px}
.flow-play{display:flex;align-items:center;gap:18px;border:1px solid #a9cfe7;background:white;border-radius:5px;padding:10px 14px;color:#175b8e;font:500 11px Inter,Arial,sans-serif;cursor:pointer}
.flow-play:hover{background:#edf8ff}.flow-reset{border:0;background:none;color:#617c93;font:400 10px Inter,Arial,sans-serif;cursor:pointer;padding:10px 0}.flow-reset:hover{text-decoration:underline}
.flow-progress{margin-left:auto;font-size:9px;letter-spacing:2px;color:#6e8aa1;font-variant-numeric:tabular-nums}
.is-playing .engine-status::before{animation:flow-pulse 1.2s ease-in-out infinite}
.is-playing .flow-step[aria-pressed=true] .flow-step-icon{animation:flow-glow 1.5s ease-in-out infinite}
.flow-noscript{font-size:12px;margin-top:15px}
@keyframes flow-pulse{50%{opacity:.35;box-shadow:0 0 0 4px #7dd3fc20}}
@keyframes flow-glow{50%{box-shadow:0 0 0 8px #1684cd0a}}
@media(max-width:1100px){.ai-flow{padding:22px}.flow-heading{gap:6px}.flow-heading .eyebrow{font-size:7px!important}.flow-demo-label{font-size:6px}.flow-result{min-height:165px}}
@media(max-width:700px){body .studio-logo.quiet-wordmark .logo-domain{font-size:16px}.ai-flow{padding:22px 18px;border-radius:16px}.flow-track{gap:6px}.flow-step small{font-size:6px;letter-spacing:.4px}.flow-step-icon{width:49px;height:49px}.flow-wire{top:24px}.flow-result{min-height:160px;padding:17px}.flow-engine{padding:15px}.flow-heading .eyebrow{font-size:7px!important}.flow-heading{gap:10px}.flow-controls{gap:14px}}
@media(prefers-reduced-motion:reduce){.ai-flow *{animation:none!important;transition:none!important}}

/* Connected-business illustration: independent, gently staggered motion. */
.animated-systems .system-core strong.quiet-wordmark{align-items:baseline;font-weight:650}
.animated-systems .system-core strong.quiet-wordmark .logo-dot{color:#7dd3fc}
.animated-systems .system-core strong.quiet-wordmark .core-domain{font-size:13px;letter-spacing:-.4px;color:#b9ddf2;font-weight:400}
.animated-systems .orbit-three{animation:systems-orbit 45s linear infinite}
.animated-systems .orbit-two::after{content:'';position:absolute;left:50%;top:-5px;width:9px;height:9px;border-radius:50%;background:#38bdf8;box-shadow:0 0 14px #1684cd88}
.animated-systems .orbit-two{animation:systems-orbit 18s linear infinite}
.animated-systems .system-node{animation:systems-float 5s ease-in-out infinite}
.animated-systems .node-ai{animation-delay:-1.7s}
.animated-systems .node-messaging{animation-delay:-3.4s}
.animated-systems .orbit-point{animation:systems-signal 3s ease-in-out infinite}
.animated-systems .point-two{animation-delay:-1.5s}
.animated-systems .art-axis::after{content:'';position:absolute;background:#38bdf8;box-shadow:0 0 9px #1684cd99;border-radius:50%;width:5px;height:5px}
.animated-systems .axis-h::after{top:-2px;animation:systems-data-x 4s ease-in-out infinite}
.animated-systems .axis-v::after{left:-2px;animation:systems-data-y 4s ease-in-out -2s infinite}
.systems-motion{border:0;background:transparent;color:#175f96;font:inherit;cursor:pointer;padding:0 0 0 8px;text-decoration:underline;text-underline-offset:3px}
.animated-systems.is-paused *,.animated-systems.is-paused *::after{animation-play-state:paused!important}
@keyframes systems-orbit{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes systems-float{50%{transform:translateY(-7px)}}
@keyframes systems-signal{50%{box-shadow:0 0 0 7px #38bdf820;opacity:.55}}
@keyframes systems-data-x{0%{left:0;opacity:0}20%,80%{opacity:1}100%{left:100%;opacity:0}}
@keyframes systems-data-y{0%{top:0;opacity:0}20%,80%{opacity:1}100%{top:100%;opacity:0}}
@media(prefers-reduced-motion:reduce){.animated-systems *,.animated-systems *::after{animation:none!important}.systems-motion{display:none}}