html {
    scroll-behavior: smooth;
}

body {
    background: #f5f6f2;
    color: #10141a;
}

::selection {
    background: #b8f23e;
    color: #10141a;
}

.grid-background {
    background-image:
            linear-gradient(
                    rgba(16,20,26,.045) 1px,
                    transparent 1px
            ),
            linear-gradient(
                    90deg,
                    rgba(16,20,26,.045) 1px,
                    transparent 1px
            );

    background-size: 64px 64px;
}

.hero-glow {
    background:
            radial-gradient(
                    circle at center,
                    rgba(184,242,62,.24),
                    rgba(184,242,62,.08) 35%,
                    transparent 70%
            );
}

.hero-fade {
    background:
            linear-gradient(
                    90deg,
                    #f5f6f2 0%,
                    rgba(245,246,242,.96) 25%,
                    rgba(245,246,242,.20) 58%,
                    rgba(245,246,242,0) 100%
            );
}

.text-gradient {
    background:
            linear-gradient(
                    100deg,
                    #10141a 0%,
                    #10141a 45%,
                    #83b916 100%
            );

    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.technical-line {
    stroke-dasharray: 7 8;
    animation: dash 20s linear infinite;
}

.glass {
    background: rgba(255,255,255,.72);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.service-card {
    transition:
            transform .35s ease,
            box-shadow .35s ease,
            border-color .35s ease;
}

.service-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 25px 60px rgba(16,20,26,.10);
    border-color: rgba(139,190,25,.45);
}

.service-card:hover .service-arrow {
    transform: translate(3px,-3px);
}

.service-arrow {
    transition: transform .3s ease;
}

.number-outline {
    color: transparent;
    -webkit-text-stroke: 1px rgba(16,20,26,.12);
}

.dark-grid {
    background-image:
            linear-gradient(
                    rgba(255,255,255,.05) 1px,
                    transparent 1px
            ),
            linear-gradient(
                    90deg,
                    rgba(255,255,255,.05) 1px,
                    transparent 1px
            );

    background-size: 64px 64px;
}

.logo-mark {
    position: relative;
    width: 38px;
    height: 38px;
    transform: rotate(45deg);
    border-radius: 4px;
    background: #b8f23e;
}

.logo-mark::after {
    content: "";
    position: absolute;
    width: 15px;
    height: 15px;
    background: #10141a;
    top: 11px;
    left: 11px;
}


#mobileMenuToggle {
    position: relative;
    z-index: 100;
}
.mobile-panel {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
}
.mobile-panel.closed {
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
}
.mobile-panel.open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}
/* backdrop overlay */
.backdrop-overlay {
    transition: opacity 0.3s ease;
}
.backdrop-overlay.closed {
    opacity: 0;
    pointer-events: none;
}
.backdrop-overlay.open {
    opacity: 1;
    pointer-events: auto;
}
/* keep header above everything */
.header-z {
    z-index: 50;
}
/* mobile menu z-index above overlay */
.mobile-menu-z {
    z-index: 60;
}
/* reset button styles */
button {
    background: none;
    border: none;
    cursor: pointer;
}