@property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

.pricing-card-animated {
    position: relative;
    background: #fff;
    z-index: 1;
    overflow: visible;
}

.pricing-card-animated::before,
.pricing-card-animated::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    padding: 3px;
    background: conic-gradient(
        from var(--angle),
        transparent 0%,
        #0ea5e9 10%,
        #6366f1 20%,
        #ec4899 30%,
        #f97316 40%,
        transparent 50%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    z-index: -1;
    animation: spin-border 3s linear infinite;
}

.pricing-card-animated::after {
    filter: blur(12px);
    opacity: 0.6;
}

@keyframes spin-border {
    from { --angle: 0deg; }
    to { --angle: 360deg; }
}

/* Dark mode support */
[data-theme="dark"] .pricing-card-animated,
.dark .pricing-card-animated {
    background: #1a1a2e;
}