/* Google Font */
body {
    font-family: 'Inter', sans-serif;
    background: linear-gradient(135deg,#030712,#0f172a,#111827);
    min-height:100vh;
    color:white;
    overflow-x:hidden;
    position:relative;
}

/* Scrollbar */

::-webkit-scrollbar{
    width:8px;
}

::-webkit-scrollbar-thumb{
    background:#ef4444;
    border-radius:10px;
}

/* Animated Background */

.bg-circle{
    position:fixed;
    border-radius:50%;
    filter:blur(100px);
    opacity:.35;
    animation:float 18s infinite alternate;
    z-index:-1;
}

.c1{
    width:350px;
    height:350px;
    background:#ef4444;
    top:-120px;
    left:-120px;
}

.c2{
    width:300px;
    height:300px;
    background:#3b82f6;
    bottom:-100px;
    right:-50px;
}

.c3{
    width:220px;
    height:220px;
    background:#9333ea;
    top:40%;
    left:55%;
}

@keyframes float{

    from{

        transform:
        translateY(0px)
        translateX(0px);

    }

    to{

        transform:
        translateY(40px)
        translateX(60px);

    }

}

/* Glass Effect */

.glass{

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(15px);

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

    border-radius:20px;

    box-shadow:

        0 10px 30px rgba(0,0,0,.35);

}

/* Header */

h1{

    font-weight:700;

}

.text-secondary{

    color:#94a3b8!important;

}

/* Textarea */

textarea{

    background:#0f172a!important;

    color:white!important;

    border:none!important;

    border-radius:15px!important;

    padding:18px!important;

    font-size:16px;

}

textarea:focus{

    box-shadow:

    0 0 15px rgba(239,68,68,.6)!important;

}

/* Button */

.btn-danger{

    background:#ef4444;

    border:none;

    border-radius:50px;

    transition:.3s;

}

.btn-danger:hover{

    transform:translateY(-3px);

    box-shadow:

    0 0 25px rgba(239,68,68,.6);

}

/* Cards */

.card-box{

    padding:30px;

    text-align:center;

    transition:.35s;

    height:180px;

}

.card-box:hover{

    transform:

    translateY(-8px)
    scale(1.02);

    box-shadow:

    0 0 30px rgba(59,130,246,.25);

}

/* Icons */

.icon{

    font-size:40px;

    margin-bottom:15px;

}

.blue{

    color:#38bdf8;

}

.green{

    color:#22c55e;

}

.yellow{

    color:#facc15;

}

.purple{

    color:#a855f7;

}

/* Metric */

.card-box h4{

    margin-top:12px;

    font-weight:700;

}

.card-box h3{

    margin-top:15px;

    font-weight:700;

}

/* Routing */

.flow{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:15px;

}

.step{

    padding:14px 24px;

    border-radius:30px;

    background:#1e293b;

    transition:.3s;

    cursor:pointer;

}

.step.active{

    background:#ef4444;

    box-shadow:

    0 0 20px rgba(239,68,68,.7);

}

.step:hover{

    transform:scale(1.05);

}

.arrow{

    font-size:24px;

    color:#38bdf8;

}

/* Response */

#response{

    min-height:220px;

    white-space:pre-wrap;

    line-height:1.8;

    font-size:16px;

}

/* Copy Button */

.btn-outline-light{

    border-radius:30px;

}

.btn-outline-light:hover{

    background:#38bdf8;

    border-color:#38bdf8;

}

/* Badge */

.badge{

    border-radius:20px;

    font-size:14px;

    animation:pulse 2s infinite;

}

@keyframes pulse{

    0%{

        box-shadow:0 0 0 rgba(34,197,94,0);

    }

    50%{

        box-shadow:0 0 20px rgba(34,197,94,.8);

    }

    100%{

        box-shadow:0 0 0 rgba(34,197,94,0);

    }

}

/* Fade Animation */

.fade-in{

    animation:fade .5s ease;

}

@keyframes fade{

    from{

        opacity:0;

        transform:translateY(15px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* Loading Spinner */

.loading{

    display:flex;

    gap:8px;

    justify-content:center;

    align-items:center;

}

.loading span{

    width:12px;

    height:12px;

    background:#ef4444;

    border-radius:50%;

    animation:bounce .8s infinite;

}

.loading span:nth-child(2){

    animation-delay:.2s;

}

.loading span:nth-child(3){

    animation-delay:.4s;

}

@keyframes bounce{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

}

/* Responsive */

@media(max-width:768px){

.flow{

    flex-direction:column;

}

.arrow{

    transform:rotate(90deg);

}

.card-box{

    height:auto;

}

}