/* ==========================
   RESET
========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Inter',sans-serif;

    background:#081018;

    color:white;

    overflow-x:hidden;

}

/* ==========================
   VARIABLES
========================== */

:root{

    --primary:#0EA5E9;

    --secondary:#38BDF8;

    --card:#111827;

    --text:#F8FAFC;

    --muted:#94A3B8;

    --border:#1F2937;

}

/* ==========================
   BACKGROUND
========================== */

.background-glow{

    position:fixed;

    width:600px;

    height:600px;

    background:#0EA5E930;

    filter:blur(180px);

    top:-200px;

    right:-200px;

    z-index:-1;

}



/* ==========================
   TABLET / MOBILE
========================== */


@media(max-width:900px){


    .navbar{

        padding:20px;

    }


    .nav-links{

        display:none;

    }


    .navbar .btn-primary{

        display:none;

    }


}

@media(max-width:900px){


    .hero{

        flex-direction:column;

        text-align:center;

        padding-top:50px;

    }


    .hero h1{

        font-size:42px;

    }


    .hero-text{

        margin-left:auto;

        margin-right:auto;

    }


    .hero-buttons{

        justify-content:center;

        flex-wrap:wrap;

    }


    .hero-card{

        width:300px;

    }


}

@media(max-width:1000px){


    .service-grid{

        grid-template-columns:1fr 1fr;

    }


}



@media(max-width:700px){


    .service-grid{

        grid-template-columns:1fr;

    }


    .section-header h2{

        font-size:32px;

    }


}

@media(max-width:900px){


    .why-us{

        flex-direction:column;

        text-align:center;

    }


    .why-features{

        grid-template-columns:1fr;

    }


    .feature-item{

        text-align:left;

    }


}

@media(max-width:900px){


    .product-showcase{

        flex-direction:column;

        text-align:center;

    }


    .product-content h2{

        font-size:32px;

    }


    .product-content ul{

        text-align:left;

    }


}

@media(max-width:800px){


    .cta-box h2{

        font-size:32px;

    }


    .footer-container{

        grid-template-columns:1fr;

        text-align:center;

    }


    .footer-brand p{

        margin-left:auto;

        margin-right:auto;

    }


}

/* ==========================
   MOBILE NAVIGATION
========================== */


.menu-toggle{

    display:none;

    background:none;

    border:none;

    color:white;

    font-size:25px;

    cursor:pointer;

}




@media(max-width:900px){


    .menu-toggle{

        display:block;

    }



    .nav-links{


        position:absolute;

        top:80px;

        left:20px;

        right:20px;


        display:none;

        flex-direction:column;

        gap:20px;


        padding:30px;


        background:#111827;


        border-radius:20px;


        border:1px solid rgba(255,255,255,.08);


    }



    .nav-links.active{

        display:flex;

    }


}


@media(max-width:900px){


.inner-hero h1{

    font-size:40px;

}


.about-section{

    grid-template-columns:1fr;

}


.value-grid{

    grid-template-columns:1fr;

}


}

@media(max-width:900px){


.detail-card{

    flex-direction:column;

}


.process-grid{

    grid-template-columns:1fr;

}


}

@media(max-width:900px){


.product-page{

    flex-direction:column;

    text-align:center;

}



.feature-grid,

.roadmap-grid{

    grid-template-columns:1fr;

}


}