.promo-text {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: clamp(14px, 1vw, 14px);
    line-height: 1.4;
    color: #0f172a;
    margin-bottom: 1rem;
}
.promo-text span {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #dc3545; /* Bootstrap danger */
}
 :root{
     --brand:#2256d3; --brand-600:#1c49b7;
     --text:#0f172a; --muted:#6b7280;
     --border:#e5e7eb; --ring:#c7d2fe;
     --bg-a:#f6f8fc; --bg-b:#eef2ff; --card:#ffffff;

     --col-gap-desktop:64px;  /* space between the two sections */
     --left-col:1.35fr;       /* left wider so image dominates */
     --right-col:.85fr;
 }

*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0; color:var(--text);
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial;
    background:linear-gradient(180deg, var(--bg-a), var(--bg-b));
}

/* Shell grid */
.shell{
    min-height:100dvh;
    max-width:1280px;
    margin:0 auto;
    padding: clamp(20px, 4vw, 36px);
    display:grid;
    align-items:center;
    gap: clamp(28px, 5vw, var(--col-gap-desktop));
    grid-template-columns: 1fr;
}
@media (min-width: 980px){
    .shell{
        grid-template-columns: var(--left-col) var(--right-col);
    }
}

/* Left promo (open, no card) */
.promo{
    text-align:center;
    color:var(--text);
    padding: clamp(10px, 2vw, 12px);
}
.promo__logo{ margin-bottom: 18px; }
.promo__logo img{ height: 50px; max-width:100%; }

.promo__figure{
    display:flex; justify-content:center; align-items:center;
    margin: 6px 0 20px;
}
.promo-hero-img{
    /* Big, responsive hero image */
    width: 100%;
    max-width: min(48vw, 980px);   /* scale with viewport, cap at 980px */
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 14px 32px rgba(0,0,0,.25));
}
@media (max-width: 979px){
    .promo-hero-img{
        max-width: 82vw;             /* still larger than the card on mobile */
    }
}

.promo h5{ margin: 0 0 12px; font-size: clamp(18px, 2vw, 22px); }
.promo a.btn{ margin-top: 2px; }

/* Right login (card) */
.login-card{
    background: var(--card);
    border:1px solid var(--border);
    border-radius:18px;
    box-shadow: 0 14px 40px rgba(2,6,23,.18);
    padding: clamp(22px, 5vw, 50px);
    display:flex; flex-direction:column; justify-content:center;
    max-width: 560px;              /* keep the card visually slimmer */
    width: 100%;
    margin-inline: auto;           /* keep centered in its grid cell */
}
.brand-top img{ height:72px }
.title{ margin:16px 0 6px; font-size: clamp(22px, 2vw, 26px); font-weight:800; }
.sub{ margin:0; color:var(--muted); font-size:14px; }

/* Alerts */
.alert{
    margin-top:12px; border-radius:12px; padding:10px 12px; font-size:14px;
    border:1px solid #fecaca; background:#fef2f2; color:#7f1d1d;
}
.alert.ok{ border-color:#bbf7d0; background:#ecfdf5; color:#065f46; }

/* Form controls */
form{ margin-top:20px }
.field{ margin-bottom:18px }
.label{ display:block; font-weight:600; font-size:13px; margin-bottom:6px; }
.control{
    display:flex; align-items:center; gap:8px;
    border:1px solid var(--border); border-radius: 12px; background:#fff;
    padding: 12px 14px;
    transition:border-color .15s ease, box-shadow .15s ease;
}
.control:focus-within{ border-color:#93c5fd; box-shadow: 0 0 0 4px var(--ring); }
.control input{
    width:100%; border:0; outline:0; background:transparent; font-size:15px; color:var(--text);
}
.toggle{
    background:transparent; border:0; color:#6b7280; cursor:pointer; padding:6px; border-radius:8px;
}
.toggle:hover{ background:#f3f4f6; color:#111827; }

.caps{
    display:none; margin-top:6px; font-size:12px;
    color:#9a3412; background:#fffbeb; border:1px solid #fde68a; padding:6px 8px; border-radius:10px;
}

/* Buttons */
.btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    border:0; border-radius:999px; padding:12px 18px; font-weight:700; cursor:pointer;
    transition: transform .05s ease, box-shadow .15s ease, background .15s ease;
}
.btn-primary{
    width:100%; margin-top:10px;
    background: linear-gradient(135deg, var(--brand), var(--brand-600));
    color:#fff; box-shadow: 0 12px 28px rgba(34,86,211,.25);
}
.btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 16px 36px rgba(34,86,211,.30); }
.btn-link{
    background:transparent; color:var(--brand); text-decoration:none; font-weight:600;
}
.btn-link:hover{ text-decoration: underline; }

.footer{ margin-top:18px; font-size:12px; color:#9ca3af; text-align:center; }
.footer a{ color:var(--brand); text-decoration:none; font-weight:700; }
.footer a:hover{ text-decoration:underline; }
 .pill-outline-danger {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: .5rem;
     padding: .5rem 1rem;
     border: 1px solid #dc3545;   /* Bootstrap danger color */
     color: #dc3545;
     background: transparent;
     border-radius: 9999px;       /* pill */
     font-weight: 600;
     text-decoration: none;
     transition: background .15s ease, color .15s ease, box-shadow .15s ease, transform .05s ease;
 }
.pill-outline-danger:hover {
    background: #dc3545;
    color: #fff;
    box-shadow: 0 6px 20px rgba(220,53,69,.25);
    transform: translateY(-1px);
    text-decoration: none;
}