:root {
    color-scheme: dark;
}

body {
    font-family: Inter, sans-serif;
    background: #05070f;
    overflow-x: hidden;
}

.grid-bg {
    background-image:
        linear-gradient(rgba(138, 156, 193, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(138, 156, 193, .06) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(to bottom, black, transparent 80%);
}

.scanline::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,.035), transparent);
    animation: scan 5s linear infinite;
    pointer-events: none;
}

.orb {
    filter: blur(52px);
    opacity: .55;
    animation: float 9s ease-in-out infinite;
}

.orb:nth-child(2) {
    animation-delay: -3s;
}

.orb:nth-child(3) {
    animation-delay: -6s;
}

.fade-up {
    animation: fadeUp .85s ease both;
}

.fade-up-delay-1 {
    animation-delay: .12s;
}

.fade-up-delay-2 {
    animation-delay: .24s;
}

.fade-up-delay-3 {
    animation-delay: .36s;
}

.mockup-card {
    transform: perspective(1100px) rotateX(5deg) rotateY(-8deg);
    transition: transform .35s ease, box-shadow .35s ease;
}

.mockup-card:hover {
    transform: perspective(1100px) rotateX(0) rotateY(0) translateY(-6px);
    box-shadow: 0 24px 80px rgba(57, 88, 151, .35);
}

.shine {
    position: relative;
    overflow: hidden;
}

.shine::before {
    content: '';
    position: absolute;
    top: 0;
    left: -80%;
    height: 100%;
    width: 45%;
    transform: skewX(-18deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
    animation: shine 4.5s ease-in-out infinite;
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(22px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes float {
    0%, 100% { transform: translate3d(0,0,0) scale(1); }
    50% { transform: translate3d(18px,-22px,0) scale(1.08); }
}

@keyframes scan {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
}

@keyframes shine {
    0%, 55% { left: -80%; }
    100% { left: 135%; }
}

[x-cloak] {
    display: none !important;
}