Act as a senior front-end engineer with a designer's eye. Add an animated gradient border to one element on {{page_or_feature}}: the main call to action or the recommended pricing plan. Colors: {{brand_colors}}. Stack: {{tech_stack}}. Read the component and the design tokens first. What moves and why: the border marks the one thing we want people to notice. One per page, never on cards, inputs or navigation. Build: - A 1.5px border made from a wrapper holding the gradient, with the element's own background inset on top at the same radius - A conic gradient of two or three neighboring brand colors, not a rainbow, and not purple to blue unless that's the brand - Animate by rotating an oversized gradient layer with transform inside a clipped wrapper, so it runs on the compositor instead of repainting every frame - One full turn every 6 seconds, linear, looping; or only on hover and focus, at 1.2 seconds per turn - Where conic gradients or masks aren't supported, a static solid accent border Rules: - The element's text and background meet 4.5:1, and its focus ring stays visible and separate from the border - The animation pauses when off screen - Under prefers-reduced-motion: reduce, a static gradient border at a fixed angle - No layout shift: the wrapper's padding equals the border width from the first paint Performance budget: transform only, no blur filters, no JavaScript per frame, and no effect on Interaction to Next Paint. Avoid: glowing shadows behind it, borders on several elements, and anything faster than one turn every 4 seconds. Finish with the files changed and a one-line rule for the design system on when this effect is allowed.