/* MotionMind service artwork. Shared markup keeps the two pages in sync. */
.mm-preview {
    width: 100%; min-width: 0; padding: 10px;
    border: 1px solid rgba(124,108,255,.35); border-radius: 22px;
    background: var(--surface); color: var(--text);
    box-shadow: 0 18px 45px rgba(0,0,0,.18);
}
.mm-preview-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 30px; padding: 0 7px; color: var(--muted); font-size: 11px; }
.mm-preview-dots { display: flex; gap: 5px; }
.mm-preview-dots i { width: 5px; height: 5px; background: #73738d; border-radius: 50%; }
.mm-preview-scene { min-height: 270px; padding: 20px 16px; display: grid; align-content: center; gap: 14px; border-radius: 14px; background: radial-gradient(ellipse at 65% 20%,rgba(124,108,255,.19),transparent 65%),#090914; }
.mm-preview-window { min-width: 0; padding: 16px; border: 1px solid rgba(255,255,255,.13); border-radius: 12px; background: #151527; box-shadow: 0 12px 24px rgba(0,0,0,.25); }
.mm-preview-nav { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); color: #c4bfdc; font-size: 11px; }
.mm-preview-heading { font: 500 clamp(1.25rem,2.1vw,1.75rem)/1.1 var(--display); letter-spacing: -.04em; margin: 16px 0 12px; }
.mm-preview-orb { width: 68px; height: 68px; margin: 14px auto 20px; border-radius: 20px; transform: rotate(-12deg); background: linear-gradient(135deg,#b2aaff,var(--primary) 45%,#183e71); box-shadow: inset 0 0 15px rgba(255,255,255,.25),0 12px 25px rgba(124,108,255,.25); }
.mm-preview-lines { margin: 12px 0; }
.mm-preview-lines i { display: block; width: 90%; height: 5px; margin: 7px 0; border-radius: 8px; background: rgba(255,255,255,.16); }
.mm-preview-lines i:nth-child(2) { width: 60%; }
.mm-preview-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px; border: 1px solid rgba(124,108,255,.35); border-radius: 7px; color: #cec7ff; background: rgba(124,108,255,.16); font-size: 11px; }
.mm-preview svg { flex-shrink: 0; width: 14px; height: 14px; }
.mm-preview-tiles { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin: 16px 0; }
.mm-preview-tiles > div { min-width: 0; padding: 12px 4px; border: 1px solid rgba(255,255,255,.07); border-radius: 8px; text-align: center; font-size: 11px; color: #cbc8e5; background: #202039; overflow-wrap: anywhere; }
.mm-preview-company span { display: block; margin-bottom: 18px; color: #aaa2ff; font: 500 15px var(--display); }
.mm-preview-products i { display: block; width: 30px; height: 38px; margin: 4px auto 10px; border-radius: 8px; background: linear-gradient(150deg,#b2aaff,var(--primary),#45caff); box-shadow: inset 0 0 10px rgba(255,255,255,.25); }
.mm-preview-products > div:nth-child(2) i { border-radius: 50%; width: 34px; height: 34px; margin-bottom: 14px; }
.mm-preview-products > div:nth-child(3) i { transform: rotate(-10deg); }
.mm-preview-search { display: flex; gap: 10px; align-items: center; padding: 12px; border: 1px solid rgba(124,108,255,.4); border-radius: 10px; color: #c5c0e2; background: #151527; font-size: 12px; }
.mm-preview-result + .mm-preview-result { padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--line); }
.mm-preview-result > span { display: block; color: var(--cta); font-size: 11px; margin-bottom: 7px; }
.mm-preview-result strong { color: #b2aaff; font: 500 15px/1.3 var(--display); }
.mm-preview-phone { width: 190px; max-width: 100%; margin: auto; padding: 14px; border: 1px solid rgba(124,108,255,.4); border-radius: 24px; background: var(--surface); box-shadow: 10px 12px 0 rgba(124,108,255,.08); }
.mm-preview-phone .mm-preview-heading { font-size: 1.35rem; }
.mm-preview-notch { width: 42px; height: 5px; border-radius: 6px; margin: 0 auto 16px; background: rgba(255,255,255,.18); }
.mm-preview-app-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px; margin: 8px 0; border-radius: 8px; background: #202039; color: #cbc8e5; font-size: 11px; }
.mm-preview-code { padding: 16px 0 0; font: 12px/1.9 ui-monospace,Consolas,monospace; color: #c4bfdc; overflow-wrap: anywhere; }
.mm-preview-code em { font-style: normal; color: var(--cta); }
.mm-preview-nav .mm-preview-connected { color: var(--cta); }
.mm-preview-flow { display: flex; justify-content: center; align-items: center; gap: 6px; }
.mm-preview-flow span { padding: 8px; border: 1px solid rgba(124,108,255,.35); border-radius: 8px; background: #1c1932; color: #cec7ff; font-size: 11px; }
.mm-preview-flow i { height: 1px; flex: 1 1 8px; max-width: 24px; background: var(--secondary); }
.mm-preview-caption { padding-top: 8px; text-align: right; font-size: 10px; color: #aaaabd; letter-spacing: .05em; }

/* Services: inline illustrations are the baseline, including without JavaScript. */
.mm-story-preview { max-width: 510px; margin: 22px 0 28px; }
.mm-service-showcase { display: none; }
.mm-service-showcase [hidden] { display: none !important; }
.mm-services-page .service-story { scroll-margin-top: 14px; }
.mm-service-panel-title { font: 600 clamp(1.4rem,2vw,1.9rem)/1.15 var(--display); letter-spacing: -.035em; margin: 20px 0 12px; }
.mm-service-panel-index { color: #b2aaff; font-size: 12px; letter-spacing: .12em; }
.mm-service-selector { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.mm-service-selector a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: var(--surface); font: 500 .8rem var(--display); transition: background .2s,border-color .2s,color .2s; }
.mm-service-selector a:hover { border-color: #a99fff; color: var(--text); }
.mm-service-selector a[aria-current="true"] { border-color: var(--primary); background: #282042; color: #e4deff; }
@media (min-width:1001px) {
    .mm-services-page:not(.mm-service-enhanced) .service-journey-grid { grid-template-columns: minmax(0,1fr); }
    .mm-service-enhanced .mm-story-preview { display: none; }
    .mm-service-enhanced .mm-service-showcase { display: block; position: sticky; top: 110px; align-self: start; padding-block: 16px; }
    .mm-service-showcase .mm-preview-scene { min-height: 300px; }
}
@media (min-width:1001px) and (max-height:780px) {
    .mm-service-enhanced .mm-service-showcase { top: 96px; padding-block: 0; }
    .mm-service-showcase .mm-preview-scene { min-height: 240px; padding-block: 12px; }
    .mm-service-showcase .mm-preview-orb { width: 48px; height: 48px; margin-block: 10px; }
    .mm-service-showcase .mm-preview-phone { padding: 10px 14px; }
    .mm-service-showcase .mm-preview-heading { font-size: 1.3rem; margin-block: 12px; }
    .mm-service-showcase .mm-preview-app-row { padding: 7px; }
    .mm-service-showcase .mm-service-panel-title { font-size: 1.4rem; margin-block: 12px 8px; }
    .mm-service-showcase .mm-service-selector { margin-top: 12px; }
}
@media (min-width:1001px) and (max-height:620px) {
    .mm-service-enhanced .service-journey-grid { grid-template-columns: minmax(0,1fr); }
    .mm-service-enhanced .mm-story-preview { display: block; }
    .mm-service-enhanced .mm-service-showcase { display: none; }
}

/* Homepage: the six previews are visible in a normal responsive grid. */
.mm-home-services { background: #0b0b17; }
.mm-home-services .section-head > div { max-width: 780px; }
.mm-home-services .section-head p { color: var(--muted); max-width: 650px; }
.mm-home-services .section-head > .text-link { flex-shrink: 0; min-height: 44px; }
.mm-home-services-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.mm-home-service { min-width: 0; padding: 12px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 26px; background: var(--surface); transition: border-color .2s,box-shadow .2s; }
.mm-home-service:hover,.mm-home-service:focus-within { border-color: rgba(124,108,255,.6); box-shadow: 0 20px 40px rgba(0,0,0,.2); }
.mm-home-service .mm-preview { border: 0; border-radius: 16px; padding: 0; box-shadow: none; }
.mm-home-service .mm-preview-scene { min-height: 360px; padding: 18px 12px; }
.mm-home-service-copy { padding: 24px 12px 12px; display: flex; flex: 1; flex-direction: column; align-items: flex-start; }
.mm-home-service .card-number { color: #b2aaff; font-size: .75rem; letter-spacing: .12em; }
.mm-home-service h3 { font: 600 clamp(1.45rem,2vw,1.85rem)/1.13 var(--display); letter-spacing: -.035em; overflow-wrap: anywhere; margin: 14px 0 0; }
.mm-home-service-copy > p { font-size: .94rem; color: var(--muted); margin: 14px 0 22px; }
.mm-home-service .text-link { min-height: 44px; padding-block: 8px; }
.mm-home-service .text-link svg { flex-shrink: 0; }
.mm-home-services-footer { display: flex; justify-content: space-between; align-items: center; gap: 24px; border-top: 1px solid var(--line); padding-top: 32px; margin-top: 40px; }
.mm-home-services-footer p { font: 500 clamp(1.25rem,2vw,1.6rem)/1.25 var(--display); margin: 0; }
.mm-home-services-footer .button { flex-shrink: 0; }
@media (max-width:1100px) { .mm-home-services-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width:650px) {
    .mm-home-services-grid { grid-template-columns: minmax(0,1fr); gap: 20px; }
    .mm-home-services .section-head { flex-direction: column; align-items: flex-start; gap: 12px; }
    .mm-home-service-copy { padding: 20px 12px 12px; }
    .mm-home-service .mm-preview-scene { min-height: 270px; }
    .mm-home-service .mm-preview-heading { font-size: 1.5rem; }
    .mm-home-service .mm-preview-phone .mm-preview-heading { font-size: 1.35rem; }
    .mm-home-services-footer { align-items: flex-start; flex-direction: column; }
    .mm-home-services-footer .button { width: 100%; }
}
@media (prefers-reduced-motion:reduce) {
    .mm-home-service,.mm-service-selector a { transition: none; }
}