:root {
    --primary-gradient: linear-gradient(135deg, #FF3366, #CB5EEE, #4158D0);
    --secondary-gradient: linear-gradient(135deg, #0A2463, #3E92CC);
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #0a0a0c;
}

.space-font {
    font-family: 'Space Grotesk', sans-serif;
}

.gradient-border {
    position: relative;
    border-radius: 0.75rem;
    background: linear-gradient(#0a0a0c, #0a0a0c) padding-box,
                var(--primary-gradient) border-box;
    border: 2px solid transparent;
}

.animated-gradient {
    background: var(--primary-gradient);
    background-size: 300% 300%;
    animation: gradientShift 8s ease infinite;
}

.glow {
    box-shadow: 0 0 30px 5px rgba(99, 102, 241, 0.15);
}

.hero-pattern {
    background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.1) 1px, transparent 0);
    background-size: 40px 40px;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.glass-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.hover-translate {
    transition: transform 0.3s ease;
}

.hover-translate:hover {
    transform: translateY(-8px);
}

.gradient-text {
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

    .video-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}

.video-bg video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
transform: translateX(-50%) translateY(-50%);
object-fit: cover;
}

.video-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
    to bottom,
    rgba(10, 10, 12, 0.95) 0%,
    rgba(10, 10, 12, 0.85) 50%,
    rgba(10, 10, 12, 0.95) 100%
);
}

.noise-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyBAMAAADsEZWCAAAAElBMVEUAAAAAAAAAAAAAAAAAAAAAAADgKxmiAAAABnRSTlMDY2ExFgXUX3ZNAAAAQElEQVQ4y2NgGAWjgBAgOjraCYiBgcHJyYmBgUGQgYGBkYGBgZmBgYEFiJkZGBg4gJiDgYGBG4i5GBgYeBgYGABLPQxzrWzLOAAAAABJRU5ErkJggg==');
opacity: 0.03;
}