.cta-modern {
    display: inline-block;
    padding: 1rem 2.5rem;
    font-size: 1.2rem;
    font-weight: 300;
    font-family: "Epilogue", sans-serif;;
    /*border-radius: 999px;*/
    color: #fff;
    text-decoration: none;
    background: linear-gradient(135deg, #ff6a00, #e77908);
    box-shadow: 0 8px 20px rgba(255, 106, 0, 0.4);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    backdrop-filter: blur(8px);       /* glassy vibe */
}

.cta-modern::before {
    content: "";
    position: absolute;
    top: 0; left: -100%;
    width: 200%; height: 100%;
    background: linear-gradient(120deg,
    transparent,
    rgba(255,255,255,0.4),
    transparent);
    transform: skewX(-20deg);
}

.cta-modern:hover::before {
    animation: shine 1.2s ease forwards;
}

@keyframes shine {
    0% { left: -100%; }
    100% { left: 100%; }
}

.cta-modern:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 12px 28px rgba(255, 0, 127, 0.4);
}

/* Large-ish tablets down */
@media (max-width: 1200px) {
    .cta-modern {
        font-size: 0.95rem;
    }
}

/* Tablets */
@media (max-width: 992px) {
    .cta-modern {
        font-size: 0.9rem;
    }
}

/* Small tablets / big phones */
@media (max-width: 768px) {
    .cta-modern {
        font-size: 0.85rem;
    }
}

/* Phones */
@media (max-width: 560px) {
    .cta-modern {
        font-size: 0.8rem;
        /* slight padding tweak so it keeps the same proportions on small screens */
        padding: 0.75rem 1.25rem;
    }
}

/* Very small phones */
@media (max-width: 420px) {
    .cta-modern {
        font-size: 0.78rem;
        padding: 0.65rem 1rem;
        min-width: 160px; /* prevents text wrapping while keeping your look */
    }
}

/* If the CTA lives in the bio block and should align left there */
.bio_container .cta-modern {
    /*align-self: start;*/
    align-content: center;
    margin-top: 1.25rem; /* adjust if you need a bit more/less space */
}

/* Respect reduced motion without changing your design */
@media (prefers-reduced-motion: reduce) {
    .cta-modern,
    .cta-modern::before {
        animation: none;
        transition: none;
    }
}

/* Responsive sizing and centering rules (non-destructive) */


/* Slight scaling adjustments */
@media (max-width: 1200px) {
    .bio_container .cta-modern { font-size: 0.95rem; }
}

@media (max-width: 992px) {
    .bio_container .cta-modern { font-size: 0.9rem; }
}

/* Tablets and smaller → center align */
@media (max-width: 820px) {
/*    .bio_container .cta-modern {*/
/*        display: flex;*/
/*        margin: 2rem auto 0 auto; !* centers horizontally *!*/
/*        font-size: 0.85rem;*/
/*        justify-content: center;*/
/*    }*/
}

/* Small phones */
@media (max-width: 560px) {
    .bio_container .cta-modern {
        font-size: 0.8rem;
        padding: 0.75rem 1.25rem;
        min-width: 160px;
        margin: 1.5rem auto 0 auto; /* centered still */
        text-align: center;
    }
}

/* Very small phones */
@media (max-width: 420px) {
    .bio_container .cta-modern {
        font-size: 0.75rem;
        padding: 0.65rem 1rem;
        margin: 1.2rem auto 0 auto;
        text-align: center;
    }
}