/* One open-section layout for the growing service homepage. */
.hm-home{--brand-blue:#2869ed;--muted:var(--goxee-muted-color);background:#fff;color:#131e30}
.hm-section{--voice-heading-size:clamp(40px,4.3vw,62px);position:relative;isolation:isolate;overflow:hidden;padding:64px max(48px,calc((100% - 1408px)/2)) 48px}
.hm-section-heading{max-width:760px;margin-inline:auto;text-align:center}
.hm-service{display:flex;align-items:center;justify-content:center;gap:10px;font-size:14px;font-weight:600;margin-bottom:20px}
.hm-service .ml-service-mark{display:inline-flex;align-items:center}
.hm-service img{width:24px;height:24px;object-fit:contain;filter:brightness(0)}
.hm-section-heading h1,.hm-section-heading h2{font-size:var(--voice-heading-size);font-weight:400;letter-spacing:-.03em;line-height:1.07;margin-bottom:20px}
.hm-description{max-width:var(--motion-copy-width);margin-inline:auto;font-size:20px;line-height:1.6;color:var(--goxee-muted-color)}
.hm-art{position:relative;width:100%;max-width:1280px;height:var(--voice-art-height,540px);margin:var(--motion-art-gap) auto 0;overflow:hidden}
.hm-art .mo-visual{left:50%;top:50%}
.hm-art .mo-svg{max-width:none}
.hm-art .mo-voice-balloon{max-width:360px}
.hm-section--voice-agent,.hm-section--radar{background:#f8f9fc}
.hm-section--voice-agent{padding-bottom:0}
.hm-section--voice-agent::before{content:'';position:absolute;inset:0;z-index:-1;opacity:.8;pointer-events:none;background:radial-gradient(circle var(--voice-glow-radius,clamp(350px,52vw,780px)) at 50% 104%,rgba(40,105,237,.62) 0%,rgba(40,105,237,.62) 7%,rgba(112,86,238,.46) 35%,rgba(158,125,249,.23) 50%,rgba(112,86,238,0) 80%)}
.hm-section--radar{padding-bottom:84px}
.hm-pause,.hm-sound{position:absolute;left:calc(50% - 95px);top:calc(50% + var(--voice-art-height,420px)*.24);z-index:6;display:grid;place-items:center;width:40px;height:40px;padding:12px;margin:0}
.hm-sound{left:calc(50% - 45px);--g-control-pressed:var(--g-control-surface)}
.hm-art .mo-voice-controls{left:calc(50% + 50px)}
.hm-pause .ml-fa,.hm-sound .ml-fa{width:16px;height:16px;opacity:.72}
.hm-home .ml-story-section{--story-gutter:max(48px,calc((100vw - 1280px)/2))}
.hm-home .ml-stat-experience{margin-inline:auto}
.hm-home .ml-fa{object-fit:contain}
@media(min-width:801px){.hm-section--voice-agent::before{transform:scaleX(1.25);transform-origin:50% 50%}}
@media(max-width:800px){.hm-section{--voice-heading-size:calc(clamp(36px,6vw,48px) + 2px);--voice-glow-radius:clamp(300px,60vw,500px);padding:40px 20px 30px}.hm-section--voice-agent{padding-bottom:0}.hm-section--radar{padding-bottom:60px}.hm-description{font-size:18px}.hm-art .mo-voice-balloon{max-width:400px}.hm-home .ml-story-section{--story-gutter:20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Without JavaScript, keep the original three visible controls centered. */
.hm-art:has(.hm-sound[hidden]) .hm-pause{left:calc(50% - 70px)}
.hm-art:has(.hm-sound[hidden]) .mo-voice-controls{left:calc(50% + 25px)}

/* Let the mobile market scene use the screen width, with buildings near its edges. */
@media(max-width:800px){
 .hm-section--radar .hm-art{pointer-events:none;--radar-art-zoom:1.24;width:calc(100% + 40px);max-width:none;margin-left:-20px;margin-right:-20px;margin-bottom:-48px}
 .hm-section--radar .mo-radar-story-card{width:calc((100vw - 40px)/var(--mo-scale,.9))}
}
