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

:root {
    --accent: #00bfff;
}

* {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.tailwind-ready {
    font-family: 'Inter', system_ui, sans-serif;
}

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

.hero-bg {
    background: linear-gradient(90deg, #f1f5f9 0%, #e0f2fe 100%);
}

.dark .hero-bg {
    background: linear-gradient(90deg, #0f172a 0%, #1e2937 100%);
}

.section-header {
    position: relative;
}

.section-header::after {
    content: '';
    position: absolute;
    width: 64px;
    height: 3px;
    background: #00bfff;
    bottom: -6px;
    left: 0;
}

.card-hover {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgb(0 191 255 / 0.1), 0 8px 10px -6px rgb(0 191 255 / 0.1);
}

.nav-link {
    position: relative;
}

.nav-link:after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 0;
    background-color: #00bfff;
}

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

.form-input:focus {
    box-shadow: 0 0 0 3px rgba(0, 191, 255, 0.3);
    outline: none;
}