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


body{

    font-family:
    "Inter",
    "Segoe UI",
    Arial,
    sans-serif;


    background:

    radial-gradient(
        circle at top left,
        #1e40af 0%,
        #0f172a 35%,
        #111827 70%,
        #0b1120 100%
    );


    color:#ffffff;

    min-height:100vh;

}






/* HEADER */

.header{

    text-align:center;

    padding:85px 20px 55px;

}



.header h1{

    font-size:52px;

    font-weight:800;

    letter-spacing:-1.5px;


    background:

    linear-gradient(
        90deg,
        #22d3ee,
        #60a5fa,
        #a78bfa
    );


    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;


    margin-bottom:18px;

}



.header p{


    color:#d1d5db;

    font-size:20px;

    max-width:720px;

    margin:auto;

    line-height:1.7;


}








/* MAIN */


main{

    width:90%;

    max-width:1200px;

    margin:auto;

}







/* AUDIT BOX */


.audit-box{


    background:

    rgba(30,41,59,0.85);



    backdrop-filter:

    blur(18px);



    padding:40px;



    border-radius:28px;



    border:

    1px solid rgba(255,255,255,0.12);



    box-shadow:

    0 25px 60px rgba(0,0,0,0.3);



    margin-bottom:50px;


}





.audit-box h2{


    font-size:26px;

    color:#ffffff;

    margin-bottom:25px;


}







/* INPUT GROUP */


.input-group{


    display:flex;

    gap:18px;


}





.input-group input{


    flex:1;


    height:60px;


    padding:0 22px;



    background:#0f172a;


    color:white;


    border-radius:16px;


    border:

    1px solid #475569;


    font-size:16px;


    transition:.3s;


}



.input-group input::placeholder{


    color:#94a3b8;


}



.input-group input:focus{


    outline:none;


    border-color:#22d3ee;


    box-shadow:

    0 0 0 4px rgba(34,211,238,.15);


}







/* BUTTON */


.input-group button{


    height:60px;


    padding:0 35px;



    border:none;



    border-radius:16px;



    background:


    linear-gradient(
        135deg,
        #06b6d4,
        #6366f1
    );



    color:white;



    font-size:16px;


    font-weight:700;



    cursor:pointer;



    transition:.3s;


}



.input-group button:hover{


    transform:

    translateY(-3px);


    box-shadow:

    0 15px 35px rgba(99,102,241,.4);


}









/* REPORT SECTION */


.report-section h2{


    font-size:32px;


    color:white;


    margin-bottom:30px;


}





.report-container{


    display:grid;


    grid-template-columns:

    repeat(2,1fr);



    gap:28px;


}







/* CARDS */


.report-card{


    position:relative;



    background:


    linear-gradient(
        145deg,
        #1e293b,
        #111827
    );



    padding:32px;



    border-radius:26px;



    min-height:200px;



    border:

    1px solid rgba(148,163,184,0.2);



    box-shadow:


    0 20px 50px rgba(0,0,0,.25);



    transition:.3s;


}




.report-card::before{


    content:"";


    position:absolute;


    top:0;


    left:0;


    height:4px;


    width:100%;



    border-radius:

    26px 26px 0 0;



    background:


    linear-gradient(
        90deg,
        #22d3ee,
        #6366f1
    );


}




.report-card:hover{


    transform:

    translateY(-6px);



    border-color:#38bdf8;


}







.report-card h3{


    color:#7dd3fc;


    font-size:22px;


    font-weight:700;



    margin-bottom:18px;


}




.report-card p{


    color:#f1f5f9;



    font-size:16px;



    line-height:1.9;


}









/* AI REPORT */


#ai-result{


    color:#f8fafc;


    font-size:16px;


    line-height:1.9;



    max-height:550px;


    overflow-y:auto;


}





#ai-result h2{


    color:#22d3ee;


    font-size:26px;


    margin-bottom:20px;


}




#ai-result h3{


    color:#93c5fd;


    font-size:21px;


    margin-top:25px;


    margin-bottom:12px;


}




#ai-result strong{


    color:white;


}









/* SCROLL BAR */


#ai-result::-webkit-scrollbar{


    width:8px;


}



#ai-result::-webkit-scrollbar-thumb{


    background:#6366f1;


    border-radius:20px;


}








/* RESPONSIVE */


@media(max-width:768px){


    .header h1{


        font-size:36px;


    }



    .header p{


        font-size:16px;


    }



    .input-group{


        flex-direction:column;


    }



    .report-container{


        grid-template-columns:1fr;


    }



    .audit-box{


        padding:25px;


    }


}
/* FOOTER */


.footer{

    margin-top:80px;

    padding:40px 20px;

    background:

    rgba(15,23,42,0.8);


    border-top:

    1px solid rgba(255,255,255,0.1);


    backdrop-filter:

    blur(15px);


}



.footer-content{

    text-align:center;

    max-width:900px;

    margin:auto;

}



.footer h3{

    font-size:24px;

    color:#22d3ee;

    margin-bottom:12px;

}



.footer p{

    color:#cbd5e1;

    font-size:15px;

    margin-bottom:20px;

}



.footer-links{

    display:flex;

    justify-content:center;

    gap:25px;

    margin-bottom:25px;

}



.footer-links a{

    text-decoration:none;

    color:#93c5fd;

    font-weight:600;

    transition:.3s;

}



.footer-links a:hover{

    color:#22d3ee;

}



.footer .copyright{

    color:#64748b;

    font-size:14px;

}