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

:root{
    --bg:#040816;
    --bg2:#08162d;
    --primary:#2ec8ff;
    --secondary:#00e5ff;
    --glass:rgba(255,255,255,.06);
    --border:rgba(255,255,255,.12);
    --text:#ffffff;
    --muted:#a8b3c7;
}

html{
    height:100%;
}

body{
    min-height:100vh;
    min-height:100dvh;
    overflow-x:hidden;
    overflow-y:auto;
    font-family:Inter,Segoe UI,Arial,sans-serif;
    background:
        radial-gradient(circle at top left,#163e76 0%,transparent 35%),
        radial-gradient(circle at bottom right,#0d2b55 0%,transparent 40%),
        linear-gradient(135deg,var(--bg),var(--bg2));
    color:var(--text);
    position:relative;
}

body::before{
    content:"";
    position:fixed;
    inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
    background-size:45px 45px;
    animation:gridMove 15s linear infinite;
    opacity:.45;
    pointer-events:none;
}

body::after{
    content:"";
    position:fixed;
    width:700px;
    height:700px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(0,225,255,.18),transparent 70%);
    top:-250px;
    left:-200px;
    animation:floatGlow 12s ease-in-out infinite alternate;
    filter:blur(25px);
    pointer-events:none;
}

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

@keyframes floatGlow{
    to{
        transform:translate(150px,120px) scale(1.2);
    }
}

.particle{
    position:fixed;
    width:4px;
    height:4px;
    border-radius:50%;
    background:#4bd8ff;
    opacity:.4;
    animation:particle linear infinite;
    pointer-events:none;
}

@keyframes particle{
    from{
        transform:translateY(120vh) scale(0);
    }
    to{
        transform:translateY(-20vh) scale(1);
    }
}

.wrapper{
    width:100%;
    min-height:100vh;
    min-height:100dvh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:
        max(20px, env(safe-area-inset-top))
        max(20px, env(safe-area-inset-right))
        max(20px, env(safe-area-inset-bottom))
        max(20px, env(safe-area-inset-left));
}

.card{
    width:100%;
    max-width:680px;
    background:var(--glass);
    border:1px solid var(--border);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border-radius:30px;
    padding:clamp(20px,5vw,50px);
    box-shadow:
        0 30px 80px rgba(0,0,0,.45),
        inset 0 0 0 1px rgba(255,255,255,.02);
    position:relative;
    overflow:hidden;
}

.view{
    display:none;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    animation:fade .35s ease;
}

.view.active{
    display:flex;
}

.hidden{
    display:none;
}

@keyframes fade{
    from{
        opacity:0;
        transform:translateY(15px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

.icon{
    width:95px;
    height:95px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:radial-gradient(circle,rgba(46,200,255,.18),transparent);
    border:1px solid rgba(255,255,255,.1);
    margin-bottom:25px;
}

.icon svg{
    width:48px;
    height:48px;
    fill:#43d6ff;
}

h1{
    font-size:clamp(2rem,6vw,3rem);
    margin-bottom:20px;
}

h2{
    font-size:clamp(1.6rem,5vw,2rem);
    margin-bottom:25px;
}

p{
    color:var(--muted);
    line-height:1.8;
    font-size:clamp(.95rem,2.8vw,1.05rem);
}

ul{
    margin:20px 0 35px;
    text-align:left;
    width:100%;
    max-width:520px;
    color:var(--muted);
    line-height:1.8;
}

.buttons{
    margin-top:40px;
    display:flex;
    gap:20px;
    flex-wrap:wrap;
    justify-content:center;
    width:100%;
}

button{
    border:none;
    cursor:pointer;
    min-width:170px;
    padding:15px 30px;
    border-radius:50px;
    font-size:1rem;
    transition:.3s;
}

.btn-terms,
.btn-back{
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.15);
    color:white;
}

.btn-terms:hover,
.btn-back:hover{
    background:rgba(255,255,255,.12);
    transform:translateY(-3px);
}

.btn-apply{
    background:linear-gradient(135deg,#00d5ff,#48b9ff);
    color:#001320;
    font-weight:bold;
    box-shadow:0 0 35px rgba(0,200,255,.35);
}

.btn-apply:hover{
    transform:translateY(-3px);
    box-shadow:0 0 45px rgba(0,200,255,.6);
}

.footer{
    margin-top:30px;
    color:#72839d;
    font-size:.85rem;
}

@media (max-width:700px){

    .buttons{
        flex-direction:column;
    }

    button{
        width:100%;
        min-width:0;
    }

    .icon{
        width:80px;
        height:80px;
    }

    .icon svg{
        width:40px;
        height:40px;
    }

    body::after{
        width:350px;
        height:350px;
        top:-120px;
        left:-120px;
    }

}