/* Ava Desk motion graphics (anime.js). Static markup is the finished state; graphics.js animates it. */
.gfx { position: absolute; inset: 0; display: grid; place-items: center; padding: clamp(10px, 2.5%, 28px); }
.gfx svg { width: 100%; height: 100%; display: block; overflow: visible; }
.gfx text { font-family: "DM Mono", ui-monospace, monospace; }
.gfx .t-title { font-family: "Urbanist", system-ui, sans-serif; }
.gfx [data-g] { transform-box: fill-box; transform-origin: center; }
.gfx-pause { position: absolute; right: 12px; bottom: 12px; z-index: 3; width: 34px; height: 34px; border-radius: 999px; border: 1px solid rgb(255 255 255 / .28); background: rgb(1 3 13 / .72); color: #f4f7fc; display: grid; place-items: center; cursor: pointer; }
.gfx-pause:hover { background: rgb(1 3 13 / .92); }
.gfx-pause:focus-visible { outline: 2px solid #6db0ff; outline-offset: 2px; }
.gfx-pause svg { width: 14px; height: 14px; }
.gfx-pause .i-play { display: none; }
.gfx-pause[aria-pressed="true"] .i-play { display: block; }
.gfx-pause[aria-pressed="true"] .i-pause { display: none; }
.gfx-prep [data-g="in"] { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .gfx-pause { display: none; } }

/* Focus cards and get-started steps */
.focus { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5, 24px); }
.focus__card a { display: grid; gap: 10px; align-content: start; height: 100%; color: inherit; text-decoration: none; transition: transform .2s; }
.focus__card a:hover { transform: translateY(-2px); }
.focus__card a:focus-visible { outline: 2px solid #6db0ff; outline-offset: 4px; border-radius: 16px; }
.focus__img { display: block; aspect-ratio: 4 / 3; border-radius: var(--r-lg, 16px); overflow: hidden; border: 1px solid rgb(255 255 255 / .1); background: #040917; margin-bottom: 6px; }
.focus__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.focus__card a:hover .focus__img img { transform: scale(1.03); }
.focus__card h3 { font-size: 22px; line-height: 1.2; margin: 0; }
.focus__card p { margin: 0; color: var(--p-muted); font-size: 16px; line-height: 1.45; }
.focus__more { color: #6db0ff; font-size: 15px; text-decoration: underline; text-underline-offset: 4px; }
.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5, 24px); }
.steps li { counter-increment: s; position: relative; padding: 32px 28px; min-height: 300px; border-radius: var(--r-lg, 16px); border: 1px solid rgb(255 255 255 / .12); background: linear-gradient(180deg, rgb(61 147 255 / .1), rgb(61 147 255 / .02)); }
.steps li::before { content: counter(s); display: grid; place-items: center; width: 56px; height: 56px; border-radius: 999px; background: var(--p-accent); color: var(--p-accent-ink); font-family: var(--font-mono); font-size: 20px; margin-bottom: 72px; }
.steps li:not(:last-child)::after { content: ""; position: absolute; top: 59px; left: 100px; right: -29px; height: 2px; background: linear-gradient(90deg, #3d93ff, rgb(61 147 255 / .15)); }
.steps h3 { font-size: 26px; line-height: 1.2; margin: 0 0 8px; }
.steps p { margin: 0; color: var(--p-muted); font-size: 16px; line-height: 1.45; }
.start { background: linear-gradient(180deg, rgb(1 3 13 / .82), rgb(1 3 13 / .9)), url(media/cta.jpg) center / cover no-repeat; }
.svc { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5, 24px); }
.svc > li { padding: 24px; border-radius: var(--r-lg, 16px); border: 1px solid rgb(255 255 255 / .12); background: rgb(6 12 27 / .8); }
.svc h3 { font-size: 22px; line-height: 1.2; margin: 0 0 14px; }
.svc ul { margin: 0; padding-left: 18px; display: grid; gap: 8px; color: var(--p-muted); font-size: 16px; line-height: 1.4; }
.svc-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
@media (max-width: 1023px) { .focus, .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .svc { grid-template-columns: repeat(2, minmax(0, 1fr)); } .steps li::after { display: none; } }
@media (max-width: 639px) { .focus, .steps, .svc { grid-template-columns: 1fr; } .focus__img { aspect-ratio: 16 / 9; } }
@media (max-width: 1023px) { .steps li { min-height: 0; } .steps li::before { margin-bottom: 24px; width: 44px; height: 44px; font-size: 16px; } }
@media (max-width: 639px) { .svc { gap: 12px; } .svc > li { padding: 16px 18px; } .svc h3 { font-size: 20px; margin-bottom: 8px; } .svc ul { gap: 4px; font-size: 15px; } }