@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    --primary: #060B19;
    --secondary: #FFFFFF;
    --accent: #00F0FF;
    --accent-light: #E1F5FE;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--primary);
    color: var(--secondary);
    scroll-behavior: smooth;
}

.custom-cursor {
    position: fixed;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--accent);
    mix-blend-mode: difference;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: transform 0.2s ease;
}

.text-gradient {
    background: linear-gradient(90deg, #00F0FF 0%, #712DE0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.card-hover {
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 25px -5px rgba(0, 240, 255, 0.1), 0 10px 10px -5px rgba(0, 240, 255, 0.04);
}

.service-card:hover .service-icon {
    transform: rotate(15deg);
    background: rgba(0, 240, 255, 0.1);
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 0;
    background-color: var(--accent);
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

.hero-height {
    height: 100vh;
}

@media (max-width: 768px) {
    .hero-height {
        height: auto;
        padding-top: 120px;
        padding-bottom: 80px;
    }
}

/* Loading Screen Animation */
@keyframes progress {
    0% { width: 0%; }
    100% { width: 100%; }
}

.animate-progress {
    animation: progress 1.5s forwards;
}