:root{
    --side-a:#0f172a; --side-b:#18223c; --side-c:#3b1d5c;
    --brand-red:#e6001a; --brand-amber:#ffb822;
    --glass: rgba(20,24,40,.55);
    --radius:1.1rem; --shadow:0 20px 48px rgba(3,10,28,.35);
}
html,body{height:100%; background:#0f172a; color:#e9eef6; overflow-x:hidden}


.bg-wrap{
    position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.bg-wrap video{
    position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%);
    width:100vw; height:100vh;
    object-fit:cover; object-position:center;
    filter:saturate(1.05) brightness(.88);
}

.bg-fog{
    position:fixed; inset:0; z-index:1; pointer-events:none;
    background:
            radial-gradient(1100px 700px at 28% 18%, rgba(255,255,255,.08), transparent 70%),
            radial-gradient(900px 800px at 72% 72%, rgba(255,255,255,.05), transparent 75%),
            linear-gradient(180deg, rgba(0,0,0,.32), rgba(0,0,0,.52));
    mix-blend-mode:screen;
    backdrop-filter: blur(3px);
    -webkit-mask: radial-gradient(520px 340px at 50% 45%, transparent 0 62%, #000 64% 100%);
    mask: radial-gradient(520px 340px at 50% 45%, transparent 0 62%, #000 64% 100%);
}
@media (max-width: 576px){
    .bg-fog{
        -webkit-mask: radial-gradient(360px 260px at 50% 42%, transparent 0 58%, #000 60% 100%);
        mask: radial-gradient(360px 260px at 50% 42%, transparent 0 58%, #000 60% 100%);
        backdrop-filter: blur(2px);
    }
}


.bg-fallback{
    position:fixed; inset:0; z-index:-1;
    background:linear-gradient(180deg,var(--side-a),var(--side-b),var(--side-c));
    background-size:400% 400%;
    animation:flow 14s ease infinite;
}
@keyframes flow{0%{background-position:0% 0%}50%{background-position:100% 100%}100%{background-position:0% 0%}}


.wrap{
    position:relative; z-index:2;
    min-height:100vh; display:grid; place-items:center; padding:2rem 1rem;
}


.card-glass{
    backdrop-filter: blur(10px) saturate(1.06);
    background: rgba(20,24,40,.62);
    border:1px solid rgba(255,255,255,.14);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    color:#fff;
}


.brand-header{
    background:linear-gradient(90deg,var(--brand-red),var(--brand-amber));
    border-radius:calc(var(--radius) - .2rem) calc(var(--radius) - .2rem) 0 0;
    padding:1rem 1.25rem; display:flex; align-items:center; gap:.75rem;
}
.brand-logo{
    width:44px; height:44px; border-radius:.8rem; display:grid; place-items:center;
    background:#fff; color:var(--brand-red);
}

.card-glass .form-control,
.card-glass .form-select{
    background:rgba(255,255,255,.96);
    color:#0b1222;
    border:1px solid rgba(4,12,30,.18);
    border-radius:.8rem;
}
.card-glass .form-control::placeholder{ color:#6b7280; opacity:.9; }
.card-glass .form-control:focus,
.card-glass .form-select:focus{
    border-color: var(--brand-red);
    box-shadow: 0 0 0 .2rem rgba(230,0,26,.18);
    outline:0;
}


.input-icon{ position:relative; }
.input-icon .bi{
    position:absolute; left:.8rem; top:50%; transform:translateY(-50%);
    color:#444d6e;
    opacity:.95;
    font-size:1.1rem;
    pointer-events:none;
    padding:5px;
}
.input-icon .form-control{ padding-left:2.6rem; }
.input-icon:focus-within .bi{
    color: var(--brand-red);
    opacity:1;
}


.btn-brand{
    background:linear-gradient(90deg,var(--brand-red),var(--brand-amber));
    border:0; color:#fff;
}
.btn-brand:hover{ filter:brightness(.95); }


.divider{
    display:flex; align-items:center; gap:.75rem; color:rgba(255,255,255,.75);
}
.divider::before,.divider::after{
    content:""; height:1px; flex:1;
    background:linear-gradient(90deg, rgba(255,255,255,.15), rgba(255,255,255,.4), rgba(255,255,255,.15));
}


@media (min-width: 992px){ .card-body{ padding:2rem 2.25rem; } }