:root{
    --bg:#0b0b0b;
    --card:#0f0f0f;
    --muted:#b9b9b9;
    --text:#fff;
    --red:#e11d22;
    --accent:#e11d22;
    --radius:14px;
    --container:980px;
    --shadow:0 10px 35px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    font-family:'Inter',system-ui,Segoe UI,Roboto,Arial,sans-serif;
    background:#000; /* full-bleed */
    color:var(--text);
}

/* progress bar */
.progress{
    position:fixed;
    top:0;left:0;right:0;
    height:6px;
    background:#111;
    z-index:50;
}
.progress .bar{
    width:0%;height:100%;
    background:linear-gradient(90deg,#ff4040,var(--accent));
    transition:width .35s ease;
}

/* stage holds all screens */
.stage{
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:9vh 1rem 6vh;
}

/* one screen at a time */
.screen{
    width:min(100%, var(--container));
    background:var(--card);
    border:1px solid #181818;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    opacity:0;
    transform:translateY(10px) scale(.98);
    pointer-events:none;
    position:absolute;
    padding:clamp(1.25rem,3vw,2rem);
    transition:opacity .35s ease, transform .35s ease;
}
.screen.active{
    opacity:1;
    transform:translateY(0) scale(1);
    pointer-events:auto;
    position:relative;
}

.screen__inner{max-width:680px;margin:0 auto}
.screen__inner.center{text-align:center}

h1{
    margin:0 0 .5rem;
    font-weight:900;
    letter-spacing:.01em;
    font-size:clamp(1.35rem,3.2vw,2.1rem);
}
.sub{color:var(--muted);margin:0 0 1.25rem}

.label{
    display:block;
    margin:.75rem 0 .4rem;
    color:#e6e6e6;
    font-weight:700;
}

input,select{
    width:100%;
    background:#0a0a0a;
    color:var(--text);
    border:1px solid #252525;
    border-radius:10px;
    padding:.9rem 1rem;
    font-size:1rem;
    outline:none;
    transition:border-color .2s ease, box-shadow .2s ease;
}
input:focus,select:focus{
    border-color:#333; box-shadow:0 0 0 3px rgba(225,17,34,.18);
}

.nav{
    display:flex;
    gap:.75rem;
    margin-top:1rem;
}
.btn{
    appearance:none;
    border:0;
    border-radius:10px;
    padding:.9rem 1.1rem;
    font-weight:800;
    letter-spacing:.01em;
    cursor:pointer;
    transition:transform .05s ease, filter .15s ease, background .2s ease;
}
.btn:active{transform:translateY(1px)}
.btn-next{background:var(--accent); color:white}
.btn-next:disabled{filter:grayscale(.9);opacity:.6;pointer-events:none}
.btn-prev{background:#1a1a1a;color:#fff;border:1px solid #262626}
.btn-ghost{
    background:transparent; color:#ddd; border:1px solid #2a2a2a;
}
.btn-ghost:hover{filter:brightness(1.1)}

@media (max-width:560px){
    .screen{padding:1.1rem}
}

/* subtle background grain (optional) */
body::before{
    content:"";position:fixed;inset:0;pointer-events:none;
    background:
            radial-gradient(transparent 60%, rgba(0,0,0,.45)),
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 0 0 .05 .07 .09 .12'/%3E%3C/feComponentTransfer%3E%3CfeBlend mode='multiply'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23a)'/%3E%3C/svg%3E");
    opacity:.25;mix-blend-mode:soft-light;
}