/* ARS KIT v1: the home page motion + Magic UI layer, made generic for every custom-block page.
   ars-kit.js tags the page root (.ak) and the parts it finds; with no JS, or reduced motion, nothing here applies.
   P = :is([id^="ars-"],#ak-x).ak. :is() takes its highest argument's specificity (an id), so these rules beat
   each page's own "#ars-xx .rv" rules without !important. */

@keyframes ak-word   { from { transform: translateY(.5em); } to { transform: none; } }
@keyframes ak-prog   { to { transform: scaleX(1); } }
@keyframes ak-ray    { 0%, 100% { opacity: 0; transform: rotate(-3deg); } 50% { opacity: 1; transform: rotate(3deg); } }
@keyframes ak-meteor { 0% { transform: translateX(0); opacity: 1; } 70% { opacity: 1; } 100% { transform: translateX(-640px); opacity: 0; } }
@keyframes ak-bb     { to { offset-distance: 100%; } }
@keyframes ak-ping   { from { transform: scale(1); opacity: .9; } to { transform: scale(1.8); opacity: 0; } }

/* scroll progress bar + cursor aura (both injected into body) */
.ak-prog { display: none; position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 100000; pointer-events: none;
    background: linear-gradient(90deg, #00e5ff 0%, #19d3c5 42%, #ffb020 100%); transform: scaleX(0); transform-origin: 0 50%; box-shadow: 0 0 12px rgba(0,229,255,.7); }
@supports (animation-timeline: scroll()) { .ak-prog { display: block; animation: ak-prog linear both; animation-timeline: scroll(root); } }
.ak-aura { position: fixed; left: 0; top: 0; width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 50%; pointer-events: none; z-index: 1;
    background: radial-gradient(circle, rgba(0,229,255,.1), rgba(47,123,255,.045) 35%, transparent 65%); mix-blend-mode: screen; opacity: 0; transition: opacity .6s; will-change: transform; }
.ak-aura.on { opacity: 1; }

/* reveal: blur-rise for copy, 3D rise for cards; .ak-done drops stagger + slow timing so hovers stay snappy */
:is([id^="ars-"],#ak-x).ak .rv { transition-property: opacity, transform, filter, border-color, box-shadow, background-color, rotate;
    transition-duration: .9s, .9s, .9s, .35s, .45s, .35s, .45s; transition-timing-function: cubic-bezier(.16,1,.3,1); }
:is([id^="ars-"],#ak-x).ak .rv.ak-done { transition-duration: .9s, .45s, .9s, .35s, .45s, .35s, .45s; transition-delay: 0s; }
:is([id^="ars-"],#ak-x).ak.rv-init .rv:not(.on) { filter: blur(6px); }
:is([id^="ars-"],#ak-x).ak.rv-init .ak-g.rv:not(.on) { transform: perspective(1000px) translateY(48px) rotateX(9deg) scale(.97); filter: none; }
:is([id^="ars-"],#ak-x).ak.rv-init .ak-hero .rv:not(.on) { filter: none; }

/* hero: headline words rise in (transform only, so LCP is unaffected), light rays over the backdrop */
:is([id^="ars-"],#ak-x).ak .ak-split .w { display: inline-block; animation: ak-word 1s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(var(--i) * 55ms + 120ms); }
:is([id^="ars-"],#ak-x).ak .ak-split .w.ak-wg { display: inline; animation: none; }   /* a whole gradient phrase as inline-block can't wrap mid-phrase: it added an H1 line after paint (CLS) */
:is([id^="ars-"],#ak-x).ak .ak-hero { isolation: isolate; }
:is([id^="ars-"],#ak-x).ak .ak-rays { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.ak-rays i { position: absolute; top: -14%; height: 78%; width: 230px; border-radius: 50%; transform-origin: 50% 0; opacity: 0;
    background: radial-gradient(50% 60% at 50% 0, rgba(120,205,255,.14), transparent); animation: ak-ray 13s ease-in-out infinite; }
.ak-rays i:nth-child(1) { left: 8%;  rotate: -16deg; animation-delay: -2s; }
.ak-rays i:nth-child(2) { left: 30%; rotate: -6deg;  animation-delay: -7s; width: 180px; }
.ak-rays i:nth-child(3) { left: 52%; rotate: 8deg;   animation-delay: -4s; }
.ak-rays i:nth-child(4) { left: 70%; rotate: 16deg;  animation-delay: -10s; width: 280px; }
.ak-rays i:nth-child(5) { left: 86%; rotate: 24deg;  animation-delay: -1s; width: 190px; }

/* section headings fill word by word as they scroll up */
:is([id^="ars-"],#ak-x).ak .ak-fill .w { opacity: .16; transition: opacity .4s linear; }
:is([id^="ars-"],#ak-x).ak .ak-fill .w.lit { opacity: 1; }

/* magic-card: cursor spotlight + gradient rim that follows the pointer */
:is([id^="ars-"],#ak-x).ak .ak-g { --mx: 50%; --my: 50%; }
.ak-spot, .ak-rim { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s; }
.ak-spot { z-index: 2; background: radial-gradient(420px circle at var(--mx) var(--my), rgba(0,229,255,.1), transparent 45%); }
.ak-rim { z-index: 3; padding: 1px; background: radial-gradient(300px circle at var(--mx) var(--my), #00e5ff, rgba(255,176,32,.85) 35%, transparent 70%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
@media (hover: hover) {
    :is([id^="ars-"],#ak-x).ak .ak-g:hover > .ak-spot, :is([id^="ars-"],#ak-x).ak .ak-g:hover > .ak-rim { opacity: 1; }
    :is([id^="ars-"],#ak-x).ak .ak-g.rv.on:hover { transform: translateY(-5px); box-shadow: 0 30px 60px rgba(0,0,0,.45), 0 0 44px rgba(0,229,255,.16); }
}
/* 3D tilt: individual rotate composes with the page's own hover transform */
@media (hover: hover) and (pointer: fine) {
    :is([id^="ars-"],#ak-x).ak .ak-3d { perspective: 1200px; }
    :is([id^="ars-"],#ak-x).ak .ak-3d > .ak-t:hover { rotate: var(--ak-rot, 0 0 1 0deg); }
}

/* border-beam: a comet travels the edge of the hero cards */
.ak-bb { position: absolute; inset: 0; z-index: 3; display: none; border-radius: inherit; padding: 1.5px; pointer-events: none;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
@supports (offset-path: rect(0 auto auto 0)) {
    .ak-bb { display: block; }
    .ak-bb::before { content: ''; position: absolute; width: 120px; aspect-ratio: 1; offset-path: rect(0 auto auto 0 round 120px);
        background: linear-gradient(to left, #00e5ff, #ffb020, transparent); animation: ak-bb 7s linear infinite; }
}

/* numbered steps ping once as they arrive */
:is([id^="ars-"],#ak-x).ak .ak-node { position: relative; }
:is([id^="ars-"],#ak-x).ak .ak-node::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid #00e5ff; opacity: 0; pointer-events: none; }
:is([id^="ars-"],#ak-x).ak .on .ak-node::after, :is([id^="ars-"],#ak-x).ak .ak-node.on::after { animation: ak-ping 1.6s ease-out .35s 2; }

/* numbers don't jiggle while counting */
.ak-num { font-variant-numeric: tabular-nums; }

/* meteors in the closing CTA */
:is([id^="ars-"],#ak-x).ak .ak-cta { isolation: isolate; }
:is([id^="ars-"],#ak-x).ak .ak-meteors { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; pointer-events: none; }
.ak-meteors i { position: absolute; top: -6%; width: 2px; height: 2px; border-radius: 50%; background: #d7f6ff; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 0 8px #9eeaff; rotate: 215deg; opacity: 0; animation: ak-meteor linear infinite; }
.ak-meteors i::after { content: ''; position: absolute; top: 50%; left: 0; width: 80px; height: 1px; translate: 0 -50%; background: linear-gradient(90deg, #bfefff, transparent); }
.ak-meteors i:nth-child(1) { left: 12%; animation-duration: 6s;  animation-delay: .4s; }
.ak-meteors i:nth-child(2) { left: 28%; animation-duration: 8s;  animation-delay: 2.2s; }
.ak-meteors i:nth-child(3) { left: 41%; animation-duration: 5s;  animation-delay: 1.1s; }
.ak-meteors i:nth-child(4) { left: 55%; animation-duration: 9s;  animation-delay: 3.4s; }
.ak-meteors i:nth-child(5) { left: 67%; animation-duration: 7s;  animation-delay: .9s; }
.ak-meteors i:nth-child(6) { left: 79%; animation-duration: 6s;  animation-delay: 4.6s; }
.ak-meteors i:nth-child(7) { left: 90%; animation-duration: 10s; animation-delay: 2.8s; }
.ak-meteors i:nth-child(8) { left: 98%; animation-duration: 7s;  animation-delay: 5.5s; }


/* ━━ Money pages (seo / web dev / white label): home-page set pieces, injected by ars-kit.js ━━ */
@keyframes ak-drift { from { transform: scale(1.04) translateY(-1.2%); } to { transform: scale(1.04) translateY(1.2%); } }
@keyframes ak-portal { from { clip-path: circle(14% at var(--cx, 72%) 45%); opacity: .25; } to { clip-path: circle(120% at var(--cx, 72%) 45%); opacity: 1; } }

/* scroll-based velocity band under the hero */
.ak-vel { padding: clamp(26px,4vw,46px) 0; overflow: hidden; border-block: 1px solid rgba(0,229,255,.1); background: linear-gradient(180deg, rgba(47,123,255,.05), transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.ak-vel-row { overflow: hidden; white-space: nowrap; }
.ak-vel-track { display: inline-flex; will-change: transform; }
.ak-vel-blk { display: inline-flex; align-items: center; flex-shrink: 0; }
.ak-vel-blk span { padding: 0 .32em; font: 900 clamp(2.1rem, 6vw, 5rem)/1.12 'Inter', 'Inter Fallback', sans-serif; letter-spacing: -0.035em; color: transparent; -webkit-text-stroke: 1.5px rgba(0,229,255,.5); }
.ak-vel-rev .ak-vel-blk span { -webkit-text-stroke: 0; background: linear-gradient(90deg, #00e5ff 0%, #19d3c5 42%, #ffb020 100%); -webkit-background-clip: text; background-clip: text; opacity: .92; }
.ak-vel-blk b { font-size: clamp(1.1rem, 2.6vw, 2.2rem); color: #ffb020; text-shadow: 0 0 18px rgba(255,176,32,.6); }

/* services header + animated-beam "One Team" hub */
.ak-svh { display: grid; gap: 40px; grid-template-columns: 1fr; align-items: center; margin-bottom: 52px; }
.ak-svh > :first-child { margin-bottom: 0 !important; }
@media (min-width: 1024px) { .ak-svh { grid-template-columns: 1.1fr .9fr; } }
.ak-hub { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 310px; padding: 26px clamp(14px,3vw,34px) 44px; border-radius: 26px;
    border: 1px solid rgba(0,229,255,.14); background: radial-gradient(ellipse 60% 55% at 50% 45%, rgba(0,229,255,.09), transparent 70%), rgba(8,14,32,.4); }
.ak-hub-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.ak-hub-col { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.ak-hub-n { width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; background: #0b1428; border: 1px solid rgba(0,229,255,.24);
    box-shadow: 0 12px 26px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.04) inset; transition: transform .4s cubic-bezier(.16,1,.3,1), border-color .3s; }
.ak-hub-n:hover { transform: translateY(-3px) scale(1.06); border-color: rgba(0,229,255,.6); }
.ak-hub-n svg { width: 28px; height: 28px; }
.ak-hub-core { position: relative; z-index: 1; width: 118px; height: 118px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
    background: radial-gradient(circle at 50% 30%, #16294f, #081022); border: 1px solid rgba(0,229,255,.55); box-shadow: 0 0 40px rgba(0,229,255,.35), 0 0 90px rgba(47,123,255,.25); }
.ak-hub-core img { width: 66px; height: 66px; object-fit: contain; }
.ak-hub-ring { position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgba(0,229,255,.55); animation: ak-ping 3s ease-out infinite; pointer-events: none; }
.ak-hub-ring + .ak-hub-ring { animation-delay: 1.5s; }
.ak-hub-cap { position: absolute; bottom: -30px; left: 50%; translate: -50% 0; white-space: nowrap; font: 800 10px/1 'Inter', 'Inter Fallback', sans-serif; letter-spacing: 2.4px; text-transform: uppercase; color: rgba(255,255,255,.5); }
.ak-hub-core .ak-hub-cap { bottom: -34px; color: #00e5ff; }
@media (max-width: 560px) {
    .ak-hub { min-height: 250px; padding-inline: 12px; }
    .ak-hub-n { width: 46px; height: 46px; border-radius: 13px; } .ak-hub-n svg { width: 22px; height: 22px; }
    .ak-hub-core { width: 92px; height: 92px; } .ak-hub-core img { width: 50px; height: 50px; }
}

/* mascot scene art: backdrop right of the copy on desktop, stacked block above it below 1280px */
:is([id^="ars-"],#ak-x).ak .ak-scn { overflow: clip; isolation: isolate; }
.ak-scene { position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 1672 / 941; max-height: min(100%, var(--ak-sh, 100%)); z-index: -1; pointer-events: none; overflow: clip; }
.ak-scene picture { display: block; width: 100%; height: 100%; }
.ak-scene img { display: block; width: 100%; height: 100%; max-width: none !important; object-fit: cover; object-position: 68% 20%; }
.ak-scene { -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 30%, #000 62%), linear-gradient(180deg, transparent 0, #000 12%, #000 62%, transparent 100%);
    -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, transparent 30%, #000 62%), linear-gradient(180deg, transparent 0, #000 12%, #000 62%, transparent 100%); mask-composite: intersect; }
.ak-scene-box { top: auto; bottom: 1px; left: auto; right: 1px; width: 88%; max-height: calc(100% - 2px); border-radius: inherit;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 22%, #000 52%), linear-gradient(180deg, transparent 0, #000 18%, #000 80%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, transparent 22%, #000 52%), linear-gradient(180deg, transparent 0, #000 18%, #000 80%, transparent 100%); }
@supports (animation-timeline: view()) {
    .ak-scene img { animation: ak-drift linear both; animation-timeline: view(); transform-origin: 100% 100%; }
    .ak-scn > .ak-scene { animation: ak-portal linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
}
@media (min-width: 1280px) {
    :is([id^="ars-"],#ak-x).ak .ak-scn .ak-l { margin-left: 0 !important; }
    :is([id^="ars-"],#ak-x).ak .ak-scn .ak-sh { max-width: 640px; }
    :is([id^="ars-"],#ak-x).ak .ak-scn-box h2, :is([id^="ars-"],#ak-x).ak .ak-scn-box p { max-width: 520px; margin-left: 0 !important; margin-right: 0 !important; text-align: left !important; }
    :is([id^="ars-"],#ak-x).ak .ak-scn-box { text-align: left; }
}
@media (max-width: 1279px) {
    :is([id^="ars-"],#ak-x).ak .ak-scn { padding-top: 0 !important; }
    .ak-scene { position: relative; aspect-ratio: auto; max-height: none; margin-bottom: 28px; }
    .ak-scene img { aspect-ratio: 1672 / 941; height: auto; object-position: center; }
    .ak-scene, .ak-scene-box { -webkit-mask-image: linear-gradient(180deg, #000 65%, transparent 98%); mask-image: linear-gradient(180deg, #000 65%, transparent 98%); }
    .ak-scene-box { bottom: auto; right: auto; z-index: 0; width: calc(100% + 2 * var(--ak-pl, 0px)); margin: calc(-1 * var(--ak-pt, 0px)) 0 24px calc(-1 * var(--ak-pl, 0px));
        border-radius: inherit; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
}
@media (max-width: 767px) { .ak-scene img { aspect-ratio: 3 / 4; object-position: center 45%; } }

/* why-us tracing beam: fills with scroll, cards light up as it passes */
.ak-trace { position: absolute; left: var(--ak-x, 28px); top: 30px; bottom: 30px; width: 2px; margin-left: -1px; pointer-events: none; }
.ak-trace::before, .ak-trace::after { content: ''; position: absolute; inset: 0; border-radius: 2px; }
.ak-trace::before { background: rgba(0,229,255,.12); }
.ak-trace::after { background: linear-gradient(180deg, transparent, #00e5ff 20%, #19d3c5 60%, #ffb020); transform-origin: 50% 0; transform: scaleY(var(--p, 0)); box-shadow: 0 0 12px rgba(0,229,255,.6); }
:is([id^="ars-"],#ak-x).ak .ak-trc > .ak-g { transition-property: opacity, transform, filter, border-color, box-shadow; }
:is([id^="ars-"],#ak-x).ak .ak-trc > .ak-lit { border-color: rgba(0,229,255,.55); box-shadow: 0 0 0 1px rgba(0,229,255,.15), 0 0 34px rgba(0,229,255,.12); }

/* FAQ: sticky question panel on the left, answers on the right */
@media (min-width: 1024px) {
    :is([id^="ars-"],#ak-x).ak .ak-fqw { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: start; max-width: 1300px; }
    :is([id^="ars-"],#ak-x).ak .ak-fqw > * { grid-column: 2; min-width: 0; margin-left: 0 !important; margin-right: 0 !important; max-width: none; }
    :is([id^="ars-"],#ak-x).ak .ak-fqw > .ak-fqh { grid-column: 1; position: sticky; top: calc(var(--ars-hd-h, 76px) + 32px); margin-bottom: 0 !important; }
}

@media (prefers-reduced-motion: reduce) { .ak-prog, .ak-aura, .ak-rays, .ak-meteors, .ak-bb { display: none !important; } }