/* ============================================================
   SGFX shared lead-capture form
   Used on the 7 trading pages + the IB partner program page.
   Variables fall back to literal values so the form renders
   correctly regardless of which token stylesheet the page loads.
   ============================================================ */

.lead-form-wrap{position:relative;width:100%;max-width:460px;margin-left:auto;}

.lead-form,.lf-success{
  background:linear-gradient(180deg,rgba(10,35,80,.92),rgba(6,27,63,.94));
  border:1px solid var(--hair-cyan,rgba(0,255,242,.22));border-radius:24px;padding:30px 28px;
  box-shadow:0 40px 90px -36px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.03);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);}

.lf-head{display:flex;flex-direction:column;gap:6px;margin-bottom:22px;}
.lf-title{font-size:23px;font-weight:700;letter-spacing:-.01em;color:#fff;}
.lf-sub{font-size:14px;line-height:1.5;color:var(--grey,#9fb0c9);}

.lf-field{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;}
.lf-field label{font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#cdd6e6;}
.lf-input{display:flex;align-items:center;gap:11px;padding:0 14px;height:52px;border-radius:11px;
  background:rgba(3,15,37,.6);border:1px solid var(--hair,rgba(255,255,255,.1));
  transition:border-color var(--sgfx-dur,.2s),box-shadow var(--sgfx-dur,.2s),background var(--sgfx-dur,.2s);}
.lf-input i{width:18px;height:18px;color:var(--grey-2,#6b7c99);flex:0 0 auto;transition:color var(--sgfx-dur,.2s);}
.lf-input input{flex:1;background:transparent;border:0;outline:0;color:#fff;font-family:inherit;font-size:15.5px;font-weight:500;min-width:0;}
.lf-input input::placeholder{color:var(--grey-2,#6b7c99);font-weight:400;}
.lf-input:focus-within{border-color:var(--cyan,#00fff2);background:rgba(3,15,37,.8);box-shadow:0 0 0 4px rgba(0,255,242,.14);}
.lf-input:focus-within i{color:var(--cyan,#00fff2);}
.lf-field.invalid .lf-input{border-color:var(--sgfx-down,#e5484d);box-shadow:0 0 0 4px rgba(229,72,77,.14);}
.lf-field.invalid .lf-input i{color:var(--sgfx-down,#e5484d);}
.lf-err{font-size:12px;color:#ff8e91;font-weight:500;display:none;}
.lf-field.invalid .lf-err{display:block;}

.lead-form .btn{margin-top:6px;}
.lead-form button[disabled]{opacity:.6;cursor:not-allowed;}
.lf-note{margin-top:14px;font-size:11.5px;line-height:1.5;color:var(--grey-2,#6b7c99);text-align:center;}
.lf-note a{color:var(--cyan,#00fff2);}
.lf-formerr{margin-top:12px;font-size:13px;color:#ff8e91;font-weight:500;text-align:center;display:none;}
.lf-formerr.show{display:block;}

/* success state */
.lf-success[hidden]{display:none;}
.lf-success{text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;padding:48px 32px;}
.lf-check{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,#66fff7,#00bdb4);color:#04243f;
  box-shadow:0 16px 40px -14px rgba(0,255,242,.6);}
.lf-check i{width:32px;height:32px;}
.lf-success h3{font-size:24px;font-weight:700;color:#fff;}
.lf-success p{font-size:15px;line-height:1.6;color:var(--grey,#9fb0c9);max-width:300px;}

@media (max-width:768px){
  .lead-form-wrap{max-width:none;margin-left:0;}
}