:root {
    --navy: #101828;
    --blue: #2563EB;
    --cyan: #06B6D4;
    --white: #FFFFFF;
    --light: #F8FAFC;
    --text: #1E293B;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--text);
    background: #fff;
    line-height: 1.6;
    animation: pageFadeIn 0.25s ease-in-out;
}

@keyframes pageFadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

html {
    scroll-behavior: smooth;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 1020;
    backdrop-filter: blur(8px);
    background: rgba(255,255,255,0.95);
}

.nav-page-link {
    transition: color 0.15s ease;
    padding: 0.5rem 0.9rem !important;
    border-radius: 0.5rem;
}

    .nav-page-link:hover {
        color: var(--blue) !important;
        background: rgba(37, 99, 235, 0.06);
    }

    .nav-page-link.active {
        color: var(--blue) !important;
        font-weight: 600;
    }

.btn-primary {
    background: var(--blue);
    border-color: var(--blue);
}

    .btn-primary:hover, .btn-primary:focus {
        background: #1d4ed8;
        border-color: #1d4ed8;
    }

.software-card {
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

    .software-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 16px 36px rgba(37, 99, 235, 0.14) !important;
    }

    .software-card img {
        transition: transform 0.22s ease;
    }

    .software-card:hover img {
        transform: scale(1.08);
    }

.site-footer a {
    transition: color 0.15s ease, transform 0.15s ease;
    display: inline-block;
}

    .site-footer a:hover {
        color: #fff !important;
        transform: translateY(-2px);
    }

#scrollTopBtn {
    transition: opacity 0.2s ease, transform 0.2s ease;
}

    #scrollTopBtn:hover {
        transform: translateY(-3px);
    }

@media (max-width: 576px) {
    .display-3 {
        font-size: 2.4rem;
    }

    .software-card:hover {
        transform: none;
    }
}

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}