:root{
    --yellow:#f1c40f;
    --glass:rgba(255,255,255,.12);
    --blur:blur(14px);
}



/* COMMON */
.step-badge{
    width:40px;height:40px;
    background:var(--yellow);
    color:#000;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    margin-bottom:15px;
}
.icon{
    font-size:42px;
    color:var(--yellow);
    margin-bottom:10px;
}

/* ================= DESKTOP VIEW ================= */
.desktop-view{display:none;}

.onboard-wrapper{
    max-width:960px;
    margin:auto;
}

.process-track{
    height:4px;
    background:#333;
    margin:30px 0;
}
.process-progress{
    height:100%;
    width:0%;
    background:var(--yellow);
    transition:.6s;
}

.process-cards{
    display:flex;
    gap:20px;
}
.process-card{
    flex:1;
    background:var(--glass);
    backdrop-filter:var(--blur);
    border-radius:20px;
    padding:28px;
    opacity:.4;
    transform:scale(.95);
    transition:.5s;
}
.process-card.active{
    opacity:1;
    transform:scale(1);
    box-shadow:0 20px 50px rgba(241,196,15,.35);
}

/* ================= MOBILE VIEW ================= */
.mobile-view{
    display:none;
    height:100vh;
    overflow:hidden;
    position:relative;
}

.slider{
    display:flex;
    height:100%;
    transition:.4s ease;
}
.slide{
    min-width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:25px;
}
.card-step{
    background:var(--glass);
    backdrop-filter:var(--blur);
    border-radius:22px;
    padding:35px 25px;
    max-width:380px;
    width:100%;
    text-align:center;
    box-shadow:0 20px 50px rgba(241,196,15,.35);
}

/* Mobile controls */
.controls{
    position:absolute;
    bottom:15px;
    width:100%;
    display:flex;
    justify-content:space-between;
    padding:0 20px;
}

/* Dots */
.dots{
    position:absolute;
    bottom:75px;
    width:100%;
    display:flex;
    justify-content:center;
    gap:10px;
}
.dot{
    width:10px;height:10px;
    background:#555;border-radius:50%;
}
.dot.active{
    background:var(--yellow);
    transform:scale(1.3);
}

/* Responsive switch */
@media(min-width:768px){
    .desktop-view{display:block;}
}
@media(max-width:767px){
    .mobile-view{display:block;}
}