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

body{
    font-family:'Segoe UI',sans-serif;
    background:#0f172a;
    color:#fff;
    min-height:100vh;
    overflow:hidden;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
}

/* Animated Grid Background */

.grid-bg{
    position:absolute;
    inset:0;

    background:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);

    background-size:50px 50px;

    animation:gridMove 20s linear infinite;
}

@keyframes gridMove{
    from{
        transform:translateY(0);
    }
    to{
        transform:translateY(50px);
    }
}

/* Floating Transparent Orbs */

.particles span{
    position:absolute;
    bottom:-200px;
    border-radius:50%;
    background:rgba(59,130,246,.15);
    backdrop-filter:blur(10px);

    animation:floatUp linear infinite;
}

.particles span:nth-child(1){
    width:150px;
    height:150px;
    left:5%;
    animation-duration:20s;
}

.particles span:nth-child(2){
    width:80px;
    height:80px;
    left:22%;
    animation-duration:15s;
}

.particles span:nth-child(3){
    width:170px;
    height:170px;
    left:45%;
    animation-duration:25s;
}

.particles span:nth-child(4){
    width:100px;
    height:100px;
    left:65%;
    animation-duration:18s;
}

.particles span:nth-child(5){
    width:140px;
    height:140px;
    left:80%;
    animation-duration:22s;
}

.particles span:nth-child(6){
    width:70px;
    height:70px;
    left:92%;
    animation-duration:14s;
}

@keyframes floatUp{
    from{
        transform:translateY(0);
    }
    to{
        transform:translateY(-140vh);
    }
}

/* Main Container */

.container{
    width:min(92%, 900px);
    padding:20px;
    z-index:10;
}

/* Glass Card */

.card{
    width:100%;
    padding:clamp(25px,5vw,60px);

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

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

    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);

    border-radius:28px;

    text-align:center;

    box-shadow:
    0 0 50px rgba(0,0,0,.40),
    0 0 80px rgba(59,130,246,.15);

    animation:fadeIn 1s ease;
}

/* Rotating Gear */

.gear{
    font-size:clamp(55px,8vw,90px);
    margin-bottom:20px;
    animation:spin 10s linear infinite;
}

@keyframes spin{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}

/* Heading */

h1{
    font-size:clamp(2rem,5vw,3.6rem);
    margin-bottom:15px;
    line-height:1.2;
}

/* Subtitle */

.subtitle{
    color:#cbd5e1;
    font-size:clamp(.95rem,2vw,1.2rem);
    line-height:1.8;
}

/* Status */

.status{
    margin:30px 0;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;

    font-weight:600;
}

.status-dot{
    width:12px;
    height:12px;
    background:#22c55e;
    border-radius:50%;

    animation:pulse 1.5s infinite;
}

@keyframes pulse{

    0%{
        box-shadow:0 0 0 0 rgba(34,197,94,.8);
    }

    100%{
        box-shadow:0 0 0 15px rgba(34,197,94,0);
    }
}

/* Typing Text */

.typing-text{
    min-height:45px;
    margin-bottom:25px;

    color:#60a5fa;

    font-size:clamp(.9rem,2vw,1.15rem);

    font-weight:600;
}

/* Progress */

.progress{
    width:100%;
    height:8px;
    border-radius:30px;
    overflow:hidden;

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

.progress-bar{
    width:30%;
    height:100%;

    background:linear-gradient(
        90deg,
        #3b82f6,
        #06b6d4
    );

    animation:loading 2s infinite;
}

@keyframes loading{
    from{
        transform:translateX(-120%);
    }
    to{
        transform:translateX(420%);
    }
}

.footer-text{
    margin-top:30px;

    color:#94a3b8;

    line-height:1.8;
}

/* Entry Animation */

@keyframes fadeIn{
    from{
        opacity:0;
        transform:translateY(30px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* Tablet & Mobile */

@media (max-width:768px){

    body{
        padding:15px;
    }

    .card{
        padding:25px;
        border-radius:20px;
    }

    .status{
        flex-direction:column;
        gap:8px;
    }

    .particles span:nth-child(5),
    .particles span:nth-child(6){
        display:none;
    }

    .footer-text{
        font-size:14px;
    }
}

/* Small Phones */

@media (max-width:480px){

    .card{
        padding:20px;
    }

    h1{
        font-size:1.8rem;
    }

    .subtitle{
        font-size:.9rem;
    }

    .typing-text{
        font-size:.9rem;
    }
}

/* Large Screens */

@media (min-width:1600px){

    .container{
        max-width:1100px;
    }

    .card{
        padding:80px;
    }

    h1{
        font-size:4rem;
    }
}