:root {
    --brand: #005ca5;
    --brand-light: #e6f0fa;
    --brand-dark: #004a85;
    --brand-rgb: 0, 92, 165;
    --brandgray: #646c71;
    --brandgray-dark: #374151;
    --text: #1a202c;
    --bg: #ffffff;
    --white: #ffffff;
    --border: #cbd5e1;
    --muted-bg: #f8fafc;
    --cookie-accept: var(--brand);
}

body {
    font-family: "Inter", sans-serif;
    background-color: var(--bg);
    color: var(--brandgray);
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
.heading-font {
    font-family: "Outfit", sans-serif;
    color: var(--text);
}

#canvas-container {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
    mask-image: linear-gradient(to right,
            transparent 0%,
            rgba(0, 0, 0, 0.1) 25%,
            black 60%),
        linear-gradient(to bottom, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right,
            transparent 0%,
            rgba(0, 0, 0, 0.1) 25%,
            black 60%),
        linear-gradient(to bottom, black 80%, transparent 100%);
}

.service-card {
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px -12px rgba(var(--brand-rgb), 0.15);
}

.btn-primary {
    background-color: var(--brand);
    color: var(--white);
    transition: all 0.3s ease-out;
}

.btn-primary:hover {
    background-color: var(--brand-dark);
    box-shadow: 0 10px 20px -10px rgba(var(--brand-rgb), 0.4);
}

.btn-secondary {
    background-color: transparent;
    color: var(--brandgray);
    border: 1px solid var(--border);
    transition: all 0.3s ease-out;
}

.btn-secondary:hover {
    border-color: var(--brand);
    color: var(--brand);
    background-color: var(--muted-bg);
}

.tech-marker {
    position: absolute;
    width: 12px;
    height: 12px;
    border: 1px solid var(--border);
}

.tech-marker::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 2px;
    background: var(--brand);
    transform: translate(-50%, -50%);
}

.fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
    opacity: 0;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.marquee-mask {
    mask-image: linear-gradient(to right,
            transparent,
            black 10%,
            black 90%,
            transparent);
    -webkit-mask-image: linear-gradient(to right,
            transparent,
            black 10%,
            black 90%,
            transparent);
}

#cookie-accept {
    background-color: var(--cookie-accept);
}