body {
    background:
        radial-gradient(circle at 14% 12%, rgba(59,130,246,0.12), transparent 24%),
        radial-gradient(circle at 84% 14%, rgba(20,184,166,0.11), transparent 22%),
        radial-gradient(circle at 50% 58%, rgba(251,191,36,0.08), transparent 28%),
        radial-gradient(circle at 50% 92%, rgba(148,163,184,0.08), transparent 22%),
        linear-gradient(180deg, #fbfdff 0%, #f4f8fd 38%, #eef6fb 72%, #f9fcff 100%);
    min-height: 100vh;
    transition: opacity 220ms ease, transform 220ms ease;
    background-attachment: fixed;
}

/* Make the main app fill the viewport for a full-screen experience */
html, body {
    height: 100%;
    scroll-behavior: smooth;
}

.h-screen {
    height: 100vh;
}

body.page-exit {
    opacity: 0;
    transform: translateY(8px);
}

@media (max-width: 768px) {
    body {
        background-attachment: scroll;
    }

    .h-screen {
        height: auto;
        min-height: 100vh;
    }
}

.step-clip-path {
    clip-path: polygon(95% 0%, 100% 50%, 95% 100%, 0% 100%, 5% 50%, 0% 0%);
}

.step-clip-path-first {
    clip-path: polygon(95% 0%, 100% 50%, 95% 100%, 0% 100%, 0% 50%, 0% 0%);
}

.step-clip-path-last {
    clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 0% 100%, 5% 50%, 0% 0%);
}