@import url('https://fonts.googleapis.com/css2?family=Mozilla+Headline:wght@200..700&family=Mozilla+Text:wght@200..700&display=swap');

body {
    background-color: #0F172A;
    color: #F8FAFC;
}

.glow-bg {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 700px;
    background: radial-gradient(circle at top, rgba(30, 136, 229, 0.15) 0%, transparent 60%);
    z-index: -1;
    pointer-events: none;
}

.phone-mockup {
    width: 320px;
    height: 650px;
    border: 10px solid #1E293B;
    border-radius: 2.5rem;
    overflow: hidden;
    background-color: #E3F2FD;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), inset 0 0 0 2px #0F172A;
    position: relative;
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .mockup-wrapper {
        transform: scale(0.85);
        transform-origin: center top;
        height: 560px;
    }
}

.rainbow-bar {
    background: linear-gradient(to right, #E53935, #FB8C00, #FDD835, #4CAF50, #1E88E5, #8E24AA);
}

.mockup-card {
    background-color: #FAFAC0;
    background-image: linear-gradient(to bottom, #FCFDB9, #F5F5A4);
}

.border-radius {
    border-radius: 30px;
}

.text-xl {
    font-family: 'Mozilla+He', sans-serif;
}