/* Stars overlay — decorative scattered dots */
.stars {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.stars::before,
.stars::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1px 1px at 45px 89px, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 132px 234px, rgba(255,255,255,0.3), transparent),
        radial-gradient(1.5px 1.5px at 278px 56px, rgba(255,255,255,0.85), transparent),
        radial-gradient(1px 1px at 410px 178px, rgba(255,255,255,0.2), transparent),
        radial-gradient(1px 1px at 523px 412px, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 67px 534px, rgba(255,255,255,0.45), transparent),
        radial-gradient(1px 1px at 890px 102px, rgba(255,255,255,0.9), transparent),
        radial-gradient(1px 1px at 905px 110px, rgba(255,255,255,0.5), transparent),
        radial-gradient(1.5px 1.5px at 1205px 67px, rgba(255,255,255,0.75), transparent),
        radial-gradient(1px 1px at 1340px 245px, rgba(255,255,255,0.4), transparent);
    background-size: 1440px 600px;
    animation: twinkle 8s ease-in-out infinite alternate;
}

.stars::after {
    background-image:
        radial-gradient(1px 1px at 200px 150px, rgba(255,255,255,0.5), transparent),
        radial-gradient(1.5px 1.5px at 650px 300px, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 1000px 450px, rgba(255,255,255,0.4), transparent),
        radial-gradient(1px 1px at 350px 520px, rgba(255,255,255,0.3), transparent),
        radial-gradient(1.5px 1.5px at 780px 80px, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 1100px 200px, rgba(255,255,255,0.35), transparent),
        radial-gradient(1px 1px at 500px 650px, rgba(255,255,255,0.55), transparent);
    background-size: 1440px 700px;
    animation: twinkle 12s ease-in-out infinite alternate-reverse;
}

@keyframes twinkle {
    0% { opacity: 0.6; }
    100% { opacity: 1; }
}

/* Phone mockup glow */
.phone-mockup {
    box-shadow: 0 0 60px rgba(34, 211, 238, 0.08), 0 0 120px rgba(34, 211, 238, 0.04);
    transition: box-shadow 0.3s ease;
}

.phone-mockup:hover {
    box-shadow: 0 0 80px rgba(34, 211, 238, 0.12), 0 0 160px rgba(34, 211, 238, 0.06);
}

/* CTA gradient background */
.cta-gradient {
    background: linear-gradient(180deg, transparent 0%, #0D0D0D 100%);
}