/* assets/css/3d-button.css - Enhanced Robustness */
.cta-box-3d {
    --border-radius: 30px;
    --bg: #3A3544;
    --color: #D0BCFF;
    --deg: 30deg;
    perspective: 300px !important;
    transform-origin: top center !important;
    display: inline-block !important;
    text-align: center !important;
    outline: none !important;
    border: none !important;
    background: none !important;
    text-decoration: none !important;
    cursor: pointer !important;
    margin-top: 20px;
}

.cta-button-3d {
    transform-style: preserve-3d !important;
    transform: rotateY(var(--deg)) !important;
    transition: all 800ms ease-in-out !important;
    border-radius: var(--border-radius) !important;
    font-style: normal !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    padding: 15px 40px !important;
    background: var(--bg) !important;
    color: var(--color) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
    text-decoration: none !important;
}

.cta-box-3d:hover .cta-button-3d {
    transform: rotateY(calc(-1 * var(--deg))) !important;
}

.cta-box-3d:active .cta-button-3d {
    transform: rotateY(calc(-1 * var(--deg) / 3)) !important;
}

.cta-box-3d.primary {
    --bg: #1e1b4b;
    --color: #a5b4fc;
}