html { scroll-behavior: smooth; }
[x-cloak] { display: none !important; }
body { overflow-x: hidden; transition: background-color .25s ease, color .25s ease; }

.hero-grid {
    background-image:
    linear-gradient(rgba(191,219,254,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(191,219,254,.14) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(to bottom, black 42%, transparent 100%);
}

.noise {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
}

.mockup-tilt {
    transform: perspective(1500px) rotateY(-7deg) rotateX(3deg);
    transform-style: preserve-3d;
}

@media (max-width: 1023px) {
    .mockup-tilt { transform: none; }
}