.gradient-bg {
    width: 300px;
    height: 300px;
    border-radius: 40px;
    background: linear-gradient(
        to right,
        #2d2dd4 0%,
        #1f1f8a 50%,
        #0d6efd 50%,
        #2d2dd4 100%
    );
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.star-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    transform: translate(-50%, -50%) rotate(-90deg); /* fixed center */
}

.star {
    position: absolute;
    left: 50%;
    top: 40%;
    font-size: 16px;
    color: gold;
    transform: rotate(calc(var(--i) * 30deg)) translate(0, -60px)
        rotate(calc(var(--i) * -30deg));
    transform-origin: center;
}

.phone-frame {
    width: 100%;
    border: none;
    box-shadow: none;
    margin: 0;
    border-radius: 0;
    min-height: auto;
}

/* Desktop: simulate phone view inside frame */
@media (min-width: 768px) {
    .phone-frame {
        max-width: 390px;
        margin: 40px auto;
        border: 12px solid #333;
        border-radius: 32px;
        box-shadow: 0 0 20px rgba(0,0,0,0.5);
        overflow: hidden;
        min-height: 800px;
        background: #000;
    }
}   

@media screen {
    .row-cols-md-4 > * {
        width: 50% !important;
    }
}