/* Landing-only decoration. This file never passes through the Tailwind build,
   so it is plain CSS reaching for the theme tokens directly. */

.lz-hero {
    position: relative;
    isolation: isolate;
}

/* One wide, weak pool of the accent behind the headline. Kept under 18% so the
   hero glows rather than lights up. */
.lz-hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -12rem -20% auto -20%;
    height: 44rem;
    background: radial-gradient(
        50% 50% at 50% 50%,
        color-mix(in srgb, var(--lz-accent) 14%, transparent),
        transparent 70%
    );
    pointer-events: none;
}

.lz-phone {
    box-shadow:
        0 2px 0 0 var(--lz-line) inset,
        0 40px 80px -40px rgb(0 0 0 / .45);
}

.lz-phone-screen {
    background:
        radial-gradient(28rem 18rem at 50% 0%, var(--lz-glow-1), transparent 70%),
        var(--lz-canvas);
}

@media (min-width: 1024px) {
    .lz-phone {
        transform: rotate(-2.5deg);
    }
}