html {
    scroll-behavior: smooth;
}

body {
    background: #09090b;
    background-image:
        radial-gradient(circle at 78% 8%, rgba(124, 58, 237, .14), transparent 32rem),
        radial-gradient(circle at 8% 35%, rgba(6, 182, 212, .055), transparent 28rem);
}

.grid-bg {
    background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
}

.glass {
    background: rgba(17, 17, 19, .68);
    border: 1px solid rgba(255, 255, 255, .08);
    backdrop-filter: blur(18px);
}

.gradient-text {
    background: linear-gradient(100deg, #fff 15%, #c4b5fd 58%, #67e8f9);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: .7s ease;
}

.reveal.show {
    opacity: 1;
    transform: none;
}

.hover-card {
    transition: .35s ease;
}

.hover-card:hover {
    transform: translateY(-5px);
    border-color: rgba(139, 92, 246, .35);
    box-shadow: 0 25px 70px rgba(0, 0, 0, .28);
}

.timeline {
    background: linear-gradient(#8b5cf6, rgba(34, 211, 238, .15), transparent);
}

.cursor {
    animation: blink 1s step-end infinite;
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

::selection {
    background: rgba(139, 92, 246, .35);
    color: #fff;
}