/* (same CSS you provided) */
    :root
    { --bg:#0f172a; 
      --card:#111827; 
      --muted:#94a3b8; 
      --text:#e5e7eb; 
      --accent:#22c55e; 
      --accent-2:#3b82f6; 
      --danger:#ef4444; 
      --ring: 0 0 0 3px rgba(59,130,246,.35); 
      --radius: 16px; 
      --shadow: 0 10px 30px rgba(0,0,0,.35); 
      --maxw: 980px; 

    }
    *{box-sizing:border-box} html,body{height:100%} 
    body
    {margin:0;background:radial-gradient(1200px 600px at 20% -10%, rgba(34,197,94,.15), transparent 60%),radial-gradient(900px 600px at 120% 20%, rgba(59,130,246,.18), transparent 60%),var(--bg);color:var(--text);display:contents;align-items:center;justify-content:center;padding:32px;font-family: "Fustat", sans-serif;}
    .wrap
    {width:100%;max-width:var(--maxw);margin: auto;padding-top: 50px;position:relative;z-index:-1;
    } .card{background:linear-gradient(180deg,#0b1220,#0b1220) padding-box,linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,0)) border-box;border:1px solid transparent;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;}
    .apply-header {padding:28px 28px 8px;border-bottom:1px solid rgba(255,255,255,.06);} .apply-header h1{margin:0 0 6px;font-size:28px;letter-spacing:.2px;color: #fff} .apply-header p{margin:0;color:var(--muted);font-size:15px}
    .progress
    {
      display:flex;
      gap:10px;
      padding:18px 24px;
      border-bottom:1px solid rgba(255,255,255,.06);
      overflow:auto;
      background: linear-gradient(180deg, #0b1220, #0b1220) padding-box, linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0)) border-box;
      height: auto;
    }
    .step{display:flex;align-items:center;gap:10px;white-space:nowrap;padding:10px 12px;border-radius:999px;background:rgba(255,255,255,.03);color:var(--muted);border:1px solid rgba(255,255,255,.06);transition:.2s;font-size:14px;}
    .step .dot{width:22px;height:22px;border-radius:999px;display:grid;place-items:center;border:2px solid rgba(255,255,255,.25);font-weight:700;font-size:12px;}
    .step.active{background:rgba(59,130,246,.15);color:#dbeafe;border-color:rgba(59,130,246,.35)} 
    .step.active .dot
    {border-color:#0ea88b;background:#0ea88b;color:white}
    .step.done
    {
      background:rgba(34,197,94,.18);color:#dcfce7;border-color:rgba(34,197,94,.35);
    } 
    .step.done .dot{border-color:#86efac;background:#22c55e;color:#052e12}
    form{padding:24px} .grid{display:grid;grid-template-columns:1fr 1fr;gap:18px} @media (max-width:760px){.grid{grid-template-columns:1fr}}
    
    .field{display:flex;flex-direction:column;gap:8px} .label{font-size:14px;color:#cbd5e1} .hint{font-size:12px;color:var(--muted)} .error{font-size:12px;color:var(--danger);display:none}
    input[type=text],input[type=email],input[type=tel],input[type=url],input[type=number],select,textarea{border: 1px solid #ccc;color:var(--text);border-radius:12px;padding:12px 12px;outline:0;transition:.15s;font-size:15px;}
    textarea{min-height:120px;resize:vertical} input:focus, select:focus, textarea:focus{box-shadow:var(--ring);border-color:rgba(59,130,246,.6)}
    .chips{display:flex;flex-wrap:wrap;gap:10px} .chip{position:relative} .chip input{display:none}
    .chip label{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.1);cursor:pointer;font-size:14px;color:#e2e8f0;background:rgba(255,255,255,.04)}
    .chip input:checked + label{background:rgba(59,130,246,.18);border-color:rgba(59,130,246,.45)}
    .actions{display:flex;justify-content:space-between;gap:12px;margin-top:8px;padding-top:16px;border-top:1px solid rgba(255,255,255,.06)}
    .btn{appearance:none;border:none;border-radius:12px;padding:12px 16px;font-size:15px;font-weight:600;cursor:pointer;background:#1f2937;color:#f8fafc;transition:.2s;display:inline-flex;align-items:center;gap:10px;}
    .btn:hover{transform:translateY(-1px)} 
    .btn[disabled]
    {opacity:.5;cursor:not-allowed;
      background-color: azure;
    } .btn-next
    {
      position: relative;
    display: inline-block;
    background-image: linear-gradient(to right, var(--dark-color) 0%, var(--accent-color) 50%, var(--dark-color) 100%);
    background-size: 200% auto;
    border-radius: 100px;
    color: var(--white-color);
    font-size: 16px;
    font-weight: 700;
    line-height: 1em;
    text-transform: capitalize;
    border: none;
    padding: 17px 54px 17px 20px;
    transition: all 0.4s ease-in-out;
    overflow: hidden;
    z-index: 0;
    } 
    .btn-prev
    {
      position: relative;
    display: inline-block;
    background-size: 200% auto;
    border-radius: 100px;
    color: var(--white-color);
    font-size: 16px;
    font-weight: 700;
    line-height: 1em;
    text-transform: capitalize;
    border: none;
    padding: 17px 54px 17px 20px;
    transition: all 0.4s ease-in-out;
    overflow: hidden;
    z-index: 0;
      background:#a5c63b;
    } .btn-submit
    {
      position: relative;
    display: inline-block;
    background-image: linear-gradient(to right, var(--dark-color) 0%, var(--accent-color) 50%, var(--dark-color) 100%);
    background-size: 200% auto;
    border-radius: 100px;
    color: var(--white-color);
    font-size: 16px;
    font-weight: 700;
    line-height: 1em;
    text-transform: capitalize;
    border: none;
    transition: all 0.4s ease-in-out;
    overflow: hidden;
    z-index: 0;
    }
    .visually-hidden{position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
    .section{display:none;animation:fade .25s ease} .section.active{display:block} @keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
    .review
    {
        background:rgba(255,255,255,.03);
        border:1px solid rgba(255,255,255,.08)
        ;border-radius:12px;
        padding:16px;
        color:#94a3b8;
        
    } .review dl{display:grid;grid-template-columns:1fr 2fr;gap:10px;margin:0} .review dt{color:var(--muted)} .review dd{margin:0}
    .success{display:none;margin-top:18px;padding:14px;border-radius:12px;border:1px solid rgba(34,197,94,.35);background:rgba(34,197,94,.1);color:#bbf7d0}
    .dangerNote{font-size:12px;color:#fca5a5} .req{color:#fca5a5}
    .fileField input[type=file]{padding:10px;background:#0b1220;border-radius:12px;border:1px dashed rgba(255,255,255,.18)} .inline{display:flex;align-items:center;gap:10px;
        
    }