/* Non-critical styles for below-the-fold content - IMSOLD */

/* Hero animations (non-critical) */
.hero-animate-title.animate {
    animation: hero-zoom-fade-in-optimized .7s cubic-bezier(0.4, 0, 0.2, 1) .1s forwards;
}

.hero-animate-subtitle.animate {
    animation: hero-fade-slide-up-optimized .7s cubic-bezier(0.4, 0, 0.2, 1) .5s forwards;
}

.hero-animate-btn.animate {
    animation: hero-fade-slide-up-optimized .7s cubic-bezier(0.4, 0, 0.2, 1) .9s forwards;
}

/* About section */
.about-section {
    background: #f8fafc;
    padding: 6rem 1.5rem
}

@media only screen and (max-width: 768px) {
    .about-section {
        padding: 6rem 0rem
    }
}

.about-title-line {
    width: 3px;
    height: 60px;
    background: oklch(.208 .042 265.755);
    border-radius: 2px
}

.about-title {
    font-size: 3.75rem;
    color: oklch(.208 .042 265.755)
}

@media only screen and (max-width: 992px) {
    .about-title {
        font-size: 3.75rem
    }
}

@media only screen and (max-width: 576px) {
    .about-title {
        font-size: 2.5rem
    }
}

.about-lead {
    color: oklch(.372 .044 257.287);
    font-weight: 300;
    font-size: 1.5rem;
    line-height: normal;
    margin-bottom: 32px
}

@media only screen and (max-width: 992px) {
    .about-lead {
        font-size: 1.5rem
    }
}

@media only screen and (max-width: 576px) {
    .about-lead {
        font-size: 1.25rem
    }
}

.about-desc {
    color: oklch(.372 .044 257.287);
    font-weight: 400;
    font-size: 1.25rem;
    margin-bottom: 32px
}

@media only screen and (max-width: 992px) {
    .about-desc {
        font-size: 1.25rem
    }
}

@media only screen and (max-width: 576px) {
    .about-desc {
        font-size: 1.125rem
    }
}

.about-highlight {
    color: oklch(.208 .042 265.755);
    font-weight: 700;
    text-align: left;
    font-size: 1.5rem;
    line-height: normal;
    margin-bottom: 32px
}

@media only screen and (max-width: 992px) {
    .about-highlight {
        font-size: 1.5rem
    }
}

@media only screen and (max-width: 576px) {
    .about-highlight {
        font-size: 1.25rem
    }
}

.about-container {
    max-width: 910px;
    width: 100%
}

/* Services section */
.services-section {
    background: #fff;
    padding: 6rem 1.5rem
}

@media only screen and (max-width: 768px) {
    .services-section {
        padding: 6rem 0rem
    }
}

.services-title {
    font-size: 3.75rem;
    color: oklch(.208 .042 265.755);
    margin-bottom: 1rem
}

@media only screen and (max-width: 992px) {
    .services-title {
        font-size: 3.75rem
    }
}

@media only screen and (max-width: 576px) {
    .services-title {
        font-size: 2.5rem
    }
}

.services-subtitle {
    color: oklch(.372 .044 257.287);
    font-weight: 400;
    font-size: 1.25rem;
    margin-bottom: 3rem
}

@media only screen and (max-width: 992px) {
    .services-subtitle {
        font-size: 1.25rem
    }
}

@media only screen and (max-width: 576px) {
    .services-subtitle {
        font-size: 1.125rem
    }
}

.service-card {
    background: #fff;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: 
    box-shadow 0.2s ease-in-out,
    transform 0.3s ease-in-out 0.2s;
    border: 1px solid #e2e8f0
}

.service-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)
}

.service-icon {
    color: oklch(.208 .042 265.755)
}

.service-icon svg {
    width: 2rem;
    height: 2rem
}

.service-title {
    color: oklch(.208 .042 265.755);
    font-weight: 600;
    font-size: 1.25rem
}

@media(max-width: 992px) {
    .service-title {
        font-size: 1.25rem
    }
}

@media(max-width: 575.98px) {
    .service-title {
        font-size: 1.125rem
    }
}

.service-desc {
    color: oklch(.372 .044 257.287);
    font-size: 1rem
}

@media(max-width: 992px) {
    .service-desc {
        font-size: 1rem
    }
}

@media(max-width: 575.98px) {
    .service-desc {
        font-size: 0.875rem
    }
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem
}

@media(min-width: 992px) {
    .services-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem
    }
}

@media(max-width: 575.98px) {
    .services-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem
    }
}

/* Vision section */
.vision-section {
    background: linear-gradient(180deg, #141f31 40%, #101f34 100%);

    color: #fff;
    padding: 6rem 1.5rem
}

@media only screen and (max-width: 768px) {
    .vision-section {
        padding: 6rem 0rem
    }
}

.vision-title {
    font-size: 3.75rem;
    color: #ffffff;
    margin-bottom: 1rem
}

@media(max-width: 992px) {
    .vision-title {
        font-size: 3.75rem
    }
}

@media(max-width: 575.98px) {
    .vision-title {
        font-size: 2.5rem
    }
}

.vision-lead {
    color: #ffffff;
    font-weight: 400;
    font-size: 1.5rem
}

@media(max-width: 992px) {
    .vision-lead {
        font-size: 1.5rem
    }
}

@media(max-width: 575.98px) {
    .vision-lead {
        font-size: 1.25rem
    }
}

.vision-desc {
    color: #ffffff;
    font-weight: 400;
    font-size: 1.25rem;
    max-width: 900px;
    margin: 0 auto
}

@media(max-width: 992px) {
    .vision-desc {
        font-size: 1.25rem
    }
}

@media(max-width: 575.98px) {
    .vision-desc {
        font-size: 1.125rem
    }
}

/* Tech stack section */
.techstack-section {
    background: #f8fafc;
    padding: 6rem 1.5rem
}

@media only screen and (max-width: 768px) {
    .techstack-section {
        padding: 6rem 0rem
    }
}

.techstack-container {
    max-width: 1000px;
    margin: 0 auto
}

.techstack-title {
    font-size: 3.75rem;
    color: oklch(.208 .042 265.755);
    margin-bottom: 1rem
}

@media(max-width: 992px) {
    .techstack-title {
        font-size: 3.75rem
    }
}

@media(max-width: 575.98px) {
    .techstack-title {
        font-size: 2.5rem
    }
}

.techstack-lead {
    color: oklch(.372 .044 257.287);
    font-weight: 400;
    font-size: 1.25rem;
    margin-bottom: 2rem
}

@media(max-width: 992px) {
    .techstack-lead {
        font-size: 1.25rem
    }
}

@media(max-width: 575.98px) {
    .techstack-lead {
        font-size: 1.125rem
    }
}

.techstack-highlight {
    color: oklch(.208 .042 265.755);
    font-weight: 700;
    font-size: 1.5rem;
    max-width: 900px
}

@media(max-width: 992px) {
    .techstack-highlight {
        font-size: 1.5rem
    }
}

@media(max-width: 575.98px) {
    .techstack-highlight {
        font-size: 1.25rem
    }
}

/* Footer section */
.footer-section {
    background: linear-gradient(180deg, #141f31 40%, #101f34 100%);
    color: #fff;
    padding: 2rem 1.5rem;
    text-align: center
}

@media(max-width: 768px) {
    .footer-section {
        padding: 2rem 0rem
    }
}

.footer-copyright {
    color: #94a3b8;
    font-size: 1rem
}

@media(max-width: 992px) {
    .footer-copyright {
        font-size: 1rem
    }
}

@media(max-width: 575.98px) {
    .footer-copyright {
        font-size: 0.875rem
    }
}

/* Additional utility classes */
@media only screen and (max-width: 768px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem
    }
}

/* Animation keyframes */
@keyframes hero-zoom-fade-in-optimized {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes hero-fade-slide-up-optimized {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Badge styles */
.badge {
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
    border-radius: 1.5rem;
    padding: .75rem 1.5rem
}

/*# sourceMappingURL=main.css.map */