/* Asf Animated Process Steps — structure + states. Animated props: transform / opacity / filter only. */
.aps{ --aps-line:#00C5F6; --aps-size:88px; --aps-per:3; position:relative; }
.aps *{ box-sizing:border-box; }
.aps__head{ text-align:center; max-width:760px; margin:0 auto 54px; }
.aps__title{ font-size:clamp(26px,3.4vw,42px); line-height:1.15; font-weight:700; margin:0 0 12px; color:#101828; }
.aps__title .aps__hl{ color:var(--aps-line); }
.aps__sub{ font-size:16px; line-height:1.55; color:#667085; margin:0; }
.aps__stage{ position:relative; }
.aps__svg{ position:absolute; top:0; left:0; overflow:visible; pointer-events:none; z-index:0; }
.aps__grid{ position:relative; display:grid; grid-template-columns:repeat(var(--aps-per,3),1fr);
  column-gap:var(--aps-colgap,120px); row-gap:var(--aps-rowgap,96px); z-index:1; }
.aps__step{ position:relative; display:flex; flex-direction:column; align-items:center; gap:16px; justify-self:center; }
.aps__tilewrap{ position:relative; width:var(--aps-size,88px); height:var(--aps-size,88px); }
.aps__glow{ position:absolute; inset:-20%; border-radius:34%; opacity:.9; z-index:0; will-change:opacity;
  background:radial-gradient(closest-side, var(--glow,#7fd1ff), rgba(0,0,0,0) 78%); filter:blur(11px); }
.aps__tile{ position:relative; width:100%; height:100%; border-radius:calc(var(--aps-size,88px)*0.27);
  background:var(--bg,#dff1ff); display:grid; place-items:center; z-index:1; will-change:transform,filter;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35); }
.aps__num{ font-size:calc(var(--aps-size,88px)*0.34); font-weight:800; color:#1a2233; letter-spacing:.01em; line-height:1; }
.aps__badge{ position:absolute; top:0; left:50%; transform:translate(-50%,-55%);
  width:calc(var(--aps-size,88px)*0.42); height:calc(var(--aps-size,88px)*0.42); border-radius:50%;
  background:#12161f; color:#fff; display:grid; place-items:center; z-index:2; will-change:transform,opacity;
  box-shadow:0 6px 16px -6px rgba(0,0,0,.5); }
.aps__badge svg{ width:52%; height:52%; fill:#fff; display:block; }
.aps__badge i{ font-size:calc(var(--aps-size,88px)*0.2); color:#fff; line-height:1; }
.aps__badge img{ width:56%; height:56%; object-fit:contain; display:block; }
.aps__cap{ font-size:15px; font-weight:600; color:#344054; text-align:center; max-width:200px; }
.aps__desc{ font-size:13px; line-height:1.45; font-weight:400; color:#667085; text-align:center; max-width:220px; margin-top:-8px; }
.aps__svg .aps-base,.aps__svg .aps-color{ vector-effect:non-scaling-stroke; }

/* Default (no-JS / reduced-motion) = final coloured state (rules above).
   When JS will scroll-animate it adds .aps--anim → tiles start neutral, .is-active → final. */
.aps--anim .aps__tile{ filter:grayscale(1); transform:scale(.92);
  transition:filter .5s ease, transform .5s cubic-bezier(.34,1.56,.64,1); }
.aps--anim .aps__glow{ opacity:0; transition:opacity .5s ease; }
.aps--anim .aps__badge{ filter:grayscale(1); opacity:.4; transform:translate(-50%,-55%) scale(.8);
  transition:filter .4s ease, opacity .4s ease, transform .4s cubic-bezier(.34,1.56,.64,1); }
.aps--anim .aps__step.is-active .aps__tile{ filter:none; transform:scale(1); }
.aps--anim .aps__step.is-active .aps__glow{ opacity:.95; }
.aps--anim .aps__step.is-active .aps__badge{ filter:none; opacity:1; transform:translate(-50%,-55%) scale(1); }

/* Mobile zigzag: tiles alternate left/right, captions stay narrow & under their tile so the
   centre-routed connector doesn't overlap text. */
@media (max-width:767px){
  .aps--zig .aps__step{ gap:12px; justify-self:center; }
  .aps--zig .aps__cap{ max-width:150px; font-size:14px; }
  .aps--zig .aps__desc{ max-width:150px; font-size:12px; }
}