*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --navy:         #0A1628;
      --blue:         #2563EB;
      --sky:          #60A5FA;
      --glass-bg:     rgba(255,255,255,0.10);
      --glass-border: rgba(255,255,255,0.20);
      --glass-inner:  rgba(255,255,255,0.06);
      --white:        #FFFFFF;
      --muted:        rgba(255,255,255,0.55);
      --error:        #F87171;
      --success:      #34D399;
      --amber:        #FBBF24;
    }

    html, body {
      min-height: 100%;
      font-family: 'Poppins', sans-serif;
      overflow-x: hidden;
    }

    body {
      background: linear-gradient(135deg, var(--navy) 0%, #0D2456 45%, #132E6B 100%);
      min-height: 100vh;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      padding: 28px 16px 40px;
      position: relative;
    }

    /* ── Blobs ── */
    .blob {
      position: fixed; border-radius: 50%;
      filter: blur(80px); opacity: 0.18;
      animation: drift 12s ease-in-out infinite alternate;
      pointer-events: none; z-index: 0;
    }
    .blob-1 { width:520px; height:520px; background:radial-gradient(circle,#3B82F6,transparent); top:-140px; left:-120px; animation-duration:14s; }
    .blob-2 { width:380px; height:380px; background:radial-gradient(circle,#6366F1,transparent); bottom:-80px; right:-100px; animation-duration:18s; animation-delay:-6s; }
    .blob-3 { width:260px; height:260px; background:radial-gradient(circle,#0EA5E9,transparent); top:50%; left:55%; animation-duration:10s; animation-delay:-3s; }
    @keyframes drift { from{transform:translate(0,0) scale(1)} to{transform:translate(40px,30px) scale(1.08)} }

    /* ── Dots ── */
    .dots-canvas { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
    .dot { position:absolute; border-radius:50%; background:rgba(255,255,255,0.55); animation:floatUp linear infinite; }
    @keyframes floatUp { 0%{transform:translateY(0) scale(1);opacity:0} 10%{opacity:1} 90%{opacity:.6} 100%{transform:translateY(-110vh) scale(.6);opacity:0} }

    /* ── Card ── */
    .card {
      position:relative; z-index:10;
      width:100%; max-width:460px;
      background:var(--glass-bg);
      backdrop-filter:blur(28px) saturate(160%);
      -webkit-backdrop-filter:blur(28px) saturate(160%);
      border:1px solid var(--glass-border);
      border-radius:24px;
      padding:36px 36px 32px;
      box-shadow:0 8px 32px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.08) inset;
      animation:cardIn .7s cubic-bezier(.22,1,.36,1) both;
    }
    @keyframes cardIn { from{opacity:0;transform:translateY(36px) scale(.97)} to{opacity:1;transform:translateY(0) scale(1)} }

    /* ── Header ── */
    .illus-wrap { display:flex; flex-direction:column; align-items:center; gap:12px; margin-bottom:20px; }

    .scene-svg { width:210px; height:80px; animation:sceneFade .9s .2s ease both; }
    @keyframes sceneFade { from{opacity:0;transform:scale(.88)} to{opacity:1;transform:scale(1)} }

    .people-group { animation:peopleSway 4s ease-in-out infinite alternate; transform-origin:center bottom; }
    @keyframes peopleSway { from{transform:translateX(-3px)} to{transform:translateX(3px)} }

    .brand-block { text-align:center; animation:fadeUp .7s .35s ease both; }
    @keyframes fadeUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
    .brand-eyebrow { font-size:10px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--sky); margin-bottom:3px; }
    .brand-title { font-size:20px; font-weight:700; color:var(--white); line-height:1.2; }
    .brand-title span { color:var(--sky); }

    /* ── Progress Steps ── */
    .steps-bar {
      display:flex; align-items:center; gap:0;
      margin-bottom:22px;
      animation:fadeUp .7s .4s ease both;
    }
    .step-item { display:flex; flex-direction:column; align-items:center; gap:5px; flex:1; }
    .step-circle {
      width:30px; height:30px; border-radius:50%;
      display:flex; align-items:center; justify-content:center;
      font-size:12px; font-weight:600;
      border:2px solid var(--glass-border);
      color:var(--muted);
      background:var(--glass-inner);
      transition:all .3s;
    }
    .step-circle.active  { background:var(--blue); border-color:var(--blue); color:#fff; box-shadow:0 0 0 4px rgba(37,99,235,.25); }
    .step-circle.done    { background:var(--success); border-color:var(--success); color:#fff; }
    .step-label { font-size:10px; font-weight:500; color:var(--muted); transition:color .3s; white-space:nowrap; }
    .step-label.active   { color:var(--sky); }
    .step-label.done     { color:var(--success); }
    .step-connector { flex:1; height:2px; background:var(--glass-border); margin-bottom:18px; transition:background .3s; max-width:40px; }
    .step-connector.done { background:var(--success); }

    /* ── Form ── */
    .form-step { display:none; flex-direction:column; gap:14px; animation:fadeUp .4s ease both; }
    .form-step.active { display:flex; }

    .field { position:relative; }
    .field-icon {
      position:absolute; left:16px; top:50%; transform:translateY(-50%);
      color:var(--muted); display:flex; align-items:center;
      pointer-events:none; transition:color .2s;
    }
    .field input, .field select {
      width:100%;
      background:var(--glass-inner);
      border:1px solid var(--glass-border);
      border-radius:12px;
      padding:14px 16px 14px 46px;
      color:var(--white);
      font-family:'Poppins',sans-serif; font-size:14px; font-weight:400;
      outline:none;
      transition:border-color .25s, background .25s, box-shadow .25s;
      appearance:none;
    }
    .field select option { background:#0F2044; color:#fff; }
    .field input::placeholder { color:rgba(255,255,255,.35); }
    .field input:focus, .field select:focus {
      border-color:var(--sky);
      background:rgba(255,255,255,.10);
      box-shadow:0 0 0 3px rgba(96,165,250,.18);
    }
    .field:focus-within .field-icon { color:var(--sky); }

    .toggle-pw {
      position:absolute; right:14px; top:50%; transform:translateY(-50%);
      background:none; border:none; cursor:pointer; color:var(--muted);
      padding:0; display:flex; align-items:center;
      transition:color .2s; width:auto; margin:0;
    }
    .toggle-pw:hover { color:var(--sky); background:none; }

    .field.has-error input, .field.has-error select { border-color:var(--error); box-shadow:0 0 0 3px rgba(248,113,113,.15); }
    .field-error-msg { font-size:11.5px; color:var(--error); margin-top:5px; padding-left:4px; display:none; }
    .field.has-error .field-error-msg { display:block; }

    /* OTP boxes */
    .otp-row { display:flex; gap:10px; justify-content:center; }
    .otp-box {
      width:52px; height:56px;
      background:var(--glass-inner);
      border:1px solid var(--glass-border);
      border-radius:12px;
      color:var(--white);
      font-family:'Poppins',sans-serif; font-size:22px; font-weight:700;
      text-align:center;
      outline:none;
      transition:border-color .25s, box-shadow .25s;
      caret-color:var(--sky);
    }
    .otp-box:focus { border-color:var(--sky); box-shadow:0 0 0 3px rgba(96,165,250,.2); }
    .otp-box.filled { border-color:var(--sky); background:rgba(96,165,250,.08); }

    /* Password strength */
    .pw-strength { margin-top:8px; }
    .strength-bar { display:flex; gap:4px; margin-bottom:4px; }
    .strength-seg { height:3px; flex:1; border-radius:2px; background:var(--glass-border); transition:background .3s; }
    .strength-label { font-size:11px; color:var(--muted); text-align:right; transition:color .3s; }

    /* Row layout */
    .field-row { display:flex; gap:12px; }
    .field-row .field { flex:1; }

    /* Phone prefix */
    .phone-prefix {
      position:absolute; left:46px; top:50%; transform:translateY(-50%);
      font-size:14px; font-weight:500; color:var(--sky);
      pointer-events:none; border-right:1px solid var(--glass-border);
      padding-right:10px; line-height:1;
    }
    .field-phone input { padding-left:90px !important; }

    /* ── Buttons ── */
    .btn-primary {
      width:100%; padding:14px;
      background:linear-gradient(135deg,var(--blue) 0%,#3B82F6 100%);
      border:none; border-radius:12px;
      color:var(--white);
      font-family:'Poppins',sans-serif; font-size:15px; font-weight:600;
      cursor:pointer; position:relative; overflow:hidden;
      transition:transform .18s, box-shadow .18s;
      box-shadow:0 4px 20px rgba(37,99,235,.45);
      display:flex; align-items:center; justify-content:center; gap:8px;
    }
    .btn-primary::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,#3B82F6 0%,var(--blue) 100%); opacity:0; transition:opacity .22s; }
    .btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(37,99,235,.55); }
    .btn-primary:hover::before { opacity:1; }
    .btn-primary:active { transform:translateY(0); }
    .btn-primary span { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:8px; width:100%; }
    .btn-primary.loading .btn-text { display:none; }
    .btn-primary .btn-spinner { display:none; }
    .btn-primary.loading .btn-spinner { display:inline-block; }
    .spinner { width:18px; height:18px; border:2.5px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; }
    @keyframes spin { to{transform:rotate(360deg)} }

    .btn-ghost {
      width:100%; padding:13px;
      background:var(--glass-inner);
      border:1px solid var(--glass-border);
      border-radius:12px;
      color:var(--muted);
      font-family:'Poppins',sans-serif; font-size:14px; font-weight:500;
      cursor:pointer;
      transition:background .2s, color .2s, border-color .2s;
      display:flex; align-items:center; justify-content:center; gap:6px;
    }
    .btn-ghost:hover { background:rgba(255,255,255,.1); color:var(--white); border-color:rgba(255,255,255,.35); }

    .btn-row { display:flex; gap:10px; }
    .btn-row .btn-ghost { flex:0 0 auto; width:auto; padding:13px 18px; }
    .btn-row .btn-primary { flex:1; }

    /* OTP resend */
    .otp-resend { text-align:center; font-size:12.5px; color:var(--muted); margin-top:4px; }
    .otp-resend button { background:none; border:none; color:var(--sky); font-family:'Poppins',sans-serif; font-size:12.5px; font-weight:600; cursor:pointer; }
    .otp-resend button:disabled { color:var(--muted); cursor:default; }

    /* Step helper text */
    .step-hint { font-size:12.5px; color:var(--muted); text-align:center; line-height:1.5; }
    .step-hint strong { color:var(--sky); font-weight:600; }

    /* ── Message ── */
    #message { margin-top:12px; font-size:13px; font-weight:500; text-align:center; min-height:18px; }
    #message.success { color:var(--success); }
    #message.error   { color:var(--error); }

    /* ── Footer ── */
    .login-row { text-align:center; margin-top:18px; font-size:13.5px; color:var(--muted); animation:fadeUp .7s .7s ease both; }
    .login-row a { color:var(--sky); text-decoration:none; font-weight:600; transition:opacity .2s; }
    .login-row a:hover { opacity:.75; }

    .trust-row { display:flex; justify-content:center; gap:20px; margin-top:20px; animation:fadeUp .7s .75s ease both; }
    .trust-badge { display:flex; align-items:center; gap:5px; font-size:11px; color:rgba(255,255,255,.35); font-weight:500; }

    @media (max-width:480px) {
      .card { padding:28px 20px 26px; }
      .field-row { flex-direction:column; gap:14px; }
      .otp-box { width:44px; height:50px; font-size:18px; }
      .brand-title { font-size:18px; }
    }
    @media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; } }