/* A single ambient AI space, with the conversation embedded below the orb. */
.workflow-section { position:relative; isolation:isolate; padding-block:72px; background:#f5f9f8; border-block:1px solid #e4efec; }
.workflow-chat-card { max-width:840px; margin:0 auto; padding:32px 36px 24px; border:1px solid #d8e8e5; border-radius:32px; background:radial-gradient(ellipse at 50% 0, #eaf7f5 0, transparent 52%),#fff; box-shadow:0 24px 60px -32px #315c602b; overflow:hidden; }
.workflow-section > .container { position:relative; }
.workflow-intro { text-align:center; max-width:760px; margin:0 auto 30px; }
.workflow-orb-stage { position:relative; display:grid; place-items:center; width:220px; height:180px; margin:0 auto 16px; }
.workflow-orb-stage::before { content:""; position:absolute; width:220px; height:150px; border-radius:50%; background:radial-gradient(ellipse,#a8e9e466, #cec4f633 44%,transparent 70%); transform:translateY(20px); }
.workflow-orb-stage .workflow-sphere { width:148px; height:148px; }
.workflow-intro .eyebrow { background:transparent; padding:0; }
.workflow-intro h2 { margin:18px 0 16px; font-size:clamp(30px,3.2vw,38px); line-height:1.12; }
.workflow-lead { max-width:510px; margin:0 auto; font-size:15px; line-height:1.7; color:#647873; }
.workflow-sphere { position: relative; isolation: isolate; width: 150px; height: 150px; overflow: hidden; border-radius: 50%; background: #93c8e4; box-shadow: inset 0 0 16px #ffffffaa, inset -10px -12px 23px #154b6255, 0 18px 35px -16px #178b8d66; transform: translateZ(0); }
/* An explicit alpha mask contains filtered/composited layers on iOS browsers.
   Keep the shadow on the outer sphere so masking does not cut off its glow. */
.workflow-sphere-surface { position:absolute; inset:0; border-radius:inherit; overflow:hidden; isolation:isolate; clip-path:circle(50% at 50% 50%); -webkit-mask-image:radial-gradient(circle closest-side,#fff 99%,transparent 100%); mask-image:radial-gradient(circle closest-side,#fff 99%,transparent 100%); }
.workflow-sphere-colour { position: absolute; inset: -38%; border-radius: 45%; background: conic-gradient(from 25deg, #7eecdb, #2fbeb7 15%, #80c5f6 30%, #a9a1eb 43%, #eec5e5 57%, #4e9ee7 71%, #3accbd 86%, #7eecdb); filter: blur(11px); animation: workflow-orbit 14s linear infinite; }
.workflow-sphere-ribbon { position: absolute; inset: -12%; border: 17px solid #d4fbff88; border-left-color: #77d4ec44; border-bottom-color: #edceff99; border-radius: 44% 56% 37% 63%; filter: blur(7px); mix-blend-mode: screen; animation: workflow-ribbon 8s ease-in-out infinite alternate; }
.workflow-sphere-gloss { position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(ellipse at 30% 22%, #ffffffbd, transparent 36%), radial-gradient(ellipse at 70% 78%, #ffffff66, transparent 37%), radial-gradient(circle at 50% 42%, transparent 46%, #143d7840 78%, #ebffffb3 100%); box-shadow: inset 0 0 8px #ffffffbb; }
.workflow-sphere-colour, .workflow-sphere-ribbon { animation-play-state: paused; }
.workflow-section.is-in-view .workflow-sphere-colour, .workflow-section.is-in-view .workflow-sphere-ribbon { animation-play-state: running; }

@keyframes workflow-orbit { to { transform: rotate(360deg); } }
@keyframes workflow-ribbon { from { transform: rotate(-28deg) scale(.88); } to { transform: rotate(135deg) scale(1.12); } }
@media (max-width:760px) {
  .workflow-section { padding-block:40px; }
  .workflow-chat-card { padding:24px 18px 16px; border-radius:26px; }
  .workflow-intro { margin-bottom: 26px; text-align: center; }
  .workflow-orb-stage { height:148px; margin-bottom:12px; }
  .workflow-orb-stage .workflow-sphere { width:124px; height:124px; }
  .workflow-intro h2 { font-size:clamp(26px,6.8vw,36px); }
  .workflow-lead { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .workflow-sphere-colour, .workflow-sphere-ribbon { animation: none; } }