* {
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family: 'Segoe UI', Arial, sans-serif;
}


body {

    min-height:100vh;
    background:
    radial-gradient(circle at top left, #667eea, transparent 40%),
    radial-gradient(circle at bottom right, #764ba2, transparent 40%),
    #0f172a;

    color:white;
}


/* Navbar */

.navbar {

    width:90%;
    margin:20px auto;
    padding:15px 25px;

    display:flex;
    justify-content:space-between;
    align-items:center;

    background:rgba(255,255,255,0.12);
    backdrop-filter:blur(15px);

    border:1px solid rgba(255,255,255,0.2);

    border-radius:20px;

}


.logo {

    color:white;
    font-size:26px;
    font-weight:800;

}


.menu {

    list-style:none;
    display:flex;
    gap:25px;

}


.menu a {

    color:white;
    text-decoration:none;
    font-weight:600;

}


.menu a:hover {

    color:#c4b5fd;

}



/* Hero */

.hero {

    width:90%;
    margin:70px auto;
    text-align:center;

}


.hero h1 {

    font-size:52px;
    line-height:1.2;

    margin-bottom:15px;

}


.hero p {

    font-size:20px;
    opacity:.9;

}




/* Shortener Box */

.shortener-box {

    max-width:750px;

    margin:45px auto;

    padding:35px;

    background:rgba(255,255,255,0.12);

    backdrop-filter:blur(20px);

    border-radius:25px;

    border:1px solid rgba(255,255,255,0.2);

    box-shadow:0 25px 60px rgba(0,0,0,.3);

}




/* Inputs */

input {

    width:100%;

    padding:16px;

    margin:10px 0;

    border-radius:14px;

    border:none;

    outline:none;

    font-size:16px;

}


input:focus {

    box-shadow:0 0 0 3px rgba(139,92,246,.5);

}




/* Buttons */

button {

    padding:14px 30px;

    border:none;

    border-radius:14px;

    background:linear-gradient(135deg,#8b5cf6,#ec4899);

    color:white;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}


button:hover {

    transform:translateY(-3px);

    box-shadow:0 10px 25px rgba(236,72,153,.4);

}




/* Result */

.result {

    margin-top:30px;

    padding:20px;

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

    border-radius:20px;

}



.buttons {

    margin-top:15px;

    display:flex;

    gap:15px;

    justify-content:center;

    flex-wrap:wrap;

}




/* Features */

.features {

    width:90%;

    margin:50px auto;

    display:flex;

    gap:25px;

    justify-content:center;

    flex-wrap:wrap;

}



.card {

    width:280px;

    padding:35px;

    text-align:center;


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

    backdrop-filter:blur(15px);


    border-radius:25px;

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


    transition:.3s;

}



.card:hover {

    transform:translateY(-10px);

}



.card h2 {

    margin-bottom:10px;

}




/* Table */

table {

    width:90%;

    margin:30px auto;

    background:white;

    color:#333;

    border-radius:15px;

    overflow:hidden;

}



th {

    background:#8b5cf6;

    color:white;

    padding:15px;

}


td {

    padding:15px;

}




/* Footer */

footer {

    margin-top:60px;

    padding:20px;

    text-align:center;

    opacity:.8;

}



/* Mobile */

@media(max-width:768px){


.hero h1 {

    font-size:34px;

}


.hero p {

    font-size:16px;

}


.navbar {

    flex-direction:column;

    gap:15px;

}


.menu {

    flex-wrap:wrap;

    justify-content:center;

}


.shortener-box {

    padding:20px;

}

}

.qr-box {

    margin-top:20px;

    display:flex;
    justify-content:center;

}


.qr-box img {

    padding:15px;

    background:white;

    border-radius:20px;

    box-shadow:0 10px 30px rgba(0,0,0,.25);

    animation: qrShow .4s ease;

}


@keyframes qrShow {

    from {

        transform:scale(.7);

        opacity:0;

    }


    to {

        transform:scale(1);

        opacity:1;

    }

    }

.how {

    width:90%;
    margin:80px auto;
    text-align:center;

}


.how h2 {

    font-size:36px;
    margin-bottom:40px;

}



.steps {

    display:flex;
    gap:25px;
    justify-content:center;
    flex-wrap:wrap;

}



.card {

    width:90%;
    max-width:600px;

    margin:20px auto;

    padding:35px 25px;

    text-align:center;

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

    backdrop-filter:blur(15px);

    border-radius:25px;

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

    transition:.3s;
}

.features .card {

    width:280px;

}



.step-card:hover {

    transform:translateY(-8px);

}

.stats {

    width:90%;
    margin:80px auto;

    display:flex;
    justify-content:center;
    gap:25px;
    flex-wrap:wrap;

}



.stat-card {

    width:250px;
    padding:30px;

    text-align:center;

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

    backdrop-filter:blur(15px);

    border-radius:25px;

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

}



.stat-card h2 {

    font-size:40px;

}




.faq {

    width:90%;
    margin:80px auto;

    text-align:center;

}



.faq h2 {

    font-size:36px;

    margin-bottom:40px;

}



.faq-box {

    max-width:700px;

    margin:20px auto;

    padding:25px;

    text-align:left;


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

    backdrop-filter:blur(15px);

    border-radius:20px;

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

}



.faq-box h3 {

    margin-bottom:10px;

}

button:disabled{

    opacity:.5;

    cursor:not-allowed;

}

.progress{

    width:100%;
    height:12px;

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

    border-radius:30px;

    overflow:hidden;

    margin-top:20px;

}


#progressBar{

    width:0%;

    height:100%;

    background:linear-gradient(90deg,#8b5cf6,#ec4899);

    transition:width 1s linear;

}


#readyText{

    font-size:20px;

    font-weight:bold;

    color:#ffffff;

    margin-top:20px;

}

.backup-info{
    display:block;
    margin-top:6px;
    margin-bottom:15px;
    color:#b8c1d1;
    font-size:13px;
}