body{
    scroll-behavior: smooth;
}

#heroCanvas{
    width: 100%;
    height: 100%;
}

#mobileMenu.show{
    display: block;
}

.transition-all{
    transition-duration: 0.3s;
    transition-timing-function: ease;
    transition-delay: 0s;
    transition-property: all;
}

.hover-lift{
    transition-duration: 0.3s;
    transition-timing-function: ease;
    transition-delay: 0s;
    transition-property: transform;
}

.hover-lift:hover{
    transform: translateY(-2px);
}

.animate-fade-in{
    animation-duration: 0.6s;
    animation-timing-function: ease-in-out;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: none;
    animation-play-state: running;
    animation-name: fadeIn;
}

.btn-hover-scale{
    transition-duration: 0.2s;
    transition-timing-function: ease;
    transition-delay: 0s;
    transition-property: transform;
}

.btn-hover-scale:hover{
    transform: scale(1.05);
}

.text-gradient{
    background-image: linear-gradient(45deg, rgb(59, 130, 246), rgb(249, 115, 22));
    background-position-x: initial;
    background-position-y: initial;
    background-size: initial;
    background-repeat-x: initial;
    background-repeat-y: initial;
    background-attachment: initial;
    background-origin: initial;
    background-color: initial;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.shadow-hover{
    transition-duration: 0.3s;
    transition-timing-function: ease;
    transition-delay: 0s;
    transition-property: box-shadow;
}

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

.focus-ring:focus{
    outline-color: rgb(59, 130, 246);
    outline-style: solid;
    outline-width: 2px;
    outline-offset: 2px;
}

@keyframes fadeIn{
    0%{
        opacity: 0;
        transform: translateY(20px);
    }
    100%{
        opacity: 1;
        transform: translateY(0px);
    }
}

@media (max-width: 768px){
    .hero-content{
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .section-padding{
        padding-top: 3rem;
        padding-right: 1rem;
        padding-bottom: 3rem;
        padding-left: 1rem;
    }

    .feature-grid{
        grid-template-columns: 1fr;
    }

    .strategy-grid{
        grid-template-columns: 1fr;
    }
}